0songha0

egovFramework 헤더, 푸더 등 레이아웃 Tiles 설정 방법

레이아웃 Tiles 설정 방법

egov-com-servlet.xml 예시

<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>
  
<!-- Tiles Configurer -->
<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
  <property name="definitions">
    <list>
    <value>/WEB-INF/config/egovframework/tiles/common-def.xml</value>
    </list>
  </property>
</bean>

common-def.xml 파일을 definitions 프로퍼티로 사용하는 tilesConfigurer를 정의합니다.

common-def.xml 예시

<tiles-definitions>
  <definition name="baseLayout" template="/WEB-INF/views/layouts/layout.jsp">
    <put-attribute name="header" value="/WEB-INF/views/common/header.jsp" />
    <put-attribute name="left" value="/WEB-INF/views/common/left.jsp" />
    <put-attribute name="footer" value="/WEB-INF/views/common/footer.jsp" />
  </definition>

  <definition name="layout/user/*/*" extends="baseLayout">
    <put-attribute name="content" value="/WEB-INF/views/user/{1}/{2}.jsp" />
  </definition>
 
  <definition name="layout/user/*/*/*" extends="baseLayout">
    <put-attribute name="content" value="/WEB-INF/views/user/{1}/{2}/{3}.jsp" />
  </definition>

  <definition name="layout/user/*/*/*/*" extends="baseLayout">
    <put-attribute name="content" value="/WEB-INF/views/user/{1}/{2}/{3}/{4}.jsp" />
  </definition>

</tiles-definitions>

헤더/푸터 템플릿 layout.jsp를 어떤 View에 적용할지에 대한 URL 패턴을 정의합니다.
baseUser definition를 상속한 하위 definition들에는 baseUser definition이 자동 적용됩니다.

Controller 예시

package com.intermorph.cmmn.price.web;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.intermorph.cmmn.base.BaseController;

@Controller
public class IMPriceGuideController extends BaseController {

	@RequestMapping(value = "/cmmn/priceGuide/selectList.do")
	public ModelAndView selectList(HttpServletRequest req, HttpServletResponse res) throws Exception {
		ModelAndView mav = new ModelAndView();
		
		mav.setViewName("layout/user/cmmn/price/priceGuide");

		return mav;
	}
}

ViewName을 layout/user/*/* URL 패턴에 맞춰서 리턴하는 예시입니다.
/WEB-INF/jsp/view/user/cmmn/price/priceGuide.jsp 파일에 layout.jsp가 적용됩니다.

특정 메뉴 레이아웃 생성 방법

기존 레이아웃을 활용하여, 특정 메뉴에서만 사용할 리소스 JSP가 추가된 신규 레이아웃을 생성합니다.

특정 메뉴 전용 리소스 JSP 생성

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<link rel="stylesheet" href="/resources/css/메뉴명-custom.css" />
<script src="/resources/js/메뉴명-custom.js"></script>

WEB-INF/views/common 폴더에 특정 메뉴 전용 신규 JSP를 생성합니다.
특정 메뉴에서 사용할 CSS, 스크립트 등을 추가합니다.

common-def.xml에 definition 추가

<tiles-definitions>
  <definition name="메뉴명Layout" template="/WEB-INF/views/layouts/layout.jsp">
    <put-attribute name="header" value="/WEB-INF/views/common/header.jsp" />
    <put-attribute name="left" value="/WEB-INF/views/common/left.jsp" />
    <put-attribute name="footer" value="/WEB-INF/views/common/footer.jsp" />
    <put-attribute name="메뉴명Extra" value="/WEB-INF/views/common/메뉴명-extra.jsp" />
  </definition>

  <definition name="메뉴명Layout/user/*/*" extends="메뉴명Layout">
    <put-attribute name="content" value="/WEB-INF/views/user/{1}/{2}.jsp" />
  </definition>
 
  <definition name="메뉴명Layout/user/*/*/*" extends="메뉴명Layout">
    <put-attribute name="content" value="/WEB-INF/views/user/{1}/{2}/{3}.jsp" />
  </definition>

  <definition name="메뉴명Layout/user/*/*/*/*" extends="메뉴명Layout">
    <put-attribute name="content" value="/WEB-INF/views/user/{1}/{2}/{3}/{4}.jsp" />
  </definition>

</tiles-definitions>

위와 같은 방법으로 기존 헤더가 포함된 신규 헤더 레이아웃도 만들 수 있습니다.

Controller 예시

mav.setViewName("메뉴명Layout/user/폴더명/JSP파일명");

return mav;

컨트롤러에서 definition name 형식에 맞게 View를 리턴해주면 신규 레이아웃이 자동 적용됩니다.

기존 레이아웃 JSP에 신규 attribute 추가

<tiles:insertAttribute name="메뉴명Extra" ignore="true" />

기존 레이아웃 JSP 헤더 또는 body 닫는 태그 직전에 넣어두면 됩니다.
다른 메뉴들에는 이 Attribute가 없으므로 무시되고, ignore 옵션으로 인해 오류가 나지 않습니다.
jsp가 아니라 jspf 파일을 출력하면 HTML 화면이 깨질 수 있어 주의가 필요합니다.

최신 글