Egov - jsp tiles 사용

egov

Egov - jsp tiles 사용

전주천둥새 2023. 5. 15. 17:03

*** tiles란 레이아웃을 고정시키고 내부의 contents부분을 수정할수 잇는걸 뜻한다.

1. pom.xml에 dependency 추가

<!--  tiles 시작 -->
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-extras</artifactId>
            <version>3.0.8</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-servlet</artifactId>
            <version>3.0.8</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-jsp</artifactId>
            <version>3.0.8</version>
        </dependency>
        <!-- tiles -->

>>> 이후 프로젝트 우클릭 > Maven > Update Project로 프로젝트 업데이트 진행

2. dispather-servlet 설정

해당파일의 설정을 변경해준다

>>> 초기설정

<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver" p:order="1" 
          p:viewClass="org.springframework.web.servlet.view.JstlView"
          p:prefix="/WEB-INF/jsp/" p:suffix=".jsp"/>

>>> 변경설정

<!-- tiles 설정 -->
    <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>
    <!--/tiles  -->
    <bean class="org.springframework.web.servlet.view.UrlBasedViewResolver" p:order="2" 
          p:viewClass="org.springframework.web.servlet.view.JstlView"
          p:prefix="/WEB-INF/jsp/" p:suffix=".jsp"/>

>>> 경로변경 및 p:order 1 -> 2로 변경

3. WEB-INF 폴더 하위에 tiles 폴더 및 파일 생성하기

>>> tiles.xml 파일 (아래 코드 메뉴탭타일즈 부분에 추가로 header, footer등 추가해서 컴포넌트화 가능)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN" "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
 
<tiles-definitions>
    <!-- 메뉴 탭 타일즈 -->
    <definition name="layouts-tiles"	template="/WEB-INF/tiles/tiles-layout.jsp">
        <put-attribute name="body"		value=""/>
    </definition>
 
    <definition name="*/*" extends="layouts-tiles">
        <put-attribute name="body" value="/WEB-INF/jsp/{1}/{2}.jsp" />
    </definition>
 
</tiles-definitions>

>>> tiles.jsp파일 (아래 코드처럼 taglib로 타일즈를 적용시키고 레이아웃을 디자인한후 tiles태그를 사용해서 컨텐츠(body)부분을 작성해둔다. 그러면 이후 추가로 작업되는 페이지에서는 body부분만 작성된다.)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles"  prefix="tiles"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

                               //타일즈 적용할 레이아웃...//

		 <!-- Page content wrapper-->
            <div id="page-content-wrapper">
                <div class="container-fluid">
                   <div id="body"><tiles:insertAttribute name="body"/></div>
                </div>
            </div>
		
	</div>
</body>
</html>

>>> 위 파일처럼 layout에 전부 작성할수도 있지만, component화 시켜서 아래방식처럼 작성할 수도 있다.

>>> xml 파일
?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN" "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
 
<tiles-definitions>
    <!-- 메뉴 탭 타일즈 -->
    <definition name="layouts-tiles"         template="/WEB-INF/tiles/tiles-layout.jsp">
        <put-attribute name="loadFile"        value="/WEB-INF/tiles/inc/loadFile.jsp" />
        <put-attribute name="header"           value="/WEB-INF/tiles/inc/header.jsp" />
        <put-attribute name="left"            value="/WEB-INF/tiles/inc/left.jsp" />
        <put-attribute name="body"           value=""/>
        <put-attribute name="footer"        value="/WEB-INF/tiles/inc/footer.jsp" />
    </definition>
 
    <definition name="*/*" extends="layouts-tiles">
        <put-attribute name="body" value="/WEB-INF/jsp/{1}/{2}.jsp" />
    </definition>
 
</tiles-definitions>


>>> jsp 파일
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles"  prefix="tiles"%>
<!DOCTYPE html>
<html>
<head>
    <tiles:insertAttribute name="loadFile"/>
</head>
<body>
<div id="wrap">
 
    <div id="nav"><tiles:insertAttribute name="header"/></div>
    <div id="left"><tiles:insertAttribute name="left"/></div>
    <div id="body"><tiles:insertAttribute name="body"/></div>
    <div id="footer"><tiles:insertAttribute name="footer"/></div>
 
</div>
</body>
</html>

>>> 추가로 xml 파일의 extends 앞단의 name에 */*.jsp 등의 접미사를 사용해서 해당 파일에만 tiles를 적용시킬수도 있다. (controller의 return 부분에 동일한 접미사를 적용한다)

4. 작성된 타일즈 확인

>>> spring과 spring boot에서의 적용법은 다르니 해당 프로젝트 작성시에는 찾아서 해보자!!