http://www.thymeleaf.org/documentation.html
Kunner 님의 블로그
http://kunner.tistory.com/1053
먼저 항상 그렇듯이...
Maven Pom 설정
<!-- Thymeleaf --> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring4</artifactId> <version>2.1.2.RELEASE</version> </dependency>
스프링 3 용과 스프링 4 용이 분리되어 있다! 확인 해서 적용할 것
Xml Configuration 설정
<beans:bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver"> <beans:property name="prefix" value="/WEB-INF/views/template/" /> <beans:property name="suffix" value=".html" /> <beans:property name="templateMode" value="HTML5" /> <!-- 개발모드 일때는 필수 --> <beans:property name="cacheable" value="false"></beans:property> <beans:property name="characterEncoding" value="UTF-8"></beans:property> </beans:bean> <beans:bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine"> <beans:property name="templateResolver" ref="templateResolver" /> </beans:bean> <beans:bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver"> <beans:property name="templateEngine" ref="templateEngine" /> <beans:property name="characterEncoding" value="UTF-8"></beans:property> </beans:bean>
설정 시에 2가지를 유념해야 한다.
1. cacheable 설정을 해줄 것 - 디버그를 하다보면 브라우저 새로 고침을 통해서 변경된 결과를 확인할 것이다.
캐쉬 설정이 되어 있으면 즉시 반영되지 않는다.
개발 시에만 false로 설정해두고 개발이 완료된 후에는 true로 변경하자.
2. characterEncoding 설정
ServletContextTemplateResolver 와 ThymeleafViewResolver 두 군데 다 UTF-8 인코딩을 설정해야 한다. 서버에서 넘어오는 데이터 영역은 UTF-8 인코딩이 보장되지만
HTML 내에 있는 정적 텍스트의 경우 저 설정이 없으면 한글이 깨지는 문제가 발생한다.
간단한 Controller를 하나 작성해보자.
간단한 과제 목록을 보여주는 view를 구성할 때 사용하는 controller 이다.
@Controller
public class ProjectController {
@RequestMapping(value = "/ProjectList/{uid}", method = RequestMethod.GET)
public ModelAndView getProjectList(@PathVariable String uid, ModelAndView model)
{
Project project1 = new Project("Project1", "과제1");
Project project2 = new Project("Project2", "과제2");
project1.setIdx(1);
project2.setIdx(2);
ArrayList list = new ArrayList();
list.add(project1);
list.add(project2);
model.addObject("projects", list);
model.setViewName("project_list");
return model;
}
@RequestMapping(value = "/ProjectInfo/{projectID}", method = RequestMethod.GET)
public ModelAndView getProjectInfo(@PathVariable String projectID, ModelAndView model)
{
Project project1 = new Project("Project1", "과제1");
project1.setIdx(1);
model.addObject("project", project1);
model.setViewName("project_info");
return model;
}
}
목록을 보여주는 html을 작성해보자.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Project List</title>
</head>
<body>
<h1>Project List</h1>
<table>
<tr>
<th>IDX</th>
<th>Name</th>
</tr>
<tr th:each="prj : ${projects}">
<td th:text="${prj.idx}">1</td>
<td>
<a
href="/"
th:href="@{|/ProjectInfo/${prj.idx}|}"
th:text="${prj.name}"
>라바 비콘</a>
</td>
</tr>
</table>
</body>
</html>
Html 예제에서 확인해야 할 사항이 있다. Controller에서 Path 변수를 사용한 것은 이것을 보여주기 위함이다.
th:href="@{|/ProjectInfo/${prj.idx}|}"
항목에서 주의해야 할 것은 @{...} URL 출력 사용시 변수가 포함 된 URL을 출력할 경우 반드시 |...| 리터럴 지정을 해줘야 한다는 점이다.
정상적으로 처리되었다면 위와 같은 화면이 나타나고 해당 url 링크가 입력한 변수대로 표시되면 잘 설정된 것이다.
|...| 리터럴을 빼고 실행해보면 차이를 알 수 있을 것이다.
댓글 없음:
댓글 쓰기