어느 비전공자의 개발일지

Tiles(tiles) 적용방법 본문

백엔드 개발자/에디터

Tiles(tiles) 적용방법

vndn629 2023. 4. 21. 07:34

 

Tiles(tiles)란?

웹 페이지의 상단이나 하단, 메뉴와 같은 반복적으로 사용되는 부분들에 대한 정보를 한곳에 모아둔 프레임워크

 

Tiles(tiles) 적용하기

  1. pox.xml 추가하기 + 메이븐 프로젝트 업데이트하기
<!-- Tiles -->
		<dependency>
			<groupId>org.apache.tiles</groupId>
			<artifactId>tiles-core</artifactId>
			<version>${org.apache.tiles-version}</version>
		</dependency>
		
		<dependency>
			<groupId>org.apache.tiles</groupId>
			<artifactId>tiles-servlet</artifactId>
			<version>${org.apache.tiles-version}</version>
		</dependency>
		
		<dependency>
		          <groupId>org.apache.tiles</groupId>
		          <artifactId>tiles-jsp</artifactId>
		          <version>${org.apache.tiles-version}</version>
		      </dependency>
		
		<dependency>
			<groupId>org.apache.tiles</groupId>
			<artifactId>tiles-extras</artifactId>
			<version>${org.apache.tiles-version}</version>
		</dependency>

 

 

 

 

​

2. webapp밑에 tiles 폴더 & jsp & css 생성하기

생성한것

  • body 폴더 + body.jsp (테스트용도)
  • tiles 폴더 + 4개 jsp ( tiles-layout.jsp ) 가 대표 jsp 이다.
  • css 폴더 + common.css 만듬

 

 

 

tiles-layout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"  %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!-- 공통변수 처리 -->
<c:set var="CONTEXT_PATH" value="${pageContext.request.contextPath}" scope="application"/>
<c:set var="RESOURCES_PATH" value="${CONTEXT_PATH}/resources" scope="application"/>

<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<script type="text/javascript">
		var CONTEXT_PATH = "${CONTEXT_PATH}";
		var RESOURCES_PATH = "${RESOURCES_PATH}";
	</script>
	<link rel="stylesheet" href="/resources/css/common.css">
    <title><tiles:insertAttribute name="title" /></title>// 여기 name="title"값이랑 servlet-context.xml에name이 동일해야됌
  </head>
  
  <body>
  	<div class='wrap'>
  		<tiles:insertAttribute name="header" />
		  <div class='content'>  	
  			 <tiles:insertAttribute name="left"/>
	  		<div class="page_content">
	  			<tiles:insertAttribute name="body"/>
	  		</div>
  		</div>
  		<tiles:insertAttribute name="foot" />
  	</div>
  </body>
  
</html>

 

 

 

footerTemplate.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<div class="Footer">tiles footer 적용중..</div>
</body>
</html>

 

 

 

headerTemplate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>

<div class="Header">tiles header 적용중..</div>

</body>
</html>

 

 

 

sidebarTemplate.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<div class="SideBar">tiles sideBar 적용중..</div>
</body>
</html>

 

 

common.css

@charset "UTF-8";

*{
	margin: 0;
	padding: 0;
}
.wrap{
	width: 100%;
}

.Header, .content, .Footer{
	width: 100%;
	float: left;
}

.Header, .Footer{
	height: 8em;
}

.SideBar{
	width: 10%;
	height: 600px;
	background-color: rgb(190, 214, 231);
	float: left;
}

.page_content{
	width: 90%;
	height: 600px;
	background-color: rgb(204, 196, 189);
	float: left;
}

.Header{
	background-color: rgb(214, 235, 186);
}

.Footer{
	background-color: rgb(240, 219, 242);
}

 

 

 

​

​

resources -> spring -> tiles-define.xml 생성

 

 

 

 

 

tiles-define.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>
	<!-- main layout -->
	<!--  definition에서 name은 변수처럼 사용할 이름을 지정하고 template은 사용할 jsp를 지정 -->
	<definition name="layout-tiles" template="/WEB-INF/views/tiles/tiles-layout.jsp">
		<put-attribute name="header" value="/WEB-INF/views/tiles/headerTemplate.jsp" />
		<put-attribute name="left" value="/WEB-INF/views/tiles/sidebarTemplate.jsp" />
		<put-attribute name="body" value="" />
		<put-attribute name="foot" value="/WEB-INF/views/tiles/footerTemplate.jsp" />
	</definition>
	
	<definition name="*/*" extends="layout-tiles">
		<put-attribute name="body" value="/WEB-INF/views/" />
		<!-- <put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp" /> -->
		<put-attribute name="title" value="바디" />
	</definition>
</tiles-definitions>

 

 

 

servlet-context.xml

     <!-- 여기 id부분추가 -->
<beans:bean  id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
		 <beans:property name="order" value="2" />   <!-- order로 2순번째 -->
	</beans:bean>

<!-- tiles 설정 (여기 전체 다 추가)--> 
	<beans:bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
	    <beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
	    <beans:property name="order" value="1" />
	</beans:bean>
	 
	<beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
	    <beans:property name="definitions">
	        <beans:list>
	            <beans:value>classpath:spring/tiles-define.xml</beans:value>        <!-- 경로 classpath로 변경 -->
	        </beans:list>
	    </beans:property>
	</beans:bean>

 

 

 

 

이제 실행 시켜서 body.jsp 아무 내용이 없는데 켜보겠습니다.

  • 가운데부분이 body.jsp 이고 header,footer,side는 앞으로 jsp 생성될때마다 자동으로 생겨난다.

 

 

 

참고한 사이트

https://myhappyman.tistory.com/81

반응형
저작자표시 변경금지

'백엔드 개발자 > 에디터' 카테고리의 다른 글

RequireJS 란? RequireJS를 알아보자  (0) 2023.04.29
Schedule Cron Tab 표현식  (0) 2023.04.17
pom.xml (log4j) / log4j란? 목적? 구성? 종류?  (0) 2023.04.12
log4j2 사용법/적용하는법  (0) 2023.04.11
ckEditor 설정 값 변경하기  (0) 2023.04.07
'백엔드 개발자/에디터' Related Articles more