Lesson 2: Creating a front end
In this lesson, you will acquire an understanding of Styleguide, the tool Brightspot representatives use to create a front end. You will also develop a template that provides the HTML structure for your published article.
Step 1: Prepare for this lesson
Before starting this lesson,
Complete Lesson 1: Create an Article content type.
If you stopped the Brightspot server, do the following:
Restart it by typing ./run.sh (Linux, OS X) or run.cmd (Windows). The login page appears in your browser at
localhost:9480
.Log in to display the dashboard.
If you stopped the Styleguide server, restart it by typing gulp styleguide.
Step 2: Start Styleguide
In this step, you run Styleguide to view a preview of an article's appearance.
Ensure port 3000 on your local machine is open.
Open a new terminal window, and change the current directory to
brightspot-tutorial/init/
.Run gulp styleguide. A server starts.
In your web browser, open
http://localhost:3000/_styleguide
. A blank Styleguide appears.

Step 3: Create a template
A template is an HTML file with placeholders for variables. Brightspot's templates are based on Handlebars.
Open a new terminal window, and change to the directory
brightspot-tutorial/init/styleguide
.Create the directory
article
, and change to that directory.Create the file
Article.hbs
(see the illustration Tutorial project structure), and enter the following text:
Brightspot populates the placeholders when a client requests an article. Brightspot retrieves the values from the view model, which you will learn about in Lesson 3: Creating a view model, and injects the values into the placeholders.
Step 4: Create a data file
Styleguide's data files serve two purposes:
Providing mock data appearing in Styleguide's preview.
Creating Java interfaces for the views.
Still in the directory
brightspot-tutorial/init/styleguide/article/
, create the fileArticle.json
(see the illustration Tutorial project structure), and enter the following text:Example 6. Sample data file{ "_template": "Article.hbs", 1 "headline": "{{words(4)}}", 2 "body": "{{paragraphs([1])}}", 3 "imageUrl": "{{image(400, 200)}}" 4 }
Indicates that this data file provides mock values for the template
Article.hbs
you created in Step 3: Create a template.Uses the helper
words()
to generate four words of random text for the{{headline}}
placeholder. For information about this helper, see words.Uses the helper
paragraphs()
to generate one paragraph of random text for the{{body}}
placeholder. For information about this helper, see paragraphs.Uses the helper
image()
to generate a mock URL for the{{imageUrl}}
placeholder. For information about this helper, see image.
For a list of the helpers you can use in data files, see Value helpers.
Step 5: Display the Styleguide preview
Refresh the web page running at
localhost:3000/_styleguide
. An entry for the article appears. (If you do not see an entry for the article, in the terminal press Ctrl-C to stop the server and then rerun gulp styleguide.)Click Article. Styleguide displays mock text and an image for the placeholders you used in Step 3: Create a template.
Step 6: Generate the view interface
In a new terminal window, change to
brightspot-tutorial/init/
.Run ../mvnw clean package.
Brightspot generates the view interface in the file brightspot-tutorial/init/target/generated-sources/styleguide/com/psddev/styleguide/article/ArticleView.java
(see the illustration Tutorial project structure). The interface includes the methods getHeadline
, getBody
, and getImageUrl
, corresponding to the keys headline
, body
, and imageUrl
in the data file you created in Step 4: Create a data file. You will refer to this interface when you create the view-model class.
Summary
In this lesson, you learned the following:
A template provides the HTML structure of a published article. A template includes placeholders into which Brightspot injects dynamic content at run time.
A data file defines the fields appearing in a template. Brightspot uses a data file to create the view interfaces, as well as to provide mock data for the Styleguide preview.
Styleguide provides a preview of how a client renders a template.