이제 페이지 구성이 어떻게 되는지 실험을 해 보았다.


일단 레이아웃 폴더의 위치는 아래와 같다.



앞서 지정한 타일즈 폴더 안에 해당 파일들이 존재한다.


연습용으로 파일들의 입력해보았다.

각각 파일들을 살펴 보면 아래와 같다.


[위치 : 폴더\src\main\webapp\WEB-INF\jsp\tiles\layout.js]

 <%@ 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" %>   

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="<c:url value='/css/test.css'/>"/>

</head>


<body>

<tiles:insertAttribute name="header" />


<tiles:insertAttribute name="content" />

<tiles:insertAttribute name="footer" />

</body>

</html>

 

 


html5 jsp를 적용하고(html5 템플릿을 기본으로 적용하는 것은 인터넷을 찾아보도록 한다.)


header에 css 파일을 가지고 오고(테스트를 위해 css를 적용하였다.)

body에 각각의 파일들을 어트리 뷰트로 추가했다.


test.css

@CHARSET "UTF-8";

div{height: 100px; border: 1px solid; clear: both;}

.content{height: 50px; background-color: green;} 


header.jsp

<div>

header

</div> 


content.jsp

<div class="content">

content

</div> 


footer.jsp

<div>

footer

</div> 


각각의 파일을 작성한 후 프로그램을 실행해 보았다.



위에서 보는 것과 같이 css까지도 잘 먹혀 동작하는 것을 볼 수 있다.


여러 파일에서 중복적으로 코드가 들어가지 않도록 구분을 하는 것과

다양한 테스트가 필요하겠지만 

일단 코드를 분리하고 레이아웃 구성대로 작업을 할 수 있을 것이라는 생각은 든다.


이것을 가지고 차차 egov의 페이지를 변경해도록 해야 겠다.



저작자표시 (새창열림)

'egovframework' 카테고리의 다른 글

[egov] 타일즈(tiles) 적용 - 2  (0) 2014.07.24
[egov] 타일즈(tiles) 적용 - 1  (0) 2014.07.24
[egov] 포탈 사이트 화면 분석 - 3  (0) 2014.07.17
[egov] 포탈 사이트 화면 분석 - 2  (0) 2014.07.17
[egov] 포탈 사이트 화면 분석 - 1  (0) 2014.07.17

이제 타일즈를 사용할 수 있도록 View Resolver를 수정해보자.


현재 설정은 아래와 같이 되어 있다.



[경로: src/main/webapp/WEB-INF/config/egovframework/springmvc/egov-com-servlet.xml]


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


모든 URL 패턴은 위 설정에 따라 이동한다.

하지만 타일즈를 적용할라면 다른 View Resolver를 사용해야 한다.


위의 코드를 주석 처리한 후 아래와 같이 타일즈를 사용 할 수 있도록 변경하자.

tiles3를 사용한다고 표시 되어 있다.


그리고 설정은 아래 tiles.xml에 되어 있다고 입력 해주자.


<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver" p:order="1"

    p:viewClass="org.springframework.web.servlet.view.tiles3.TilesView" />

<!--Don't add suffix or prefix like you do with .jsp files-->

<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer" >

   <property name="definitions">

       <value>/WEB-INF/tiles/tiles.xml</value>

   </property>

</bean> 



tiles.xml 파일은 아래와 같이 되어 있다.

[경로 : C:\egov\workspace\PP\src\main\webapp\WEB-INF\tiles\tiles.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="mainTemplate" template="/WEB-INF/jsp/tiles/layout.jsp">

<put-attribute name="header" value="/WEB-INF/jsp/tiles/header.jsp" />

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

<put-attribute name="footer" value="/WEB-INF/jsp/tiles/footer.jsp" />

</definition>

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

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

</definition>

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

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

</definition>

</tiles-definitions>


템플릿인 layout.jsp파일을 지정해준다.

그리고 layout파일안에 header, content, footer 파일을 주입시켜준다.


또한 URL 패턴이 /로 구분하여 2개, 3개일 경우(egov가 2개, 3개의 URL패턴을 가진다.) 패턴에 맞는/요청 URL에 맞는 jsp파일을 리턴하도록 할 수 있다.


또한 extends를 통해 레이아웃을 상속 받을 수 있다.

주석 처리된 것은 어떤 URL패턴이 요청하면 web/jsp에 구분자에 맞게 contents만 변경하여 페이지를 리턴한다.

이는 해더와 푸터에 중복되는 코드는 그대로 사용하고 컨텐츠만 변경하여 가지고 리턴할 수 있다.


여기서는 연습을 위해 주석처리를 해둬 어떤 요청이든 해당 템플릿에 있는 내용을 리턴하기로 해놓았다.


저작자표시 (새창열림)

'egovframework' 카테고리의 다른 글

[egov] 타일즈(tiles) 적용 - 3  (0) 2014.07.24
[egov] 타일즈(tiles) 적용 - 1  (0) 2014.07.24
[egov] 포탈 사이트 화면 분석 - 3  (0) 2014.07.17
[egov] 포탈 사이트 화면 분석 - 2  (0) 2014.07.17
[egov] 포탈 사이트 화면 분석 - 1  (0) 2014.07.17

egov 프레임워크에 심플화면에 대한 간단한 분석을 하였다.


여기에 요즘 대세인 angualrjs, twitter bootstrap을 적용하고 싶어졌다.

반응형 웹 및 mv* framework를 이용한 코딩 생산성 제고!

이 목적으로 egov를 변경해보자.


지인 중 한명이 이런말을 하였다.

프론트 기술은 

SPA(Single Page Application)를 할거면 jquery랑  require랑 mv*프레임워크를 엮으라

SPA안할거면 jsp tiles에 대충 짬뽕하여 엮으라


egov 에서는 만들어놓은 페이지 jsp 기반이며 또한 현재는 SPA에 대한 개념도 별로 없으니 타일즈를 적용하기로 했다.


서론이 길었다. 


타일즈를 먼저 할려면 pom.xml 에 해당 라이브러리를 추가해보자.



1) 먼저 해당 버전을 입력하자.


