tiles

타일즈는 웹 페이지의 상단이나 하단 메뉴,사이드 같이 반복적으로 사용되는 부분들에 대한 코드를 분리해서 관리를 가능하게 해주는 프레임워크이며 재사용이 가능하다는 장점과 디자인을 변경한다면 전체view단을 변경하는 것이 아니라 tiles로 설정한 view단만 변경하면된다.

차례대로만 해보세요

1. pom.xml <dependency> 추가하기

<!-- tiles 설정 -->
		<dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-extras</artifactId>
            <version>3.0.7</version>
        </dependency>
		<dependency>
			<groupId>org.apache.tiles</groupId>
			<artifactId>tiles-servlet</artifactId>
			<version>3.0.7</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
		<dependency>
		    <groupId>org.apache.tiles</groupId>
		    <artifactId>tiles-jsp</artifactId>
		    <version>3.0.7</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-core -->
		<dependency>
		    <groupId>org.apache.tiles</groupId>
		    <artifactId>tiles-core</artifactId>
		    <version>3.0.7</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-api -->
		<dependency>
		    <groupId>org.apache.tiles</groupId>
		    <artifactId>tiles-api</artifactId>
		    <version>3.0.7</version>
		</dependency>

 

2. /WEB-INF/views 경로 또는 원하는 경로에 footer.jsp, header.jsp, layout.jsp, menu.jsp, content.jsp파일을 생성한다. 그 후 layout.jsp 파일에만 아래 코드를 붙혀넣는다. 그리고 content.jsp 에는 중앙에 나올 내용을 입력한다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<style type="text/css">
#header {
	width: 100%;
	height: 50px;
	text-align: center;
	background-color: aqua;
}

#menu {
	float: left;
	width: 15%;
	background-color: gray;
}

#content {
	float: left;
	width: 85%;
	background-color: lime;
}

#footer {
	width: 100%;
	height: 50px;
	text-align: center;
	background-color: orange;
	clear: both;
}

#menu, #content {
	min-height: 600px;
}
</style>
</head>

<body>

<div style="width:100%; height:100%;">
    <div id="header"><tiles:insertAttribute name="header" /></div>
    <div id="menu"><tiles:insertAttribute name="menu" /></div>
    <div id="content"><tiles:insertAttribute name="content" /></div>    
    <div id="footer"><tiles:insertAttribute name="footer" /></div>
</div>

</body>
</html>

 

 

3. 원하는 경로(경로1)에 tiles.xml 생성후 붙혀넣기  

<?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>
    <definition name="rayout" template="layout.jsp경로">
		<put-attribute name="header" value="header.jsp경로"/>
		<put-attribute name="menu" value="menu.jsp경로"/>
		<put-attribute name="body" value=""/>
		<put-attribute name="footer" value="footer.jsp경로"/>
	</definition>
    
    <definition name="contoller단에서 return에 써줄 맵핑[맵핑1]" extends="rayout">
		<put-attribute name="body" value="content.jsp경로(항상 바뀔 view단)" />
	</definition>
	
	
	
	
</tiles-definitions>

 4.  servlet-context.xml에 설정해주기

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans
	xmlns="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

	<!-- DispatcherServlet Context: defines this servlet's request-processing 
		infrastructure -->

	<!-- Enables the Spring MVC @Controller programming model -->
	<annotation-driven />

	<!-- Handles HTTP GET requests for /resources/** by efficiently serving 
		up static resources in the ${webappRoot}/resources directory -->

	<resources mapping="/resources/**" location="/resources/" />

 <!-- 타일즈 경로 -->
	<beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
	    <beans:property name="definitions">
	        <beans:list>
	       resources안에 있다면<beans:value>classpath:경로/tiles.xml</beans:value> 
           webapp안에있다면     <beans:value>/WEB-INF/tiles.xml경로</beans:value> 둘중에 하나만 쓰세요
	        </beans:list>
	    </beans:property>
	</beans:bean>
	  <!-- 타일즈를 컨트롤단에서 첫번째로 인지하겠다는 코드 -->
	<beans:bean id="tilesViewResolver" 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>

	<!-- Resolves views selected for rendering by @Controllers to .jsp resources 
		in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
		<beans:property name="order" value="2" />
	</beans:bean>
	
	<context:component-scan base-package="spring.com" />
	
	

</beans:beans>

 

 

 

 

 

5. contorller 단에 return 값 입력하기

package spring.com.main.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import spring.com.main.service.MainSeriveImpl;

@Controller
public class MainController {

	
	@Autowired
	private MainSeriveImpl mainSeriveImpl;
	
	
	@RequestMapping(value="/", method = RequestMethod.GET)
	public String layout(Model model) {
		
		
		return "[맵핑1]";
	}
}

 

복사했습니다!