[Spring] SpringTiles

SpringTiles란?

스프링에서 메인페이지를 만들어주는 프레임워크(타일즈3)

SpringTiles를 예제를 통해 순서대로 진행하면서 정리하고자 한다.
Maven을 적용하여 만들어보고자한다.

---

Maven을 프로젝트 만들자마자 바로 적용해버린다

• 이전에 정리했던 방법1을 사용하여 Maven을 적용한 후 pom.xml에 추가로 springtiles에 관련된 라이브러리도 추가한다.

Maven적용은 저번에 했기에 따로 정리는 생략하고 라이브러리 추가만 정리하자면

~생략~
  <!-- springtiles에 관련된 라이브러이 다운로드 -->    
       
  	<dependency>
  		<groupId>org.apache.tiles</groupId>
  		<artifactId>tiles-extras</artifactId>
  		<version>3.0.1</version>
  	</dependency>
  	<dependency>
  		<groupId>org.apache.tiles</groupId>
  		<artifactId>tiles-servlet</artifactId>
  		<version>3.0.1</version>
  	</dependency>
  	<dependency>
  		<groupId>org.apache.tiles</groupId>
  		<artifactId>tiles-jsp</artifactId>
  		<version>3.0.1</version>
  	</dependency>

  	<dependency>
  		<groupId>org.slf4j</groupId>
  		<artifactId>slf4j-api</artifactId>
  		<version>1.7.5</version>
  	</dependency>
</dependencies>
~생략~  

---

web.xml 내용추가

• 이전 mvc4의 web.xml의 기본설정과 한글처리부분 가져와 붙이기

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>SpringTiles</display-name>
  
  <servlet>
  	<servlet-name>test</servlet-name>
  	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>test</servlet-name>
  	<url-pattern>*.do</url-pattern>
  </servlet-mapping>
  
  <!-- 라이브러리 -->
  <filter>
  	<filter-name>encodingFilter</filter-name>
  	<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  	<init-param>
  		<param-name>encoding</param-name>
  		<param-value>UTF-8</param-value>
  	</init-param>
  </filter>
  
  <filter-mapping>
  	<filter-name>encodingFilter</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>
  
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

---

test-servlet.xml 복사해서 추가 및 수정 (WEB_INF에 넣기)

• tiles에 관련된 환경설정을 불러오기
• viewResolver가 조금 변환 => 수정해준다
  • InternalResource을 UrlBased로 수정해준다
  • prefix,suffix 부분 지워준다
  • JstlView을 tiles3.TilesView로 수정해준다

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">

	<!-- @Autowired,~ 할때 필요로 하는 자비빈즈를 자동으로 등록시켜주는 옵션 -->
	<context:annotation-config />
	
	
	<!-- 
		tiles에 관련된 환경설정을 불러오기(viewResolver가 조금 변환)
		기존의 prefix,suffix를 이용해서 경로명 및 파일의 확장자를 지정X
		setDefinitions("/WEB-INF/tiles-def/tilesdef.xml")  => property
	 -->
	<bean id="tilesConfigurer" 
              class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
       <property name="definitions">
           <list>
              <value>/WEB-INF/tiles-def/tilesdef.xml</value>
           </list>
       </property>      
   </bean>
	
	<!-- 4.viewResolver(위치(prefix),이동할 페이지의 확장자(suffix)지정) -->
	<bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
	</bean>
</beans>

---

tilesdef.xml 생성 => 타일즈에 대한 환경설정

• WEB-INF안에 tiles-def 폴더 생성한후 그 안에 만든다.
• 내용추가는 이따 할 계획, 일단 생성만

---

tiles-view 폴더 생성 (WEB-INF에)후 그 안에 template폴더 생성
=> 메인페이지에서 보여줄 폴더 생성

---

template 안에 header.jsp, footer.jsp, menu.jsp 생성

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h2 align="center">Spring Tiles Examples !!</h2>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div align="center" style="background:yellow;">
	company information	
</div>

menu.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>왼쪽 메뉴 선택</title>
</head>
<body>
	<center>
		<ul>
			<li><a href="index.do">main</a></li>
			<li><a href="menu1.do">menu1</a></li>
			<li><a href="menu2.do">menu2</a></li>
		</ul>
	</center>
</body>
</html>

---

layout.jsp 생성

• template 안에 생성
• 전체 메인페이지 레이아웃(메인페이지 디자인같음)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><tiles:insertAttribute name="title" /></title>
</head>
<body>
	<table border="1" cellpadding="0" cellspacing="0" bgcolor="#a0a0a0" width="100%">
		<tr height="50" valign="middle" bgcolor="yellow">
			<td colspan="2">
				
			</td>
		</tr>
		<!-- 본문 -->
		<tr height="700" bgcolor="#ffffff">
			<td width="15%" valign="top">
				
			</td>
			<td width="85%" valign="top">
				
			</td>
		</tr>
		<!-- 꼬리말 -->
		<tr height="50" valign="middle" bgcolor="yellow">
			<td colspan="2">
				
			</td>
		</tr>
	</table>
</body>
</html>

---

tilesdef.xml 내용추가

