Support and Documentation

How the view generator creates view classes

When you build a theme, 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.)

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

_config.json

Example 82. Data file specifying package name
{
    "javaPackage" : "brightspotnews"
}


Article.hbs

Example 83. Template
<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

Example 84. 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.

generated-view-file-structure.svg

Resulting interface ArticleView.java

This file is a Java interface automatically generated by Brightspot's view generator.

package brightspotnews.content.article; 1

/* Imports */

/* Various annotations */

public interface ArticleView { 2

    CharSequence getHeadline(); 3

    CharSequence getBody();

    CharSequence getImage();

}

1

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

2

Declares the interface's name. The name is bas.ed on the name of the discovered data file Article.json.

3

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.

. See also: