웹개발 tiles 설정하기

이 글은 

https://dzzienki.tistory.com/66

Eclipse Dynamic Web Project로 Spring Maven 프로젝트 만들기

이 포스팅의 마지막 부분에서 이어집니다.

 

tiles 라는 것은 말 그대로 화면을 조각들로 분할하여 사용할 수 있도록 도와주는 프레임워크 입니다.

예를들어 인터넷 카페나 블로그 등을 생각 해 보시면

화면이 상단메뉴, 좌측 혹은 우측 메뉴, 콘텐츠 부분, 하단메뉴

이렇게 나누어져 있는 것을 보신 적이 있으실 겁니다.

그걸 각각의 jsp 로 나누어 관리하기 편하도록 도와주는 툴이 바로 tiles 입니다.

 

타일즈를 사용하기 위해선 우선 pom.xml 에 다음 dependency 를 추가해주셔야 합니다.

 

코드는 아래쪽의 것을 복사하시면 되구요

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<!-- tiles -->     <dependency>         <groupId>org.apache.tiles</groupId>         <artifactId>tiles-jsp</artifactId>         <version>3.0.8</version>     </dependency>          <dependency>         <groupId>org.apache.tiles</groupId>         <artifactId>tiles-servlet</artifactId>         <version>3.0.8</version>     </dependency>          <dependency>         <groupId>org.apache.tiles</groupId>         <artifactId>tiles-extras</artifactId>         <version>3.0.8</version>     </dependency>     <!-- /tiles -->               <dependency>         <groupId>javax.servlet</groupId>         <artifactId>jstl</artifactId>         <version>1.2</version>     </dependency> Colored by Color Scripter

cs

그 다음으로는 

src/main/resources/spring/servlet-context.xml 에

아래의 내용을 추가해주셔야 합니다.

코드는 아래의 것을 복사하시면 됩니다.

1 2 3 4 5 6 7 8 9 10 11 12 13

<!-- 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>             <beans:bean id="tilesViewResolver" 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 --> Colored by Color Scripter

cs

 

다음은 tiles 의 설정 파일을 만들어 주어야 합니다.

위의 <beans:value>/WEB-INF/tiles/tiles.xml</beans:value>

이부분에 보시면 WEB-INF아래에 tiles라는 폴더 아래에 tiles.xml

이라는 파일 안에 설정파일을 넣어주겠다 라는 뜻이니

저 경로에 정확하게 파일을 tiles.xml 이라는 파일을 만들어 주시고

아래와 같이 작성을 해 줍니다.

