html을 처음 배웠을 때 div를 nav, left, content, footer 등의 id를 부여하여
페이지를 제작하는 방법을 배웠었다.
요즘에는 html5가 거의 표준으로
자리잡아가면서 저것들이 아예 태그로 만들어져 나오기까지 했다.
각 영역을 분리해서 만드는 것은 여러 태그를 관리하기는 쉽지만
파일의 line수가 많아져 태그를
찾는것도 일이 되어버리고,
변경이 많이 일어나지 않는 nav,
footer 등의 코드를 중복하여 계속 넣어주어야 하는 번거로움이 있다.
하지만 tiles를 쓰면 nav, footer등의 역할을 하는 코드를 파일로 저장하여 관리하기때문에
실제 화면의 내용을 담당하는 content
부분만 제작하고, 파일 자체에도 content만
존재하게 된다.
물론 이것을 include를 사용할
수도 있지만 include를 써넣는 것도 일이 되어버리므로..
아무튼..
여러가지 이유로 이전에 만들어두었던
spring 프로젝트에 tiles를 적용해보았다.
사용한 spring 버전은 4.1.0이고, tiles는
3.0.4 이다.
1. tiles 라이브러리 추가를 위해 pom.xml 파일에 아래의 내용을 추가한다.
<!-- tiles lib -->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-core</artifactId>
<version>3.0.4</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-jsp</artifactId>
<version>3.0.4</version>
</dependency>
2. tiles bean 등록을 위해 servlet-context.xml 파일에 아래의 내용을 추가한다.
기본적으로
등록되어있는 org.springframework.web.servlet.view.InternalResourceViewResolver는
일반 jsp 파일로 처리할 경우에 필요하므로 남겨두었다.
<!-- tiles 리졸버 -->
<beans:bean
class="org.springframework.web.servlet.view.tiles3.TilesViewResolver"
/>
<!-- tiles 설정파일
-->
<beans:bean class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
<beans:property
name="definitions">
<beans:list>
<beans:value>/resources/tiles/*.xml</beans:value>
</beans:list>
</beans:property>
</beans:bean>
3. tiles의 레이아웃을 정의한다.
2번에서 tiles
bean 등록시 사용한 경로인 /resources/tiles/ 밑에 tiles.xml 파일을 생성하고
자신이 사용하고자 하는 layout을 정의한다.
<?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">
<!-- Definitions for
Tiles documentation -->
<tiles-definitions>
<!-- Doc index page
description -->
<definition
name="layout" template="/WEB-INF/jsp/layout/layout.jsp">
<put-attribute
name="top" value="/WEB-INF/jsp/layout/top.jsp"/>
<put-attribute
name="left" value="/WEB-INF/jsp/layout/left.jsp"/>
<put-attribute
name="content" value=""/>
</definition>
<definition
name="*" extends="layout">
<put-attribute
name="content" value="/WEB-INF/jsp/{1}.jsp"/>
</definition>
<definition
name="*/*" extends="layout">
<put-attribute
name="content" value="/WEB-INF/jsp/{1}/{2}.jsp"/>
</definition>
<definition
name="*/*/*" extends="layout">
<put-attribute
name="content" value="/WEB-INF/jsp/{1}/{2}/{3}.jsp"/>
</definition>
</tiles-definitions>
나의 경우에는 top, left 네비게이션과
content를 구성할 목적으로 설정을 해주었다.
definition name에는
controller에서 return하는 string을
적어주는 것으로
예를 들어 controller의 return 값이 "user"일 경우라면, /WEB-INF/jsp/user.jsp를 찾아 화면에 표시한다.
따라서 원래의 사용법은 아래와 같다.
<definition
name="user" extends="layout">
<put-attribute name="content"
value="//WEB-INF/jsp/user.jsp"/>
</definition>
그러나 definition name을 위와 같이 '*'로 설정하게 되면 attribute의 value에서
'{1}'과 같이 사용할 수가 있다.
*의 갯수만큼 {1},
{2} 등으로 사용하게 되는데 이를 '와일드카드'라고
한다.
tiles의 장점은 여러개의 layout을 만들어서 필요에 맞게 사용할 수 있다는 점이다.
또한 특정 layout을 사용하지 않을수도 있는데
그런 경우에는 아래와 같이 작성하면 된다.
<definition
name="user/login"
template="/WEB-INF/jsp/user/login.jsp"/>
4. layout.jsp 파일 구성
definition 파일 구성에 제작한 대로 layout.jsp, top.jsp, left.jsp 를 생성해준다.
top.jsp와 left.jsp는
자신의 웹프로젝트에서 사용하고자하는 내용을 넣어서 제작하면 되므로 여기서는 생략하고 layout.jsp만
만들어보도록 하겠다.
layout.jsp에서는 각 페이지들에서 공통으로 사용할 css, js 파일등을 포함시켜준다.
또한 파일 상단에 taglib를 추가해준다.
<%@ taglib
prefix="t" uri="http://tiles.apache.org/tags-tiles"
%>
layout파일에는 html,
head, body 태그를 포함시켜서 만들어주고
top, left, content 등의 파일에서는 바로 내용을 작성하면 된다.
<body>
<div class="navbar
navbar-fixed-top navbar-inverse" role="navigation">
<t:insertAttribute
name="top"/>
</div>
<div
class="container">
<t:insertAttribute
name="left"/>
<t:insertAttribute
name="content"/>
</div>
</body>
위와 같이 작성된 jsp를 포함시킬때에는 <t:inserAttribute>태그를 사용하면 된다.
> 5. 결과보기
5. 결과보기
모든 설정을 마치고나서 css를 적용시키면 페이지 layout이 완성된다.
css를 잘 모르거나, 마땅한것이
없다 싶으면 부트스트랩을 적용하면 된다.
아래는 부트스트랩에서 제공하는 상단과 왼쪽 네비게이션을 적용한 화면이다.
