Review
In the previous section, we have read the functional specs of the application. In this section, we will focus on the view layer, create an HTML mockup, and integrate our mockup with Thymeleaf.
Table of Contents
Click on a link to jump to that section:
- Functional Specs
- Creating the View
- HTML Mockup
- Thymeleaf Integration
- JavaConfig
- ApplicationContext.java
- SpringDataConfig.java
- ThymeleafConfig.java
- ApplicationInitializer.java
- Layers
- Domain
- Service
- Controller
- Running the application
- Clone from GitHub
- Create the Database
- Run with Maven and Tomcat 7
- Run with Maven and Jetty 8
- Import to Eclipse
- Validate with W3C
Creating the View
In designing our application we'll start with the view layer because we can. Thanks to
Thymeleaf creating HTML mockups is easy. Thymeleaf allows us to use these mockups as our HTML templates without any aesthetic changes. In addition, it passes
W3C Markup Validation Service with flying colors.
What is Thymeleaf?
Thymeleaf is a Java library. It is an XML / XHTML / HTML5 template engine (extensible to other formats) that can work both in web and non-web environments. It is better suited for serving XHTML/HTML5 at the view layer of web applications, but it can process any XML file even in offline environments.
It provides an optional module for integration with Spring MVC, so that you can use it as a complete substitute of JSP in your applications made with this technology, even with HTML5.
The main goal of Thymeleaf is to provide an elegant and well-formed way of creating templates. Its Standard and SpringStandard dialects allow you to create powerful natural templates, that can be correctly displayed by browsers and therefore work also as static prototypes. You can also extend Thymeleaf by developing your own dialects.
Source: Thymeleaf.org
HTML Mockup
Let's create our HTML mockup. You can see the final mockup below:
First, we create a new HTML page. Note that this is a very simple HTML document that validates with
W3C Markup Validation Service.
Next, we create an external CSS file. Because I'm not really a designer, I have scoured the web for a simple but elegant table style. I found one from
Top 10 CSS Table Designs.
Then, open a browser and test the HTML mockup. You should see something similar to the following image:
Thymeleaf Integration
It's time to integrate Thymeleaf with our HTML mockup template. To integrate Thymeleaf we'll use its attribute-based template engine. Browsers will normally ignore unknown HTML attributes, so it won't affect our mockups.
Before we proceed, let me provide you a short description of the specific Thymeleaf attributes we'll be using:
The important attributes
- The # means to resolve the attribute from the messages bundle
- The $ means to resolve the attribute from the model
- The # and $ can be combined together so that messages can be dynamically generated from the model and internationalized from the messages bundle
th:fragment="header"
This allows us to include template fragments from other templates. For example, we can reuse them in footers, headers, and menus. For this tutorial, we won't be reusing the header, but I've added it anyway for future tutorials.
th:each="u : ${users}
This allows us to loop a list of records. This is equivalent to Java's for-loop construct.
th:text="${u.id}"
This allows to dynamically set the label of an element.
th:href="@{/users/delete(id=${u.id})}">
This allows us to define a dynamic URL.
th:field="*{id}"
This allows us to define the field where an input's field will be attached to.
th:remove="all"
This allows us to setup mockup data. Thymeleaf will automatically remove any element contained within this attribute.
Let's now apply these attributes. Here's our updated HTML mockup template:
users.html
Internationalization
The
th:text attribute allows us to externalize text and with the support of Spring's
MessageSource, we are able to parameterize and provide internationalization support.
What is MessageSource?
Strategy interface for resolving messages, with support for the parameterization and internationalization of such messages.
Spring provides two out-of-the-box implementations for production:
- ResourceBundleMessageSource, built on top of the standard ResourceBundle
- ReloadableResourceBundleMessageSource, being able to reload message definitions without restarting the VM
Source: Spring 3 Docs: MessageSource
Notice the
th:text attributes. Some of them refer to a dot notation object. Where does
Thymeleaf retrieve this information?
The information is retrieved from the messages_en.properties resource bundle:
We've declared that in the ApplicationContext.java configuration (see next section):
The Data transfer object (DTO)
In order for our html page to display data from the Controller, we need to pass a Model attribute. The model attribute is represented by the
UserDto.
The fields we declared on the users.html form is based from the fields of the
UserDto:
Notice the form has a form-backing object declared named
commanduser. Using Thymeleaf's attribute
th:object, we're able to declare this form-backing object.
This object passed from the
UserController.
Next
In the next section, we will focus on the configuration layer. We'll study how to declare a JavaConfig-based configuration. We'll also provide an XML-based configuration for comparison purposes. Click
here to proceed.
Subscribe by reader
Subscribe by email
Share
,%20%5BUser%5D-(View),%20%5BUser%5D-(Update),%20%5BUser%5D-(Delete).png)
