This document provides a conceptual overview of the Caplin Renderers, to help you understand what constitutes a renderer.
Here is an example of a grid that is displaying indicative prices for four FX currency pairs
The Renderer for the "Best Bid" and "Best Ask" columns is configured to:
- Render stale prices with a strike through.
- Flash prices with a green background for half a second when the indicative price increases.
- Flash prices with a red background for half a second when the indicative price decreases.
The prices in the first two rows of this grid are current, the prices in the third row are stale (struck through), and the prices in the fourth row have just been increased.
Renderers pass data through formatters and stylers in the order they were defined.
caplin.element.Formatter interface - for example
caplin.element.formatter.ThousandsFormatter takes a value and inserts commas for each thousand position.
Controls and their handlers deal with putting the data on the page, whilst handlers bind to DOM events and pass the data upstream to listeners of the renderer.
Handler: Conform to the
caplin.element.Handler interface - for example the
caplin.element.handler.ChangeHandler will push data upstream to renderer listeners on
blur DOM events. But only if the value has changed.
Renderers are configured using XML. They can be configured at aspect, bladeset or blade level within BladeRunnerJS depending how generic they are:
When the application is started, BladeRunnerJS bundles all XML files and they are loaded into the application. The
caplin.element.factory.RendererFactory instantiates on application start and registers Renderers based on the XML loaded by the bundler.