전자정부 tiles 세팅

AAA·2018년 12월 21일
1

1. eGovFrame Web Project 프로젝트 생성

image.png

2. Generate Example 클릭

image.png

3. 프로젝트 생성 완료

image.png

4. pom.xml 수정

파일 위치는 네비게이터에서 프로젝트 제일 하단!
image.png

image.png

상단에 19번째줄쯤 properties 부분에
<org.apache.tiles-version>2.2.2</org.apache.tiles-version> 를 아래와 같이 추가 합니다.

	<properties>
	    <spring.maven.artifact.version>4.2.4.RELEASE</spring.maven.artifact.version>
		<egovframework.rte.version>3.7.0</egovframework.rte.version>
		<org.apache.tiles-version>2.2.2</org.apache.tiles-version>
	</properties>

중간 115번째 줄쯤 <groupId>org.hsqldb</groupId> 디펜던시 아래 부분부터
tiles관련 디펜던시를 추가 합니다.
결국 <dependencies>....</dependencies> 사이에 추가 하는 것입니다.

		<dependency>
			<groupId>org.hsqldb</groupId>
			<artifactId>hsqldb</artifactId>
			<version>2.3.2</version>
		</dependency>

이 다음 부분에 아래의 디펜던시를 추가 한다.

		<!--  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-jsp</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>

${org.apache.tiles-version} 이 부분에 2.2.2가 들어가는 것입니다.

5. dispatcher-servlet.xml 수정

src > main > webapp > WEB-INF > config > egovframework > springmvc > dispatcher-servlet.xml
image.png

47번째 줄쯤 아래와 같은 코드가 있습니다. order=1 을 order=2 로 변경합시다.

    <bean class="org.springframework.web.servlet.view.UrlBasedViewResolver" p:order="1"
	    p:viewClass="org.springframework.web.servlet.view.JstlView"
	    p:prefix="/WEB-INF/jsp/egovframework/example/" p:suffix=".jsp"/>

그리고 저 구문 상단에 아래의 내용을 추가 합시다.

    <bean id="tilesViewResolver"
            class="org.springframework.web.servlet.view.UrlBasedViewResolver">
            <property name="viewClass"
                  value="org.springframework.web.servlet.view.tiles2.TilesView" />
            <property name="order" value="1" />
      </bean>
      <!-- Tiles 2 Configurer -->
      <bean id="tilesConfigurer"
            class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
            <property name="definitions">
                  <list>
                        <value>/WEB-INF/tiles/default-layout.xml</value>
                  </list>
            </property>
      </bean>

하단에 order=2 로 변경된 구문이 있겠지요?

    <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/example/" p:suffix=".jsp"/>

결국 jsp를 2순위로 쓰고 tiles를 /WEB-INF/tiles/default-layout.xml 이 xml파일 기준으로 1순위로 쓰겠다라는 설정을 한것입니다.

6. tiles폴더를 생성! default-layout.xml 파일 작성!

src > main > webapp > WEB-INF > tiles > default-layout.xml

image.png

tiles 폴더를 WEB-INF 아래 생성합니다.

image.png

tiles 폴더 아래 default-layout.xml 파일을 생성합니다.

image.png

작성하기 전에 먼저 기존에 퍼블리싱된 html 파일의 구조를 먼저 파악한다.

  • 헤더 : tiles_header
  • 메뉴 : tiles_nav
  • 컨텐츠 : tiles_content

이렇게 3가지 구조로 나누어 보았다.

<?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="layouts-tiles" template="/WEB-INF/jsp/egovframework/example/cmmn/default-layouts.jsp">
	  	<put-attribute name="tiles_header"    	value="/WEB-INF/jsp/egovframework/example/cmmn/default-header.jsp" />
	  	<put-attribute name="tiles_nav"    		value="/WEB-INF/jsp/egovframework/example/cmmn/default-nav.jsp" />
	  	<put-attribute name="tiles_content"   	value="" />
	</definition>
	
	<definition name="*/*.tiles" extends="layouts-tiles">
	  	<put-attribute name="tiles_content" value="/WEB-INF/jsp/egovframework/example/{1}/{2}.jsp" />
	</definition>
</tiles-definitions>

7. default-layouts.jsp 파일 작성!

image.png

cmmn폴더 마우스 우클릭으로 생성해도 되고 단축키 ctrl + N을 사용해도 된다.

image.png

image.png

