전자정부프레임워크(3.8.0버전)에 Tiles 적용하기

1.메이븐을 사용한다면 pom.xml에 아래 dependency를 추가하고 메이븐을 사용하지 않는다면 아래 사이트에가서 필요한 jar를 다운 받는다.

(https://mvnrepository.com/artifact/org.apache.tiles)

 

  <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-api -->
  <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-api</artifactId>
      <version>3.0.8</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-autotag-core -->
  <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-autotag-core</artifactId>
      <version>1.2</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-autotag-core-runtime -->
  <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-autotag-core-runtime</artifactId>
      <version>1.2</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-core -->
  <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-core</artifactId>
      <version>3.0.8</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-extras -->
  <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-extras</artifactId>
      <version>3.0.8</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
  <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-jsp</artifactId>
      <version>3.0.8</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-request-api -->
  <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-request-api</artifactId>
      <version>1.0.7</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-request-jsp -->
  <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-request-jsp</artifactId>
      <version>1.0.7</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-request-servlet -->
  <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-request-servlet</artifactId>
      <version>1.0.7</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-servlet -->
  <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-servlet</artifactId>
      <version>3.0.8</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-template -->
  <dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-template</artifactId>
      <version>3.0.8</version>
  </dependency>

 

 

2. web.xml 설정(중간에 타일즈를 추가하는 것이면 이미 설정 되어있을 것이다.)

 

<servlet>
    <servlet-name>appServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/config/egovframework/springmvc/dispatcher-servlet.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

 

3. dispatcher-servlet.xml 설정(프로젝트마다 파일이름이 다를 수 있다.)

   기존 설정과 중복되는 부분은 주석처리 하거나 필요한 설정이라면 order 순서를 변경한다.

   org.springframework.web.servlet.view.tiles3.SimpleSpringPreparerFactory 부분은 동적메뉴 구성을 위해 추가하였다.(5-1번 참고)

 

    <!-- Ajax jsonView Return (ModelAndView) -->
    <bean id="jsonView" class="org.springframework.web.servlet.view.json.MappingJackson2JsonView"
     p:contentType="application/json;charset=UTF-8">
    </bean>
    <bean id="viewResolver" class="org.springframework.web.servlet.view.BeanNameViewResolver"
     p:order="2">
    </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/egovframework/" p:suffix=".jsp" />
  -->
    
    <!-- Tiles 추가 -->
    <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver"
        p:viewClass="org.springframework.web.servlet.view.tiles3.TilesView"
        p:order="1" />
    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
            <property name="definitions">
                  <list>
                        <value>/WEB-INF/config/egovframework/tiles/tiles.xml</value>
                  </list>
            </property>
            <property name="preparerFactoryClass" value="org.springframework.web.servlet.view.tiles3.SimpleSpringPreparerFactory"></property>
    </bean>

 

4. tiles.xml 설정(definition의 name abc/**/*View와 def/**/*View 등 Controller의 리턴값과 매칭되어야 해당 Tiles Layout이 적용된다.)

  cf ex1) return "abc/aa/cc/dd/wowView";  cf ex2) return "def/a/goodView";

 

<!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>
  
    <!-- Tiles 적용 기본 Layout -->
    <definition name="base" template="/WEB-INF/jsp/egovframework/layout/TilesLayout.jsp" preparer="egovframework.cmn.MenuPreparer">
        <put-attribute name="header" value="/WEB-INF/jsp/egovframework/layout/Header.jsp" />
        <put-attribute name="menuLvl2" value="/WEB-INF/jsp/egovframework/layout/MenuLvl2.jsp" />
        <put-attribute name="menuLvl3" value="/WEB-INF/jsp/egovframework/layout/MenuLvl3.jsp" />
    </definition>
   
    <!-- Tiles 적용 팝업 Layout -->
    <definition name="baseEmpty" template="/WEB-INF/jsp/egovframework/layout/PopLayout.jsp">
    </definition>
    
    

    
 
    <!-- 기본 관리자 화면 - 첫번째관리 Layout -->
    <definition name="abc/**/*View" extends="base">
        <put-attribute name="body" value="/WEB-INF/jsp/egovframework/abc/{1}/{2}View.jsp" />
        <put-attribute name="curPath" value="abc/{1}/{2}View" cascade="true"/>
    </definition>
 
    <!-- 기본 관리자 화면 - 두번째관리 Layout -->
    <definition name="def/**/*View" extends="base">
        <put-attribute name="body" value="/WEB-INF/jsp/egovframework/def/{1}/{2}View.jsp" />
    </definition>
 



    
    <!-- 팝업 화면 Layout -->
    <definition name="**/*Pop" extends="baseEmpty">
        <put-attribute name="body" value="/WEB-INF/jsp/egovframework/{1}/{2}Pop.jsp" />
    </definition>
   
   
   
   
   
   
    <!-- 기타 Tiles 미적용 -->
    <definition name="cmn/*" template="/WEB-INF/jsp/egovframework/cmn/{1}.jsp"></definition>

  
