# Section 8 - Code architecture

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

## Overview

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,window="_blank"](../../caplin-trader/4/presenter/index.md) 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:

```js
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 Message Specifications](esp-trade-messages.md) for details of the message protocol.

When the execute button is clicked, it hands off to the `caplinx.fxexecution.fxtile.trading.TradeExecutor` 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 `caplinx.fxexecution.fxtile.trading.DefaultTradeStateHandler` updates the appropriate properties in the Tile so the GUI represents the state of the trade, finally displaying the confirmation message.

## Metals

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 &lt;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:**

* [Introduction](fx-tiles.md)
* [Section 1 - Using an FX Tile](section-1-using-an-fx-tile.md)
* [Section 2 - Using other FX Tile components](section-2-using-other-fx-tile-components.md)
* [Section 3 - Validation and Error messages](section-3-validation-and-error-messages.md)
* [Section 4 - One-way pricing](section-4-one-way-pricing.md)
* [Section 5 - NDF Tiles](ndf-tiles.md)
* [Section 6 - Integrating FX data with a tile](section-5-integrating-fx-data-with-a-tile.md)
* [Section 7 - System Availability and Permissioning](section-6-system-availability-and-permissioning.md)
* [Section 8 - Code architecture](fx-tiles-code-architecture.md)