Spring Tiles 설정

Tiles는 레이아웃의 재사용성 높여주고 동적으로 배치시켜 줄 수 있는 신기한 라이브러리 입니다.

타일즈를 사용하면 뷰의 종류에 따라 레이아웃 배치를 동적으로 구성할 수 있는데요,

간단하게 설명을 드리면

이런식으로 뷰 마다 레이아웃 구성이 달라지게 되는데, 이럴 경우에 jsp 뷰 페이지 마다 미리 만들어 놓은 컴포넌트들(메뉴바, Footer..)을 일일이 include 시켜줘야 하는 노가다가 필요합니다.

노가다로 include 시킨 후에도 문제가 있습니다. 기존에 삽입시켰던 메뉴바의 이름을 변경하거나 아예 빼야한다면? 몇 페이지 정도는 괜찮을 지 몰라도 수십 페이지가 넘어가는 프로젝트에서는 정말 끔직하겠죠.

타일즈를 쓰면 레이아웃 배치를 결정하는 템플릿을 만들어, 구현하려는 뷰에 상속시킵니다.

그러면 하위 뷰에서는 반복되는 레이아웃은 타일즈가 알아서 주입 시켜주고, 달라지는 부분만 구현하면 되는 것이죠.

그리고 필요한 부분만 jsp 뷰페이지를 주입 시키면 됩니다.

예시를 더 들어보면,

이런 레이아웃 형식의 웹사이트를 구성한다고 치면, 보통 메뉴바와 Footer는 뷰 마다 계속 반복되게 됩니다.

이때 타일즈를 사용하면 메뉴바와 Footer는 직접 넣을 필요 없이 알아서 타일즈가 주입시켜 주며, 개발자는 계속 바뀌는 본문 부분만 작성하여 주입 시켜주면 됩니다.

• 중요! 타일즈는 spring 3.2 이상부터 사용 가능하니 이 점 유의해 주시기 바랍니다.

우선 메이븐 저장소로 가서 라이브러리 모듈을 pom.xml에 선언합니다.

<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-core -->
<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-jsp</artifactId>
<version>${org.apache.tiles-version}</version>

그리고 ViewResolver를 따로 선언 해 주어야 합니다. 서블릿 컨텍스트가 정의된 곳에 뷰 리졸버를 추가 해 주고, 설정 파일의 경로를 잡아줍니다.


<!-- Tiles 뷰 리졸버 -->
<beans:bean id="tielsViewResolver"
    class="org.springframework.web.servlet.view.UrlBasedViewResolver">
    <beans:property name="viewClass"
        value="org.springframework.web.servlet.view.tiles3.TilesView" />
    <beans:property name="order" value="1" />
</beans:bean>
 
<!-- Tiles 설정 파일 -->
<beans:bean id="tilesConfigurer"
    class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
    <beans:property name="definitions">
        <beans:list>
            <beans:value>/WEB-INF/tiles/tiles.xml</beans:value>
        </beans:list>
    </beans:property>
</beans:bean>

타일즈 설정 파일에는 들어오는 요청 URL에 따라 다른 템플릿을 적용시키도록 정의할 수 있습니다.

WEB-INF 폴더 아래에 tiles 폴더를 만들어 줍니다.

tiles 폴더에는 컴포넌트들을 저장할 component, 템플릿을 저장할 layout 폴더를 만들어줍니다.

아래는 기본적인 타일즈 설정파일 DTD 입니다.

<?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="basic" template=""></definition>
 
</tiles-definitions>

이번 예시에는 header와 footer를 만들어 레이아웃을 정의하는 예시를 만들어 보겠습니다.

구조는 아래와 같습니다

<div style="background-color : gray; width:100%">
 
<h1>Hello ! I am Header!</h1>
 
</div>

-- header.jsp

<div style="background-color : gray; width:100%">
 
<h1>Hello ! I am Footer!</h1>
 
</div>

-- footer.jsp

<div style="width:100%">
 
<h1>Content!</h1>
 
</div>

-- content.jsp

<?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="basic" template="/WEB-INF/tiles/layout/basicTemplate.jsp">
        <put-attribute name="header"
            value="/WEB-INF/tiles/component/header.jsp" />
        <put-attribute name="footer"
            value="/WEB-INF/tiles/component/footer.jsp" />    
    </definition>
 
    <definition name="*/*" extends="basic">
        <put-attribute name="content"
            value="/WEB-INF/views/{1}/{2}.jsp" />
    </definition>
 
 
 
</tiles-definitions>

-- tiles.xml

tiles 설정 파일에는 template으로 설정한 jsp 파일에 주입할 컴포넌트들을 정의해 주고, 리턴되는 컨트롤러에서 리턴되는 뷰의 경로에 따라 적용될 template과 뷰가 주입될 경로를 설정 해 줍니다.

우리가 이번에 작성한 뷰 파일은 views/view/content.jsp 파일입니다.

 @RequestMapping(value = "") 
 public String hi(){
 
    return "view/content";
}
 

컨트롤러에서 리턴되는 경로는 view/content 입니다.

타일즈에서 설정한 뷰 리졸버가 이 리턴되는 경로를 캐치하여 tiles 설정에 정의한 URL 패턴이 있는지 확인합니다.

그리고 URL 패턴이 일치하면, 정의된 미리 정의된 템플릿에 맞게 뷰 페이지를 주입하여 줍니다.

실행시키면...

이렇게 template 안에 정의한 대로 뷰 페이지들이 배치되어 나옵니다.