경로 : [폴더\pom.xml]

<properties>

    <egovframework.rte.version>3.0.0</egovframework.rte.version>

    <spring.maven.artifact.version>3.2.9.RELEASE</spring.maven.artifact.version>

    <org.apache.tiles-version>3.0.3</org.apache.tiles-version>

  </properties> 


파일 위쪽에 버전을 적혀있는 프로퍼티 부분이 있다.

거기서 스프링 버전 egov 버전이 적혀있다.

참고로 타일즈 3버전 이상은 스프링 3.2 이상부터 지원한다고 한다.

스프링 3.2 이하일 경우 타일즈 2 버전으로 해야 한다.


여기서는 타일즈 3.0.3버전으로 적용 해보겠다.


이제 타일즈의 라이브러리를 적어본다.

tiles-core, tiles-servlet, tiles-extras 의 라이브러리를 추가한다.

여기서 exclusions는 해당 라이브러리를 현재 dependency에는 포함하지 않는다는 뜻이다.

이 문자를 안하면 egov프레임워크와 타일즈의 다른 slf4j 버전으로 충돌이 발생 한다.


${org.apache.tiles-version}는 위에 설정한 버전 정보이다.

<!-- jsp tiles -->

<dependency>

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

<artifactId>tiles-core</artifactId>

<version>${org.apache.tiles-version}</version>

<!-- needed to exclude slf4j which causes incompatibilities -->

<exclusions>

<exclusion>

<groupId>org.slf4j</groupId>

<artifactId>slf4j-nop</artifactId>

</exclusion>

<exclusion>

<groupId>org.slf4j</groupId>

<artifactId>slf4j-api</artifactId>

</exclusion>

<exclusion>

<groupId>org.slf4j</groupId>

<artifactId>jcl-over-slf4j</artifactId>

</exclusion>

</exclusions>

</dependency>

<dependency>

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

<artifactId>tiles-servlet</artifactId>

<version>${org.apache.tiles-version}</version>

<!-- needed to exclude slf4j which causes incompatibilities -->

<exclusions>

<exclusion>

<groupId>org.slf4j</groupId>

<artifactId>slf4j-nop</artifactId>

</exclusion>

<exclusion>

<groupId>org.slf4j</groupId>

<artifactId>slf4j-api</artifactId>

</exclusion>

<exclusion>

<groupId>org.slf4j</groupId>

<artifactId>jcl-over-slf4j</artifactId>

</exclusion>

</exclusions>

</dependency>

<dependency>

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

<artifactId>tiles-extras</artifactId>

<version>${org.apache.tiles-version}</version>

<!-- needed to exclude slf4j which causes incompatibilities -->

<exclusions>

<exclusion>

<groupId>org.slf4j</groupId>

<artifactId>slf4j-nop</artifactId>

</exclusion>

<exclusion>

<groupId>org.slf4j</groupId>

<artifactId>slf4j-api</artifactId>

</exclusion>

<exclusion>

<groupId>org.slf4j</groupId>

<artifactId>jcl-over-slf4j</artifactId>

</exclusion>

</exclusions>

</dependency>




[그림 - 타일즈 라이브러리]


위와 같이 타일즈 라이브러리가 추가된것을 볼 있다.

저작자표시 (새창열림)

'egovframework' 카테고리의 다른 글

[egov] 타일즈(tiles) 적용 - 3  (0) 2014.07.24
[egov] 타일즈(tiles) 적용 - 2  (0) 2014.07.24
[egov] 포탈 사이트 화면 분석 - 3  (0) 2014.07.17
[egov] 포탈 사이트 화면 분석 - 2  (0) 2014.07.17
[egov] 포탈 사이트 화면 분석 - 1  (0) 2014.07.17

+ Recent posts

티스토리툴바