Back-end/DEV notes

Tiles 타일즈란 ?

cheersHena 2019. 4. 24. 10:27
반응형

타일즈란? Tiles  

  • 반복적으로 사용되는 header, footer와 같은 정보를 한곳에 모아둔 프레임워크.
  • 화면 기본 구성 레이아웃 템플릿 정의하고 상속을 통하여 대부분 구조를 재사용할 수 있는 기능 및 설정파일을 통한 통합 관리를 통하여 확장성 있고 일관되게 페이지 구성을 관리한다.

관련 용어)

Template는 페이지의 구조를 기술하고 Attribute는 구조내에서 실제 내용에 해당하며, 

definition은 Template(구조)에 Attribute(내용)을 연결하여 랜더링가능한 페이지를 기술한다.

  • Template : 페이지 레이아웃을 의미하며, jsp 파일로 페이지의 기본 골격을 구성하고 각 페이지의 실제 구성 내용은 definition에서 설정되는 Attribute(실제 내용) 태그를 사용하여 런타임 시 뿌려준다. └ template 또는 definition Attribute 추가:   <tiles:insertAttribute name="속성명" />
  • └ string 타입 Attribute 추가:   <titles:getAsString name="속성명"/> 
  • Attribute : Template의 빈 공간을 채우기 위하여 사용되는 정보로 3가지 타입으로 구성 └ template : 템플릿 내 또 일부의 레이아웃을 기술할 수도 있다. 
  • └ definition : 전체 혹은 일부 Attribute 들이 실제 내용으로 채워진 페이지, 페이지 구조(Template)와 레이아웃 내부를 채울 정보(Attribute)가 같이 정의된 페이지를 의미

  • └ string: 직접 출력 할 문자열. ex. title 
  • Definition : 사용자에게 제공되기 위하여 랜더링되는 Template과 Attribute들을 연결

1 pom.xml 에 dependency 추가

<dependency> 
 	<groupId>org.apache.tiles</groupId> 
    <artifactId>tiles-jsp</artifactId> 
    <version>2.2.2</version> 
 </dependency>
 <dependency> 
   <groupId>org.apache.tiles</groupId> 
   <artifactId>tiles-template</artifactId> 
   <version>2.2.2</version> 
 </dependency> 

모든 view들은 tiles를 정의한 tiles설정파일의 definition 들에서 binding 될 view 파일(jsp 등)들을 찾게 된다.

만약 각 view 설정 xml에서 view 파일을 못찾게 된다면 다음 우선순위인 InternalResourceViewResolver에서 해당 view 파일을 찾게 된다.

 

2 applicaitonContext.xml

<!-- Tiles ViewResolver --> 
<bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
  <property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView"/> 
  <property name="order" value="1"/> //우선순위 1 - 타일즈 설정 
</bean> 

<!-- JSP ViewResolver --> 
<bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 
  <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/> 
  <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> 
  <property name="order" value="2"/> //우선순위 2 - jsp설정 
</bean> 



3 tile설정파일 xml (test-layout.xml)

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN" "http://tiles.apache.org/dtds/tiles-config_2_1.dtd"> 
<tiles-definitions> 
    <definition name="test-layout" template="/WEB-INF/jsp/layout/test_layout.jsp" preparer="testPreparer"> 
        <put-attribute name="title" value="test" /> 
        <put-attribute name="header" value="/WEB-INF/jsp/common/header.jsp" /> 
        <put-attribute name="static"/> 
        <put-attribute name="menu" /> 
        <put-attribute name="body" /> 
        <put-attribute name="bottom" value="/WEB-INF/jsp/common/bottom.jsp" /> 
    </definition> //기본적인 defiinition 태그 
    <definition name="test1/**/*" extends="test-layout">
        <put-attribute name="static" value="/WEB-INF/jsp/test1/test-static.jsp"/>
        <put-attribute name="menu" value="/WEB-INF/jsp/test1/test_menu.jsp" />
        <put-attribute name="body" value="/WEB-INF/jsp/test1/{1}/{2}.jsp" /> 
    </definition> //deficition을 상속(extends)받아 여러 타일즈를 만들 수 있다. 
</tiles-definitions> 

 

* definition name 형식
   -  ? : 한 글자
   -  * : 모든글자 
   -  [abc] : abc로 시작



4 layout.jsp (sysman_layout.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page language="java"%> 
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %> 
<!DOCTYPE HTML> <html lang="${ language }"> 
<head> 
    <title><tiles:getAsString name="title"/></title> 
  <!-- 각 기능 static : start --> 
    <tiles:insertAttribute name="static" ignore="true"/> 
  <!-- 각 기능 static : end --> 
</head> 

<html>
  <body> 
    <div class="all"> 
    <!-- top 메뉴 시작 --> 
      <tiles:insertAttribute name="header" />
    <!-- top 메뉴 끝 -->

    <div class="wrap"> 
         <!-- 왼쪽 메뉴 시작 -->
         <div class="left_area"> 
              <tiles:insertAttribute name="menu" /> 
         </div> 
        <!-- 왼쪽 메뉴 끝 --> 

        <!-- 메인(바디) 시작 --> 
        <div class="body"> 
             <tiles:insertAttribute name="body" />
        </div> 
       <!-- 메인 끝 -->
    </div> 

    <!-- Footer Start --> 
    <tiles:insertAttribute name="bottom" />
    <!-- Footer End --> 
    </div> 
  </body> 
</html> 

만들고자 하는 틀을 html형식으로 만들어준다.

insertAttribute name 은 tiles설정파일에서 설정한 put-attribute name 과 일치해야한다.



5 Contoller Mapping 추가

@RequestMapping("list.do") 
public String testList(HttpSession session, HttpServletRequest request, HttpServletResponse response, 
				@ModelAttribute("testForm") TestForm form, ModelMap model) { 
      

        model.addAttribute("testForm", form); 

	return "test1/test2/test_list"; 
        
        } 

Controller의 return 값과 definition에서 정의한 name이  반드시!  일치해야 해당 타일즈를 탄다.

list.do를 매핑하여 해당 url 호출 시, test1/test2/test_list 를 return한다.

 

이 경로는 tiles설정파일의

<definition name="test1/**/*" extends="test-layout"> 
    <put-attribute name="static" value="/WEB-INF/jsp/test1/test_static.jsp"/> 
    <put-attribute name="menu" value="/WEB-INF/jsp/test1/test_menu.jsp" /> 
    <put-attribute name="body" value="/WEB-INF/jsp/test1/{1}/{2}.jsp" /> 
</definition> 

의 경로와 일치하므로, 다음설정에 따라 : test2 , : test_list 가 되고

최종적으로 "/WEB-INF/jsp/test1/test2/test_list.jsp" 페이지 view를 불러오게 된다.



6 최종 View

(다시 한번 강조) deficition name과 Contoller의 return 경로가 반드시 일치해야한다! 

슬래시(/) 주의!!!! 왜냐하면 슬래시 하나 못봐서 하루온죙일 삽질한 1인 ..... ㅠ 

우선순위1인 타일즈에 일치하는 경로가 없다면 다음 우선순위인 jsp ViewResolver 설정(위의 2번 applicationContext설정에 해놓은 )을 통해 /WEB-INF/jsp/ (return경로) .jsp 페이지를 찾아가게 될 것이다.

즉, 컨트롤러에서 return에 (return경로) 입력해 주어야 함. 








반응형