Task 7 - Creating a web user interface for the game

Step 1

Add the following to the existing project dependencies (dependencies):

<dependencies>

    ... //keep the previously added dependencies unchanged

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

Step 2

For the web interface to work via Thymeleaf templates, a controller and resources that make up the web interface are needed.

Resources for the web interface, such as static HTML files, CSS, images, and templates for Thymeleaf, will be placed in the resources directory as follows:

src
└── main
    └── resources
        ├── static
        │   ├── css
        │   │   └── *.css
        │   ├── images
        │   │   ├── *.png
        │   │   └── *.svg  // images in .svg or .png format)
        │   └── index.html
        ├── templates
        │   ├── fragments  // optional package for Thymeleaf template fragments        
        │   │   └── *.html
        │   ├── *.html
        └── application.properties

The controller for the Thymeleaf template is a separate class used to process and manage URL parameters and URL routing. Controllers will be stored on the server side in the package sk.tuke.gamestudio.server.controller. Name the controller class according to your game, for example for the game Mines it would be MinesController.

src
└── main
    └── java
        └── sk.tuke.gamestudio
            └── server
                └── controller
                    └── {Nazov}Controller.java

• Controller classes are annotated with @Controller and @Scope(WebApplicationContext.SCOPE_SESSION).
• Controller methods are mapped to corresponding URLs using the @RequestMapping annotation. There may be more than one such method in a controller.
• Method parameters may be annotated with @RequestParam, which is used to obtain URL parameters. The method also includes a parameter of type Model, representing the context for the template being prepared. We can add attributes to the Model object that we need to be available in the template. The return value is the name of the view (Thymeleaf template) that should be displayed after processing the parameters.

An example of a method mapped to a URL can be seen in the mines() method of the Minesweeper controller:

@RequestMapping("/mines")
public String mines(@RequestParam(value = "command", required = false) String command,
                    @RequestParam(value = "row", required = false) String row,
                    @RequestParam(value = "column", required = false) String column,
                    Model model) {

    // if required, add additional code, e.g. to check provided parameters for null

    ...

    return "mines"; //same name as the template

}

The mines() method is called when a page is requested at the relative address specified in the @RequestMapping annotation. URL parameters may also be included, as listed in the @RequestParam annotations.

When calling the mines() method, a prepared Model object is also passed. We can add attributes to this model that we want to be available within the HTML template for Thymeleaf and that help us create the current page content. The template with the name returned by the method, in this case "mines", is used to generate the HTML page that the server provides for display in the web browser.

Step 3

An example of a template for the Minesweeper game contains the following parts:

• Graphical representation of the Minesweeper game component,

<div th:utext="${@minesController.getHtmlField}"/>

• Buttons for controlling the game,

<a href="/mines/new">New game</a><br/>
<a href="/mines/mark" th:text='${@minesController.marking ? "Mark" : "Open"}'/><br/>

• Display of the top scores table, which can be implemented in several ways. You can choose the one that suits you best, for example:
  • a table generated on the server using the Thymeleaf system, using a JPA service,
  • a table generated on the client side using AJAX calls and a REST service,
  • a table generated on the client side using jQuery DataTable and a REST service.

Step 4