Use renderers with Presenter

Renderers are easy to embed in Presenter components. Renderers make it easy to share formatting and styling across components and are optimised for fast-moving financial data.

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