본문 바로가기

Spring 4/Tiles 3 Integration

Tiles 3 with Spring 4

Spring 4 에서 Tiles 3 사용하는 예


테스트 환경

JDK 1.8, Tomcat 8

Spring 4.0.9, STS, Maven

Tiles 3.0.5

Eclipse


Maven 프로젝트의 pom.xml 파일에 라이브러리 추가

Spring 4 MVC 구동용 라이브러리 외에 필요한 라이브러리는 http://mvnrepository.com/ 에서 'Apache tiles' 으로 검색하면 된다

	<dependency>
		<groupId>org.apache.tiles</groupId>
		<artifactId>tiles-jsp</artifactId>
		<version>3.0.5</version>
	</dependency>


servlet-context.xml ( 타일즈 관련 설정 )

    <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".jsp" />
        <beans:property name="contentType" value="text/html; charset=UTF-8"/>
        <beans:property name="order" value="0"/>
    </beans:bean>

	<!-- 타일즈 뷰 리졸버 선언 -->
	<beans:bean id="viewResolver"
	        class="org.springframework.web.servlet.view.UrlBasedViewResolver">
	    <beans:property name="viewClass">
	            <beans:value>
	                org.springframework.web.servlet.view.tiles3.TilesView
	            </beans:value>
	    </beans:property>
	    <beans:property name="order" value="1"/>
	</beans:bean>

    <!-- Tiles configuration -->
    <beans:bean id="tilesConfigurer"
        class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
        <beans:property name="definitions">
            <beans:list>
                <beans:value>/WEB-INF/tiles/tiles-definitions.xml</beans:value>
                <beans:value>/WEB-INF/views/**/views.xml</beans:value>
            </beans:list>
        </beans:property>
    </beans:bean>



WEB-INF/tiles/tiles-definition.xml (레이아웃 템플릿의 각 구성부분에 조각파일 삽입)

한 화면을 구성할 템플릿(기본 레이아웃)과 템플릿을 구성하는 각 부분을 선언한다

한개의 템플릿은 다수개의 조각으로 구성된다

다수개의 템플릿이 필요하다면 한개의 정의파일에 다수개의 definition 태그를 선언하거나 다수개의 정의파일을 작성하면 된다

템플릿으로부터 실제 웹브라우저에 보여질 페이지를 파생하여 레이아웃을 보완하거나 일부분의 조각을 대체하는 방식으로 사용된다

템플릿으로부터 파생되는 페이이지에서는 다수개의 템플릿 중에서 사용할 템플릿의 이름을 지정하면 된다 (맨 아래에 첨부된 tilesView.jsp 참조)

다수개의 정의파일을 사용하는 경우에는 위의 <beans:value>/WEB-INF/views/**/views.xml</beans:value> 처럼 다수개의 정의파일을 등록해야 한다

이 파일이 가진 의미는 레이아웃 정보를 가진 파일(템플릿 파일)의 각 구성 부분에 사용될 조각(구성)파일을 삽입하는 것이다

여러 페이지에 걸쳐서 동일한 내용을 보여주려면 이 파일에서 각 조각파일을 등록해주면 된다

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
  <!-- 페이지 템플릿(레이아웃)과 템플릿을 구성하는 각 부분을 모두 이름을 붙여 선언한다 -->
    <definition name="defaultTemplate" template="/WEB-INF/tiles/template.jsp">
        <put-attribute name="header" value="/WEB-INF/tiles/header.jsp" />
        <put-attribute name="menu" value="/WEB-INF/tiles/menu.jsp" />
        <put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp" />
    </definition>
  
</tiles-definitions>
<!-- 아래처럼 다수개의 definition을 정의하면서 extends속성을 이용하여 기본 정의를
상속하여 사용할 수도 있고, 다수개의 xml 파일에 나누어 정의할 수도 있다 -->
<!-- <tiles-definitions>

    <definition name="base.definition"
          template="/WEB-INF/view/jsp/layout.jsp">
      <put-attribute name="title" value="" />
      <put-attribute name="header" value="/WEB-INF/view/jsp/template/header.jsp" />

      <put-attribute name="body" value="" />
      <put-attribute name="footer" value="/WEB-INF/view/jsp/template/footer.jsp" />
    </definition>
    
    <definition name="welcome" extends="base.definition">
      <put-attribute name="title" value="Home" />
      <put-attribute name="body" value="/WEB-INF/view/jsp/welcome.jsp" />
    </definition>
    
