FileCodeBox

1.3.2 Defining the view

In the interest of keeping your home page simple, it should do nothing more than welcome users to the site. The next listing shows the basic Thymeleaf template that defines the Taco Cloud home page.

Listing 1.5 The Taco Cloud home page template

html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
  <head>
      <title>Taco Cloud</title>
  </head>
  
  <body>
      <h1>Welcome to...</h1>
      <img th:src="@{/images/TacoCloud.png}"/>
  </body>
</html>

There’s not much to discuss with regard to this template. The only notable line of code is the one with the <img> tag to display the Taco Cloud logo. It uses a Thymeleaf th:src attribute and an @{…} expression to reference the image with a context-relative path. Aside from that, it’s not much more than a Hello World page.

Let’s talk about that image a bit more. I’ll leave it up to you to define a Taco Cloud logo that you like. But you’ll need to make sure you place it at the right place within the project.

The image is referenced with the context-relative path /images/TacoCloud.png. As you’ll recall from our review of the project structure, static content, such as images, is kept in the /src/main/resources/static folder. That means that the Taco Cloud logo image must also reside within the project at /src/main/resources/static/images/TacoCloud.png.

Now that you’ve got a controller to handle requests for the home page and a view template to render the home page, you’re almost ready to fire up the application and see it in action. But first, let’s see how you can write a test against the controller.

1.3.2 Defining the view ​

1.3.2 Defining the view