Section 8 - Code architecture

FX tiles display Executable Streaming Prices (ESP) for a currency pair and allow users to immediately trade on those prices.


They consist of a single blade where all the code is under the directory <YOURAPP>/fxexecution-bladeset/blades/fxtile. They are implemented as a Presenter component whose main presentation model class is caplinx.fxexecution.tile.FxTile, and HTML template is <blade-home>/html/resources/FxTile.html.

Configuration is held in the FxTile factory object, which is retreived from the service registry as follows:

var oAppService = caplin.core.ServiceRegistry.getService("caplin.config-service");
var oTileFactory = oAppService.getProperty("FX.TILE.FACTORY");

The factory object is registered when the app is bootstrapped. In caplinx.AppConfig replace the default factory class caplinx.fxexecution.fxtile.multiway.config.MultiWayTileConfig with one of your own that extends caplinx.fxexecution.fxtile.config.DefaultFxTileConfig.

Each trade panel is split into a setup and execution section. For example in the volume ladder the setup section is used to specify the trade date and the quoted currency. The execution section contains a set of rows with the amount and buy/sell buttons. Each row is an instance of the caplinx.fxexecution.fxtile.presentation.VolumeLadderRow.

Every ladder row subclasses caplinx.fxexecution.fxtile.presentation.AbstractTileRow. In the execution section of the one-way and two-way outright panels a single subclassed instance of AbstractTileRow is used. The execution buttons (caplinx.fxexecution.presenter.InstrumentPriceButton) display the price that is used for the trade. This value could depend on a number of factors, the trade date, the users price tier and the amount. Indeed the purpose of the volume ladder is to show how the price varies dependent on the amount traded. This is encapsulated inside the caplinx.fxexecution.fxtile.TilePriceSourceModel which the InstrumentPriceButton uses as its model.

Trade Model

The caplinx.fxexecution.fxtile.FXTileBootstrap class registers a trade factory, for the ESP protocol, with the trade service. See ESP trade model for message specifications.

When the execute button is clicked, it hands off to the class that creates an instance of the trade model (via the trade service), copies over the appropriate data and executes the trade. While the trade is executing, the updates the appropriate properties in the Tile so the GUI represents the state of the trade, finally displaying the confirmation message.


The ESP Tile can be configured to allow metals to be traded. For that reason there are a parallel set of HTML templates that are available in the directory <blade-home>/html/resources/metal. To support these there are a parallel set of presentation nodes found in the directory <blade-home>/src/caplinx/fxexecution/fxtile/metal. The directory contains a DefaultMetalTileConfig class contains the appropriate configuration that uses these metal classes and templates.

Common behaviour between Foreign Exchange and Metals resides in superclasses of code that are specialized in the metal and fx source directories.

FX Tiles documentation: