스프링 tiles(타일즈) 설정하기

이번 글에서는 스프링에서 타일즈을 설정하는 방법을 알아보겠습니다.

 

1. [pom.xml] -> 타일즈 관련 dependency 추가

<dependencise>
	다른 디펜던시들~
    ~~
    ~~
	<!-- tiles 관련 라이브러리 -->
		<dependency>
			<groupId>org.apache.tiles</groupId>
			<artifactId>tiles-core</artifactId>
			<version>2.2.2</version>
		</dependency>
		<dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-extras</artifactId>
            <version>2.2.2</version>
          </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-servlet</artifactId>
            <version>2.2.2</version>
        </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-api</artifactId>
		    <version>2.2.2</version>
		</dependency>
        
        
</dependencies>

 

2. [servlet-context.xml] -> 타일즈 관련 설정

   - 이 설정은 웹 요청이 들어올 때, 뷰리졸버로 요청에 맞는 페이지를 호출하는 설정입니다.

   - 지금 뷰리졸버에 대한 설정을 1번으로 해줬는데, 이는 기존의 뷰리졸버에 의한 작동이 아닌 타일즈 작동을 위해

     뷰리졸버의 순서를 지정한 것입니다. 

   - 나는 스프링 3.x.x 버전으로 사용하고 있는데, dependency를 m2에서 지우고 받아봐도 maven library에 tiles3가

     없고, tiles2만 있다. 따라서 나는 밑에 class경로가 tiles3인 곳들을 다 tiles2로 바꿨다.

   - 혹시 안되는 분들은 maven library 찾아보고, 현재 파일에서 class 참조가 되는지 확인하는 방법은 class이름에

     ctr+커서를 갖다 대서 손가락 모양으로 이동이 가능하면, 참조 가능한 것이고, 의존성이 주입된 것이다. 

<?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/" />

	<!-- Tiles -->
    <beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
        <beans:property name="definitions">
            <beans:list>
                <beans:value>/WEB-INF/tiles/default-layout.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.tiles2.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="com.sts.example" />
	
	<context:property-placeholder location="classpath/*.properties"/>
	
	
	
</beans:beans>

 

 

3. [default-layout.xml] -> 타일즈 레이아웃에 관한 설정

   - 어떤 요청에 어떻게 페이지를 구성할지에 대한 틀을 짜는 설정입니다.

   - 이 설정에따라 하나의 jsp 파일로 한 페이지를 구성할 수도 있고, 여러개의 jsp파일로 한페이지를 구성할 수 도 있습       니다.

   - 아래 xml의 template과 value값은 내가 설정하고싶은 jsp파일들의 프로젝트 주소입니다.

   - *.tiles라는 값으로 컨트롤러에서 넘어오면, 아래 코드의 첫번 째 <definition>의 content의 value에 파라미터로 넘어

     온 *에 해당하는 값이 {1}에 들어가게 되는데, 경로는 유동적으로 변하므로 */*/*.tiles라고 설정했다면, 아래 value에       는 {1}/{2}/{3}.jsp 이렇게 써주시면 됩니다.

<?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="layouts-tiles" 			template="/WEB-INF/views/default-layout.jsp">
	  	<put-attribute name="head"    			value="/WEB-INF/views/default-header.jsp" />
	  	<put-attribute name="content"    	value="" />
	  	<put-attribute name="footer"    		value="/WEB-INF/views/default-footer.jsp" />
	</definition>
	
	<definition name="*.tiles"  				extends="layouts-tiles">
	  	<put-attribute name="content"    	value="/WEB-INF/views/{1}.jsp" />
	</definition>
</tiles-definitions>

 

4. [default-layout.jsp] -> 타일즈 관련 jsp 매칭

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE html>
<html>
	<head>
	    <tiles:insertAttribute name="header"/>
	</head>
	<body>

		<!--nav-->
		<div >
		    <tiles:insertAttribute name="nav"/>
		</div>
		<!--/nav-->
		
		<div class="container">
		    <tiles:insertAttribute name="content"/>
		</div>
		
		
		<!--footer-->
		<div >
		    <tiles:insertAttribute name="footer"/>
		</div>
		<!--/footer-->
		
	</body>
</html>

 

5. 각 페이지

[default-header.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
	
<meta charset="UTF-8">
<title>Board List</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/base.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css">

[default-nav.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
	
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/" class="navbar-brand" style="text-decoration:none;">
                <img src="/images/spring_boot_gray.png" class="img-rounded" style="display:inline-block;height:100%;margin-right:5px" />
                <span style="vertical-align:middle;">Spring Community Web</span>
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/logout">LOGOUT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

[default-footer.jsp]

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

<footer class="footer">
    <div class="container">
        <p>Copyright 2017 young891221. All Right Reserved. Designed by ssosso</p>
    </div>
</footer>

[main.jsp]

  - 메인 페이지는 지난번 mvc 게시글에서 사용한 게시판 템플릿을 사용하였다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<div class="page-header">
        <h1>게시글 목록</h1>
    </div>

    <div class="pull-right" style="width: 100px; margin: 10px 0;">
        <a href="/board" class="btn btn-primary btn-block">등록</a>
    </div>

    <div>
        <table class="table table-hover">
            <thead>
	            <c:forEach var="board" items="${boardList}">
	            	<tr>
	            		<td>
	            			<c:out value="${board.index}"/>
	            		</td>
	            		<td>
	            			<c:out value="${board.board_type}"/>
	            		</td>
	            		<td>
	            			<a href="'/board?index=' + <c:out value='${board.board_type}'/>" >
	            				<c:out value="${board.title}"/>
	            			</a>
	            		</td>
	            		<td>
	            			<c:out value="${board.created_date}"/>
	            		</td>
	            		<td>
	            			<c:out value="${board.updated_date}"/>
	            		</td>
	            	</tr>
	            </c:forEach>
            </thead>
        </table>
    </div>