View Generator

Styleguide provides a View Generator which allows Styleguide to integrate with Brightspot’s View System. The view generator reads the JSON mocks used by Styleguide to produce a Java interface. The interface is used on the backend to provide a contract which a View Model must implement.

How the View Generator Creates View Classes

When you build a Brightspot project, the View Generator executes the following steps:

  1. Open the file styleguide/_config.json and look up the value for javaPackage. This value is the first component of the package name for the generated View files. Assign this value to <package>.
  2. Loop through each JSON file in the directory <root>/styleguide/. For each file—
    1. Check for the existence of either a _template key. If not found, continue to the next JSON file.
    2. Copy the file’s path, and duplicate the path under the directory target/generated-sources/styleguide/<package>/.
    3. In the JSON file, look up the value for _template, and extract the base name (file name without the hbs extension). Assign this value to <base>.
    4. Create a new class file <base>View.java in the path from step b.
    5. Declare the class’s package as package <package>.<currentpath>, where <currentpath> reflects the path from /styleguide/ to the current file.
    6. Each key inside the JSON file not starting with an underscore is assumed to be a displayed field. For each such key—
      1. Create a constructor inside the file <base>View.java.
      2. Create a getter inside the file <base>View.java. (At runtime, the getters populate the corresponding field in the template file.)

Suppose you want to create a View for articles. Your Styleguide files may look as follows:

_config.json

Data File Specifying Package Name
{
    "javaPackage" : "brightspotnews"
}

Article.hbs

<div class="Article">
    <div class="Article-headline">
        {{headline}}
    </div>
    <div class="Article-body">
        {{body}}
    </div>
    <div class="Article-image">
        <img src="{{image}}" alt="Alternate Text" />
    </div>
</div>

Article.json

Data File Specifying Associated Template and Source for Method Names
{
  "_template": "path/to/Article.hbs",
  "headline": "{{words(4)}}",
  "body": "{{paragraphs(2, 5, 15)}}",
  "image": "{{image(200, 200)}}"
}

Resulting File Structure

The following diagram shows your directory structure after building the Brightspot project; the gray shading indicates those directories and files Brightspot created based on the data files.

../../_images/generated-view-file-structure.svg

Resulting Interface ArticleView.java

This file is a Java interface automatically generated by Brightspot’s View generator.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
package brightspotnews.content.article;

/* Imports */

/* Various annotations */
public interface ArticleView {

    CharSequence getHeadline();

    CharSequence getBody();

    CharSequence getImage();

    /* Other code */
}

In the previous snippet—

  • Line 1 reflects the interface’s package name
    • The first component of the package name is the value for javaPackage as show in the snippet Data File Specifying Package Name.
    • The remaining components reflect the directory structure to Article.json under /styleguide/.
  • Line 6 declares the interface’s name. The name is based on the name of the discovered data file Article.json.
  • Line 8 declares a method getHeadline. The View Generator derives this method’s name from the key headline as appearing in the snippet Data File Specifying Associated Template and Source for Method Names. The other method names are derived similarly.