[Java 기초문법] Spring | controller 만들기, thymeleaf 이용해 페이지 만들기, Bootstrap Table, using Formatter interface

[Java 기초문법] by Professional Java Developer Career Starter: Java Foundations @ Udemy

 

---

 

Set up is as follows 

 

 

 

 

package com.neutrio.peopledbweb.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/people")
public class PeopleController {

    @GetMapping
    public String getPeople(){
        return "people";
    }
}

 

package com.neutrio.peopledbweb.biz.model;

import lombok.Data;

import java.math.BigDecimal;
import java.time.LocalDate;

@Data
@AllArgsConstructor
public class Person {
    private String firstName;
    private String lastName;
    private LocalDate dob;
    private BigDecimal salary;
}

 

With Lombok, and the annotation @Data, will allow the Lombok Library to scan this class, find these fields and generate getters and setters and a constructor and an equals and a hash code, all for free without effort. 

 

and see the controller. 

 

 

 

Here, we're gonna have those dummy people kind of show up in the browser. 

 

Create list of people. 

 

 

and update a html a bit. 

 

 

 

here to use Thymeleaf, go to 

 

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#executing-the-template-engine

Tutorial: Using Thymeleaf

 

where it denotes configuration stuff 

 

 

 

modify html 

 

and here this people is coming from model that is functionaized by 

model.addAttribute("people",people);

 

 

and with this update the page 

 

 

 

 

---

 

 

Bootstrap Table 

 

 

Boostrap CSS and JS copied

from 

https://getbootstrap.com/docs/5.2/getting-started/introduction/

Get started with Bootstrap

 

 

 

 

 

 

Html table also copied 

 

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

 

with short cut 

ctrl + F9 => refresh 

 

and then the table's coming. 

 

 

 

 

 

div tag with class ="col-8 mx-auto" 

=> rearrange the position 

 

 

 

 

let's go to the body section where

tr represent li functionally same, thus duplication from 

<li th:each ="person : ${people}" th:text="${person}">My Junk Person</li>

may allowed thus 

<tr th:each = "person" : ${people}">

 

so context also might be 

<tr th:each = "person : ${people}">
    <th scope="row" th:text="${person.id}">1</th>
    <td th:text="${person.lastName}">Mark</td>
    <td th:text="${person.firstName}">Otto</td>
    <td th:text="${person.dob}">@mdo</td>

 

notice that static data might not need to be deleted or changed, and this is one opf the things that's nice about the Thymeleaf framework. 

 

This dynamic templating functionality to an otherwise static HTML page, without having to necessarily change any of the original dummy static HTML, giving potentially nice way to work hand in hand with web designers not using Java, such that can work collaboration better. 

 

and now handle other dummies. 

 

<tr th:remove="all">
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
</tr>
<tr th:remove="all">
    <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
</tr>

 

with Thymeleaf remove function, result in diplany = none

 

 

 

---

 

 

만약 date of birth가 출력되는 형식을 바꾸고 싶다면 어떻게 할까? 

 

간단한 방법은 format method를 만들어 리턴하는 형식일 것이다. 

 

 

 

하지만 실제 운용에서 이 방식은 도메인 모델에서 Service layer에 대한 수정으로 바람직하지 못하다. 

 

출력의 레벨은 Web 레벨에서 다뤄져야 하기 때문에 가급적이면 지양하는 것이 좋다. 

 

 

 

1. make use of formatter from Spring Framework = spring formatter 

 

Create new package 

and a new class in it 

 

with implements generic interface Formatter

 

 

package com.neutrio.peopledbweb.web.formatter;

import org.springframework.format.Formatter;
import org.springframework.stereotype.Component;

import java.text.ParseException;
import java.time.LocalDate;
import java.time.format.DateTimeFormatter;
import java.util.Locale;


@Component
public class LocalDateFormatter implements Formatter<LocalDate>{

    private final DateTimeFormatter dateTimeFormatter = DateTimeFormatter.ofPattern("MMMM dd, yyyy");

    @Override
    public LocalDate parse(String text, Locale locale) throws ParseException {
        return LocalDate.parse(text,dateTimeFormatter);
    }

    @Override
    public String print(LocalDate object, Locale locale) {
        return dateTimeFormatter.format(object);
    }
}

 

Here Spring knows what to do with this interface Formatter, with identifying that these data and whate functions these might use, in this case is local date. And it will allow our print method to convert these into strings, for the display, and not with us having to modify the person class directly, which is to say, we get the modified version of the strings, without touching the underlined domain class, which is here person. 

 

as such, we no longer need to tell Thymeleaf that person.dob, rather to ask the spring framework to convert this field for us, 

 

 

and the way we can do this is just simply wrap it up with one more set of curly braces. 

 

 

<td th:text="${{person.dob}}">@mdo</td>