스프링 타일즈 (Spring Tile) 설정해보기

개인 프로젝트를 하면서 스프링 타일즈를 적용해보았던걸 토대로 작성해봅니다

스프링 타일즈는 

뷰단의 탑,사이드메뉴,하단,메인 등을 페이지 include 방식으로 나누는 

기존구조를 쉽게 적용하기 위한 템플릿 프레임워크입니다

장점은 include 디자인을 변경하면 페이지를 전체적으로 수정해야하는 번거로움을 없애고

일관적인 페이지 관리를 가능하도록합니다

대략적인 순서를 보자면

- pom.xml 에 tiles 관련 dependency 추가

- servlet-context.xml 파일에 타일즈 View Resolver 를 추가

- tiles 관련 설정 xml 추가

- 기본 레이아웃 jsp 추가

입니다.

1. pom.xml dependency 추가

        <properties>
            <!-- .....   -->
            <!-- .....   -->
            <org.apache.tiles-version>3.0.5</org.apache.tiles-version>
        </properties>
        <!-- Tiles -->
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-servlet</artifactId>
            <version>${org.apache.tiles-version}</version>
        </dependency>
         <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-api</artifactId>
            <version>${org.apache.tiles-version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-jsp</artifactId>
            <version>${org.apache.tiles-version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-core</artifactId>
            <version>${org.apache.tiles-version}</version>
        </dependency> 
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-template</artifactId>
            <version>${org.apache.tiles-version}</version>
        </dependency> 

버전은 3.0.5로 맞췄습니다

2.servlet-context.xml 파일에 타일즈 View Resolver 빈 추가

 <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
        <property name="order" value="1" /><!-- 순서를 우선으로 지정 -->
    </bean>
     
    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
        <property name="definitions">
            <list>
                <value>/WEB-INF/tiles/tiles-def.xml</value>
            </list>
        </property>
    </bean>
 
 <!-- order 속성을 사용하는 다른 부분은 2번을 지정해야함 -->

 <property name="order" value="2" />

여기서 중요한 부분은 order 속성을 최우선을 1번으로 지정한 것인데

tiles 를 가장 우선적으로 로드시킨다는 설정이므로

order 속성을 사용하는 다른곳은 설정값을 다르게 줘야합니다

다음 설정에 이유를 설명합니다

3. /WEB-INF/tiles/tiles-def.xml  설정

해당 설정부분은 타일즈 layout을 적용 하는 화면과

적용하지않는 화면(ex :로그인) 을 구분지어 볼것입니다

<?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>
 
    <!-- (1) 레이아웃을 적용하지않는화면-->    
    <definition name=".login" template="/WEB-INF/jsp/tileLayout/loginLayout.jsp">
        <put-attribute name="title" value="" />
        <put-attribute name="header" value="/WEB-INF/jsp/tilesView/header.jsp" />
        <put-attribute name="menu" value="" />        
        <put-attribute name="footer" value="" />
    </definition>
 
    <!-- (2) 레이아웃을 적용하는화면-->
    <definition name=".root" template="/WEB-INF/jsp/tileLayout/baseLayout.jsp">
        <put-attribute name="title" value="" />
        <put-attribute name="header" value="/WEB-INF/jsp/tilesView/header.jsp" />
        <put-attribute name="menu" value="/WEB-INF/jsp/tilesView/menu.jsp" />        
        <put-attribute name="footer" value="/WEB-INF/jsp/tilesView/footer.jsp" />
    </definition>
    
    <!-- (1) -->    
    <definition name="/login/*" extends=".login">
      <put-attribute name="body" value="/WEB-INF/jsp/login/{1}.jsp" />
    </definition>
 
    <!-- (2) -->
   <definition name="/*/*" extends=".root">      
      <put-attribute name="body" value="/WEB-INF/jsp/{1}/{2}.jsp" />
    </definition>
</tiles-definitions>

(1) header 에는 디자인이없는 공통 라이브러리들이 참조 될것이고 로그인 페이지는 header만 참조되었습니다

    경로는 구성에 맞게 설정하면 된다, definition 의 template 속성이 기본적으로 틀이 잡힐 레이아웃 jsp이고

    그곳에 put-attribute를 넣는 방식으로 설정됩니다

    두번째 extends 쪽 definition 을 살펴보면  name 에 매핑을 걸고 해당매핑일때 참조될 jsp의 주소를 가리킵니다

    중요한건 /login/login 라는 매핑이 들어왔을경우 put-attribute의 경로에는 *(에스테리크) 를 {1} 에 넣어줄수있게됩니다

    그러므로 /WEB-INF/jsp/login/login.jsp 를 찾아들어가게됩니다

(2) 사용하지않을 title 같은 디자인은 value를 "" 로 넣어주면 됩니다

    아예 코드줄에서 빼버려도 상관 없을것같긴한데 시도해 보지는 않았습니다

    2번의 매핑은 약간 복잡한데 말그대로 로그인을 제외한 모든루트에 매핑할때 가능한 구조입니다

    예를 들어 /community/community 매핑이 들어올경우 /WEB-INF/jsp/community/community.jsp

    로 치환시킵니다 물론 body의 매핑과 파일명을 맞춰주어야하죠

위의 코드가 완전히 정확한건아니지만 나름대로 이것저것 테스트해보면서 적용해보았던 코드입니다 

여기서 약간 의문이 들어야하는데

보통 톰캣 구동시에 web.xml 의 welcom-file 경로 => 컨트롤러의 @RequestMapping경로를 타는데

타일즈에서 매핑을 쓸수있는 이유는

<property name="order" value="1" />

2번에서 설정한 해당 우선순위 때문입니다

보통은 컨트롤러에서 ViewResolver를 이용해 jsp view를 결정해버리는데 그 우선권을 가로챈 형태인것입니다

작동방식을 이해못하고 처음에 코드만 붙이다가 에러만 뿜어서 고생좀 했습니다

순서를 정리해보자면 이렇습니다.

url 호출 => @ReqeustMapping => Tils ViewResolver => UrlBasedViewResolver

4. 3번의 경로에 JSP 생성

     

    해당 루트로 생성해주시면됩니다

baseLayout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 
<html>
<head>
<title>Explosion</title>
<%@ include file="/WEB-INF/include/include-header.jspf" %>
</head>
<body class="wrapper">
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">        
        <tiles:insertAttribute name="header"/>        
        <tiles:insertAttribute name="menu" />    
    </nav>
     <div id="page-wrapper">
             <div class="row">
                <div class="col-lg-12">    
                    <h1 class="page-header">${setHeader}</h1>
                </div>
            </div>
            <div class="row">                 
                <tiles:insertAttribute name="body" />                                                  
            </div>
          
     </div>
    
 
    <div class="main_footer">
        <div class="main_footer-inner">
            <tiles:insertAttribute name="footer" />
        </div>
    </div>
</body>
</html>

타일즈 태그를 삽입한 모습입니다 jstl과 비슷한 형태입니다

loginLayout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 
<html>
<head>
<title>Example Explosion</title>
<%@ include file="/WEB-INF/include/include-header.jspf" %>
</head>
<body>
                
   <tiles:insertAttribute name="body" />                                                  
    
</body>
</html>

로그인은 메뉴가 필요없으므로 body만 넣은 모습입니다

include-header.jspf 는 공통 라이브러리들이고 레이아웃jsp들에만 include 해놓으면 

다른데에 추가할필요없이 모든화면에 적용됩니다 이점은 매우 편리한것같습니다.

6 컨트롤러

컨트롤러에는 크게 설정할 부분은 없습니다 view를 해당 파일위치에 맞게만 설정해주면 됩니다

package first.main.controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import first.common.dto.CommandMap;
import first.common.util.ScreenResolver;
 
@Controller
@RequestMapping(value="/main")
public class MainController {
        
    @RequestMapping(value= {"/main","/main.do"})
    public ModelAndView openTilesView(CommandMap commandMap, ModelAndView mv) throws Exception{
        mv.setViewName("/main/main");//타일즈 view => 일반 view
        mv.addObject("setHeader", ScreenResolver.resolve(this));
        return mv;
    }
    
}

여기서 setViewName만 설정해놓으면

title header footer menu 4개는 항상 따라다니며 body의 링크를 타게됩니다

테스트를 해보시길 바라며

이상 포스팅마치겠습니다.