tiles (실습 예제)
Soohocoding
tiles (실습 예제)카테고리 없음2023. 5. 11. 01:31@Soohocoding
Table of Contents

erp.zip
6.41MB

 

1. 새로운 Spring MVC Project를 생성하고 첨부된 파일을 추가하여 다음과 같이 프로젝트를 구성합니다.

- 프로젝트명 : erp

- 프로젝트 생성하면서 정의할 패키지명:com.multi.erp

- 프로그램 버전

프로그램버전
<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.0.1</version>
			<scope>provided</scope>
</dependency>

서블릿 버전

 

java 버전 설정 11 or 1.8

 

2. 1번과 같이 새로운 Spring MVC Project를 생성하고 첨부된 파일을 추가하여 다음과 같이 프로젝트를 구성합니다.

 

tiles를 이용하면 화면의 레이아웃을 구성하세요. 조건을 보면서 조건에 맞게 처리하셔야 합니다.

 

[템플릿 작성]

tiles 설정 파일에 템플릿 작성합니다.

1) 첫 화면 템플릿

- definition템플릿명 : indexTemplate

- 레이아웃 : /WEB-INF/layout/index.jsp

- put-attribute명

top : /WEB-INF/include/top.jsp

content : /WEB-INF/include/mainContent.jsp

​

2) 두 번째 화면 템플릿

- definition템플릿명 : mainTemplate

- 레이아웃 : /WEB-INF/layout/mainLayout.jsp

- put-attribute명

top : /WEB-INF/include/top.jsp

menu : /WEB-INF/menu/pub_menu.jsp

content : /WEB-INF/emp/login.jsp

​

[첫 번째 화면]

 

Controller명 : main.IndexController

요청 path명 : /index.do

​

- definition명: index

- extends : indexTemplate

[top.jsp에서 "로그인"을 선택하는 경우]

 

 

Controller명 : main.IndexController

요청 path명 : /emp/login.do

요청 view명 : login

​

<tiles설정>

- definition명: login

- extends : mainTemplate

 

[top.jsp에서 "커뮤니티"를 선택하는 경우]

 

 

Controller명 : main.IndexController

요청 path명 : /menu/board.do

요청 view명 : menu/board

<tiles설정>

- definition명: menu/board

- extends : mainTemplate

- put-attribute명

menu : /WEB-INF/menu/board_menu.jsp

content : /WEB-INF/board/boardlist.jsp

​

[작업순서]

1. spring mvc project 만들기

- pom.xml에서 버전 바꾸기

- project facets에서 버전 바꾸기

2. 에러 없이 실행되는 거 확인

3. 첨부된 erp.zip 파일의 압축을 풀고 폴더 배치

- res 폴더의 하위 폴더는 static 폴더를 WEB-INF 폴더를 작성하고 하위로

​

4. pom.xml에 tiles 라이브러리 추가하기

- 버전변경하기

​

5. /WEB-INF/spring/appServlet/servlet-context.xml을

/WEB-INF/config로 이동하고 파일명 spring-config.xml로 변경하기

6. web.xml 파일을 열고 스프링 설정 파일 경로 변경하기

7. tiles-config.xml 설정 파일을 생성하고 블로그에 명시되어 있는 대로

템플릿 등록하기

8. /WEB-INF/layout/index.jsp와 /WEB-INF/layout/mainLayout.jsp를

열고 템플릿에 등록한 영역의 이름을 <tiles:insertAttribute>로 추가

9. spring-config.xml 파일을 열고 tiles로 뷰를 만들도록 등록하기

10. 이제 설정 작업 완료!!

서버를 restart 하고 오류가 있는지 확인하기

오류가 없으면 이제 컨트롤러 만들고 연결하면 됩니다.

11. src/main/java에 컨트롤러 만들기

​

12. Controller를 작성하고 화면을 세 개 요청할 것이므로

메소드 3개를 정의하고 뷰를 리턴하도록 설정

=> top.jsp에 설정한 요청 path로 requestmapping을 등록

13. tiles-config.xml에 뷰를 등록

템플릿을 기반으로 등록하며 뷰의 이름은 컨트롤러 각 메소드에 정의한

이름으로 등록하기

14. 실행해서 결과 확인하기

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

실습 결과 

 

1,2,3,4,5,6,7 생략

 

1.  src/main/java 밑에 main 패키지를 만들고 안에 indexController.java 를 만들었다

package main;

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

@Controller
public class IndexController {
	
	@RequestMapping("/index.do")
	public String index() {
		return "index";
	}
	@RequestMapping("/emp/login.do")
	public String login() {
		return "login";
	}
	@RequestMapping("/menu/board.do")
	public String menuboard() {
		return "menu/board";
	}
}

 RequestMapping이 3개이다  첫번째 화면 , top.jsp"로그인" , top.jsp"커뮤니티" 순이다.

 

2. 템플릿 작성을 위해 main-tiles.xml 에 작성하였다.

