Architectural overview
Caplin Presenter is a JavaScript-based MVC framework that you can use for creating the user interfaces for Caplin’s trading components. It’s based around the KnockoutJS library, but has been modified considerably so that it fits snugly with Caplin’s other components. This document will give you a conceptual overview of what Presenter is, how it fits together and how it’s related to Knockout.
Separation of Concerns
The basis of Presenter is the separation of the HTML mark-up and CSS styling that describe the front-end of your user interface from the (JavaScript) code that controls the logic.
For example, the HTML View might contain a button, but the details of whether the button is enabled or disabled, visible or hidden, what it does when it is clicked and whether it has been clicked already, are all in the JavaScript Presentation Model.
User actions are fed back to the Presentation Model, which calculates any effects they will have on the underlying data, and immediately updates the view that the user can see, if necessary.
Model Overview
We’ve already mentioned the (HTML) View and the (JavaScript) Presentation Model, and those are the main two things that you will be working with in Presenter, but there is a third, hiding in the background: the Domain Model. The Domain Model contains the data that the Presentation Model works with, and the business rules that it has to apply. If the data change as a result of user input, the Presentation Model will feed the changes back to the Domain Model. If any new data are received from the Domain Model (which will probably happen several times a second), the Presentation Model will immediately update the View.
View
Written in HTML, with appropriate CSS styling, the View defines the actual user interface. HTML elements are bound to "properties" in the Presentation Model using the data-bind attribute.
Presentation Model
Written in JavaScript, the behaviour of the User Interface is defined in the Presentation Model, and can be seen as a logical representation of the UI. It processes all user actions, and feeds the latest data to the View, communicating with the Domain Model as necessary. More information about the Presentation Model…
Domain Model
The Domain Model contains the application’s business logic. It also feeds live data to the Presentation Model, as well as receiving updated information back from it as a result of user input. More information about the Domain Model…
Integration with Caplin Syntax
The data-bind attributes are a part of HTML5, that has been built upon by Knockout.JS, but the Presentation Model itself is based on the caplin.presenter.PresentationModel class. Data in the Presentation Model are stored in Properties, which extend the caplin.presenter.property.Property class, and in some cases (notably HTML forms), these properties are grouped into fields, which are extensions of the caplin.presenter.node.PresentationNode class.
All Caplin’s objects, classes and packages are based around this same format, making it very easy to use Presenter to incorporate any component or function into your interface.