본문 바로가기
프로그래밍/스프링프레임워크

Apache Tiles 설정하기

by pentode 2018. 4. 1.

 

앞의 글 "Spring + Apache Tiles 설치하기" 에서는 타일즈가 적용될 모든 페이지를 tiles.xml 설정파일에서 적어서 처리했습니다. 실제 사용시에는 페이지가 많으므로 이렇게 처리할 수 없을 것입니다. 그러므로 페이지를 고정해서 지정하는것이 아니라 패턴을 주어서 처리할 수 있습니다.

 

컨트롤러에서 뷰를 지정하는 부분을 보겠습니다. (HomeController.java 파일)

 

@RequestMapping(value = "/boardList.do")
public String boardList(Model model) throws Exception {
    ....
    return "boardList";
}

 

뷰를 지정하기 위해서 "boardList" 를 반환하고 있습니다. 이것은 tiles.xml 의 설정에 따라 /WEB-INF/view/boardList.jps 파일에 맵핑됩니다.

 

<definition name="boardList" extends="base-definition">
    <put-attribute name="title" value="List" />
    <put-attribute name="body" value="/WEB-INF/views/boardList.jsp" />
</definition>

 

이제 base-definition 외에 다른 항목을 삭제하고 그 설정을 다음과 같이 바꿔 보도록 하겠습니다. (위 이름이 base-definition 은 고정된 값이 아닙니다. layout 등 편한 값으로 변경하여도 됩니다.)

 

<definition name="*" extends="base-definition">
    <put-attribute name="title" value="Welcome" />
    <put-attribute name="body" value="/WEB-INF/views{1}.jsp" />
</definition>

 

이제 name 이 "*" 로 변경되었습니다. 그러면 들어오는 모든 값을 {1} 로 치환을 하게 됩니다. 수정하기 전과 동일한 결과가 되고, 페이지마다의 설정은
하나로 처리가 되었습니다.


이제 구조를 좀더 확장해보겠습니다. 컨트롤러의 요청 URL 이 "/info/info01.do" 가 되었습니다. 뷰를 찾기 위한 반환 값은 "info/info01" 입니다. 뷰 페이지는 "/WEB-INF/views/info/info01.jsp" 파일 입니다.

 

@RequestMapping(value = "/info/info01.do", method = RequestMethod.GET)
public String info01(Model model) {
    return "info/info01";
}

 

"*" 부분에 반환값이 대치되면 잘 처리될것 같지만, 실행해보면 레이아웃이 적용이 안되는것을 알 수 있습니다.


다음 설정을 추가 합니다.

 

<definition name="*/*" extends="base-definition">
    <put-attribute name="title" value="Welecom" />
    <put-attribute name="body" value="/WEB-INF/views/{1}{2}.jsp" />
</definition>

 

이제 실행해 보면 잘 동작을 합니다. "info/info01" 은 각각 {1}과 {2} 에 맵핑이 되었습니다. 이제 디렉토리가 더 확장이 되더라도 필요한 패턴을 추가하면 될것입니다.


위 예제 에서 "*/*" 을 "/WEB-INF/views/{1}/{2}.jsp" 로 맵핑하였는데, 반드시 name과 동일한 패턴을 사용해야 하는것은 아닙니다.

 

기본 base-definition 외에 템플릿을 하나 더 추가해서 테스트 해보겠습니다.

 

 

1. tiles.xml에 다음 내용을 추가합니다. 메뉴가 없는 템플릿을 추가했습니다.

 

<definition name="no-menu"
   template="/WEB-INF/views/tiles/layouts/noMenuLayout.jsp">
   <put-attribute name="header" value="/WEB-INF/views/tiles/template/defaultHeader.jsp" />
   <put-attribute name="body" value="" />
   <put-attribute name="footer" value="/WEB-INF/views/tiles/template/defaultFooter.jsp" />
</definition>

<definition name="/nomenu/*/*" extends="no-menu">
   <put-attribute name="title" value="{2}" />
   <put-attribute name="body" value="/WEB-INF/views/{1}.jsp" />
</definition>

 

이번에는 페이지 지정에서 "/nomenu/*/*" 을 사용했습니다. 여기에서 첫 번째 "*""/WEB-INF/views/{1}.jsp" 에 맵핑되고, 두 번째 "*"<put-attribute name="title" value="{2}" /> 의 타이틀에 맵핑됩니다.


 

2. 템플릿 파일 입니다. (/WEB-INF/views/tiles/layouts/noMenuLayout.jsp)

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><tiles:getAsString name="title" /></title>
<link href="<c:url value='/resources/css/layout-nomenu.css' />" rel="stylesheet"></link>
</head>
<body>
    <header id="header">
        <tiles:insertAttribute name="header" />
    </header>

    <section id="siteContent">
        <tiles:insertAttribute name="body" />
    </section>

    <footer id="footer">
        <tiles:insertAttribute name="footer" />
    </footer>
</body>
</html>

 

 

3. 메뉴 없는 스타일시트 파일 입니다.(/resources/css/layout-nomenu.css)

 

* {
    margin:0;
    padding:0;
}

#header {
    background-color: gray;
}

#siteContent {
    min-height: 200px;
    padding-left: 10px;
    background-color: white;
}

#footer {
    background-color:gray;
    height: 30px;
}

 

 

4. 컨텐츠 파일 입니다.(/WEB-INF/views/noMenu.jsp)

 

<%@ page pageEncoding="UTF-8"%>
<h1>메뉴 없는 페이지!</h1>

 

 

5. 컨트롤러에 추가합니다.

 

@RequestMapping(value = "/noMenu.do", method = RequestMethod.GET)
public String noMenu(Model model) {
    return "/nomenu/noMenu/This is Title";
}

 

 

6. 실행 결과 입니다.

 

타일즈 메뉴 없는 설정 적용결과

 

이 예제에서 템플릿을 더 추가하여 여러개의 템플릿을 사용하는 방법과 와일드 카드(*) 를 더 유연하게 사용하는 방법을 알아 봤습니다.

 

추가로 컨트롤러의 반환값에 의해 템플릿을 동적으로 선택하는 방법도 있습니다.

 

- 타일즈 설정 추가

<definition name="/dynamic/*/*" template="/WEB-INF/views/tiles/layouts/{1}Layout.jsp">
    <put-attribute name="title" value="{2}" />
    <put-attribute name="header" value="/WEB-INF/views/tiles/template/defaultHeader.jsp" />
    <put-attribute name="body" value="/WEB-INF/views/{1}.jsp" /> 
    <put-attribute name="footer" value="/WEB-INF/views/tiles/template/defaultFooter.jsp" /> 
</definition>

 

- 컨트롤러 메소드 추가

@RequestMapping(value = "/dynamic.do", method = RequestMethod.GET)
public String dynamic(Model model) {
     return "/dynamic/noMenu/This is Title";
}

 

이 예제는 직접 해 보시기 바랍니다.

반응형