타일즈란?
벽면에 타일을 붙이는 것과 같이
웹 페이지의 화면 구성을 나누어 각각의 영역을 다른 타일로 붙일 수 있는 라이브러리 입니다.
주로 Header, Content, nav, right, left, footer 로 나뉘어집니다. 공통된 영역을 Tiles 태그로 구분하여 반복되는 코드를 최소화 할 수 있으며 확장성과 유지 보수에 능합니다.
pom.xml
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-core</artifactId>
<version>3.0.7</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-jsp</artifactId>
<version>3.0.7</version>
</dependency>
spring > appServlet > servlet-context 에
<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>
<beans:bean id="viewResolver" 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"/> // <== value 는 호출 순서를 의미
</beans:bean>
/WEB-INF/tiles > 이 위치에
tiles.xml 파일을 생성해주자.
/WEB-INF/views 에 tiles 폴더를 만들어주자
tilse 폴더에는 이제부터 웹 페이지 각 구역에 맞는 타일을 만들어서 넣어둘 폴더이다.
tiles.xml
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
<definition name="layout-tiles1" template="/WEB-INF/tiles/layout/layout1.jsp">
<put-attribute name="header" value="/WEB-INF/tiles/header.jsp" />
<put-attribute name="content" value="" />
<put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp" />
</definition>
<definition name="*.tiles1" extends="layout-tiles1">
<put-attribute name="content" value="/WEB-INF/views/tiles1/{1}.jsp"/>
</definition>
</tiles-definitions>
컨트롤러에서는 view name을 보내게 되는데
이때 받은 view name을 활용해서 tiles.xml에서
view name에 맞는 definition 을 찾는다.
예를 들면
레이아웃이란 것을 정의하게 되는데 레이아웃의 템플릿은 jsp로 만들어둔다.
layout-tiles1.jsp
</head>
<body>
<div id="mycontainer">
<div id="myheader">
<tiles:insertAttribute name="header" />
</div>
<div id="mycontent">
<tiles:insertAttribute name="content" />
</div>
<div id="myfooter">
<tiles:insertAttribute name="footer" />
</div>
</div>
</body>
</html>
이 레이아웃은 header, contents, footer 를 tiles로 가져오게 된다.
tiles.xml
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
<definition name="layout-tiles1" template="/WEB-INF/tiles/layout/layout1.jsp">
<put-attribute name="header" value="/WEB-INF/tiles/header.jsp" />
<put-attribute name="content" value="" />
<put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp" />
</definition>
<definition name="*.tiles1" extends="layout-tiles1">
<put-attribute name="content" value="/WEB-INF/views/tiles1/{1}.jsp"/>
</definition>
</tiles-definitions>
이때, tiles.xml 에서
layout-tiles1 에 attribute로 header, content, footer를 제공한다고 작성해준다. 그리고 현재 나는 header와 footer는 고정된 jsp를 활용하기에 value에 그 위치를 명시해준다.
하지만 content 의 경우에는 value 값을 따로 명시하지 않았는데
name = "*.tiles1" 이 부분을 설명하자면
우리가 Controller에서 url을 매핑해줄 때 어쩌고.tiles1(원래는 어쩌고.jsp) 이라고 써주면
extends="latout-tiles1" 을 통해 layout-tiles1.jsp를 찾아서 가게 되고 그 때 설정된 value 값에 따른 jsp를 열게된다.
즉, header와 contents 는 고정된 채 여러개의 content용 tiles을 만들어 계속해서 갈아 끼울 수 있는 것이다.