▼ Backend/스프링 (Spring)

Spring Boot | Tiles (타일즈) 적용하기

Valar 2021. 6. 30. 15:28
반응형

▶ Tiles 란?

웹 페이지의 상단(Header)이나 하단(Footer)과 같이 반복적으로 사용되는 부분들에 대한 코드를 분리하여, 한 곳에서 관리를 가능하게 해 준다.

 

1. pom.xml

 


  <!--- JSTL 필요 : JSTL Dependency를 Maven에 추가해줘야 함.-->
  <dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
  </dependency>
  <dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.7</version>
  </dependency>

 

 

2. WebConfig.java

 

package com.sample.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
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 WebConfig implements WebMvcConfigurer {

    // TilesConfigurer
    @Bean
    public TilesConfigurer tilesConfigurer() {
        final TilesConfigurer configurer = new TilesConfigurer();

        // tiles.xml 경로 명시
        configurer.setDefinitions(new String[] {
            "/WEB-INF/tiles/tiles.xml"
        });

        // 리프레쉬 가능 여부 설정
        configurer.setCheckRefresh(true);

        return configurer;
    }

    // TilesViewResolver
    @Bean
    public TilesViewResolver tilesViewResolver() {
        final TilesViewResolver tilesViewResolver = new TilesViewResolver();
        tilesViewResolver.setViewClass(TilesView.class);
        tilesViewResolver.setOrder(1); //뷰 우선순위
        return tilesViewResolver;
    }
}

 

 

3. MainController.java

 

package com.sample.main.web;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MainController {

    @GetMapping("/")
    public String getMainPage(ModelMap model) throws Exception {
        // .web이 tiles.xml에서 접미어로 구분하여 적용한다.
        return "main/index.web";
    }
}

 

 

4. tiles.xml (/webapp/WEB-INF/tiles/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="layout-tiles" template="/WEB-INF/jsp/tiles/layout.jsp">
       <put-attribute name="header" value="/WEB-INF/jsp/tiles/header.jsp" />
       <put-attribute name="body" value="" />
       <put-attribute name="footer" value="/WEB-INF/jsp/tiles/footer.jsp" />
   </definition>
   
   <!-- 
	접미어가 web인 대상들만 tiles를 적용한다. (Ex. Controller Page Return)
	*/* 방식으로 지정하여 접미어 상관없이 전체를 적용할수도 있다.
   -->
   <definition name="*.web" extends="layout-tiles">
       <put-attribute name="body" value="/WEB-INF/jsp/{1}.jsp" />
   </definition>
   <definition name="*/*.web" extends="layout-tiles">
       <put-attribute name="body" value="/WEB-INF/jsp/{1}/{2}.jsp" />
   </definition>
   <definition name="*/*/*.web" extends="layout-tiles">
       <put-attribute name="body" value="/WEB-INF/jsp/{1}/{2}/{3}.jsp" />
   </definition>
</tiles-definitions>

 

 

5. header.jsp (/webapp/WEB-INF/jsp/tiles/header.jsp)

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<p>HEADER</p>

 

 

6. index.jsp (/webapp/WEB-INF/jsp/main/index.jsp)

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<p>BODY</p>

 

 

7. footer.jsp (/webapp/WEB-INF/jsp/tiles/footer.jsp)

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<p>FOOTER</p>

 

 

8. layout.jsp (/webapp/WEB-INF/jsp/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"%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Tiles</title>
  </head>
  <body>
    <tiles:insertAttribute name="header" />
    <tiles:insertAttribute name="body" />
    <tiles:insertAttribute name="footer" />
  </body>
</html>

 

 

index 페이지를 호출하면 header, footer가 적용된 상태로 나오는 걸 확인할 수 있다.

 

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