티스토리 뷰

Work/Framework

Tiles-framework에 대한 개요 및 사용방법

헐보 2012. 12. 11. 10:27

Tiles-framework에 대한 개요 및 사용방법

 

Struts 1.1 Tiles-framework에 대한 개요 및 사용방법

  스트럿츠의 타일즈는 일반적인 JSP의 INCLUDE 구문과 많은 부분이 닮아있다. 하지만 INCLUDE 구문은 각각의 JSP 페이지마다

 <%@  include file=”../*.jsp” %> 사용해서 페이지 리소스의 재 사용 성을 높인다. 하지만 이 경우 LAYOUT 에 조정이 필요한경우

 모든 페이지의 구성을 수동으로 바꾸어 주어야 하는 단점이 있다.

 타일즈에서는 이를 최상단에 layout을 설정한 템플릿을 두고 이를 이용하여 레이아웃의 변경만으로 모든 페이지를 변경할 수 있도록 하여

 재 사용성 을 높인다.

 

✳ tiles가 가진 기능을 살펴보면 다음과 같다.

 1. tiles에 대한 식별을 한 후 그것을 기술하고 당신의 화면형태로 조립하여 사용할 수 있다.

 2. 이미 기술된 레이아웃에 대하여 재사용 및 템플릿을 관리할 수 있다.

 3. 화면 단에 대한 tiles의 선언 및 정의를 할 수 있으며, 파라미터 값을 통하여 struts에서 넘어온 값을 변경시킬 수 있다.

 4. 새로운 레이아웃 생성 및 객체지향의 상속개념을 통하여 불필요한 선언을 필요없게 만든다.

 5. 국제화에 대한 tiles를 생성하여 처리할 수 있다.

 

 ✳ Tiles 설정

 strut-config.xml파일 tilse대한 로딩이 가능하도록 구성

<?xml version="1.0" encoding="ISO-8859-1" ?>

<!DOCTYPE struts-config PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 1.2//EN"

"http://jakarta.apache.org/struts/dtds/struts-config_1_2.dtd">

<struts-config>

<form-beans>

</form-beans>

<global-exceptions>

</global-exceptions>

<global-forwards>

<forward name="index" path="/index.do"/>

<forward name="index2" path="/index2.do"/>

</global-forwards>

<action-mappings>

<action path="/index" forward="/index.jsp"/>

<action path="/index2" forward="/index2.jsp"/>

</action-mappings>

<controller processorClass="org.apache.struts.tiles.TilesRequestProcessor"/>

<message-resources parameter="resources.application" />

</struts-config>

<struts-config.xml>

 

 ✳ 기본 레이아웃에 대한 설정

 레이아웃 : 모든 페이지에 기본적으로 표시될 HTML 태그들과 반복 적으로 사용되는 부분들이 어디에 위치해야 할지를 정의한

                JSP 파일이다.

 우선 아래와 같은 형태의 화면 레이아웃이 나왔다고 가정을 하자

Header

Menu

Body

Footer

  보통의 header에는 기업의 로고 또는 대분류메뉴들이 들어가게 되며, 거의 바뀌지 않는 내용이 대부분이며, 왼쪽편의 menu파트, 아래쪽의 footer(보통 copyright) 또한 바뀌지 않는 부분 이라구 생각해도 된다. 위의 layout에서 가장 많이 변동되는 부분은 당연히 body부분이 될 것이다.

 

✳ Page안에서의 Tiles조립

1. main layout에 관련한 화면구성

main layout에 관련한 화면구성의 html template를 먼저 작성해보도록 하자.

이것은 웹디자이너와도 상의를 하여야 할 것이며, 전체 프로젝트에서 화면에 대한 프로토타이핑이 이루어진 시점에서 구성이 되어도 무방할 것이다

<table border='1' width='300'>

<tr>

<td colspan='2' bgcolor='#bcb8e0'>Header

</td>

</tr>

<tr height='200'>

<td width='60' bgcolor='#ffa45f'>Menu

</td>

<td bgcolor='#ffffff'>Body</td>

</tr>

<tr>

<td colspan='2' bgcolor='#d5aad5'>Footer

</td>

</tr>

</table>

<sample>


 위의 html형태와 이미 본 그림처럼 설정을 했었는데 위의 각 영역에 붙일 수 있는 tiles를 선언해 보도록 하자.

 우선 아래와 같이 tiles taglib를 사용할 수 있도록 먼저 prefix에 대한 선언을 한후

  <%@ taglib uri="/WEB-INF/tld/struts-tiles.tld" prefix="tiles" %>

 아래와 같이 각각의 영역에 들어갈 attribute들에 대한 선언을 하도록 한다.

  <tiles:insert attribute=”body” flush=”true” />

 

 최종적으로 taglib가 포함되어 변경된 html source를 보게 되면

<TABLE width="100%">

<TR>

<TD colspan="2"><tiles:insert attribute="header" /></TD></TR>

<TR>

<TD width="120"><tiles:insert attribute="menu" /></TD>

<TD><tiles:insert attribute="body" /></TD></TR>

<TR>

<TD colspan="2"><tiles:insert attribute="footer" /></TD>

</TR>

</TABLE>

<sample>


위와 같이 선언된다면 각각의 영역에 그 대표 이름을 붙임으로서 tiles:insert에 대한 tag library가 호출되면 해당 클래스가 config에서 이미 설정된 value를 이용하여 포함된 jsp파일을 각 영역에 include시키는 방법을 사용하고 있다

 

2. Page안에서의 html page title 세팅

<head>

<title><tiles:getAsString name="title"/></title>

</head>

<sample>

 

3. 최종 Layout 페이지 구성

완성된 템플릿 페이지는 아래와 같다.

<%@ taglib uri="/WEB-INF/tld/struts-tiles.tld" prefix="tiles" %>

<html>

<head>

<title><tiles:getAsString name="title"/></title>

</head>

<body>

<TABLE width="100%" height="100%">

<TR>

<TD colspan="2" height="10%"><tiles:insert attribute="header" /></TD></TR>

<TR>

<TD width="120" height="80%"><tiles:insert attribute="menu" /></TD>

<TD><tiles:insert attribute="body" /></TD></TR>

<TR>

<TD colspan="2" height="10%"><tiles:insert attribute="footer" /></TD>

</TR>

</TABLE>

</body>

</html>

<classicLayout.jsp>

 

화면을 구성할 수 있는 layout페이지가 조립이 되었다.

위의 페이지의 이름을 "/layout/classicLayout.jsp"라고 저장한다.

 

4. 기본적인 template삽입방법

layout페이지가 정의되었을 때 그 페이지의 실제 보여지게 각각의 페이지가 어떤 것인지를 알려주어 삽입하도록 하게 하는 방법이다.

위에서 템플릿 파일의 이름을 classicLayout.jsp라고 정의했고, 아래의 파일이름은 실제 최초요청이 들어왔다는 가정으로 index_Tiles.jsp라고 하자.

<%@page contentType="text/html;charset=MS949" %>

<table cellpadding=0 cellspacing=0 border=0 bgcolor=#986933 width=100% height=100%>

<tr>

<td width=100% height=100% align=center valign=middle><font size=5>top</font></td>

</tr>

</table>

<top.jsp>


<%@page contentType="text/html;charset=MS949" %>

<table cellpadding=0 cellspacing=0 border=0 bgcolor=#1e41c4 width=100% height=100%>

<tr>

<td width=100% height=100% align=center valign=middle><font size=5>bottom</font></td>

</tr>

</table>

<bottom.jsp>


<%@page contentType="text/html;charset=MS949" %>

<table cellpadding=0 cellspacing=0 border=0 bgcolor=#24a43c width=100% height=100%>

<tr>

<td width=100% height=100% align=center valign=middle><font size=5>left</font></td>

</tr>

</table>

<left.jsp>


<%@page contentType="text/html;charset=MS949" %>

<table cellpadding=0 cellspacing=0 border=0 bgcolor=#eeeeee width=100% height=100%>

<tr>

<td width=100% height=100% align=center valign=middle><font size=5>main</font></td>

</tr>

</table>

<main.jsp>


<%@ taglib uri='/tags/struts-tiles' prefix='tiles' %>

<tiles:insert page="/layout/classicLayout.jsp" flush="true">

<tiles:put name="title" value="HuLBO Test Tilse" />

<tiles:put name="header" value="/layout/top.jsp" />

<tiles:put name="footer" value="/layout/bottom.jsp" />

<tiles:put name="menu" value="/layout/left.jsp" />

<tiles:put name="body" value="/layout/main.jsp" />

</tiles:insert>

<WEB-INF/conf/tiles-defs.xml>

 

위의 프로그램처럼 호출을 하게 되면 tiles의 기본동작은 /layout/classicLayout.jsp를 템플릿으로

기본으로 하여 처음에 설정된 attribute에 해당하는 put name="title"의 값인 value="HuLBO Test Tilse"를 classicLayout으로 전달하여 title을 설정하고, include되어질 수 있는 페이지는 tiles:put name=

"header" value="/layout/top.jsp"처럼 header영역에 뿌려질 값이 /layout/top.jsp 임을 선언하여 넘길 수가 있다.

 

 <test화면>

 그런데 위의 방법이 편한가? 만약 layout을 이용한 페이지가 프로젝트 규모에 따라서 수백본이 될텐데 header, menu, footer의 경우처럼 같은 페이지가 삽입된다고 했을 경우 불필요한 copy-paste가 나타나게 되는 건 불을 보듯 뻔한 일이다.

그렇다면 재사용에 대한 효용성을 극대화시키기 위하여 어떤 방법을 사용하면 될까?

Tiles에서는 xml파일을 이용하여 layout을 definition할 수 있는 방법을 사용함으로서 같은 부분에 대한 내용을 재사용할 수 있는 효과적인 방법을 제공한다.

저작자표시
공유하기 링크
댓글