tiles 화면 레이아웃관리

brave_chicken·2024년 5월 5일

Spring 잇(IT)생 챌린지

잇(IT)생 챌린지

목록 보기

42/90

[tiles를 이용해서 화면 레이아웃 관리하기]

외부 라이브러리

1) pom.xml에 라이브러리를 추가

springmvc/pom.xml

<!-- tiles라이브러리 -->
		<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
		<dependency>
		    <groupId>org.apache.tiles</groupId>
		    <artifactId>tiles-jsp</artifactId>
		    <version>3.0.8</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-servlet -->
		<dependency>
		    <groupId>org.apache.tiles</groupId>
		    <artifactId>tiles-servlet</artifactId>
		    <version>3.0.8</version>
		</dependency>

2) tiles를 사용하기 위해서 설정파일을 만들고 레이아웃 템플릿을 등록

=> 템플릿등록
=> 각 뷰에 대한 정보를 등록

main-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>
 	<!-- 템플릿을 등록 
 		name : 등록하는 템플릿의 이름(파일명과 상관없이 내가 정의하는 이름)
 		template : 실제 템플릿으로 만들어놓은 파일의 경로와 파일명
 		<put-attribute>엘리먼트를 이용해서 템플릿을 구성하는 각 영역의 이름을 정의하고
 		각 영역에 기본으로 연결될 뷰파일을 정의
 			name속성 : 각 영역에 대한 이름을 정의(사용자정의)
 			value속성 : 각 영역에 연결될 뷰(jsp)의 파일 경로와 이름
 	-->
 	<definition name="mainTemplate" template="/WEB-INF/layout/mainTemplate.jsp">
 		<put-attribute name="top" value="/WEB-INF/include/top.jsp"/>
 		<put-attribute name="menu" value="/WEB-INF/menu/board_menu.jsp"/>
 		<put-attribute name="content" value="/WEB-INF/include/content.jsp"/>
 	</definition>
 	
 	<!-- 실제 응답할 뷰의 정보를 등록 
 		name:컨트롤러에서 사용할 뷰의 이름
 		extends:응답할 뷰를 만들기 위해서 사용할 템플릿의 이름
 		=> index는 첫번째 화면이라 템플릿을 교체하지 않고 그대로 사용
 			만약 교체하고 싶은 영역이 있으면 
 	-->
 	<definition name="tiles/index" extends="mainTemplate">
 	
 	</definition>
 </tiles-definitions>

3) 템플릿 jsp파일의 각 영역에 뷰를 연결하기 위해서 tiles 설정파일에 정의한 내용과 연결하는 작업

=> 템플릿이 될 jsp파일을 만들고 각 레이아웃을 정의
=> tiles설정파일에 등록한 영역이 실제 템플릿파일의 어느 위치에 어떤 영역을 연결하는지 설정하는 작업
=> tiles에서 제공하는 외부 태그를 사용해서 작업

mainTemplate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!-- tiles의 설정파일에 등록된 각 영역이 실제 어느 위치에 연결할 것인지 지정하는 작업을 tiles에서 제공하는 태그 -->
<!-- 외부라이브러리를 등록해서 태그를 사용할 수 있도록 정의 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- top영역 -->
	<!-- tiles:insertAttribute엘리먼트를 이용해서 설정파일에 등록한 영역의 이름만 정의(name속성에) -->
	<tiles:insertAttribute name="top"></tiles:insertAttribute>
	<div class="container-fluid">
		<!-- 실제 작업이 추가되면 메뉴나 컨텐츠가 교체(클릭해서 페이지가 변경된다는말) -->
		<div class="row">
			<div class="col-lg-2 sidenav">
				<!-- 메뉴 -->
				<tiles:insertAttribute name="menu"></tiles:insertAttribute>
			</div>	
			<div class="col-lg-10">
				<!-- 컨텐츠 -->
				<tiles:insertAttribute name="content"></tiles:insertAttribute>
			</div>
		</div>
	</div>
</body>
</html>

4) 스프링내부에서 tiles를 사용할 수 있도록 스프링 설정파일(spring-config.xml)에 tiles를 등록

=> 기본으로 만들어지던 뷰를 tiles를 이용해서 뷰를 만들수있도록 ViewResolver를 등록
(1) tiles의 설정파일을 읽어서 작업할 수 있도록 설정파일의 위치를 등록
(2) tiles기반으로 뷰를 만들 수 있도록 ViewResolver를 등록

spring-config.xml

	<!-- ==========tiles를 기반으로 뷰정보를 만들수있도록 ViewResolver등록========== -->
	<!-- 1. tiles설정파일을 스프링 내부에서 인식할 수 있도록 등록 -->
	<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>
	<!-- 2. tiles기반으로 뷰를 만들수있도록 ViewResolver등록 -->
	<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>

5) 기능별로 뷰가 교체되어야 하는 경우에 뷰에 대한 정보를 tiles 설정파일에 등록

member-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="tiles/insert" extends="mainTemplate">
 		<put-attribute name="menu" value="/WEB-INF/menu/emp_menu.jsp"/>
 		<put-attribute name="content" value="/WEB-INF/member/register.jsp"/>
 	</definition>
 	<definition name="tiles/login" extends="mainTemplate">
 		<put-attribute name="menu" value="/WEB-INF/menu/emp_menu.jsp"/>
 		<put-attribute name="content" value="/WEB-INF/member/login.jsp"/>
 	</definition>
 </tiles-definitions>