스프링 타일즈라는 기능은 우리가 웹 페이지에서 공통적으로 적용되는 상단, 하단, 사이드 jsp를 레이아웃 템플릿에
적용하여 재사용하게 편하게 해주는 기능 입니다.
필자는 이전에 jsp:include 를 통해서 .jsp 페이지 마다 적용하긴 했었는데, 이 기능을 알고 시간 낭비했다고 생각 했습니다.
타일즈의 장정은 페이지 레이아웃을 쉽게 구현 할 수 있고 공통된 레이아웃읗 사용하여 유지관리를 쉽게 할 수 있습니다.
간단한 실습을 하도록 하겠습니다.
pom.xml
<!--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-jsp</artifactId>
<version>2.2.2</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-servlet</artifactId>
<version>2.2.2</version>
</dependency>tiles 관련 라이브러리들을 pom.xml에 설정 합니다.
servlet-context.xml
<!-- <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> -->
<!--스프링의 TilesConfigurer 클래스를 이용해 tilesConfigurer 빈을 생성 -->
<!-- 패키지 tiles의 모든 설정 XML 파일을 읽어 들임 -->
<beans:bean id="tilesConfigurer"
class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
<beans:property name="definitions">
<beans:list>
<beans:value>classpath:tiles/*.xml</beans:value>
</beans:list>
</beans:property>
<beans:property name="preparerFactoryClass"
value="org.springframework.web.servlet.view.tiles2.SpringBeanPreparerFactory"/>
</beans:bean>
<!-- 타일즈 뷰리졸버를 사용해 화면을 표시 -->
<beans:bean id="viewResolver"
class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView" />
</beans:bean>타일즈 뷰리졸버를 사용해 화면에 표시합니다. (더이상 JSP 뷰리졸버를 사용하지 않으므로 주석 처리합니다.)
차후에 타일즈 뷰리졸버의 구조 및 작동방식에 대해 알아 보도록 하겠습니다.
JSP 페이지에 타일즈 적용하기
1. tiles.xml 작성
2. 레이아웃용 JSP를 작성
3. 레이아웃에 표시할 JSP를 작성
4. 컨트롤러에서 tiles.xml에 설정한 뷰이름을 반환
tiles.xml 작성
tiles_member.xml
.............
<!-- 공통 레이아웃의 뷰이름을 지정합니다. 전체 레이아웃을 정하는 JSP의 위치를 지정 , 레이아웃의 상단, 사이드, 하단을 구성하는 jsp 위치를 지정-->
<definition name="baseLayout" template="/WEB-INF/views/common/layout.jsp">
<put-attribute name="title" value=""/>
<put-attribute name="header" value="/WEB-INF/views/common/header.jsp"/>
<put-attribute name="side" value="/WEB-INF/views/common/side.jsp"/>
<put-attribute name="body" value=""/>
<put-attribute name="footer" value="/WEB-INF/views/common/footer.jsp"/>
</definition>
<!--매인 화면 뷰이름을 지정, 기본적인 레이아웃은 baseLayout을 상속 받겠다. 제목에 표시할 구문을 지정, 레이아웃의 본문에 표시할 JSP를 지정 -->
<definition name="main" extends="baseLayout">
<put-attribute name="title" value="메인 페이지"/>
<put-attribute name="body" value="/WEB-INF/views/main.jsp"/>
</definition>
..............<definition> 태그를 사용해서 전체 화면의 공통 레이아웃을 baseLayout으로 지정합니다.
그리고 적용할 다른 페이지는 baseLayout 레이아웃을 상속받아 title솨 body 속성만 변경합니다.
레이아웃에 사용되는 JSP 사용
footer.jsp, header.jsp, layout.jsp, side.jsp 만들어 줍니다. (tiles_member.xml에서 지정한 위치에 JSP를 생성합니다.)
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="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
...................
</style>
<!--tiles_member.xml의 <definition>의 하위 태그인 <put-attribute>태그의 name에 해당하는 JSP를 표시 -->
<title><tiles:insertAttribute name="title"/></title>
</head>
<body>
<div id="container">
<div id="header">
<tiles:insertAttribute name="header"/>
</div>
<div id="sidebar-left">
<tiles:insertAttribute name="side"/>
</div>
<div id="content">
<tiles:insertAttribute name="body"/>
</div>
<div id="footer">
<tiles:insertAttribute name="footer"/>
</div>
</div>
</body>
</html>
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath }"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상단부</title>
</head>
<body>
<table border=0 width="100%">
<tr>
<td>
<a href="${contextPath }/main.do">
<img src="${contextPath }/resources/image/duke_swing.gif" />
</a>
</td>
<td>
<h1><font size="30">스프링실습 페이지!!</font></h1>
</td>
<td>
<!--isLogOn 속성 값을 체크하여 로그인 상태 시 로그아웃이 표시되게 합니다. -->
<c:choose>
<c:when test="${isLogOn == true && member != null }">
<h3>환영합니다. ${member.name }님!!</h3>
<a href="${contextPath }/member/logout.do"><h3>로그아웃</h3></a>
</c:when>
<c:otherwise>
<a href="${contextPath }/member/loginForm.do"><h3>로그인</h3></a>
</c:otherwise>
</c:choose>
</td>
</tr>
</table>
</body>
</html>
side.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style>
.no-underline{
text-decoration:none;
}
</style>
<meta charset="UTF-8">
<title>사이드 메뉴</title>
</head>
<body>
<h1>사이드 메뉴</h1>
<h1>
<a href="#" class="no-underline">회원관리</a><br>
<a href="#" class="no-underline">게시판관리</a><br>
<a href="#" class="no-underline">상품관리</a><br>
</h1>
</body>
</html>footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>하단</title>
</head>
<body>
<p>email:admin@test.com</p>
<p>회사주소:서울시 강동구</p>
<p>찾아오는 길 : <a href="#">약도</a></p>
</body>
</html>
main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 페이지</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>메인페이지 입니다.</h1>
</body>
</html>
뷰이름 요청 Controller 작성
package com.myspring.pro27;
import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
/**
* Handles requests for the application home page.
*/
@Controller
public class HomeController {
private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
/**
* Simply selects the home view to render by returning its name.
*/
@RequestMapping(value = "/main.do", method = RequestMethod.GET)
public String home(Locale locale, Model model) {
return "main";
}
}/main.do로 요청 시 컨트롤러에서는 <definition> 태그에서 설정한 뷰이름 main을 타일즈 뷰리졸버로 반환합니다.
#마무리
이런식으로 main 페이지 뿐만 아니라 회원목록, 게시판 목록, 수정 등 을 같은 방식으로 작업을 하시면 됩니다.
'개발 > 스프링' 카테고리의 다른 글
| 21. 스프링 프레임 워크 - 썸네일 이미지[자바 웹을 다루는 기술] (0) | 2022.05.30 |
|---|---|
| 20. 스프링 프레임워크 - 다중 파일 업로드 기능[자바 웹을 다루는 기술] (0) | 2022.05.30 |
| 18. 스프링 프레임워크 - log4j[자바웹을 다루는 기술] (0) | 2022.05.25 |
| 17. 스프링 프레임워크 - STS에서 마이바티스 적용[자바 웹을 다루는 기술] (0) | 2022.05.25 |
| 16. 스프링 프레임워크 - 메이븐과 스프링 STS[자바 웹을 다루는 기술] (0) | 2022.05.24 |