• menu 부분 추가 (경로)
• header 부분 추가 (경로)
• body 부분 추가 (경로)
• footer 부분 추가 (경로)

~생략~
<tiles-definitions>
    <definition name="index" template="/WEB-INF/tiles-view/template/layout.jsp">
       <put-attribute name="title" value="메인 페이지"/>
       <put-attribute name="menu" value="/WEB-INF/tiles-view/template/menu.jsp" />
       <put-attribute name="header" value="/WEB-INF/tiles-view/template/header.jsp" />
       <put-attribute name="body" value="/WEB-INF/tiles-view/body.jsp" />
       <put-attribute name="footer" value="/WEB-INF/tiles-view/template/footer.jsp" />
    </definition>

---

body.jsp와 body-menu1, body-menu2 생성

• tiles-view안에 넣기
• layout부분의 가운데 부분에 이 3개가 상황에따라 바뀌어서 들어간다

body.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<br><br>
<h1>Main Page</h1>
<div align="center"><b>main page body!!</b></div>

body-menu1

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<br>
Menu1 의 내용 입니당~

body-menu2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<br>
Menu2 의 화면 입니다.

---

test-servlet.xml에 내용추가

• 요청명령어에 따른 컨트롤러 클래스를 추가로 작성(모델2 액션클래스)

~생략~
<!-- 요청명령어에 따른 컨트롤러 클래스를 작성(모델2 액션클래스) -->
	<bean class="kr.spring.tiles.controller.IndexController" />
	<bean class="kr.spring.tiles.controller.Menu1Controller" />
	<bean class="kr.spring.tiles.controller.Menu2Controller" />

~생략~

---

IndexController.java 생성

• 패키지=> kr.spring.tiles.controller로 생성
• 방금 위에 설정한 경로(test-servlet.xml)에 해당되는 Index컨트롤러
• @Controller 적용
• @RequestMapping 적용

package kr.spring.tiles.controller;

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

@Controller
public class IndexController {// /index.do

	@RequestMapping("/index.do")
	public String process() {//ModelAndView를 하지 않은 이유
										//tiles에서 따로 지정해서 불러오기 때문에
		return "index"; //-> <definition name="index">라는 이름과 일치하는 이름을 찾아서
	}
}

---

Menu1Controller.java 생성

• 패키지=> kr.spring.tiles.controller로 생성
• 위의 IndexController.java에서 index들 대신 munu1로만 바꿔준다

package kr.spring.tiles.controller;

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

@Controller
public class Menu1Controller {// /menu1.do

	@RequestMapping("/menu1.do")
	public String process() {
		return "menu1";
	}
}

---

Menu2Controller.java 생성

• 패키지=> kr.spring.tiles.controller로 생성
• 위의 Menu1Controller.java에서 menu1들 대신 munu2로만 바꿔준다

package kr.spring.tiles.controller;

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

@Controller
public class Menu2Controller {// /menu2.do

	@RequestMapping("/menu2.do")
	public String process() {
		return "menu2";
	}
}

---

tilesdef.xml 내용추가

• 바꿀부분을 가져와서 바꿔서 작성하면 적용됨
• 디자인도 상속이된다
• menu1 부분 추가
• menu2 부분 추가

~생략~
  <!-- extend="부모의 definition명" -->
    <definition name="menu1" extends="index">
    	<put-attribute name="title" value="두번째 페이지"/>
    	<put-attribute name="body" value="/WEB-INF/tiles-view/body-menu1.jsp" />
    </definition>
    <definition name="menu2" extends="index">
        <put-attribute name="title" value="세번째 페이지"/>
    	<put-attribute name="body" value="/WEB-INF/tiles-view/body-menu2.jsp" />
    </definition>

---

layout.jsp 내용추가
=> tilesdef.xml의 값들 불러오기 <tiles:insertAttribute >

• tiles 액션태그를 사용할수있게하는 설정 추가(맨위에)
• title에 tilesdef.xml의 title 불러오기
• header에 tilesdef.xml의 header 불러오기
• 본문에 tilesdef.xml의 menu, body 불러오기
• footer에 tilesdef.xml의 footer 불러오기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><tiles:insertAttribute name="title" /></title>
</head>
<body>
	<table border="1" cellpadding="0" cellspacing="0" bgcolor="#a0a0a0" width="100%">
		<tr height="50" valign="middle" bgcolor="yellow">
			<td colspan="2">
				<tiles:insertAttribute name="header" />
			</td>
		</tr>
		<!-- 본문 -->
		<tr height="700" bgcolor="#ffffff">
			<td width="15%" valign="top">
				<tiles:insertAttribute name="menu" />
			</td>
			<td width="85%" valign="top">
				<tiles:insertAttribute name="body" />
			</td>
		</tr>
		<!-- 꼬리말 -->
		<tr height="50" valign="middle" bgcolor="yellow">
			<td colspan="2">
				<tiles:insertAttribute name="footer" />
			</td>
		</tr>
	</table>
</body>
</html>

---

실행시켜주기 위한 index.jsp 가져와서 수정
-/index.do로 수정 후 실행

<%
response.sendRedirect(request.getContextPath()+"/index.do");
%>

---

2022-08-31