close

Trust Me!! Trust You!!


  • Blog
  • Local Log
  • Tag Cloud
  • Key Log
  • Guestbook
  • RSS Feed
  • Write a Post
  • Admin

혹시 블로그 스킨이 깨져 보이시나요? 최신버전의 Internet Explorer(Windows용), Opera, Firefox를 사용해보세요.

Found 1 article(s) for '전자정부프레임워크'.

  1. 2015/09/21 Spring에 tiles 적용하기

Spring에 tiles 적용하기

웹 프로그래밍
2015/09/21 15:20
 

html을 처음 배웠을 때 div를 nav, left, content, footer 등의 id를 부여하여 페이지를 제작하는 방법을 배웠었다.

요즘에는 html5가 거의 표준으로 자리잡아가면서 저것들이 아예 태그로 만들어져 나오기까지 했다.

각 영역을 분리해서 만드는 것은 여러 태그를 관리하기는 쉽지만

파일의 line수가 많아져 태그를 찾는것도 일이 되어버리고,

변경이 많이 일어나지 않는 nav, footer 등의 코드를 중복하여 계속 넣어주어야 하는 번거로움이 있다.

 

하지만 tiles를 쓰면 nav, footer등의 역할을 하는 코드를 파일로 저장하여 관리하기때문에

실제 화면의 내용을 담당하는 content 부분만 제작하고, 파일 자체에도 content만 존재하게 된다.

물론 이것을 include를 사용할 수도 있지만 include를 써넣는 것도 일이 되어버리므로..

 

아무튼..

여러가지 이유로 이전에 만들어두었던 spring 프로젝트에 tiles를 적용해보았다.

사용한 spring 버전은 4.1.0이고, tiles는 3.0.4 이다.

> 1. tiles 라이브러리 추가

 

1. tiles 라이브러리 추가를 위해 pom.xml 파일에 아래의 내용을 추가한다.

 

<!-- tiles lib -->

    <dependency>

      <groupId>org.apache.tiles</groupId>

      <artifactId>tiles-core</artifactId>

      <version>3.0.4</version>

    </dependency>

    <dependency>

      <groupId>org.apache.tiles</groupId>

      <artifactId>tiles-jsp</artifactId>

      <version>3.0.4</version>

    </dependency>

 

 

> 2. tiles bean 등록

2. tiles bean 등록을 위해 servlet-context.xml 파일에 아래의 내용을 추가한다.

기본적으로 등록되어있는 org.springframework.web.servlet.view.InternalResourceViewResolver는 일반 jsp 파일로 처리할 경우에 필요하므로 남겨두었다.

 

<!-- tiles 리졸버 -->

 <beans:bean class="org.springframework.web.servlet.view.tiles3.TilesViewResolver" />

 <!-- tiles 설정파일 -->

 <beans:bean class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">

  <beans:property name="definitions">

   <beans:list>

    <beans:value>/resources/tiles/*.xml</beans:value>

   </beans:list>

  </beans:property>

 </beans:bean>

 

 

> 3. tiles-definitions

 

 

3. tiles의 레이아웃을 정의한다.

2번에서 tiles bean 등록시 사용한 경로인 /resources/tiles/ 밑에 tiles.xml 파일을 생성하고

자신이 사용하고자 하는 layout을 정의한다.

 

 

<?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">

 

<!-- Definitions for Tiles documentation -->

 

<tiles-definitions>

 

 <!-- Doc index page description -->

 <definition name="layout" template="/WEB-INF/jsp/layout/layout.jsp">

  <put-attribute name="top" value="/WEB-INF/jsp/layout/top.jsp"/>

  <put-attribute name="left" value="/WEB-INF/jsp/layout/left.jsp"/>

  <put-attribute name="content" value=""/>

 </definition>

 

 

 <definition name="*" extends="layout">

  <put-attribute name="content" value="/WEB-INF/jsp/{1}.jsp"/>

 </definition>

 <definition name="*/*" extends="layout">

  <put-attribute name="content" value="/WEB-INF/jsp/{1}/{2}.jsp"/>

 </definition>

 <definition name="*/*/*" extends="layout">

  <put-attribute name="content" value="/WEB-INF/jsp/{1}/{2}/{3}.jsp"/>

 </definition>

 

</tiles-definitions>

 

 나의 경우에는 top, left 네비게이션과 content를 구성할 목적으로 설정을 해주었다.

definition name에는 controller에서 return하는 string을 적어주는 것으로

예를 들어 controller의 return 값이 "user"일 경우라면, /WEB-INF/jsp/user.jsp를 찾아 화면에 표시한다.

따라서 원래의 사용법은 아래와 같다.

 

<definition name="user" extends="layout">

<put-attribute name="content" value="//WEB-INF/jsp/user.jsp"/>

</definition>

 

그러나 definition name을 위와 같이 '*'로 설정하게 되면 attribute의 value에서 '{1}'과 같이 사용할 수가 있다.

