일반적으로 JSP는 모든 화면 기능을 일일이 구현하는 것이다.
필자의 홈페이지와 같이 좌측의 사이드는 어떤 페이지를 가도 그대로 유지된다.
필자의 경우 웹 폴더에 각 폴더를 생성해서 동일한 화면 구현 jsp를 넣었었다.
이는 코드의 증가와 비효율을 초래한다.
이로인해 tilles 기능을 적용하려고한다.
tiles 적용전 tiles가 무엇인지 공부하고 추후 실제 페이지에 적용해보도록하자.
tiles 기능은 화면 레이아웃 기능을 제공한다.
아래 구조도를 참조하도록하자.
우선 하단과 같이 pom.xml에 tiles dependency를 추가한다.
<pom.xml>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-core</artifactId>
<version>3.0.8</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-jsp</artifactId>
<version>3.0.8</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-servlet</artifactId>
<version>3.0.8</version>
</dependency>그 다음 servlet-context.xml에 다음과 같이 추가를 해준다.
<beans:bean id="tilesConfigurer"
class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
<beans:property name="definitions">
<beans:list>
<!-- 해당 경로의 모든 xml 파일을 읽어 들인다. -->
<beans:value>classpath:tiles/*.xml</beans:value>
</beans:list>
</beans:property>
</beans:bean>
<!-- tilesVieResolver를 이용하여 화면을 표시한다. -->
<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:property>
</beans:bean>
<!-- 일반 viewResolver로 화면을 표시한다. -->
<beans:bean id="viewResolver"
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>그 다음 tiles.xml에 다음과 같이 추가한다.
main이 반환되면 레이아웃이 표시된다.
<tiles.xml>
<tiles-definitions>
<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>
<put-attribute name="footer"
value="/WEB-INF/views/common/footer.jsp"></put-attribute>
</definition>
<definition name="main" extends="baseLayout">
<put-attribute name="title" value="메인 페이지"></put-attribute>
<put-attribute name="body" value="/WEB-INF/views/main.jsp"></put-attribute>
</definition>
</tiles-definitions><footer.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>하단 부분</title>
<style>
p {
font-size:20px;
text-align:center;
}
</style>
</head>
<body>
<p> e-mail:admin@test.com</p>
<p> 회사주소:서울시 강동구</p>
<p>찾아오는 길:<a href="#">약도</a></p>
</body>
</html><header.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
%>
<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>
<!-- <a href="#"><h3>로그인</h3></a> -->
<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>화면 전체의 구조를 정의하는 layout.jsp 파일이다.
tiles.mxl 설정에 따라서 각각의 위치에 JSP를 표시한다.
<layout.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"
%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container {
width: 100%;
margin: 0px auto;
text-align:center;
border: 0px solid #bcbcbc;
}
#header {
padding: 5px;
margin-bottom: 5px;
border: 0px solid #bcbcbc;
background-color: lightgreen;
}
#sidebar-left {
width: 15%;
height:700px;
padding: 5px;
margin-right: 5px;
margin-bottom: 5px;
float: left;
background-color: yellow;
border: 0px solid #bcbcbc;
font-size:10px;
}
#content {
width: 75%;
padding: 5px;
margin-right: 5px;
float: left;
border: 0px solid #bcbcbc;
}
#footer {
clear: both;
padding: 5px;
border: 0px solid #bcbcbc;
background-color: lightblue;
}
</style>
<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><side.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!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>
<%--
<h1>
<a href="${contextPath}/member/listMembers.do" class="no-underline">회원관리</a><br>
<a href="${contextPath}/board/listArticles.do" class="no-underline">게시판관리</a><br>
<a href="#" class="no-underline">상품관리</a><br>
</h1>
--%>
</body>
</html>아래 main.jsp에 tiles에 설정한 jsp 파일들이 tiles.xml에 구성한 것과 같이 layout될 것이다.
이것이 타일즈의 기능이다.
<main.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 페이지</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<h1>메인 페이지입니다!!</h1>
</body>
</html>이유는 아래 mainpage 메소드에서 main을 반환하면서 tiles.xml에 main과 매핑되기 때문이다.
그럼 결과를 보도록하자.
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 = "/", method = RequestMethod.GET)
public String home(Locale locale, Model model) {
logger.info("Welcome home! The client locale is {}.", locale);
Date date = new Date();
DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
String formattedDate = dateFormat.format(date);
model.addAttribute("serverTime", formattedDate );
return "home";
}
@RequestMapping(value="/main.do")
public String mainpage() {
return "main";
}
}
처음 실행시 실행되는 home.jsp는 아래와 같이 아무런 layout이없다.
이유는 하단의 servlet-context에서 order1번을 실행하고 2번을 실행한다.
1번은 main이 아니기 때문에 실행이 안되고 2번이 실행되어 앞에는 /WEF-INF/views/가 붙고
뒤에는 .jsp가 붙어서 해당 jsp 파일이 출력된다.
여기서 move를 클릭하면
home.jsp에서는 main.do가 실행된다.
main.do는 main을 반환한다.
반환 후 tiles로 인해 다음과 같이 layout이 표시되는 것을 확인할 수 있다.
'[웹개발] > Spring 개념' 카테고리의 다른 글
| [스프링 개념] pom.xml에서 오라클 라이센스 얻어오는 방법 (0) | 2020.01.13 |
|---|---|
| [스프링 개념] web과 WEB-INF 폴더에 관해서 및 WEB-INF에서의 앵커 태그<a>에 관해서 (0) | 2020.01.13 |
| [마이바티스] SQL 동적 처리 (0) | 2019.12.29 |
| [스프링 개념] JdbcTemplate으로 list와 SQL method 값을 함께 전달하기. (0) | 2019.12.09 |
| [스프링 개념] 스프링 Project import/export 방법(2) (0) | 2019.12.05 |