UI ‐ server side - fidransky/kiv-pia-labs GitHub Wiki

TOTD:

  • learn how rendering works in Spring
  • implement basic server-side rendered UI for the semester project app

Terms and theory

In order to create server-side UI which doesn't end up as the infamous spaghetti code, every server-side framework uses several techniques to make UI authoring easier and better maintainable.

Templates

There are many template engines one can use to create server-side web apps in Java including JSP, JSF, Wicket, Thymeleaf, Freemarker, Velocity and others. They allow composition of HTML pages with possibilities of data access and business logic. To achieve this, each of them uses some implementation of an expression language (EL).

Expression language

Expression languages are rather powerful, yet limited languages. In Spring, we use the power of Spring Expression Language (SpEL), by default in the following form:

${an expression}

Within a Thymeleaf template, various forms of expression language (EL) are used (source):

${an expression} // variable expressions
*{an expression} // selection variable expressions
#{an expression} // message expressions
@{an expression} // link url expressions
~{an expression} // fragment expressions

Practice

In this lab, we're going to create a simple UI for the semester project app using server-side rendering. To do that, we're going to configure our Spring app to use Thymeleaf as the template engine.

1. Add Thymeleaf

Create a new pia-labs-ui module and add Thymeleaf Spring Boot starter dependency:

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. Implement HelloWorldController using Thymeleaf to render greeting

With Thymeleaf added, use it to render greeting returned by sayHello method of HelloWorldController from pia-labs-ws module instead of returning HTML directly. To do that:

  1. open HelloWorldController implemented during the third lab
  2. remove @ResponseBody annotation from the sayHello method - we're going to return view name to be rendered instead of actual HTML
  3. add Model argument to the sayHello method - the object is injected automatically by Spring
  4. add from parameter as an attribute to the Model using its addAttribute method
  5. make the sayHello method return view name (such as greeting) rather than HTML

Next, create a new greeting.html file in src/main/resources/templates/ folder of the pia-labs-ui module.

Note

Note that the filename matches the view name returned from the controller method.

Add some basic HTML and use Thymeleaf EL to inject greeting set to the Model.

3. Implement base layout

Use Thymeleaf layout inheritance to implement base layout of the app. Optionally, add Bootstrap to make styling easier.

4. List created projects

Next, create a new HomeController controller class in cz.zcu.kiv.pia.labs.controller package of the pia-labs-ui module and implement its home method serving HTML content at root path.

Autowire ProjectService to the controller and use it to load a list of all created translation projects.

Add the loaded list to Model and make the method return view name (e.g. home).

Create an HTML template with filename matching the returned view name in src/main/resources/templates/ directory of the pia-labs-ui module.

Render the list of created projects in the template as HTML unordered list.

Access the resulting page at http://localhost:8080/.

Sources

⚠️ **GitHub.com Fallback** ⚠️