[Spring] 스프링과 Tiles 2

뷰단을 담당하는 Tiles에 대해 알아보고 스프링 프레임워크와 연동하는 방법을 다루어보겠습니다.

Prerequisite

타일즈를 설정하기 위해 이 포스트에서는 타일즈 2.2.2 버전을 사용할 것입니다.

 <!-- Tiles 2 -->
 <dependency>
        <groupId>org.apache.tiles</groupId>
        <artifactId>tiles-extras</artifactId>
        <version>2.2.2</version>
 </dependency>

Tiles

일반적으로 HTML 화면은 아래와 같은 양식을 띄고 있습니다.

 

위와 같은 페이지에서 컨텐츠 영역만 바뀌고 로고와 메뉴가 있는 영역은 잘 바뀌지 않죠. 이처럼 페이지 이동 시 특정 컨텐츠 영역만 내용을 달리 하기 위한 방법 중 하나가 Tiles 입니다. 그렇다고 다른 페이지로 포워딩을 하지 않고 영역을 바꾼다는 의미는 아닙니다.

구현 방식

위 그림과 같이 정형화된 화면을 만들기 위해 화면 레이아웃을 결정하는 XML 파일과 타일즈 관련 설정 빈(bean), 그리고 타일즈 설정이 적용된 뷰를 만들기 위해 뷰 리졸버를 등록해줘야 합니다. 

쉽게 그림으로 표현하자면 아래와 같습니다.

Definition 파일 (WEB-INF\views\tiles2\definition.xml)

먼저 XML 파일부터 알아봅시다. 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_2_0.dtd">

<tiles-definitions>
    <definition name="home" 
        template="/WEB-INF/views/tiles2/template/default.jsp">
        <put-attribute name="title" value="Hello World !!" />
        <put-attribute name="header" value="/WEB-INF/views/tiles2/template/header.jsp" />
        <put-attribute name="side" value="/WEB-INF/views/tiles2/template/side.jsp" />
        <put-attribute name="content" value="/WEB-INF/views/tiles2/home/content.jsp" />
        <put-attribute name="footer" value="/WEB-INF/views/tiles2/template/footer.jsp" />
    </definition>
</tiles-definitions>

<definition> 태그가 있고 속성으로는 name과 template이 있습니다. name은 @RequestMapping 메서드에서 반환되는 뷰 이름입니다. template 속성은 JSP 파일의 경로를 명시해주는데 이 JSP 파일에 헤더와 푸터, 바디와 사이드 JSP를 정의해줘야 합니다. 필수로 정의하는 것은 아닙니다. 즉, 각각의 조그마한 JSP를 template에 붙여주는 것이죠. <jsp:include>의 개념과 같습니다. 그리고 그런 조각 조각의 JSP 들은 <put-attribute> 태그를 이용하여 정의합니다.

 

 

일반적으로, 기본적인 레이아웃을 하나 만들고 이를 확장하여 사용합니다. 그렇게 해서 헤더, 푸터, 사이드는 동일하게 하되 바디 부분만 다른 결과를 보여주도록 할 수 있습니다.

아래 코드는 실제 보여줄 페이지인 home과 notice를 정의하되 둘 다 defaultPage를 상속하고 있습니다. 그리고 content 부분을 오버라이딩하고 있습니다.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_2_0.dtd">

<tiles-definitions>
    <definition name="defaultPage" template="/WEB-INF/views/tiles2/template/default.jsp">
        <put-attribute name="title" value="Hello World !!" />
        <put-attribute name="header" value="/WEB-INF/views/tiles2/template/header.jsp" />
        <put-attribute name="side" value="/WEB-INF/views/tiles2/template/side.jsp" />
        <put-attribute name="content" value="dummy" />
        <put-attribute name="footer" value="/WEB-INF/views/tiles2/template/footer.jsp" />
    </definition>
    
    <definition name="home" extends="default">
        <put-attribute name="content" value="/WEB-INF/views/tiles2/home/content.jsp" />
    </definition>
    
    <definition name="notice" extends="default">
        <put-attribute name="content" value="/WEB-INF/views/tiles2/notice/content.jsp" />
    </definition>
    
