Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

08-04 05:26


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

스프링 프리마커 연동 레이아웃 구현 : Spring Framework FreeMarker Layout 스프링프레임워크

written by Seok Kyun. Choi. 최석균


스프링 프리마커 연동하기 그리고 프리마커 레이아웃 구현하기


개발환경

Mac OS X 10.9.4
JAVA 1.6
Apache Tomcat 7.x
Spring 3.1.1
Spring Tool Suite 3.5.1
Maven 2.5.1
FreeMarker 2.3.20


프리마커 공식 사이트 : http://freemarker.org

프리마커는 뷰(출력)를 담당하는 템플릿엔진이다. 스프링에서도 프리마커를 지원하기 때문에서 쉽게 사용할 수 있다.
우선 프리마커를 사용하기 위해 Maven 설정 파일(pom.xml)에 라이브러리를 추가하여 설치한다.

pom.xml

<!-- freemarker -->
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker-gae</artifactId>
<version>2.3.20</version>
</dependency>

Spring 3.2.x 인 경우 추가한다.

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context-support</artifactId>
    <version>${org.springframework.security-version}</version>
</dependency>

설치가 되었다면 스프링 DispatcherServlet 설정 파일을 열어 프리마커 뷰리졸브를 추가한다.

<beans:bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
     <beans:property name="templateLoaderPath" value="/WEB-INF/syaku/views/"/>
     <beans:property name="defaultEncoding" value="utf-8" />
     <beans:property name="freemarkerSettings">
          <beans:props>
               <beans:prop key="number_format">0.####</beans:prop>
          </beans:props>
     </beans:property>
</beans:bean>

<beans:bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
     <beans:property name="contentType" value="text/html; charset=utf-8" />
     <beans:property name="cache" value="true"/>
     <beans:property name="prefix" value=""/>
     <beans:property name="suffix" value=".html"/>
</beans:bean>

freemarkerConfig 프로퍼티들의 설명은 아래와 같다.

templateLoaderPath : 프리마커 템플릿 경로를 지정한다.
freemarkerSettings : 프리마커 세부 설정을 지정한다.

FreeMarkerViewResolver 프로퍼티들의 설명은 아래와 같다.

contentType : 기본 컨텐츠타입을 지정한다.
cache : 캐쉬사용여부를 지정한다.
prefix : 뷰 페이지 경로를 지정하지만, 입력하지 않아도 된다.
suffix : 뷰 페이지 확장자명을 입력한다. 입력하지 않을 경우 파일 확장자까지 컨트롤러에서 지정해줘야 한다.

프리마커 설정을 간략하게 알아보았다. 이제 프리마커 사용법을 알아보도록 한다.

프리마커 문법은 도움말을 참조하면 쉽게 이해할 수 있어 문법은 생략하고 흔히 사용하는 레이아웃을 프리마커만으로 구성하는 방법을 알아보겠다.
간단한 작업이니 어렵지 않을 것이다.

FreeMarkerViewResolver 설정에서 suffix 빈공간으로 두어야 한다.
컨트롤러에 return 뷰를 layout.html 기본적으로 사용하고, model 객체에 템플릿 값을 추가하여 유동적인 화면을 출력하면 된다.


public ModelAndView dispDcoumentList() {
     ModelAndView model = new ModelAndView();

     model.setViewName("layout.html"); // 기본 템플릿
     model.addObject("TPL","document.list.html"); // body 에 include 되는 템플릿

     return model;

}

@소스 layout.html


<html>
<head>
</head>
<body>

<!— 템플릿 지정 —>
<#include TPL> 

</body>
</html>

위와같이 레이아웃은 고정적으로 layout.html 을 호출하며 변수값으로 바디 템플릿을 지정해주므로 동적인 바디 화면을 구성할 수 있다.
하지만 컨트롤러마다 작업해야 하는 불편한 점이 발생한다. 그래서 반복적인 작업을 최소화하기 위해 클래스를 분리하여 사용하도록 한다.

@소스 ModuleAndView.java

package com.syaku.handler;

import org.springframework.web.servlet.ModelAndView;

public class ModuleAndView extends ModelAndView {
     /**
      * 레이아웃을 메인 템플릿으로 사용하여 body 속에 템플릿을 include 하는 방식으로 페이지를 완성한다.
      */
     // 레이아웃
     private String layout = "layouts/default/layout.html";
     // 모듈
     private String module = null;
     // 스킨
     private String skin = "tpl";
     // 템플릿
     private String template = null;

     public ModuleAndView() {
     }

     public ModuleAndView(String layout, String module, String skin, String template) {
          this.layout = layout;
          this.module = module;
          this.skin = skin;
          this.template = template;
     }

     public ModuleAndView(String module, String template) {
          this.module = module;
          this.template = template;
     }

     public ModuleAndView(String module) {
          this.module = module;
     }

     public void setModule(String module) {
          this.module = module;
     }

     public void setSkin(String skin) {
          this.skin = skin;
     }

     public void setTemplate(String template) {
          this.template = template;
     }

     public ModelAndView render() {
          return this.render(true);
     }
     public ModelAndView render(boolean show_layout) {
          String tpl = "/modules/" + this.module + "/" + this.skin + "/" + this.template;

          if (!show_layout) {
               this.setViewName(tpl);
          } else {
               this.addObject("TPL", tpl);
               this.setViewName(this.layout);
          }
          return this;
     }
}

레이아웃 경로는 최상위 루트에서 시작하는 절대경로를 입력하면 되고 모듈과 스킨을 분리해두었다.
여러 어플리케이션에 유동적으로 사용할 수 있게 모듈 계층을 둔것이고, 스킨은 해당 모듈에서 다양한 디자인을 유동적으로 출력할 수 있게 구분한것이다. 즉 모듈은 스프링 어플리케이션을 의미하고, 스킨은 해당 어플리케이션의 디자인을 의미한다.

폴더 구조는 아래와 같다.

webapp/
     layouts/
          default/layout.html
     modules/
          document/
               tpl/
                    document.list.html
               skins/
                    good/document.list.html

파일명은 모두 동일하게 정하고 (스킨)폴더 경로만 변경하면 자유롭게 디자인을 변경할 수 있다.

show_layout 는 레이아웃이 필요없을 경우 false 넣어주면 된다. (팝업창을 뛰우거나, 레이아웃이 필요없는 페이지)


private String module = "document";
private ModuleAndView views = new ModuleAndView(module);

public ModelAndView dispDcoumentList() {
     views.setTemplate("document_list.html");

     return views.render();

}


posted syaku blog

Syaku Blog by Seok Kyun. Choi. 최석균.

http://syaku.tistory.com


댓글 남기기
◀ PREV 1···93949596979899100101···313 NEXT ▶