[Spring] 타일즈(Tiles)

suyeon·2022년 7월 29일

목록 보기

4/6

⚡ 타일즈(Tiles)

화면의 레이아웃 기능을 제공하는 오픈 소스 라이브러리
페이지의 jsp들을 상단, 사이드, 메인, 하단을 설정 상태로 include 처리해주는 구조의 템플릿
페이지 레이아웃을 쉽고 단순하게 구현할 수 있음
공통된 레이아웃을 사용하므로 유지 관리가 용이
화면 구성 기본 레이아웃 템플릿 정의, 상속을 통해 대부분 구조를 재사용 가능한 기능 제공
설정 파일을 통한 통합 관리를 통해 확장성 있고 일관된 페이지 구성 관리

🦾 Tiles 실습

새 프로젝트 생성
	- Spring MVC Project > “SpringNonTiles” > “com.test.spring”

1. pom.xml
	- <java-version>1.11</java-version>
	- <org.springframework-version>5.0.7.RELEASE</org.springframework-version>
	- <version>3.5.1</version>
	- <source>1.11</source>
	- <target>1.11</target>
    
	- Project Facets > Java > 11

2. 파일 생성하기
	- com.test.spring > “MainController.java”

	- webapp > resources > “css” > “main.css”

	- views > “inc” > “asset.jsp”
	          inc > “mainmenu.jsp”
	          inc > “submenu_member.jsp”
	          inc > “submenu_admin.jsp”
	          
	- views > “member” > “info.jsp”
	                   > “point.jsp”
	                   
	- views > “admin” > “chart.jsp”
	                  > “preference.jsp”

👉 기본 설정

타일즈 관련 라이브러리 pom.xml 추가

<!-- tiles -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-core</artifactId>
    <version>3.0.8</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.8</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-api</artifactId>
    <version>3.0.8</version>
</dependency>

<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-servlet</artifactId>
    <version>3.0.8</version>
</dependency>

servlet-context.xml 설정

기존 ViewResolver 삭제

<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <beans:property name="prefix" value="/WEB-INF/views/" />
  <beans:property name="suffix" value=".jsp" />
</beans:bean>

Tiles ViewResolver 추가

<!-- Tiles -->
<beans:bean id="tielsViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
    <beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
    <beans:property name="order" value="1" />
</beans:bean>
  
<beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
    <beans:property name="definitions">
      <beans:list>
          <beans:value>/WEB-INF/tiles.xml</beans:value>
      </beans:list>
    </beans:property>
</beans:bean>

/WEB-INF/tiles.xml 파일 만들기
/WEB-INF/views/layout 폴더 만들기
/WEB-INF/views/layout.jsp 파일 만들기

MainController.java 작성

@Controller
public class MainController {

  @GetMapping(value="/test")
  public String test() {
    return "test";
  }
}

기존 ViewResolver
- 뷰 이름 반환 > JSP 검색 > JSP 호출
- "test" > "/WEB-INF/views/" + "test" + ".jsp"
Tiles ViewResolver
- <definition> 이름 반환 -> (ViewResolver > tiles.xml) -> <definition> 검색 -> JSP 검색 -> JSP 호출
- "test" > tiles.xml에서 <definition name="test"> 찾음

package com.test.spring;

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

@Controller
public class MainController {

	@GetMapping(value="/member/info")
	public String info() {
		//회원 > 정보 페이지
		return "member.info";
	}

	@GetMapping(value="/member/point")
	public String point() {
		//회원 > 포인트 페이지
		return "member.point";
	}
	
	@GetMapping(value="/admin/chart")
	public String chart() {
		//관리자 > 차트 페이지
		return "admin.chart";
	}
	
	@GetMapping(value="/admin/preference")
	public String preference() {
		//관리자 > 환경 설정 페이지
		return "admin.preference";
	}
}

tiles.xml 작성 ⭐

디자인은 layout, 조합은 xml에서~
<definition> 태그 1개 -> 레이아웃 페이지 1장
<put-attribute> 레이아웃 페이지(layout.jsp)에서 사용할 조각 페이지에 대한 정의
definition name 와일드카드(*) : 모든 name을 받음
와일드카드로 모든 name을 받고 put-attribute에는 {1}을 작성하면 해당 name이 적용 됨

<?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> 
  
  	<!-- 굉장히 중요한 아이 **** -->
	<!-- 이름, jsp 경로 설정 -->
	<!-- 
		member/info
		member/point
		admin/chart
		admin/preference
	 -->
	<definition name="*.*" template="/WEB-INF/views/layout/layout.jsp">
      	<!-- value: 조각페이지 경로  -->
		<put-attribute name="asset" value="/WEB-INF/views/inc/asset.jsp"></put-attribute>
		<put-attribute name="mainmenu" value="/WEB-INF/views/inc/mainmenu.jsp"></put-attribute>
		<put-attribute name="submenu" value="/WEB-INF/views/inc/submenu_{1}.jsp"></put-attribute>
		<put-attribute name="content" value="/WEB-INF/views/{1}/{2}.jsp"></put-attribute>		
	</definition> 	
  
</tiles-definitions>

