Tiles란?
Tiles는 뷰 패턴 구현에서 웹페이지의화면 구성(레이아웃)을 쉽게 구성할 수 있게 도와주는 프레임워크다. 레이아웃 설정을 통해 헤더, 푸터, 메뉴 등을 동일하게 설정해 효율적인 코딩을 도와준다. 설정은 아래와 같다.
pom.xml
<!-- tiles-jsp -->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-jsp</artifactId>
<version>3.0.8</version>
</dependency>
<!-- tiles/tiles-el -->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-el</artifactId>
<version>3.0.8</version>
</dependency>
<!-- tiles-api -->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-api</artifactId>
<version>3.0.8</version>
</dependency>먼저 mavenrepository에서 tiles el, api, jsp 등을 추가한다. 아래 링크에서 찾을 수 있다. 링크 바로가기
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>
<!-- #layout1 -->
<definition name="layout1" template="/WEB-INF/layout/layout1.jsp">
<put-attribute name="title" value="/WEB-INF/layout/title.jsp"/>
<put-attribute name="menu" value="/WEB-INF/layout/menu.jsp"/>
<put-attribute name="main" value="/WEB-INF/layout/main.jsp"/>
<put-attribute name="info" value="/WEB-INF/layout/info.jsp"/>
</definition>
<!-- wild card_#1 -->
<definition name="/*/*" extends="layout1">
<put-attribute name="main" value="/WEB-INF/{1}/{2}.jsp"/>
</definition>
<!--#layout2 -->
<definition name="layout2" template="/WEB-INF/layout/layout2.jsp">
<put-attribute name="menu" value="/WEB-INF/layout/menu.jsp"/>
<put-attribute name="main" value="/WEB-INF/layout/map.jsp"/>
</definition>
<!-- wild card_#2 -->
<definition name="/sub/*/*" extends="layout2">
<put-attribute name="main" value="/WEB-INF/{1}/{2}.jsp"/>
</definition>### TilesConfig.java
package com.example.demo;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.view.UrlBasedViewResolver;
import org.springframework.web.servlet.view.tiles3.SimpleSpringPreparerFactory;
import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;
import org.springframework.web.servlet.view.tiles3.TilesViewResolver;
@Configuration
public class TilesConfig {
@Bean
public TilesConfigurer tilesConfigurer() {
System.out.println("tiles");
TilesConfigurer tilesConfigurer = new TilesConfigurer();
tilesConfigurer.setDefinitions(new String[] {"/WEB-INF/tiles.xml"});
tilesConfigurer.setCheckRefresh(true);
//ViewPreparer에서 Autowired가 가능하게 하는 설정
tilesConfigurer.setPreparerFactoryClass(SimpleSpringPreparerFactory.class);
return tilesConfigurer;
}
@Bean
public TilesViewResolver tilesViewResolver() {
TilesViewResolver viewResolver = new TilesViewResolver();
viewResolver.setViewClass(TilesView.class);
viewResolver.setOrder(1);
return viewResolver;
}
@Bean
public UrlBasedViewResolver viewResolver() {
final UrlBasedViewResolver resolver = new UrlBasedViewResolver();
resolver.setViewClass(TilesView.class);
resolver.setOrder(1);
return resolver;
}
}
### layout1.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link
href="https://fonts.googleapis.com/css2?family=Dongle&family=Hi+Melody&family=Jua&family=Nanum+Pen+Script&family=Single+Day&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title>Insert title here</title>
<style type="text/css">
/* body{
font-family: 'Jua';
font-size: 1.3em;
} */
div.layout div {
border: 0px solid gray;
}
div.layout div.title {
position: absolute;
top: 10px;
left: 350px;
height: 100px;
}
div.layout div.menu {
position: absolute;
top: 150px;
left: 250px;
height: 130px;
}
div.layout div.info {
position: absolute;
left: 30px;
top: 250px;
width: 200px;
height: 250px;
border: 5px solid purple;
border-radius: 30px;
padding: 30px 20px;
}
div.layout div.main {
position: absolute;
left: 300px;
top: 300px;
width: 1000px;
height: 500px;
}
</style>
</head>
<body>
<div class="layout">
<div class="title">
<tiles:insertAttribute name="title" />
</div>
<div class="menu">
<tiles:insertAttribute name="menu" />
</div>
<div class="info">
<tiles:insertAttribute name="info" />
</div>
<div class="main">
<tiles:insertAttribute name="main" />
</div>
</div>
</body>
</html>tiles.xml 에서 Template은 페이지의 구조를, Attribute는 구조내에서 실제 내용을, definition은 Template(구조)에 Attribute(내용)을 연결하여 랜더링가능한 페이지를 설정한다. 여러 템플릿을 미리 등록해두는 방식으로 병행하여 사용 가능하다.
남들이 다 아는 걸 모를 수는 없지!