th:text 속성이나 th:utext 속성을 사용하여 스프링 MVC 모델에 저장된 값 또는 프로퍼티
파일에서 가져온 메시지를 표시한다.
3-1. 메시지
-
메시지 본문을 메시지의 키 값으로 가져 오려는 경우에 메시지 표현식을 사용한다.
-
메시지의 키 값을 사용하여 메시지 본문을 가져 온다.
-
[컨트롤러 메서드]
\src\main\java\org.brolab.thymeleaf\Ch0803_Controller.java
@GetMapping("ch0803/home0101") public String home0200(Model model){ model.addAttribute("msg", "Hello world!"); return "ch0803/home0101"; } -
[뷰 파일]
\src\main\resources\templates\ch0801\home0101.html
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <h1 th:text="#{welcome.message}">greeting</h1> </body> </html> -
[응답화면]
3-2. 변수
-
타임리프 변수 표현식에 OGNL 이라는 자바와 비슷한 언어를 기술해서 타임리프가
관리하는 변수에 접근하거나 메서드를 실행할 수 있다.
3-2-1. 단일 문자열 타입의 값을 가져온다.
-
[컨트롤러 메서드]
@GetMapping("ch0803/home0201") public String home0201(Model model){ model.addAttribute("msg", "Hello world!"); return "ch0803/home0201"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <h1 th:text="${msg}">greeting</h1> </body> </html> -
[응답 화면]
3-2-2. 자바빈즈 프러퍼티 값을 가져온다.
-
[컨트롤러 메서드]
@GetMapping("ch0803/home0202") public String home0202(Model model){ Member member = new Member(); member.setUserId("hongkd"); member.setPassword("1234"); member.setEmail("bbb@ccc.com"); member.setUserName("홍길동"); LocalDate dateOfBirth = LocalDate.of(1988, 10, 7); member.setDateOfBirth(dateOfBirth); model.addAttribute(member); return "ch0803/home0202"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <table border ="1"> <tr> <td>${member.userId}</td> <td th:text="${member.userId}">userId</td> </tr> <tr> <td>${member.password}</td> <td th:text="${member.password}">password</td> </tr> <tr> <td>${member.userName}</td> <td th:text="${member.userName}">userName</td> </tr> <tr> <td>${member.email}</td> <td th:text="${member.email}">email</td> </tr> <tr> <td>${member.dateOfBirth}</td> <td th:text="${member.dateOfBirth}">dateOfBirth</td> </tr> </table> </body> </html> -
[응답 화면]
3-2-3. 중첩된 자바빈즈 프러퍼티 값을 가져온다.
-
[컨트롤러 메서드]
@GetMapping("ch0803/home0203") public String home0203(Model model){ Member member = new Member(); Address address = new Address(); address.setPostCode("080908"); address.setLocation("seoul"); member.setAddress(address); model.addAttribute(member); return "ch0803/home0203"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <table border ="1"> <tr> <td>${member.address.postCode}</td> <td th:text="${member.address.postCode}">postCode</td> </tr> <tr> <td>${member.address.location}</td> <td th:text="${member.address.location}">location</td> </tr> </table> </body> </html> -
[응답 화면]
3-3. 선택변수
특정 객체의 프로퍼티에 연속으로 접근하고 싶을 때 th:object 속성과 선택 변수 표현식을
조합해서 사용하면 간단하게 기술할 수 있다.
3-3-1. th:object table 태그에 사용
-
table 태그에 th:object 속성 값을 설정하고 내부 포함된 태그에 선택 표현식을 사용한다.
-
[컨트롤러 메서드]
@GetMapping("ch0803/home0301") public String home0301(Model model){ Member member = new Member(); member.setUserId("hongkd"); member.setPassword("1234"); member.setEmail("bbb@ccc.com"); member.setUserName("홍길동"); LocalDate dateOfBirth = LocalDate.of(1988, 10, 7); member.setDateOfBirth(dateOfBirth); model.addAttribute(member); return "ch0803/home0301"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <table border ="1" th:object="${member}"> <tr> <td>${member.userId}</td> <td th:text="*{userId}">userId</td> </tr> <tr> <td>${member.password}</td> <td th:text="*{password}">password</td> </tr> <tr> <td>${member.userName}</td> <td th:text="*{userName}">userName</td> </tr> <tr> <td>${member.email}</td> <td th:text="*{email}">email</td> </tr> <tr> <td>${member.dateOfBirth}</td> <td th:text="*{dateOfBirth}">dateOfBirth</td> </tr> </table> </body> </html> -
[응답 화면]
3-3-2. th:object form태그에 사용
- form 태그에 th:object 속성 값을 설정하고 내부 포함된 태그에 선택 표현식을 사용한다.
-
[컨트롤러 메서드]
@GetMapping("ch0803/home0302") public String home0302(Model model){ Member member = new Member(); member.setUserId("hongkd"); member.setPassword("1234"); member.setEmail("bbb@ccc.com"); member.setUserName("홍길동"); LocalDate dateOfBirth = LocalDate.of(1988, 10, 7); member.setDateOfBirth(dateOfBirth); model.addAttribute(member); return "ch0803/home0302"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <form th:object="${member}"> <table border ="1" > <tr> <td>${member.userId}</td> <td th:text="*{userId}">userId</td> </tr> <tr> <td>${member.password}</td> <td th:text="*{password}">password</td> </tr> <tr> <td>${member.userName}</td> <td th:text="*{userName}">userName</td> </tr> <tr> <td>${member.email}</td> <td th:text="*{email}">email</td> </tr> <tr> <td>${member.dateOfBirth}</td> <td th:text="*{dateOfBirth}">dateOfBirth</td> </tr> </table> </form> </body> </html> -
[응답 화면]
3-4. 링크 URL
링크 URL 표현식을 사용하여 지정된 URL의 시작 부분에 컨텍스트 경로를 추가 할 수 있다.
3-4-1. th:href 링크 URL 표현식
- th:href 속성에 링크 URL 표현식을 사용하여 URL 값을 지정한다.
-
[컨트롤러 메서드]
@GetMapping("ch0803/home0401") public String home0401(Model model){ return "ch0803/home0401"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <h2>Home0401</h2> <div> <a href="./sub/home0402.html" th:href="@{/ch0803/sub/home0402}">Home0402로 이동</a> </div> </body> </html> -
[응답 화면]
3-4-2. th:href 링크 URL 표현식 절대 URL, 상대 URL
- 컨텍스트 경로를 자동으로 추가하고 싶다면 상대 URL로 표현하고 "/" 로 시작해야 한다.
-
[컨트롤러 메서드]
@GetMapping("ch0803/home0403") public String home0403(Model model){ return "ch0803/home0403"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <h4>절대 URL</h4> <a th:href="@{http://localhost:8080/board/list}">list</a> <h4>상대 URL - Context-relative</h4> <a th:href="@{/board/list}">list</a> <h4>상대 URL - Page-relative</h4> <a th:href="@{board/list}">list</a> <h4>상대 URL - Server-relative</h4> <a th:href="@{~/board/list}">list</a> </body> </html> -
[응답 화면]
3-5. 리터럴
문자열을 표현하기 위한 텍스트 리터럴은 작은 따옴표로 둘러싼다.
작은 따옴표가 문자열 안에 포함되어 있다면 ''로 이스케이프 해야 한다.
- 텍스트 리터럴은 작은 따옴표로 둘러싼다.
-
[컨트롤러 메서드]
@GetMapping("ch0803/home0501") public String home0501(Model model){ return "ch0803/home0501"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <h1 th:text="'Hello world!'">greeting</h1> </body> </html> -
[응답 화면]
3-6. 텍스트 추가
텍스트 리터럴을 '+'를 이용하여 연결할 수 있다.
- 텍스트 리터럴과 변수를 연결한다.
-
[컨트롤러 메서드]
@GetMapping("ch0803/home0601") public String home0601(Locale locale, Model model){ LocalDateTime now = LocalDateTime.now(); DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy년 M월 d일 (E) a h시 m분 s초"); String formattedNow = now.format(formatter); model.addAttribute("serverTime", formattedNow); return "ch0803/home0601"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <h1>Hello world!</h1> <p th:text = "'The time on the server is '+${serverTime}+'.'">시간 표시</p> <p th:text = "'The time on the server is '+'${serverTime}'+'.'">시간 표시</p> </body> </html> -
[응답 화면]
3-6. 리터럴 대체
텍스트 리터럴 안에 치환 변수(${변수명})를 설정할 수 있다.
리터럴 치환을 사용하는 경우 치환하고 싶은 범위를 '|'로 감싼다.
- 텍스트 리터럴과 변수를 '|'로 감싼다.
-
[컨트롤러 메서드]
@GetMapping("ch0803/home0701") public String home0701(Locale locale, Model model){ LocalDateTime now = LocalDateTime.now(); DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy년 M월 d일 (E) a h시 m분 s초"); String formattedNow = now.format(formatter); model.addAttribute("serverTime", formattedNow); return "ch0803/home0701"; } -
[뷰 파일]
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <h1>Hello world!</h1> <p th:text = "|The time on the server is ${serverTime}.|">시간 표시</p> <p th:text = "|The time on the server is '${serverTime}'.|">시간 표시</p> <p th:text = "|The time on the server is | + '${serverTime}' + |.|">시간 표시</p> </body> </html> -
[응답 화면]
