07.tiles설정하기1
Tiles 사용하기1
1.페이지 공통 분모
공통 부분을 수정하게 되면 모든 페이지를 다 수정해야한다.
공통 부분을 분리하여 공통으로 참조하도록 한다.
jsp는 include로 사용하게됨
jsp의 include의 단점: 공통된 내용을 꼭 넣어야한다
그 공통된 내용도 집중화될 수 있는것: TIles
2.페이지 모듈 분리하기
view/custom/
aside.jsp
layout.jsp 레이아웃 모듈
visual.jsp
view/inc
footer.jsp
header.jsp
view/notice
detail.jsp
list.jsp
공통으로 사용하는 모듈을 따로 뺸다
3.Tiles 지서서 작성하기
https://tiles.apache.org/framework/tutorial/basic/pages.html 의 링크로 넘어가서 xml을 복사한다
/WEB-INF/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="notice.list" template="/WEB-INF/view/custom/inc/layout.jsp">
<put-attribute name="title" value="공지사항" />
<put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
<put-attribute name="visual" value="/WEB-INF/view/custom/inc/visual.jsp" />
<put-attribute name="aside" value="/WEB-INF/view/custom/inc/aside.jsp" />
<put-attribute name="body" value="/WEB-INF/view/custom/notice/list.jsp" />
<put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
</definition>
<definition name="notice.detail" template="/WEB-INF/view/custom/inc/layout.jsp">
<put-attribute name="title" value="Tiles tutorial homepage" />
<put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
<put-attribute name="visual" value="/WEB-INF/view/custom/inc/visual.jsp" />
<put-attribute name="aside" value="/WEB-INF/view/custom/inc/aside.jsp" />
<put-attribute name="body" value="/WEB-INF/view/custom/notice/detail.jsp" />
<put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
</definition>
</tiles-definitions>
layout.jsp을 기준으로 조각난 레이아웃을 맞춘다
ModelAndView mv = new ModelAndView("notice.list");
.으로 바꿔준다
- 어느위치에 어느 레이아웃을 합칠 것 인지 설정한다
메이븐의 dependces에서 tiles 검색해서 라이브러리 다운받는다 tile.jsp
layout.jsp에 <%@ taglib prefix=”tiles” uri=”http://tiles.apache.org/tags-tiles” %> 선언한다
각 tiles.xml에 해당되는 위치에
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!--문자열을 받아다가 쓸 수도 있다 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<tiles:insertAttribute name="title"/>
<link href="/css/customer/layout.css" type="text/css" rel="stylesheet" />
<style>
#visual .content-container{
height:inherit;
display:flex;
align-items: center;
background: url("../../images/customer/visual.png") no-repeat center;
}
</style>
</head>
<body>
<!-- header 부분 -->
<tiles:insertAttribute name="header"/>
<!-- visual 부분 -->
<tiles:insertAttribute name="visual"/>
<!-- <body> -->
<div id="body">
<div class="content-container clearfix">
<!-- aside -->
<tiles:insertAttribute name="aside"/>
<!-- main -->
<tiles:insertAttribute name="body"/>
</div>
</div>
<!-- <footer> -->
<tiles:insertAttribute name="footer"/>
</body>
</html>
댓글남기기