코드 내용은 아래 코드를 복사하시면 됩니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<?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>       <!-- 메뉴 표시 -->     <definition name="base" template="/WEB-INF/tiles/template.jsp">         <put-attribute name="left"   value="/WEB-INF/tiles/left.jsp" />         <put-attribute name="header" value="/WEB-INF/tiles/header.jsp" />         <put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp" />     </definition>       <definition name="*.page" extends="base">         <put-attribute name="body" value="/WEB-INF/jsp/{1}.jsp" />     </definition>        <definition name="*/*.page" extends="base">          <put-attribute name="body" value="/WEB-INF/jsp/{1}/{2}.jsp" />      </definition>          <definition name="*/*/*.page" extends="base">         <put-attribute name="body" value="/WEB-INF/jsp/{1}/{2}/{3}.jsp" />     </definition>               <!-- 메뉴 미표시 -->     <definition name="baseEmpty" template="/WEB-INF/jsp/templateEmpty.jsp">     </definition>          <definition name="*.part" extends="baseEmpty">         <put-attribute name="body" value="/WEB-INF/jsp/{1}.jsp" />     </definition>        <definition name="*/*.part" extends="baseEmpty">          <put-attribute name="body" value="/WEB-INF/jsp/{1}/{2}.jsp" />      </definition>          <definition name="*/*/*.part" extends="baseEmpty">         <put-attribute name="body" value="/WEB-INF/jsp/{1}/{2}/{3}.jsp" />     </definition>              </tiles-definitions> Colored by Color Scripter

cs

위의 tiles.xml 에 작성한

 template="/WEB-INF/tiles/template.jsp"

attribute name="left"   value="/WEB-INF/tiles/left.jsp"

attribute name="header" value="/WEB-INF/tiles/header.jsp"

attribute name="footer" value="/WEB-INF/tiles/footer.jsp"

 

이부분을 보시면 템플릿 파일은 WEB-INF/tiles/폴더 아래에 template.jsp 에,

left, header, footer 파일은 각각 WEB-INF/tiles/ 폴더 아래에

left.jsp, header.jsp, footer.jsp

에 설정해 두겠다고 명시해 두었습니다.

그러니 파일 구조를 보시면

 

 

위와 같은 파일 구조가 되도록 각각의 파일들을 생성해 주시면 됩니다.

 

그리고 template.jsp 에는 아래와 같이

코드는

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

<%@ page language="java" contentType="text/html; charset=EUC-KR"     pageEncoding="EUC-KR"%> <%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %> <!DOCTYPE html>   <html>     <head>         <meta charset="EUC-KR">         <title>Insert title here</title>         <style>             #header{                             width:100%;                 height:50px;                 text-align: center;                 line-height: 50px;                 background-color: #61868e;             }             #left{                 float:left;                  width:15%;                  text-align: center;                 background-color: #d78b7d;             }             #main{                 float:left;                  width:85%;                 background-color: #f9f3e3;             }             #footer{                 width: 100%;                 height: 50px;                             text-align: center;                 background-color: #cfc8b5;                 clear:both;             }              #left, #main{                     min-height: 700px;              }          </style>     </head>     <body>         <div style="width:100%; height:100%;">         <div id="header"><tiles:insertAttribute name="header" /></div>         <div id="left"><tiles:insertAttribute name="left" /></div>         <div id="main"><tiles:insertAttribute name="body" /></div>             <div id="footer"><tiles:insertAttribute name="footer" /></div>         </div>           </body> </html> Colored by Color Scripter

cs

그리고 header.jsp, left.jsp, footer.jsp 에는 각각 아래와 같이 만들어 주시면 됩니다.

 

아래의 코드의 div 안의 내용만 바꾸시면 될 것 같습니다.

1 2 3 4

<%@ page language="java" contentType="text/html; charset=EUC-KR"     pageEncoding="EUC-KR"%> <!DOCTYPE html> <div>왼쪽 메뉴</div> Colored by Color Scripter

cs

 

그럼 이제 tiles 를 사용하기 위한 기본적인 설정 파일들은 다 만들고 설정을 마친 것입니다.

물론 세세한 설정들은 손을 봐야겠지만 큰 틀을 잡고 가는데에는 문제가 없습니다.

그럼 이제 tiles를 테스트 해 보기 위해

mainController.java 에

아래와 같이 추가해줍니다.

코드는 

1 2 3 4 5 6 7 8

/**      * Tiles 사용      */             @RequestMapping(value="/testTiles.do")     public String testPage() {         System.out.println("tiles Test!");         return "main/tilesTest.page";     } Colored by Color Scripter

cs

위에 있구요

 

보통 타일즈를 사용할 때 상단메뉴 왼쪽 메뉴 아래쪽 메뉴를 고정시켜놓고 content 부분인 내용만 바꿔가며 사용하는 경우가 많습니다. 그 content 는 위의 return 에 명시한 대로

WEB-INF/jsp 폴더의 main폴더 아래에 tilesTest.jsp 를 만들고

아래와 같이 코드를 작성해줍니다.

1 2 3 4 5 6 7 8 9 10 11 12

<%@ page language="java" contentType="text/html; charset=EUC-KR"     pageEncoding="EUC-KR"%> <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <body> 타일즈 테스트 </body> </html> Colored by Color Scripter

cs

그리고 나서 서버를 실행시킨 뒤

http://localhost:8080//testTiles.do 에 접속해 보시면

 

위와 같이 각각의 tiles 들이 정해놓은 위치에 생성되어 있는 것을 보실 수 있습니다.

 

여기까지가 tiles 기본 설정 방법이었습니다.