</tiles-definitions> -->



WEB-INF/tiles/template.jsp


기본 레이아웃(레이아웃을 구성하는 각 부분에 이름을 부여함)이 선언된 곳, <tiles:insertAttribute name="defined_fragment_name"> 태그를 사용하여 레이아웃을 구성하는 각 부분에 이름을 지정한다

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
    <head>
    <meta charset="UTF-8">

    <style type="text/css">
/* 필요한 스타일 선언 */
    </style>
    <title><tiles:insertAttribute name="title" ignore="true" /></title> <!--타이틀이 null인 경우에는 무시한다-->
</head>
<body>
    <div class="page">
        <tiles:insertAttribute name="header" />
        <div class="content">
            <tiles:insertAttribute name="menu" />
            <tiles:insertAttribute name="body" />
        </div>
        <tiles:insertAttribute name="footer" />
    </div>
</body>
</html>

위의 템플릿은 사용될 조각 파일들의 이름을 사용하여 기본 레이아웃을 정의하고 있는데, 이름 중에서 'title',과 'body'는 실제 파일을 가리키는 이름이 아니므로 그 내용에는 의미가 없고 레이아웃 상의 위치에 의미를 가지고 있다. 이와 같이 실제 내용이 없이 이름만 있는 요소는 이 템플릿을 기본으로 하여 실제 사용될 레이아웃을 정의할 때 그 내용을 정의해야 한다


WEB-INF/tiles/header.jsp ( 템플릿을 구성하는 한 조각 파일 )

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<div class="header">여기는 헤더 입니다</div>



WEB-INF/tiles/footer.jsp ( 템플릿을 구성하는 한 조각 파일 )

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<div class="footer">여기는 FOOTER 입니다</div>



WEB-INF/tiles/menu.jsp ( 템플릿을 구성하는 한 조각 파일 )

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<div class="menu">
Menu
    <ul>
        <li>
            <spring:url value="/home" var="homeUrl" htmlEscape="true"/>
            <a href="${homeUrl}">Home</a>
        </li>
        <li>
            <spring:url value="/about" var="aboutUrl" htmlEscape="true"/>
            <a href="${aboutUrl}">About</a>
        </li>
    </ul>
</div>



WEB-INF/views/tilesView.jsp ( 선언된 템플릿을 이용하여 실제 사용할 레이아웃을 파생함 )

<tiles:insertDefinition name="defaultTemplate"> <-- 이 부분이 사용될 템플릿의 이름을 지정하는 곳이다

각 조각 파일의 내용을 오버라이드하려면 선언된 이름을 이용하여 <tiles:putAttribute name="선언된 조각의 이름"> 태그를 사용한다

이 파일의 의미는 각 조각의 내용이 결정되지 않은 레이아웃 내의 각 조각의 실제 내용이 최종 결정되는 곳이다

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%--defaultTemplate를 적용할 때 템플릿의 title, body 영역은 여기에서 오버라이드한다 --%>
<tiles:insertDefinition name="defaultTemplate">
	<tiles:putAttribute name="title">Tiles 3 Test</tiles:putAttribute>
    <tiles:putAttribute name="body">
	
	<%--tiles태그 안에 스크립트 요소를 사용하면 오류가 발생하므로 아래처럼 JSTL을 사용한다 --%>
        <c:forEach var="i" begin="1" end="5">
			${i}
        </c:forEach>
		
        <div class="body">
            <h1>Hello Apache Tiles !</h1> 
 
            <p>The time on the server is ${serverTime}.</p>
            <p>Spring 4, Tiles 3 Integration Test</P>
        </div>

    </tiles:putAttribute>
</tiles:insertDefinition>



TilesController.java

package org.kdea.spring.demo;

import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class TilesController {

    @RequestMapping(value={"/", "/home"}, method=RequestMethod.GET)
    public String home(Locale locale, Model model) {

        Date date = new Date();
        DateFormat dateFormat=DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
         
        String formattedDate=dateFormat.format(date);
         
        model.addAttribute("serverTime", formattedDate );
         
        return "tilesView";
    }
     
}


실행 테스트

http://localhost:8080/컨텍스트명/home 으로 접속하면 tilesView.jsp가 화면에 보여지고 페이지의 각 구성 부분들이 모두 결합되어 보이면 된다