Traditional

In a traditional Brightspot implementation, the View System includes two components: a template and a ViewModel. The template provides the structure for the output to be rendered on the client’s device. The ViewModel 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.

Model

The following snippet is a basic Model for an article.

import com.psddev.cms.db.Content;
import com.psddev.dari.db.Recordable;

public class Article extends Content {

    private String headline;

    private String body;

    public String getHeadline() {
        return headline;
    }

    public void setHeadline(String headline) {
        this.headline = headline;
    }

    public String getBody() {
        return body;
    }

    public void setBody(String body) {
        this.body = body;
    }
}

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:

<dependency>
  <groupId>com.psddev</groupId>
  <artifactId>handlebars</artifactId>
  <version>2.0-SNAPSHOT</version>
</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. (This template also includes some class names that follow the Block-Element-Modifier convention; for details, see BEM.) You can store this file in src/main/webapp.

<div class="Article">
    
    <h1 class="Article-headline">
        {{headline}}
    </h1>
    
    <div class="Article-body">
        {{body}}
    </div>
    
</div>

ViewModel

The following snippet is a traditional ViewModel that receives data from the Article Model (line 8), and transforms the data as described in the template specified in the @HandlebarsTemplate annotation (line 6).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import com.psddev.cms.view.PageEntryView;
import com.psddev.cms.view.ViewInterface;
import com.psddev.cms.view.ViewModel;
import com.psddev.handlebars.HandlebarsTemplate;

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

    public String getBody() {
        return model.getBody();
    }

    public String getHeadline() {
        return model.getHeadline();
    }
}

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

<div class="Article">

    <h1 class="Article-headline">
        Handlebars Example
    </h1>

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

</div>

Debugging

You can view a ViewModel’s keys and values in JSON format by appending ?_renderer=json to an item’s URL. For example, loading an article http://<hostname>/cats-are-better-than-dogs?_renderer=json displays the JSON representation of the article’s headline and body.

{
  "class" : "content.article.ArticleViewModel",
  "body" : "A survey of 5 million cat owners proved that cats are indeed better pets than dogs.",
  "headline" : "Cats Are Better Than Dogs"
}

See also: