Today
-
Yesterday
-
Total
-

ABOUT ME

-

  • Spring Boot | Tiles (타일즈) 적용하기
    ▼ Backend/스프링 (Spring) 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가 적용된 상태로 나오는 걸 확인할 수 있다.

     

    반응형

    댓글

Designed by Tistory.