Spring MVC - tiles 적용

티스토리 뷰

Programming/Java

Spring MVC - tiles 적용

파란크리스마스 2017. 1. 2. 20:44

출처 : IT 조각 모음: [java] spring3 + tiles3 설정 하기

iot-servlet.xml 내용추가(WebContent\WEB-INF\iot-servlet.xmll)

	<!-- 타일즈 설정 : 시작 -->
	<bean id="tilesViewResolver" 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>/WEB-INF/tiles/tiles-layout.xml</value>
			</list>
		</property>
 	</bean>
 	<!-- 타일즈 설정 : 종료 -->

타일즈 환경설정 파일 생성(WebContent\WEB-INF\tiles\tiles-layout.xmll)

<?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="/*.blank" template="/WEB-INF/tiles/blankLayout.jsp">
		<put-attribute name="content"	value="/WEB-INF/jsp/{1}.jsp"/>
	</definition>
	
	<definition name="/*" template="/WEB-INF/tiles/web_layout.jsp">
		<put-attribute name="header" value="/WEB-INF/tiles/web_header.jsp" />
		<put-attribute name="main" value="/WEB-INF/jsp/{1}.jsp" />
		<put-attribute name="footer" value="/WEB-INF/tiles/web_footer.jsp" />	
	</definition>
	
</tiles-definitions>

레이아웃(web_layout.jsp) 파일 생성(WebContent\WEB-INF\tiles\web_layout.jsp)

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>

<body>

<div id="wrap">
	<!-- head -->
	<div id="header"><tiles:insertAttribute name="header" /></div>
	
	<!-- content -->
	<div id="body">
		<div id="container"><tiles:insertAttribute name="main" /></div>
	</div>

	<!-- footer -->
	<div id="footer"><tiles:insertAttribute name="footer" /></div>
</div>
	
</body>
</html>

상당 페이지(web_header.jsp) 파일 생성(WebContent\WEB-INF\tiles\web_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" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<div>
로그인사용자 : <sec:authentication property="principal.username" />
</div>

<div>
	<a href="<c:url value="/j_spring_security_logout"/>">로그아웃</a> 
	<a href="<c:url value="/user_add_ajax.iot"/>">회원 가입</a>
</div>

하단 페이지(web_footer.jsp) 파일 생성(WebContent\WEB-INF\tiles\web_footer.jsp)

<%@ page contentType="text/html;charset=utf-8"%>

<div>
회사이름 : 파란크리스마스
</div>

실행결과

footer 하단영역에 고정시키기 (WebContent\WEB-INF\tiles\web_layout.jsp 내용추가)

출처 : footer 하단영역에 고정시키기 | 신기한 웹 세상

<style>
html, body { margin:0; padding:0; height:100%; }
#wrap {
    height:100%;
}
#header {
    position:relative;
    width:100%;
    height:45px;
    background-color:#eaeaea;
}
#body {
    margin:-45px 0 -50px;
    width:100%;
    min-height:100%;
}
#body #container {
    padding:45px 0 50px;
}
 
#footer {
    width:100%;
    height:50px;
    background-color:#eaeaea;
}
</style>

스타일 적용 실행결과

상하단 페이지가 필요없는 경우 처리(WebContent\WEB-INF\tiles\blankLayout.jsp 생성)

<jsp:directive.page import="org.springframework.web.context.request.RequestAttributes"/>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<tiles:insertAttribute name="content"/>

로그인 페이지 blankLayout 사용(src\com\iot\controller\LoginController.java 내용수정)

return "/login"; 에서 return "/login.blank"; 로 수정

	@RequestMapping(value = "/login.iot", method = RequestMethod.GET)
	public String login(ModelMap modelMap) throws Exception {
		return "/login.blank";
	}

blankLayout 적용 전후