Úloha 7 - Tvoríme webové používateľské rozhranie pre hru

Krok 1

Medzi existujúce závislosti projektu (dependencies) doplňte nasledovné:

<dependencies>

    ... //predtým pridané závislosti ponechať nezmenené

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

Krok 2

Pre fungovanie webového rozhrania prostredníctvom šablón Thymeleaf je potrebný kontroler a zdroje, ktoré budú webové rozhranie tvoriť.

Zdroje pre webové rozhranie, ako sú statické súbory HTML, CSS, obrázky a šablóny pre systém Thymeleaf budú umiestnené v adresári resources nasledovne:

src
└── main
    └── resources
        ├── static
        │   ├── css
        │   │   └── *.css
        │   ├── images
        │   │   ├── *.png
        │   │   └── *.svg  // obrázky vo formáte .svg alebo .png)
        │   └── index.html
        ├── templates
        │   ├── fragments  // voliteľný balík pre fragmenty Thymeleaf šablóny)
        │   │   └── *.html
        │   ├── *.html
        └── application.properties

Kontroler pre šablónu Thymeleaf je samostatná trieda, slúžiaca na spracovanie a správu URL atribútov a URL smerovanie. Kontrolery budú uložené na strane servera v balíku sk.tuke.gamestudio.server.controller. Triedu kontrolera nazvite podľa vašej hry, napr. pre kontroler hry Mines to bude MinesController.

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

• Triedy kontrolerov sú anotované anotáciami @Controller a @Scope(WebApplicationContext.SCOPE_SESSION).
• Metódy kontrolera sú prostredníctvom anotácie @RequestMapping mapované na zodpovedajúce URL adresy. Takýchto metód môže byť v kontroleri viac.
• Parametre metódy môžu byť označené anotáciou @RequestParam, ktorá slúži na získavanie parametrov URL adresy. Metóda tiež obsahuje parameter typu Model, reprezentujúci kontext pre pripravovanú šablónu. Do objektu typu Model môžeme pridať atribúty, ktoré potrebujeme mať v rámci pripravovanej šablóny dostupné. Návratovou hodnotou je názov pohľadu (Thymeleaf šablóny), ktorá sa má zobraziť po spracovaní parametrov.

Príklad metódy s mapovaním na URL môžete vidieť na metóde mines() kontrolera hry Minesweeper:

@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

}

Metóda mines() sa zavolá pri požiadavke na stránku s relatívnou adresou, uvedenou v anotácii @RequestMapping. V URL adrese môžu byť dodané aj parametre, vymenované v anotáciách @RequestParam.

Pri volaní metódy mines() je spolu s parametrami z URL dodaný aj predpripravený objekt typu Model. Do tohto modelu môžeme pridať atribúty, ktoré chceme mať dostupné v rámci HTML šablóny pre Thymeleaf a pomôžu nám vytvoriť aktuálny obsah stránky. Šablóna s názvom uvedeným v návratovej hodnote metódy, v tomto prípade "mines", sa použije na vygenerovanie HTML stránky, ktorú server poskytne na zobrazenie vo webovom prehliadači.

Krok 3

Príklad šablóny pre hru Minesweeper obsahuje nasledovné časti:

• Grafickú reprezentáciu komponentu hry Minesweeper,

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

• Tlačidlá pre ovládanie hry,

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

• Výpis tabuľky s najlepším skóre, ktorý je možné realizovať viacerými spôsobmi. Môžete si vybrať, ktorý vám najviac vyhovuje, napríklad:
  • tabuľka generovaná na serveri pomocou systému Thymeleaf, využívajúc službu JPA,
  • tabuľka generovaná na strane klienta pomocou AJAX volania a REST služby,
  • tabuľka generovaná na strane klienta pomocou jQuery DataTable a REST služby.

Krok 4