Tiles는 Sitemesh 와 함께 잘 알려진 JSP 레이아웃 프레임워크이다.
예전에는 웹에서 프레임을 나누려고 하면 frameset, frame 테그를 가지고
직접 나누어 주어야 했고 해당 프레임에 페이지를 변경하기도 번거럽고 해깔렸다(나만???).
이제는 그렇게 직접 프레임을 나눌 필요가 없이 레이아웃 프레임워크를 사용하면
어디에 무엇을 보여줄지를 효과적으로 간편하게 설정할 수가 있다.
스트러츠에도 포함되어 있기도 해서 널리 알려진 Tiles를 이번에 잠시 다뤄볼 기회가 있었다.
필요한 라이브러리는 직접 Tiles 사이트에 가서 다운 받았으나 Struts 에도 포함이 되어 있다.
Tiles 사이트 바로가기 ==> http://tiles.apache.org/
Tiles의 최신버전은 포스팅 시점을 기준으로 v2.1.3 이다.
테스트를 위해서는 JDK와 이클립스, 톰캣을 설치하여 연동이 되어 있어야 한다.
설치가 되어 있지 않은 분들은 아래의 링크를 참조하기 바란다.
2009/08/27 - [Java/Spring] - [Spring]이클립스에 스프링 프레임워크 개발 준비하기...
이클립스를 실행한 후 "Dynamic Web Project"를 새로 생성한다.
/WEB-INF/lib 폴더에 아래의 라이브러리들을 복사해준다.
프로젝트의 폴더 구조는 아래와 같다.
JSP 웹 프로젝트를 할 경우 가장 중요한 설정 파일인 "/WEB-INF/web.xml" 파일을 아래와 같이 수정한다.
어려운 설정은 하나도 없다. 물론 간단히 맛만 보는 수준이라 그런 것이겠지만...
위에 보면 "Tiles configuration file" 이라고 해서 "/WEB-INF/tiles-defs.xml" 파일이 지정되어 있는 것을 볼 수 있다.
그리고 아래에는 "tiles_dispatcher"라는 이름으로 Dispatcher 설정을 해놓고 "*.tiles" 패턴의 요청을 처리하도록 해놓고 있다.
이번에는 "/WEB-INF/tiles-defs.xml" 파일을 열어보기에 앞서서 "/WEB-INF/jsp/layout.jsp" 파일을 먼저 보도록 하자.
jsp 을 올렸더니 이상하게도 제대로 표시가 안되서 이미지로 캡쳐해서 올린다.
"/WEB-INF/jsp/layout.jsp" 파일은 웹사이트의 전체 틀이라고 생각하면 된다.
어찌보면 frameset 과도 비슷한거 같기도 한데...
첫번째 라인에서 "tiles" 라는 접두어로 tiles의 테그라이브러리를 지정해준다.
html 파일에서 title 을 보여주는 부분에는 "title"이라는 이름으로 "getAsString" 테그가 들어가 있다.
그리고 전체 틀을 테이블로 만들고 각 위치에 "header", "menu", "body", "footer"라는 이름으로
"insertAttribute" 테그를 삽입해 놓았다.
그럼 이번에는 "/WEB-INF/tiles-defs.xml" 파일을 보도록 하자.
"tiles-definition" 테그 안에 "definition" 테그가 세개 들어 있는 것을 볼 수 있다.
"definition" 테그에는 "name" 속성을 통해서 이름을 지정하고
"template" 속성에서 아까 만들어 놓은 "/WEB-INF/jsp/layout.jsp" 파일을 지정해 주었다.
"extends" 속성을 이용해서 다른 "definition"을 그대로 상속 받을 수도 있다.
template의 각 부분에 보여질 페이지는 "put-attribute" 테그로 지정해 줄 수 있다.
"example/test1"의 경우 template를 지정해 놓고 template가 되는 페이지에서 지정해 놓은
각 영역에서 보여줄 텍스트 또는 페이지를 지정해 주고 있다.
각각의 호출은 "http://서버주소:포트/프로젝트명/definition명.tiles"로 호출할 수 있다.
"example/test2"는 "example/test1"를 상속 받아서 template 페이지의 "body" 부분의 페이지만 따로 지정해 주고 있다.
"example/wildcard/*"의 경우처럼 와일드카드 문자의 사용도 가능한데 이것은 value 속성에 있는 "{1}", "{2}", "{3}" 등의
문자와 순서대로 매칭되어 해석이 된다.
사용해보니 웹프로젝트시 매우 간편하게 레이아웃 관리가 가능할 것 같다는 생각이 든다.
나에게 언제 웹프로젝트가 떨어질지는 의문이지만...
예전에는 웹에서 프레임을 나누려고 하면 frameset, frame 테그를 가지고
직접 나누어 주어야 했고 해당 프레임에 페이지를 변경하기도 번거럽고 해깔렸다(나만???).
이제는 그렇게 직접 프레임을 나눌 필요가 없이 레이아웃 프레임워크를 사용하면
어디에 무엇을 보여줄지를 효과적으로 간편하게 설정할 수가 있다.
스트러츠에도 포함되어 있기도 해서 널리 알려진 Tiles를 이번에 잠시 다뤄볼 기회가 있었다.
필요한 라이브러리는 직접 Tiles 사이트에 가서 다운 받았으나 Struts 에도 포함이 되어 있다.
Tiles 사이트 바로가기 ==> http://tiles.apache.org/
Tiles의 최신버전은 포스팅 시점을 기준으로 v2.1.3 이다.
테스트를 위해서는 JDK와 이클립스, 톰캣을 설치하여 연동이 되어 있어야 한다.
설치가 되어 있지 않은 분들은 아래의 링크를 참조하기 바란다.
2009/08/27 - [Java/Spring] - [Spring]이클립스에 스프링 프레임워크 개발 준비하기...
이클립스를 실행한 후 "Dynamic Web Project"를 새로 생성한다.
/WEB-INF/lib 폴더에 아래의 라이브러리들을 복사해준다.
commons-beanutils-1.8.0.jar
commons-digester-2.0.jar
commons-logging-1.1.1.jar
tiles-api-2.1.3.jar
tiles-core-2.1.3.jar
tiles-jsp-2.1.3.jar
tiles-servlet-2.1.3.jar
commons-digester-2.0.jar
commons-logging-1.1.1.jar
tiles-api-2.1.3.jar
tiles-core-2.1.3.jar
tiles-jsp-2.1.3.jar
tiles-servlet-2.1.3.jar
프로젝트의 폴더 구조는 아래와 같다.
JSP 웹 프로젝트를 할 경우 가장 중요한 설정 파일인 "/WEB-INF/web.xml" 파일을 아래와 같이 수정한다.
Tiles configuration file org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG /WEB-INF/tiles-defs.xml tiles_dispatcher org.apache.tiles.web.util.TilesDispatchServlet tiles org.apache.tiles.web.startup.TilesServlet 2 tiles_dispatcher *.tiles
어려운 설정은 하나도 없다. 물론 간단히 맛만 보는 수준이라 그런 것이겠지만...
위에 보면 "Tiles configuration file" 이라고 해서 "/WEB-INF/tiles-defs.xml" 파일이 지정되어 있는 것을 볼 수 있다.
그리고 아래에는 "tiles_dispatcher"라는 이름으로 Dispatcher 설정을 해놓고 "*.tiles" 패턴의 요청을 처리하도록 해놓고 있다.
이번에는 "/WEB-INF/tiles-defs.xml" 파일을 열어보기에 앞서서 "/WEB-INF/jsp/layout.jsp" 파일을 먼저 보도록 하자.
jsp 을 올렸더니 이상하게도 제대로 표시가 안되서 이미지로 캡쳐해서 올린다.
"/WEB-INF/jsp/layout.jsp" 파일은 웹사이트의 전체 틀이라고 생각하면 된다.
어찌보면 frameset 과도 비슷한거 같기도 한데...
첫번째 라인에서 "tiles" 라는 접두어로 tiles의 테그라이브러리를 지정해준다.
html 파일에서 title 을 보여주는 부분에는 "title"이라는 이름으로 "getAsString" 테그가 들어가 있다.
그리고 전체 틀을 테이블로 만들고 각 위치에 "header", "menu", "body", "footer"라는 이름으로
"insertAttribute" 테그를 삽입해 놓았다.
그럼 이번에는 "/WEB-INF/tiles-defs.xml" 파일을 보도록 하자.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN" "http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd">
<TILES-DEFINITIONS>
<DEFINITION name="example/test1" template="/WEB-INF/jsp/layout.jsp">
<PUT-ATTRIBUTE name="title" value="Apache Tiles 2.1.3 Example..." />
<PUT-ATTRIBUTE name="header" value="/WEB-INF/jsp/example/header.jsp" />
<PUT-ATTRIBUTE name="menu" value="/WEB-INF/jsp/example/menu.jsp" />
<PUT-ATTRIBUTE name="body" value="/WEB-INF/jsp/example/body1.jsp" />
<PUT-ATTRIBUTE name="footer" value="/WEB-INF/jsp/example/footer.jsp" />
</DEFINITION>
<DEFINITION name="example/test2" extends="example/test1">
<PUT-ATTRIBUTE name="body" value="/WEB-INF/jsp/example/body2.jsp" />
</DEFINITION>
<DEFINITION name="example/wildcard/*" extends="example/test1">
<PUT-ATTRIBUTE name="body" value="/WEB-INF/jsp/example/wildcard/{1}.jsp" />
</DEFINITION>
</TILES-DEFINITIONS>
<< SyntaxHighlighter에서 DOCTYPE지시자가 삭제되는 오류가 있어서 수정하였습니다. >><!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN" "http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd">
<TILES-DEFINITIONS>
<DEFINITION name="example/test1" template="/WEB-INF/jsp/layout.jsp">
<PUT-ATTRIBUTE name="title" value="Apache Tiles 2.1.3 Example..." />
<PUT-ATTRIBUTE name="header" value="/WEB-INF/jsp/example/header.jsp" />
<PUT-ATTRIBUTE name="menu" value="/WEB-INF/jsp/example/menu.jsp" />
<PUT-ATTRIBUTE name="body" value="/WEB-INF/jsp/example/body1.jsp" />
<PUT-ATTRIBUTE name="footer" value="/WEB-INF/jsp/example/footer.jsp" />
</DEFINITION>
<DEFINITION name="example/test2" extends="example/test1">
<PUT-ATTRIBUTE name="body" value="/WEB-INF/jsp/example/body2.jsp" />
</DEFINITION>
<DEFINITION name="example/wildcard/*" extends="example/test1">
<PUT-ATTRIBUTE name="body" value="/WEB-INF/jsp/example/wildcard/{1}.jsp" />
</DEFINITION>
</TILES-DEFINITIONS>
"tiles-definition" 테그 안에 "definition" 테그가 세개 들어 있는 것을 볼 수 있다.
"definition" 테그에는 "name" 속성을 통해서 이름을 지정하고
"template" 속성에서 아까 만들어 놓은 "/WEB-INF/jsp/layout.jsp" 파일을 지정해 주었다.
"extends" 속성을 이용해서 다른 "definition"을 그대로 상속 받을 수도 있다.
template의 각 부분에 보여질 페이지는 "put-attribute" 테그로 지정해 줄 수 있다.
"example/test1"의 경우 template를 지정해 놓고 template가 되는 페이지에서 지정해 놓은
각 영역에서 보여줄 텍스트 또는 페이지를 지정해 주고 있다.
각각의 호출은 "http://서버주소:포트/프로젝트명/definition명.tiles"로 호출할 수 있다.
<< "example/test1" 가 호출된 결과 >>
"example/test2"는 "example/test1"를 상속 받아서 template 페이지의 "body" 부분의 페이지만 따로 지정해 주고 있다.
<< "example/test2" 가 호출된 결과 >>
"example/wildcard/*"의 경우처럼 와일드카드 문자의 사용도 가능한데 이것은 value 속성에 있는 "{1}", "{2}", "{3}" 등의
문자와 순서대로 매칭되어 해석이 된다.
<< "example/wildcard/*" 가 호출된 결과 >>
사용해보니 웹프로젝트시 매우 간편하게 레이아웃 관리가 가능할 것 같다는 생각이 든다.
나에게 언제 웹프로젝트가 떨어질지는 의문이지만...