# 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](presenter-worked-example.md#pres-we-1).

## 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:

```html
<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,opts="nofollow"](https://docs.caplin.com/developer/api/caplin_trader/4/module-br_presenter_PresentationModel)`. For example:

```js
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,opts="nofollow"](https://docs.caplin.com/developer/api/caplin_trader/4/module-br_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

```js
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

```js
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.

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