</tiles-definitions>

 

5-1. 동적메뉴 구성을 위한 설정(MenuPreparer.java)

 

public class MenuPreparer implements ViewPreparer {

 /** SysadmService */
 @Resource(name="sysadmService")
 private SysadmService sysadmService;

 @Override
 public void execute(Request tilesRequest, AttributeContext attributeContext) throws PreparerException {
  List<?> menuList;
  try {
   Map<String, String> map = tilesRequest.getParam();
   SearchVO searchVO = new SearchVO();
   
   //로그인한 세션정보 가져오기
   HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
   HttpSession session = request.getSession();
   LoginVO loginVO = (LoginVO)session.getAttribute("loginVO");
   
   //접근사용자구분 세팅
   searchVO.setSchUserGubun(loginVO.getUserGubun());
   
   //관리자메뉴 세팅
   menuList = sysadmService.getSelectMngMenuList(searchVO);
   attributeContext.putAttribute("menuList", new Attribute(menuList), true);
  } catch (Exception e) {
   e.printStackTrace();
  }
 }

} 

 

 

5-2. TilesLayout.jsp 설정

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles-extras" prefix="tilesx" %>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Stylesheets ============================================= -->
<link rel="stylesheet" href="/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />

 

<!-- External JavaScripts ============================================= -->
<script type="text/javascript" src="/js/jquery.js"></script>

 

<tilesx:useAttribute name="curPath" />
<script type="text/javascript" src="/script/${curPath}.js"></script>

 

<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>관리자페이지</title>
</head>

<body class="stretched">

<!-- Document Wrapper ============================================= -->
<div id="wrapper" class="clearfix">
 <!-- Header ============================================= -->
 <tiles:insertAttribute name="header"/>
 <!-- #header end -->

    <!-- Content ============================================= -->
    <section id="content" class="content-grid">
        <div class="content-wrap nopadding">
   <div class="container-fluid">
    <div id="tabs" class="card">
     <!-- 2depth 메뉴 -->
     <tiles:insertAttribute name="menuLvl2" />
     <!-- //2depth 메뉴 -->
     
     <div class="tab-content">
      <div class="tab-pane active" id="default">
       <div class="card-body">
        <!-- 3depth 메뉴 -->
        <tiles:insertAttribute name="menuLvl3" />
        <!-- //3depth 메뉴 -->
        
        <!-- bodyContent -->
        <tiles:insertAttribute name="body" />
        <!-- //bodyContent -->
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
    </section>
    <!-- #content end -->
</div>
<!-- #wrapper end -->
</body>
</html> 

 

 

 

5-3. MenuLvl2.jsp 설정(menuList 변수는 5-1에서 지정한 변수)

 

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

<tiles:importAttribute name="menuList" />
<ul class="nav nav-tabs ui-sortable">
 <c:forEach var="result" items="${menuList}" varStatus="status">
  <c:if test="${result.lvl eq 2}">
   <li ${result.isActive eq 'Y' ? 'class="active"' : ''}><a href="${result.menuUrl }?menuId=${result.menuId}" ${result.popGubun eq 'Y' ? 'target="_blank"' : ''}>${result.menuNm }</a></li>
  </c:if>
 </c:forEach>
</ul> 

 

6. 만드는 것보다 글로 정리하는게 어렵네요... 로그인한 사용자에 대한 동적메뉴를 구성하는 부분에서 많이 막혔었네요.

구글 국내로 검색해도 마땅한 자료를 못찾아 많이 헤멧네요. 5-1 부분에 세션정보를 가져오는 부분이 국내에서 타일즈랑 묶어서 찾기가 참 힘들었네요