3-1. JSP 작성 - layout.jsp ⭐

insertAttribute name 과 tiles.xml에서 설정한 put-attribute name 일치해야 함 ⭐

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tiles</title>
  
<tiles:insertAttribute name="asset"/>
  
</head>
<body>
	<div id="main">
		<tiles:insertAttribute name="mainmenu"/>
		<tiles:insertAttribute name="submenu"/>
		<tiles:insertAttribute name="content"/>
	</div>
</body>
</html>

3-2. 공통 - asset.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<link rel="stylesheet" href="/spring/resources/css/main.css">

3-3. 공통 - mainmenu.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="mainmenu">
	<a href="/spring/member/info">회원</a>
	<a href="/spring/admin/chart">관리자</a>		
</div>

3-4. 회원 - submenu_member.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="submenu">
	<a href="/spring/member/info">정보</a>
	<a href="/spring/member/point">포인트</a>
</div>

3-5. 회원 - info.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<div id="content">
	<h1>회원 <small>정보</small></h1>
	<p>내용입니다.</p>
</div>

3-6. 회원 - point.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="content">
	<h1>회원 <small>포인트</small></h1>
	<p>내용입니다.</p>
</div>

3-7. 관리자 - submenu_admin.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="submenu">
		<a href="/spring/admin/chart">차트</a>
		<a href="/spring/admin/preference">환경설정</a>
</div>

3-8. 관리자 - chart.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div id="content">
	<h1>관리자 <small>차트</small></h1>
	<p>내용입니다.</p>
</div>

3-9. 관리자 - preference.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div id="content">
	<h1>관리자 <small>환경설정</small></h1>
	<p>내용입니다.</p>
</div>

css작성 - main.css

#main {
	width: 800px;
	margin: 0 auto;
}


#mainmenu {
	background-color: orange;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}


#submenu {
	background-color: gold;
	height: 600px;
	width: 200px;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column; /* 세로 방향 */
}

#content {
	background-color: cornflowerblue;
	height: 600px;
	width: 600px;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;	
	flex-direction: column;
}

#main::after {
	content: '';
	display: block;
	clear: both;
}

a {
	text-decoration: none;
	margin: 5px;
}

🦾 Tiles 실습2

전체적인 틀이 바뀔때마다 layout, definition 만들어야함

- layout > "one.jsp", "two.jsp", "three.jsp" 파일 만들기

MainController.java

package com.test.spring;

@Controller
public class MainController {
	
	@GetMapping(value="/member/info")
	public String info() {
		//회원 > 정보 페이지
		return "one.member.info";
	}

	@GetMapping(value="/member/point")
	public String point() {
		//회원 > 포인트 페이지
		return "two.member.point";
	}
	
	@GetMapping(value="/admin/chart")
	public String chart() {
		//관리자 > 차트 페이지
		return "three.admin.chart";
	}
	
	@GetMapping(value="/admin/preference")
	public String preference() {
		//관리자 > 환경 설정 페이지
		return "admin.preference";
	}
}

tiles.xml

<definition name="one.*.*" template="/WEB-INF/views/layout/one.jsp">
  <put-attribute name="content" value="/WEB-INF/views/{1}/{2}.jsp"></put-attribute>
</definition>

  
<definition name="two.*.*" template="/WEB-INF/views/layout/two.jsp">
  <put-attribute name="mainmenu" value="/WEB-INF/views/inc/mainmenu.jsp"></put-attribute>
  <put-attribute name="content" value="/WEB-INF/views/{1}/{2}.jsp"></put-attribute>
</definition>	

  
<definition name="three.*.*" template="/WEB-INF/views/layout/three.jsp">
  <put-attribute name="mainmenu" value="/WEB-INF/views/inc/mainmenu.jsp"></put-attribute>
  <put-attribute name="submenu" value="/WEB-INF/views/inc/submenu_{1}.jsp"></put-attribute>
  <put-attribute name="content" value="/WEB-INF/views/{1}/{2}.jsp"></put-attribute>
</definition>

3-1. one.jsp

taglib prefix="tiles" 필수

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>1단 구조</h1>
	
	<tiles:insertAttribute name="content"/>
</body>
</html>

3-2. two.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>2단 구조</h1>
	
	<table>
		<tr>
			<td><tiles:insertAttribute name="mainmenu"/></td>
			<td><tiles:insertAttribute name="content"/></td>
		</tr>
	</table>
</body>
</html>

3-3. three.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>3단 구조</h1>
	
	<table>
		<tr>
			<td><tiles:insertAttribute name="mainmenu"/></td>
		</tr>
		<tr>
			<td><tiles:insertAttribute name="content"/></td>
		</tr>
		<tr>
			<td><tiles:insertAttribute name="submenu"/></td>
		</tr>
	</table>
</body>
</html>

suyeon

이전 포스트

[Spring] MyBatis - CRUD

다음 포스트

[Spring] 타일즈(Tiles)

Spring

⚡ 타일즈(Tiles)

🦾 Tiles 실습

👉 기본 설정

🦾 Tiles 실습2

[Spring] MyBatis - CRUD

[Spring] Annotation 정리

0개의 댓글