[SPRING]#71 도서 쇼핑몰 구현 (타일즈 3)

타일즈 레이아웃 정의

웹 애플리케이션에 타일즈를 적용하여 레이아웃 정의 파일의 구조를 알아보고,

각 레이아웃 페이지를 생성하는 방법을 공부해 보겠습니다.

---

기본 레이아웃 정의

레이아웃은 단위 뷰 페이지의 템플릿을 말합니다.

JSP 페이지의 기본 골격을 구성하는 것을 의미합니다.

예를 들어, Menu, Header, Body, Footer 등 속성을 가지는 페이지 레이아웃 구조를 템플릿이라고 합니다.

 

레이아웃을 만들기 위해서 다음과 같이 타일즈에서 제공하는 태그를 사용합니다.

<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>

---

타일즈 레이아웃 정의 파일 만들기

기본 레이아웃을 구성하기 위해서 타일즈 레이아웃 정의 파일을 생성해야 합니다.

타일즈의 구성 요소인 <tiles-definitions>, <definition>, <put-attribute> 등을 사용합니다.

---

<tiles-definitions> 요소

타일즈 레이아웃 정의 파일은 이 태그 안에서 <definition>과 <put-attribute> 요소로 정의합니다.

형식은 다음과 같습니다.

<?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>
...
</tiles-definitions>

---

<definition> 요소

사용자에게 보여지는 웹 페이지의 기본 레이아웃 구조에 대해 각각 템플릿 이름과 

적용할 해당 페이지를 정의합니다.

<tiles-definitions>
    <definition name="기본 템플릿 이름" template="웹 페이지 파일과 위치 경로">
    ...
    </definition>
</tiles-definitions>

<tiles-definitions>
    <definition name="템플릿 이름" extends="기본 템플릿 이름>
    ...
    </definition>
</tiles-definitions>

 

다음은 <definition> 요소의 관련 속성입니다.

속성	설명
name	템플릿 이름 기본 템플릿을 제외하고 컨트롤러 안에 요청 처리 메소드가 반환하는 뷰 페이지 이름과 동일
template	기본 템플릿 파일 이름 (경로 포함)
extends	서브 템플릿에 적용할 기본 템플릿 이름

 

기본 템플릿 이름을 정의하고 해당 템플릿에 적용할 JSP 페이지를 설정하기 위해서는 다음과 같이 작성해줍니다.

<tiles-definitions>
    <definition name="base" template="/WEB-INF/tiles/baseLayout.jsp">
    ...

템플릿 이름은 base이며, 템플릿 페이지는 /WEB-INF/tiles 경로에 있는 baseLayout.jsp 파일입니다.

template 속성 값이 기본 템플릿 페이지를 정의하기 때문에 base는 기본 템플릿 이름이 됩니다.

 

다음은 기본 템플릿을 사용해서 서브 템플릿 이름을 정의하는 예시입니다.

<tiles-definitions>
    <definition name="webpage16_01" extends="base">
    ...

템플릿 이름은 webpate16_01이며, 템플릿 페이지는 기본 템플릿인 base의 레이아웃 구조를 따릅니다.

extends 속성 값의 템플릿은 정의되어 있어야 하며,

name 속성 값은 컨트롤러의 요청 처리 메소드에 매핑하는 요청 처리 경로 및 반환하는 뷰 페이지 이름과 반드시 동일해야 합니다.

 

컨트롤러는 다음과 같이 작성되어야 합니다.

package com.springmvc.chap16;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/webpage16_01")
public class Example01Controller {	

	@GetMapping
	public String showForm() {	
		return "webpage16_01";
	}	
		
}

---

<put-attribute> 요소

레이아웃 구조의 속성 이름과 실제 경로를 포함한 파일이나 문자열을 정의합니다.

<tiles-definitions>
    <definition...>
        <put-attribute name="템플릿 이름" value="문자열 또는 템플릿 파일 이름"/>
        ...

 

다음은 <put-attribute> 요소의 관련 속성입니다.

속성	설명
name	템플릿 내 영역 이름
value	적용할 파일 이름이나 문자열

 

다음은 기본 템플릿 속성으로 title, menu, header, body, footer를 가진 레이아웃 구조에서

각 속성에 해당하는 웹 페이지의 파일 이름 또는 문자열을 설정하는 예시입니다.

<?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>
 
        <!-- base tiles layout add -->
 
	<definition name="base" template="/WEB-INF/tiles/baseLayout.jsp">
         <put-attribute name="title" value="제목" />
     	 <put-attribute name="menu" value="/WEB-INF/tiles/menu.jsp" />
     	 <put-attribute name="header" value="머리말" />
     	 <put-attribute name="body" value="" />
     	 <put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp" />
	</definition>
 
 
 	<definition name="webpage16_01" extends="base">
      <put-attribute name="title" value="타일즈" />
      <put-attribute name="header" value="Chapter16 예제" />
   
      <put-attribute name="body" value="/WEB-INF/views/webpage16_01.jsp" />
   </definition>
 
 
</tiles-definitions>

<put-attribute> 요소의 name 속성 값은 기본 템플릿의 속성 이름입니다.

title과 header는 문자열을 출력하고

menu와 footer는 웹 브라우저에 경로를 포함한 웹 페이지를 출력합니다.

 

---

타일즈 레이아웃 페이지 만들기

타일즈 레이아웃 정의 파일에 설정된 템플릿을 적용한 웹 페이지를 만들기 위해서

<tiles:getAsString> 또는 <tiles:insertAttribute> 요소를 사용합니다.

 

<tiles:getAsString> 요소는 타일즈 레이아웃 정의 파일에 설정된 템플릿 이름에 지정한 값을

웹 브라우저에 그대로 출력합니다.

 

<tiles:insertAttribute> 요소는 JSP 페이지 또는 HTML 등을 출력합니다.

 

형식은 다음과 같습니다.

<tiles:getAsString name="기본 템플릿 속성 이름">
<tiles:insertAttribute name="기본 템플릿 속성 이름">

 

다음은 템플릿 레이아웃 정의 파일에서 설정한 기본 템플릿의 속성 이름으로

웹 페이지의 레이아웃을 작성한 예시입니다.

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>


<html>
<head><title><tiles:getAsString name="title"/></title> </head>
<body>
   <table>
      <tr><td><tiles:insertAttribute name="menu" /></td></tr>
      <tr><td> <tiles:getAsString name="header" /></td></tr>
      <tr><td><tiles:insertAttribute name="body" /> </td> </tr>
      <tr><td><tiles:insertAttribute name="footer" /></td></tr>
   </table>
</body>
</html>

name 속성 값은 기본 템플릿의 속성 이름을 설정합니다.

속성 이름에 해당하는 문자열이나 JSP 페이지가 출력됩니다.

 

예를 들어서 JSP 페이지가 다음과 같다면

<%@ page contentType="text/html; charset=utf-8" %>

<p> Chapter16 : 메뉴입니다 </p>

<hr>
<p>&copy; Chapter16</p>

<%@ page contentType="text/html; charset=utf-8"%>

<html>
<head>
<title></title>
</head>
<body>
<h3>타일즈 예제입니다.</h3>
	
</body>
<html>

라면

 

실행 결과는 다음과 같습니다.