쉽게 쉽게

[Spring] tiles 적용 본문

개발공부/Spring

[Spring] tiles 적용

곱마2 2024. 9. 5. 14:42
반응형

▤ 목차

    1. tiles란?

    공통적으로 사용되는 header/footer와 같은 jsp를 한 곳으로 모아 관리할 수 있도록 해주는 프레임워크이다.

    만약 각 페이지의 header를 직접 입력하고 수정해야 한다면 많은 노동이 필요하지만 tiles에서는 이를 효율적으로 관리해 줄 수 있다. 

    2. tiles 적용 방법

    tiles 적용은 아래 순서로 진행된다.

    tiles 라이브러리 적용 -> dispatcher-servlet.xml (view resolver)수정 -> tiles.xml 생성 ->. jsp 생성 

    1. pom.xml 추가

    <properties>
        <org.apache.tiles-version>3.0.8</org.apache.tiles-version>
    </properties>
    
    <!-- tiles -->
    <dependency>
        <groupId>org.apache.tiles</groupId>
        <artifactId>tiles-core</artifactId>
        <version>${org.apache.tiles-version}</version>
    </dependency>
    
    <dependency>
        <groupId>org.apache.tiles</groupId>
        <artifactId>tiles-servlet</artifactId>
        <version>${org.apache.tiles-version}</version>
    </dependency>
    
    <dependency>
              <groupId>org.apache.tiles</groupId>
              <artifactId>tiles-jsp</artifactId>
              <version>${org.apache.tiles-version}</version>
    </dependency>
    
    <dependency>
        <groupId>org.apache.tiles</groupId>
        <artifactId>tiles-extras</artifactId>
        <version>${org.apache.tiles-version}</version>
    </dependency>

    2. dispatcher-servlet.xml 수정

    <!--tiles ViewResolver-->
    	<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">
    	     <property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView"/>
    	     <property name="order" value="1"/>
    	</bean>
    	<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
    	    <property name="definitions">
    	        <list>
    	            <value>classpath:config/tiles/tiles.xml</value><!-- 경로 classpath로 변경 -->
    	        </list>
    	    </property>
    	</bean>
    	
    	<!--ViewResolver-->
    	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    	     <property name="prefix" value="/WEB-INF/views/"/>
    	     <property name="suffix" value=".jsp"/>
    	     <property name="order" value="2"/>
    	</bean>

    jsp를 불러올때, tiles ViewResolver가 먼저 적용될 수 있도록 우선순위를 정하는 것이 핵심이다.

    기존의 ViewResolver인 InternalResourceViewResolver의 우선순위를 두 번째로 바꿔준다.

    또한 tiles.xml이 위치하는 경로를 적용해줘야 한다. (ex: classpath:config/tiles/tiles.xml)

    3. tiles.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은 변수처럼 사용할 이름을 지정하고 template은 사용할 jsp를 지정 -->
    	<definition name="default_layout" template="/WEB-INF/views/layouts/base/layout.jsp">
    		<put-attribute name="header" value="/WEB-INF/views/layouts/common/header.jsp" />
    		<put-attribute name="content" value=""/>
    		<put-attribute name="left" value="/WEB-INF/views/layouts/common/sidebar.jsp" />
    		<put-attribute name="footer" value="/WEB-INF/views/layouts/common/footer.jsp" />
    	</definition>
    	
        <!-- extends를 통해 설정했던 타일즈를 상속하고 적용될 viewResolver 경로를 지정 -->
        <!-- 즉 controller에서 "common/main" 라는 view를 호출했을 때, 이 tiles 설정이 적용된다. -->
    	<definition name="*/*" extends="default_layout">
        <!-- content부분만 view를 사용하고 나머지 부분(header 등)은 layouts에 속한 파일들을 따른다는 의미 -->
             <put-attribute name="content" value="/WEB-INF/views/{1}/{2}.jsp" />
         </definition>
         
         <definition name="*/*/*" extends="default_layout">
             <put-attribute name="content" value="/WEB-INF/views/{1}/{2}/{3}.jsp" />
         </definition>
        
    	<!--타일즈 미적용 페이지 -->
    	<definition name="empty" template="/WEB-INF/views/layouts/empty/layout.jsp">
    		<put-attribute name="content" 	value="" />
    	</definition>
    	
    	<definition name="*/*.empty" extends="empty">
             <put-attribute name="content" value="/WEB-INF/views/{1}/{2}.jsp" />
         </definition>
         
         <definition name="*/*/*.empty" extends="empty">
             <put-attribute name="content" value="/WEB-INF/views/{1}/{2}/{3}.jsp" />
         </definition>
    	
    </tiles-definitions>

    tiles 적용시키는 과정을 정리하면

     

    1. default_layout라는 tiles template를 만들며, 공통 레이아웃으로 사용할 header, footer 등의 jsp의 경로를 지정한다.
    2. default_layout의 어떤 레이아웃을 사용할지 결정해야한다. 여기서는 content를 제외한 나머지 레이아웃을 적용했다.
    3. name에 어떤 view 경로에 사용될 건지 지정한다. 예를들어 controller에서 "common/main"라는 view를 호출했을 때, name이 */*인 tiles 설정이 적용된다.

    tiles를 미적용하고 싶은 경우에는 controller에서 "common/main.empty"라고 view 경로를 지정해주면 미적용 tiles가 적용되게 된다.

    이를 활용하여 header만 적용되는 tiles, footer만 적용되는 tiles 등을 만들어 알맞게 지정하여 사용할 수 있다.

    4. layout.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="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <!DOCTYPE html>
    <html>
      <head>
    	<meta charset="UTF-8">
    	<meta name="description" content="">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <!-- css 적용 -->
        <link rel="stylesheet" href="resources/css/common/common.css">
      </head>
      
      <body>
      	<div class='wrap'>
      		<tiles:insertAttribute name="header" />
    		  <div class='content'>  	
      			 <tiles:insertAttribute name="left"/>
    	  		<div class="page_content">
    	  			<tiles:insertAttribute name="content"/>
    	  		</div>
      		</div>
      		<tiles:insertAttribute name="footer" />
      	</div>
        
        <!-- 만약 tiles 미적용 layout에는 content만 넣겠다면 아래처럼 하면 된다.  
         각각 필요한 부분만 insert해주면 된다.
        -->
        <%-- 
            <div class='wrap'>
    		 <div class='content'>  	
    	  		<div class="page_content">
    	  			<tiles:insertAttribute name="content"/>
    	  		</div>
      		</div>
      	</div> --%>
      </body>
      
    </html>

    여기서 주의할 점은 name의 값이 tiles.xml에서 정의한 name의 값과 일치해야 한다는 것이다.

    header.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <div class="header">header</div>
    </body>
    </html>

    footer.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <div class="footer">footer</div>
    </body>
    </html>

    side.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <body>
    <div class="side">side</div>
    </body>
    </html>

    common.css

    @charset "UTF-8";
    
    *{
    	margin: 0;
    	padding: 0;
    }
    .wrap{
    	width: 100%;
    }
    
    .header, .content, .footer{
    	width: 100%;
    	float: left;
    }
    
    .header, .footer{
    	height: 8em;
    }
    
    .side{
    	width: 10%;
    	height: 600px;
    	background-color: rgb(190, 214, 231);
    	float: left;
    }
    
    .page_content{
    	width: 90%;
    	height: 600px;
    	background-color: rgb(204, 196, 189);
    	float: left;
    }
    
    .header{
    	background-color: rgb(214, 235, 186);
    }
    
    .footer{
    	background-color: rgb(240, 219, 242);
    }

    tiles 적용 

    tiles 미적용(.empty 붙임)

     

    https://vndn629.tistory.com/14

     

    Tiles(tiles) 적용방법

    Tiles(tiles)란? 웹 페이지의 상단이나 하단, 메뉴와 같은 반복적으로 사용되는 부분들에 대한 정보를 한곳에 모아둔 프레임워크 Tiles(tiles) 적용하기 pox.xml 추가하기 + 메이븐 프로젝트 업데이트하

    vndn629.tistory.com

    https://wjheo.tistory.com/entry/Spring-Spring-Tiles-Framework-%EC%A0%81%EC%9A%A9

     

    [Spring] Spring + Tiles Framework 연동하기

    [난 왜 Tiles Framework 란걸 찾게 되었는가?] jsp파일로 화면을 구성하다보면 header/footer같은 공통적인 소스 들이 존재한다. 공통적인 부분은 jsp파일로 따로 분리하고, 각 화면에 해당하는jsp파일에 hea

    wjheo.tistory.com

    잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다.
    반응형