Creating a View

A View represents a web page’s layout. In this section, you develop a View that specifies the article’s layout, and then nest that View inside an enclosing page View.

Step 1: Adding the Article’s View

Brightspot implements Views using Handlebars files.

  1. Returning to the IDE, create the file Article.hbs in the directory src/main/webapp/brightspot/tutorial/article/, and enter the following text:
<div>
    <h1>{{headline}}</h1>
</div>
<div>
    {{#if leadImageUrl}}
        <img src="{{leadImageUrl}}" height="300">
    {{/if}}
</div>
<div>
    {{body}}
</div>

The previous Handlebars file contains familiar HTML code with the following helpers:

  • {{headline}}—A placeholder for the results of a getHeadline() function.
  • {{leadImageUrl}}—A placeholder for the results of a getLeadImageUrl() function.
  • {{body}}—A placeholder for the results of a getBody() function.

You’ll implement these functions in the lesson Creating an Article ViewModel.

Step 2: Adding the Page’s View

The Handlebars file you created in the previous step is incomplete: it doesn’t contain the traditional opening and closing HTML tags. In this step you create the enclosing Page view to provide those tags.

  1. Returning to the IDE, create a file Page.hbs in the directory src/main/webapp/brightspot/tutorial/page/ and enter the following text:
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>{{title}}</title>
    </head>

    <body>
        <div class="Page-body">
            {{body}}
        </div>
    </body>

</html>

The previous Handlebars file contains the traditional opening and closing HTML tags. It also contains the following helpers:

  • {{title}}—A placeholder for the results of a getTitle() function.
  • {{body}}—A placeholder for the results of a getBody() function. This function generates a View from the nested article View you created in Step 1.

You’ll implement these functions in the lesson Creating an Article ViewModel.

Summary

In this lesson you learned the following skills:

  • How to create a Handlebars template that provides the HTML structure for a published item. The Handlebars template includes placeholders into which a ViewModel places retrieved text.
  • How to nest one Handlebars template inside another. This strategy is helpful when you want to reuse a template in many parent templates. For example, the same image View can appear inside a “breaking news” edition and a more detailed “weekend” edition of the same article.