</tiles-definitions>

타일즈 설정 빈(bean) 

TilesConfigurer 빈은 위에서 작성한 xml파일을 로드하는 기능이 있습니다. 

 

 

XML파일을 로드하도록 스프링 설정파일을 손보겠습니다.

<bean id="tilesConfigurer" 

      class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
       

    <property name="definitions">
        <list>
            <value>/WEB-INF/views/tiles2/definition.xml</value>
        </list>
    </property>
</bean> 

타일즈 뷰 리졸버

일반적인 InternalResourceViewResolver를 이용하는 것이 아니라 타일즈 뷰가 적용되기 위해 타일즈 뷰 리졸버가 등록이 돼 있어야 합니다.

<bean id="tilesViewResolver" 
    class="org.springframework.web.servlet.view.tiles2.TilesViewResolver">
    <property name="order" value="#{internalResourceViewResolver.order + 1}" />
</bean>

다른 뷰 리졸버 전략과 같이 사용하기 위해서 order 속성을 추가해주었습니다. order는 integer 타입을 파라미터로 받으며 그 값이 높을 수록 뷰 리졸버 우선순위가 높아집니다.

타일즈 뷰 리졸버까지 등록하였으면 결과를 확인하기 위해 JSP파일을 작성합니다.

화면단 구현

결과 페이지를 확인하기 위해 간단한 내용을 가지는 JSP를 작성해봅시다.

@Controller

package com.musicovery.blog;

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

@Controller
public class HomeController{
    
    @RequestMapping("/home")
    public String home(){
        return "home";
    }
    
    @RequestMapping("/notice")
    public String notice(){
        return "notice";
    }
    
    
}

다음으로 만들 JSP 페이지들의 경로는 아래와 같습니다.

 

Template 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title><tiles:getAsString name="title"/> </title>
    
    <style>

    *{ vertical-align:top; }
    
    #wrap{ margin:0 auto; width:1200px; }
    
    .box{ border:1px solid #000; }
    
    .bgcolor-orange{ background-color:orange; }
    .bgcolor-purple{ background-color:purple; }
    .bgcolor-gray{ background-color:gray; }
    
    #side{ width:200px; display:inline-block; height:600px; }
    .contents{ display:inline-block; width:988.9px; height:600px;}
    
    </style>
    
</head>
<body>
    <div id="wrap"> 
        
        <tiles:insertAttribute name="header" />
        <tiles:insertAttribute name="side" />
        <tiles:insertAttribute name="content" />
        <tiles:insertAttribute name="footer" />
    </div>
    
</body>
</html>

Header 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<header class="box bgcolor-purple">
    <h2>헤더입니다.</h2>
</header>

Side 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<aside class="box bgcolor-gray" id="side">
    사이드 메뉴입니다.
</aside>  

Footer 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<footer class="box bgcolor-orange">
    <h2>푸터입니다.</h2>
</footer>

home 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<aside class="box bgcolor-gray contents">
    <h2>home 컨텐츠 부분입니다.</h2>
</aside>  

notice 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<aside class="box bgcolor-gray contents">
    <h2>notice 컨텐츠 부분입니다.</h2>
</aside> 

여기까지 JSP 페이지들을 만들어 본 후, 웹 접속을 하면 아래와 같이 초라한 페이지가 나오게 됩니다.  디자인은 나중에 꾸미는 것이므로 중요한게 아니고, 화면을 보면 영역이 나뉘어져 있는 것을 알 수 있습니다.

/home 으로 접속했을 때와 /notice로 접속했을 때의 차이는 바디 영역 뿐인 것을 확인할 수 있습니다.

 

[출처] 스프링과 Tiles 2|작성자 MUSICOVERY