Lesson 3: Creating a view-model

In Lesson 1: Create an Article content type you created a model representing a content type, and in Lesson 2: Creating a frontend you created a view. In this lesson, you will create the view-model. At run time, when a client requests an object, Brightspot runs the view-model to retrieve the headline, body, and image URL from the model’s instance, injects them into the corresponding template placeholders, and returns the populated template to the client.

Step 1: Prepare for this lesson

Before starting this lesson, do the following:

  1. Complete Lesson 2: Creating a frontend.
  2. If you stopped the Brightspot server, do the following:
    1. Restart it by typing ./run.sh (Linux, OS X) or run.cmd (Windows). The login page appears in your browser at localhost:9480.
    2. Log in to display the dashboard.

Step 2: Create a view-model

  1. In the same directory where you created Article.java (see the illustration Tutorial project structure), create a new file ArticleViewModel.java and enter the following text:

    Article view-model
    package article;
    import com.psddev.cms.rte.RichTextViewBuilder;
    import com.psddev.cms.view.PageEntryView;
    import com.psddev.cms.view.ViewModel;
    import com.psddev.dari.util.StorageItem;
    import com.psddev.styleguide.article.ArticleView;
    public class ArticleViewModel extends ViewModel<Article> implements PageEntryView, ArticleView {
        public CharSequence getHeadline() {
            return model.getHeadline();
        public CharSequence getBody() {
            String body = model.getBody();
            return RichTextViewBuilder.buildHtml(model.getState().getDatabase(),body,(rte) ->null);
        public CharSequence getImageUrl() {
            StorageItem image = model.getImage();
            return image.getPublicUrl();
  2. Refresh the dashboard. (If the dashboard does not appear, halt the server in the terminal window by pressing Ctrl-C, restarting the server with ./run.sh or run.cmd, and then reloading the page in the browser.)

  3. In the Recent Activity widget, click the article you created in Lesson 1: Create an Article content type.


    Brightspot opens the article in the content edit page.

  4. In the URLs widget, click the permalink. The article appears in a new browser tab.


    Published article with no styling

  5. View the source of the rendered article.

    <!DOCTYPE html>
            <meta charset="UTF-8">
            <title>Squashed by Earth&#x27;s Gravity, Aliens Demand Submission</title>
                    <h1>Squashed by Earth&#x27;s Gravity, Aliens Demand Submission</h1>
                    <p>After traveling four light-years in suspended animation, a platoon of aliens landed in Times Square Wednesday evening. Combating Earth's crushing gravity, the creatures crawled out of their spacecraft toward the amazed crowd around them. Barely able to brandish their weapons and gasping in the oxygen-rich air, they demanded our planet's unconditional surrender and five tickets to <i>Hamilton</i>.</p>
                    <p>New York police immediately arrested the invaders and sent them to Area 51.</p>
                    <img src="https://spaceplace.nasa.gov/review/voyager-to-stars/aliens_200.en.jpg" height="300">

In the snippet Article view-model

  • Line 9 achieves the following:
    • Declares a view-model that extends the class ViewModel for classes Article. Extending ViewModel gives access to the object model, corresponding to the object the client requested. model is an instantiation of the content type you created in Lesson 1: Create an Article content type, so you have access to the getters you implemented in that class.
    • Implements the interface ArticleView which you created in Lesson 2: Creating a frontend.
    • Implements PageEntryView, a marker interface for rendering HTML.
  • Lines 11–14 retrieve the text of the object’s headline field. Brightspot injects this value into the placeholders {{headline}} you created in the snippet Template.
  • Lines 16–20 retrieve the text of the object’s body field. This field is rich text with escaped HTML characters. The method RichTextViewBuilder.buildHtml converts the stored rich text into standard HTML. Brightspot injects this value into the placeholder {{body}} you created in the snippet Template.
  • Lines 22–26 retrieve the image object, then apply the method getPublicUrl for that image to retrieve its URL. Brightspot injects the URL into the placeholder {{imageUrl}} you created in the snippet Template.