Creating a Presenter component

This page provides a summary of the steps involved to create a Presenter Component, which you need to do in order to use Presenter. You’ll need to create two things: the HTML template (the View) with data-bind attributes and the Presentation Model. You can see a more detailed step-by-step example of how to do this in the Presenter Worked Example.

The HTML Template (View)

The View is just a fragment of HTML5, with data-bind attributes to connect DOM elements to JavaScript objects in the Presentation Model. It’s stored, along with the blade’s other HTML resources, in a directory structure like this:

<BLADESET_NAME>/blades/<BLADE_NAME>/resources/html/<TEMPLATE>.html

Note that the HTML file containing the View can be called anything you like, it is referenced by the Presenter Component using the id attribute of the top-level element, rather than by the filename.

The top-level HTML element must therefore have an id, in a particular format, corresponding to the name-spacing of its parent application:

<NAMESPACE>.<BLADESET_NAME>.<BLADE_NAME>.<TEMPLATE_NAME>

For example:

A template in: test-bladeset/blades/myblade/resources/html/template.html, with an application namespace of example, would have a template something like this:

<div id="example.test.myblade.my-view-template">
    <div id="message" data-bind="text:message">...</div>
</div>

Presentation Model

The Presentation Model JS file sits in a folder with the same name as the blade it belongs to, under the /src/ directory. For example: test-bladeset/blades/myblade/src/ …​ /myblade/pres_model.js

You will have to set the file up as a Presentation Model by writing the class that extends caplin.presenter.PresentationModel. For example:

novobank.example.DemoPresentationModel = function()
{
    this.message = new caplin.presenter.property.Property("Hello World!");
};
caplin.implement(novobank.example.DemoPresentationModel, caplin.presenter.PresentationModel);

Binding them together into a Presenter Component

Create an instance of a caplin.presenter.component.PresenterComponent that uses the HTML template and the Presentation Model defined above. There are three ways of including the presenter component in an application or webpage.

1. Create an instance directly

var oPresentationModel = new novobank.example.DemoPresentationModel();
var sTemplatedId = 'demo-form-id';
var oComponent = new caplin.presenter.component.PresenterComponent(sTemplatedId, oPresentationModel);
oComponent.setFrame(null);
this.m_eElement = oComponent.getElement()

2. Use the Caplin component factory

var sTemplate = "<presenter-component templateId='demo-form-id' presentationModel='novobank.example.DemoPresentationModel'/>";
var oComponent = caplin.component.ComponentFactory.createComponent(sTemplate);
var eElement = oComponent.getElement();

3. Define it using Webcentric

If you are using Webcentric, you can include the XML configuration fragment in a Webcentric layout or application configuration file.

<presenter-component templateId="demo-form-id" presentationModel="novobank.example.DemoPresentationModel"/>