*의 갯수만큼 {1}, {2} 등으로 사용하게 되는데 이를 '와일드카드'라고 한다.

 

tiles의 장점은 여러개의 layout을 만들어서 필요에 맞게 사용할 수 있다는 점이다.

또한 특정 layout을 사용하지 않을수도 있는데 그런 경우에는 아래와 같이 작성하면 된다.

 

<definition name="user/login" template="/WEB-INF/jsp/user/login.jsp"/>

 

> 4. layout 파일 구성

 

 4. layout.jsp 파일 구성

definition 파일 구성에 제작한 대로 layout.jsp, top.jsp, left.jsp 를 생성해준다.

top.jsp와 left.jsp는 자신의 웹프로젝트에서 사용하고자하는 내용을 넣어서 제작하면 되므로 여기서는 생략하고 layout.jsp만 만들어보도록 하겠다.

 

layout.jsp에서는 각 페이지들에서 공통으로 사용할 css, js 파일등을 포함시켜준다.

또한 파일 상단에 taglib를 추가해준다.

<%@ taglib prefix="t" uri="http://tiles.apache.org/tags-tiles" %>

 

layout파일에는 html, head, body 태그를 포함시켜서 만들어주고

top, left, content 등의 파일에서는 바로 내용을 작성하면 된다.

 

<body>

 <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">

  <t:insertAttribute name="top"/>

 </div>

 <div class="container">

  <t:insertAttribute name="left"/>

  <t:insertAttribute name="content"/>

 </div>

</body>

 

위와 같이 작성된 jsp를 포함시킬때에는 <t:inserAttribute>태그를 사용하면 된다.

 

 

> 5. 결과보기

 

5. 결과보기

모든 설정을 마치고나서 css를 적용시키면 페이지 layout이 완성된다.

css를 잘 모르거나, 마땅한것이 없다 싶으면 부트스트랩을 적용하면 된다.

아래는 부트스트랩에서 제공하는 상단과 왼쪽 네비게이션을 적용한 화면이다.

 

 

이올린에 북마크하기
TAG spring, spring+titles, tiles, 스프링, 전자정부프레임워크
No received trackback. / No comment.

Trackback Address :: http://viper150.cafe24.com/trackback/262

You can also say.

Prev 1 Next
블로그 이미지
이것저것 불펌금지도 퍼다가 담습니다. 외부에 비공개된 페이지 입니다. By. 어른왕자

카테고리

  • 전체 (298)
    • 사는 이야기 (115)
    • 웹 프로그래밍 (102)
    • App 프로그래밍 (22)
    • IT 뉴스&기타 (22)
    • 박한별 (4)
    • 역사&기타지식 (9)

태그목록

  • 소녀시대
  • 광개토대왕
  • 유머
  • 크론탭
  • BOA
  • 수면부족
  • 전산공무원
  • 조선왕조실록
  • getdate
  • 남여관계
  • 조선500년
  • 윈도우7
  • 오픈오피스
  • 스프링
  • 몰카
  • 착각
  • 허성도
  • FilePathCheckerModuleExample.dll
  • 합금
  • 초경합금
  • pdf
  • 집안일
  • 전업남편
  • 피로
  • 공무원
  • 우리
  • tab
  • 최적화
  • Boy
  • 울트라에디터

최근에 올라온 글

  • 보험사의 조정신청 대응방법.
  • 어느 천재의 앞선 시선.
  • [병맛더빙] 누구게..... (1)
  • 韓경제 `회색 코뿔소` 상황...
  • SVN Connector 설치 URL.
  • 군대를 가지 않는 서울대생.
  • “운은 하늘의 귀여움 받는...
  • 목장에서 알바하다가 캐스...
  • [펌]믿고 거르는 관상.
  • 하루에 1세트씩 하면 좋다...

최근에 달린 댓글

  • 저도 칭구덕에 이젠 큰 부자가... 가현 04/12
  • 배우 김정현은 길지 않은 연기... 김정현 04/10
  • 정세균 국무총리는 4일 신종... 정세영 04/07
  • <p> '학폭을 인정한 적 없는'... 이가흔 04/05
  • 장동민은 "물론 전문가분들도... 장동민 04/02

최근에 받은 트랙백

  • Solace Salts Bold Tobacco. Solace Salts Bold Tobacco 03/29
  • read this post from Bookie 7. read this post from Bookie 7 02/28
  • công ty may đồng phục. công ty may đồng phục 01/08
  • Israelnightclub`s recent blo... Israelnightclub`s recent blo.. 01/06
  • Suggested Browsing. Suggested Browsing 01/06

글 보관함

  • 2019/03 (1)
  • 2018/12 (1)
  • 2018/09 (1)
  • 2018/08 (1)
  • 2018/02 (1)

달력

«   2021/04   »
일 월 화 수 목 금 토
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

링크

  • Total : 265408
  • Today : 24
  • Yesterday : 55
Tattertools
Eolin
rss

어른왕자's blog is powered byTattertools1.1.2.2 : Animato