<tiles:insertAttribute name="xxxxx"/> 해당 파일의 소스가 타일 처럼 붙여지는 것이다!

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles"  prefix="tiles"%>
<!DOCTYPE html>
<html>
	<head>
  		<tiles:insertAttribute name="tiles_header"/>
  	</head>
  	<body>
  		<div id="wrap">	
	  		<div id="header">
	  			<tiles:insertAttribute name="tiles_nav"/>
		  	</div>
  			<div id="contents">
	  			<tiles:insertAttribute name="tiles_content"/>
		  	</div>	
  		</div>
  	</body>
</html>

8. default-header.jsp 파일 작성!

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KIA - Owner's Manual Management System</title>
<link type="text/css" rel="stylesheet" href="./common/css/import.css" />
<script type="text/javascript" src="./common/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./common/js/jquery-ui.js"></script>
<script type="text/javascript" src="./common/js/common.js"></script>

9. default-nav.jsp 파일 작성!

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<div class="logo">
	<a href="index.html">
		<span class="logo_mein"><img src="./images/common/logo.png" alt="KIA" /></span>
		<span class="logo_sub"><img src="./images/common/logo_side.png" alt="Owner’s Manual Management System" /></span>
	</a>
</div>

<!-- util -->
<div class="util">
	<span class="user">재무관리팀 <a href="#">홍길동</a></span>
	<ul>
		<li class="home"><a href="#">Home</a></li>
		<li class="log"><a href="#">Logout</a></li>
		<li class="help"><a href="#">Help</a></li>
	</ul>
</div>
<!-- //util -->

<!-- nav -->
<div id="navWrap">
	<ul id="nav">
		<li>
			<span>게시판정복</span>
			<div>
				<ul>
					<li><a href="dashboard01.html">게시판1_MVC</a></li>
					<li><a href="dashboard02.html">게시판2_수정등록삭제</a></li>
					<li><a href="dashboard03.html">게시판3_페이징</a></li>
					<li><a href="dashboard04.html">게시판4_AJAX</a></li>
				</ul>
			</div>
		</li>
		<li>
			<span>제작준비</span>
			<div>
				<ul>
					<li><a href="#">법규 및 변경 관리</a></li>
					<li><a href="#">O/M 제작 의뢰</a></li>
					<li><a href="#">제작 의뢰 리스트</a></li>
					<li><a href="#">O/M 승인 발주</a></li>
				</ul>
			</div>
		</li>
		<li>
			<span>발간형황</span>
			<div>
				<ul>
					<li><a href="#">발간형황</a></li>
				</ul>
			</div>
		</li>
	</ul>
</div>
<!-- //nav -->

10. main.jsp 파일 작성!

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<div class="article_top" style="width:700px;">
		<h2 class="tit_h2">게시판1_MVC</h2>
		<div class="area_rgt" >
			<ul class="btn_list">
				<!-- <li><a href="#" class="btn_type2"><span class="btn_add">글작성</span></a></li> -->
				<!-- <li><a href="#" class="btn_type2"><span class="btn_del">삭제</span></a></li>
				<li><a href="#" class="btn_type2"><span class="btn_sav">저장</span></a></li> -->
			</ul>
		</div>
</div>
<!-- 게시판 리스트 -->
<div class="board_wrap">
	<table class="brd_list brd_chk" style="width:700px;">
		<thead>
			<tr>
				<th rowspan="2">No</th>
				<th rowspan="3"><strong>제목</strong></th>
				<th rowspan="2"><strong>작성자</strong></th>
				<th rowspan="2"><strong>작성일</strong></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>안녕하세요. 첫 게시글 입니다.</td>
				<td class="txt_ct">홍길동</td>
				<td class="txt_ct">2018년 12월 16일</td>
			</tr>
		</tbody>
	</table>
</div>
<!-- //게시판 리스트 -->

11. index.jsp 파일 수정

src > main > webapp > index.jsp
image.png

main.do를 호출하도록 수정 해준다.

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<jsp:forward page="/main.do"/>

12. MainController.java 파일 생성

example 폴더 아래 main 폴더를 생성
main 폴더 아래 web 폴더를 생성
web 폴더에 MainController.java 파일을 생성

src > main > java > egovframework > example > main > web > MainController.java

image.png

package egovframework.example.main.web;

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

@Controller
public class MainController {
	
	@RequestMapping(value = "main.do")
	public String initMain() throws Exception {

		return "main/main.tiles";
	}
}
profile
AAA
개인 정리 블로그입니다
이전 포스트

test2

다음 포스트

Grid 정리

2개의 댓글

comment-user-thumbnail
AAA
2018년 12월 28일

https://youtu.be/A5GkWxrPoMk
참고

답글 달기
comment-user-thumbnail
...
2018년 12월 30일

아주 중요한건 아니지만
첫번째 그림에서
Group Id 는 com.company
형식으로 쓰는게 맞습니다^^

답글 달기