Brightspot CMS Developer Guide

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:


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;
    }
}


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.

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


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

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();
    }
}
  • Indicates the output format for this view model is an HTML representation evaluated by a template.
  • 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.

<div class="Article">

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

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

</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.

Previous Topic
View system
Next Topic
Headless
Was this topic helpful?
Thanks for your feedback.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Modules
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Dashboards
Publishing
Workflows
Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
Images
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Shopify
Apple News