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鈥檚 device. The view model receives and transforms the model鈥檚 data based on the template鈥檚 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 . 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鈥檚 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鈥檚 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>