Traditional

In a traditional Brightspot implementation, the view system includes two components: a template and a view model. The template provides the structure for the output to be rendered on the client’s device. The view model receives and transforms the model’s data based on the template’s structure. When deploying a traditional view system, you need to develop both components.

The following sections provide an example for developing a traditional view system.

See also:

• Processed JSON data
• Generating data files from published content

Model

The following snippet is a basic model for an article.

showLineNumbers

1
import com.psddev.cms.db.Content;
2
import com.psddev.dari.db.Recordable;
3

4
public class Article extends Content {
5

6
    private String headline;
7

8
    private String body;
9

10
    public String getHeadline() {
11
        return headline;
12
    }
13

14
    public void setHeadline(String headline) {
15
        this.headline = headline;
16
    }
17

18
    public String getBody() {
19
        return body;
20
    }
21

22
    public void setBody(String body) {
23
        this.body = body;
24
    }
25
}

View

In a traditional view system, the view is a template that describes the rendered layout. Templates typically include detailed HTML markup. You can reduce the HTML coding effort for templates by using Handlebars. To use Handlebars as your templating language, add the following dependency to your pom.xml:

showLineNumbers

1
<dependency>
2
    <groupId>com.psddev</groupId>
3
    <artifactId>handlebars</artifactId>
4
    <version>2.0-SNAPSHOT</version>
5
</dependency>

The following snippet is a traditional template describing the layout for an article’s headline and body. This template includes some Handlebars helpers. Because this is a template for an Article, the file name must be Article.hbs.

showLineNumbers

1
<div class="Article">
2

3
    <h1 class="Article-headline">
4
        {{headline}}
5
    </h1>
6

7
    <div class="Article-body">
8
        {{body}}
9
    </div>
10

11
</div>

View model

The following snippet is a traditional view model that serializes a model’s data into HTML format.

showLineNumbers {6,8}

1
import com.psddev.cms.view.PageEntryView;
2
import com.psddev.cms.view.ViewInterface;
3
import com.psddev.cms.view.ViewModel;
4
import com.psddev.handlebars.HandlebarsTemplate;
5

6
@HandlebarsTemplate("Article")
7
@ViewInterface
8
public class ArticleViewModel extends ViewModel<Article> implements PageEntryView {
9

10
    public String getBody() {
11
        return model.getBody();
12
    }
13

14
    public String getHeadline() {
15
        return model.getHeadline();
16
    }
17
}

• 6. Indicates the output format for this view model is an HTML representation evaluated by a template.
• 8. Indicates the source model is Article.

At run time, Brightspot manages the interaction between the model, view, and view model to produce the HTML that a browser can render. See the following snippet.

showLineNumbers

1
<div class="Article">
2

3
    <h1 class="Article-headline">
4
        Handlebars Example
5
    </h1>
6

7
    <div class="Article-body">
8
        Brightspot outputs data with the Handlebars template
9
    </div>
10

11
</div>

tip

You can use the _renderer=json query string to see the values Brightspot uses to populate a template. For details, see Modifying the response format.