spring - 타일즈(tiles)

오늘·2021년 6월 8일
0

웹 페이지 연습

목록 보기
28/35

타일즈(tiles)

화면의 레이아웃 기능을 제공하는 오픈 소스 라이브러리

특징

  • 페이지 레이아웃을 쉽고 단순하게 구현할 수 있다
  • 공통된 레이아웃을 사용하므로 유지 관리가 용이

타일즈 관련 라이브러리

pom.xml 파일에서 보기

저번에 오라클 넣어줬던 코드 밑에 작성함
...
		<!-- 타일즈 관련 라이브러리 -->
		<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>
...

pom.xml 에 코드 작성 후 저장하면 관련 라이브러리가 설치된 모습을 Maven Dependencies에서 확인할 수 있다.

관련 xml 설정하기

servlet-context.xml 에서 코드를 작성한다.

<?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:mvc="http://www.springframework.org/schema/mvc"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

	<annotation-driven />

	<resources mapping="/resources/**" location="/resources/" />
	
	<!-- JSP 뷰 리졸버는 이제 사용 하지 않을 것이다
	<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 빈을 생성 -->
    <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>
	
	<context:component-scan base-package="com.myspring.pro27" />
</beans:beans>

tiles.xml 작성하기

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
"http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
	<!-- baseLayout : 공통 레이아웃의 뷰 이름 -->
	<!-- template : 전체 레이아웃을 정하는 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>

	<!-- 메인 화면의 뷰 이름 지정 / extends: 기본적인 레이아웃은 baseLayout을 상속받음을 표시 -->
	<definition name="main" extends="baseLayout">
		<!-- 레이아웃의 제목에 표시할 구문 지정 -->
		<put-attribute name="title" value="메인페이지" />
		<!-- 레이아웃의 본문에 표시할 JSP 지정 -->
		<put-attribute name="body"
			value="/WEB-INF/views/main.jsp" />
	</definition>
</tiles-definitions>

JSP 작성

파일 구조

layout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
	
<!-- 자바의 import 문처럼 타일즈를 사용하기 위해 반드시 추가해야한다-->
<%@ 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>
<!-- tiles_member.xml의 <definition>의 하위 태그인
	<put-attribute> 태그의 name이 title인 값을 표시하겠다 -->
<title><tiles:insertAttribute name="title" /></title>
</head>
<body>
	<div id="container">
		<div id="header">
			<!-- tiles_member.xml의 <defintion>의 하위 태그인
				<put-attribute>태그의 name이 header인 JSP를 표시하겠다 -->
			<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" 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>
<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" 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>
</body>
</html>

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>

메인 파일 준비

타일즈 설정 파일에서 설정한 위치에 레이아웃을 표시할 메인 jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    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>

뷰이름을 요청하는 컨트롤러

자바 컨트롤러를 담당하는 HomeController 클래스를 수정한다

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);

	@RequestMapping(value = "/main.do", method = RequestMethod.GET)
	public String home(Locale locale, Model model) {
		// /main.do로 요청시 컨트롤러에서는 <definion> 태그에서 설정한
		// 뷰 이름 'main'을 타일즈 뷰 리졸버로 반환한다
		return "main";
	}
}

실행

http://localhost:8700/pro27/main.do 서버를 켜고 주소를 요청하면 뜬다. 오류없이 한번에 나와서 당황했다

profile
오늘
이전 포스트

spring - 메이븐

다음 포스트

spring - 다중 파일, 이미지

0개의 댓글