<?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">
<tiles-definitions>
	<definition name="indexTemplate" 
					template="/WEB-INF/layout/index.jsp">
		<put-attribute name="top" value="/WEB-INF/include/top.jsp"/>
		<put-attribute name="content" value="/WEB-INF/include/mainContent.jsp"/>
	</definition>
	
	<definition name="mainTemplate" 
			template="/WEB-INF/layout/mainLayout.jsp">
		<put-attribute name="top" value="/WEB-INF/include/top.jsp"/>
		<put-attribute name="menu" value="/WEB-INF/menu/pub_menu.jsp"/>
		<put-attribute name="content" value="/WEB-INF/emp/login.jsp"/>
	</definition>
	
	<definition name="index" extends="indexTemplate">
	</definition>
</tiles-definitions>

 첫 화면의 템플릿명 ,레이아웃 , put-attribute명 순이며  /// 두 번째 화면 템플릿명, 레이아웃 ,  put-attribute명 순이다.

 

3.board-tiles.xml

<?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">
<tiles-definitions>
	<definition name="menu/board" extends="mainTemplate">
	<put-attribute name="menu" value="/WEB-INF/menu/board_menu.jsp"/>
	<put-attribute name="content" value="/WEB-INF/board/boardlist.jsp"/>
	</definition>
</tiles-definitions>

 

 4.emp-tiles.xml

<?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">
<tiles-definitions>
	<definition name="menu/board" extends="mainTemplate">
	<put-attribute name="menu" value="/WEB-INF/menu/board_menu.jsp"/>
	<put-attribute name="content" value="/WEB-INF/board/boardlist.jsp"/>
	</definition>
</tiles-definitions>

 

 5.index.jsp / mainLayout.jsp

<%@ 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">
<meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="/erp/resources/common/css/main.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
	/* Remove the navbar's default margin-bottom and rounded borders */
	.navbar {
		margin-bottom: 0;
		border-radius: 0;	
	}
	/*  #toparea{
		padding: 30px;
	}  */
	/* body{
		background-color: #edeef1
	} */
</style>
<title>Insert title here</title>
</head>
<body>
	<div>
		<!-- 이곳에 top화면을 연결하세요" -->
		<tiles:insertAttribute name="top"></tiles:insertAttribute>
	</div>
	<div style="background-color: #edeef1;padding: 20px;height: 800px" id="main">
		<!-- 이곳에 mainContent화면을 연결하세요" -->
		<tiles:insertAttribute name="content"></tiles:insertAttribute>
	</div>
</body>
</html>

 인덱스

<%@ 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">
<meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="/erp/common/css/main.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
	/* Remove the navbar's default margin-bottom and rounded borders */
	.navbar {
		margin-bottom: 0;
		border-radius: 0;	
	}
	body{
		color: black;
	}
	/*  #toparea{
		padding: 30px;
	}  */
	/* body{
		background-color: #edeef1
	} */
</style>
<title>Insert title here</title>
</head>
<body>
	<div>
		<!-- 이곳에 top화면을 연결하세요" -->
		<tiles:insertAttribute name="top"></tiles:insertAttribute>
	</div>
	<div style="background-color: #edeef1;padding: 20px;height: 800px">
		
			<div class="row" style="margin-left: auto;margin-right: auto;">
			 	<div class="col-sm-3" 
			 	style="background-color: white;margin-right:10px;padding: 0px ">
			 		 <div
			 		 style="border-color:white;height: 800px;">
				        <div style="background-color:#63cde7;padding: 20px;
				        font-family:HY-견고딕;font-size: 16pt;color: white;
				         font-weight: bolder;">${loginUser.job_category}</div>

				       <!-- 이곳에 menu화면을 연결하세요" -->
				       <tiles:insertAttribute name="menu"></tiles:insertAttribute>
      				 </div>
			 	</div>
			 	<div class="col-sm-8" style="background-color: white;height: 800px;">
					<tiles:insertAttribute name="content"></tiles:insertAttribute>
			 		<!-- 이곳에 content화면을 연결하세요" -->		 	</div>
			 		
			</div>
	</div>
	
</body>
</html>

메인레이아웃

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

 

번외 !!!!!!!  : !!!!!!! 알수 없는 에러발생 !!!!!!!

오류 확인하고 mainLayout.jsp가 지정된 폴더에 있는것을 확인하였고 그런데도 404가 뜬 것을 보고

한참 고민을 하였다 그러다가 STS 의 문제가 아니고 서버가 인식하는 문제가 아닐까 하여 서버가 인식하는 위치로가서

해당폴더에 파일이 있는지 확인한 결과 mainLayout.jsp가 없다는 것을 알았다 그러하여 mainLayout.jsp을 따로 넣어주어 오류를 해결할 수 있었다.

경로는 C:\Work\Springwork\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\erp\WEBINF\layout 

 

오류의 원인은 빌드롤이 자동으로 동작하는 과정에서 발생하는 오류라고 볼 수 있고 처음에 배포될때 문제가 발생하며

시스템 사양에 따라서 달라지고 안정적으로 유지되는 경우 거의 발생하지 않는 오류상황이라고 한다.

 

Soohocoding
@Soohocoding :: Soohocoding

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

image

티스토리툴바