Use renderers with Presenter

Renderers are easy to embed in Presenter components. The reason we often do this is to share formatting and styling across grids, tickets and other parts of the application. Before reading this section you should probably be familiar with the Presenter library.

Starting point

Here’s a text label that has an unformatted price in it

renderer presenter start

It’s generated from the following presentation model:

caplin.namespace("app.bladeSet.blade.examplePresentationModel");
app.bladeSet.blade.examplePresentationModel = function()
{
    this.price = new caplin.presenter.property.Property("1.234567890");
        //this data would usually come from a streaming server
};
caplin.extend(app.bladeSet.blade.examplePresentationModel
              , caplin.presenter.PresentationModel);

and this HTML template:

<div id="app.bladeSet.blade.view-template">
   <span data-bind="text:price"></span>
</div>

Create a renderer

We’ll create a simple Renderer that just formats the price to 4 decimal places. Presenter has the ability to use fomatters, but in practice you may have much more complicated Renderers to make it worthwhile embedding a renderer.

<?xml version="1.0" encoding="UTF-8"?>
<rendererDefinitions xmlns="http://schema.caplin.com/CaplinTrader/rendererDefinitions">
<renderer type="test.test.test.examplePriceButton">
  <control className="caplin.control.basic.TextControl"/>
  <downstream>
   <transform className="caplin.element.formatter.DecimalFormatter">
    <attribute name="dp" value="4" />
   </transform>
  </downstream>
</renderer>
</rendererDefinitions>

Get presenter to use the new Renderer

Update the HTML template to reference the Renderer type in its data-bind attribute:

<div id="test.test.test.view-template">
   <span data-bind="value:price, renderer:'test.test.test.examplePriceButton'"></span>
</div>

Once you refresh the page, you should now see the formatted value:

renderer presenter done