SpringBoot layoutTiles 설정하기(웹 사이트 layout 설정, layoutTiles, Tiles, Java)

SpringBoot layoutTiles 설정방법

Tiles는 웹 화면의 각각 영역을 정하고 나누어, 해당 영역의 템플릿을 구성 해 주는 라이브러리 입니다.

 

※참고사항※

spring 3.x 버전에서는 tiles class를 지원하지 않습니다 !!(사용 시 spring boot 3 이하 버전으로 설정해야 합니다.)

(JSP x, Thymeleaf o)

 

의존성 추가

Maven

<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.8</version>
</dependency>

 

Gradle

implementation 'org.apache.tiles:tiles-jsp:3.0.8'

 

 

@Bean 등록

해당 컨피그 클래스(WebConfig)에 tiles 빈과 viewResolver 빈을 등록합니다.

@Bean
public TilesConfigurer tilesConfigurer(){
    final TilesConfigurer configurer = new TilesConfigurer();
    configurer.setDefinitions("/WEB-INF/tiles/layoutTiles.xml");
    configurer.setCheckRefresh(true);
    return configurer;
}
    
    
@Bean
public UrlBasedViewResolver urlBasedViewResolver() {
    UrlBasedViewResolver tilesViewResolver = new UrlBasedViewResolver();
    tilesViewResolver.setViewClass(TilesView.class);
    tilesViewResolver.setOrder(0);
    return tilesViewResolver;
}

 

layoutTiles.xml 설정

각 JSP 화면 폴더 경로에 맞춰 경로를 지정합니다. 팝업의 경우 기본 페이지만 합니다. 일반 화면의 경우

상단 + 기본 화면 + 하단으로 설정하였습니다.

<?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>

    <!-- 팝업 default -->
    <definition name="tiles-default-popup" template="/WEB-INF/jsp/layouts/popup.jsp">
        <put-attribute name="popupBody" />
    </definition>

    <!-- 팝업 -->
    <definition name="*Popup" extends="tiles-default-popup">
        <put-attribute name="popupBody" value="/WEB-INF/jsp/view/{1}Popup.jsp" />
    </definition>

    <definition name="*/*Popup" extends="tiles-default-popup">
        <put-attribute name="popupBody" value="/WEB-INF/jsp/view/{1}/{2}Popup.jsp" />
    </definition>

    <definition name="*/*/*Popup" extends="tiles-default-popup">
        <put-attribute name="popupBody" value="/WEB-INF/jsp/view/{1}/{2}/{3}Popup.jsp" />
    </definition>


    <!-- 페이지 default -->
    <definition name="tiles-default" template="/WEB-INF/jsp/layouts/default.jsp">
        <put-attribute name="header" value="/WEB-INF/jsp/layouts/header.jsp" />
        <put-attribute name="footer" value="/WEB-INF/jsp/layouts/footer.jsp" />
    </definition>

    <!-- 페이지 -->
    <definition name="*" extends="tiles-default">
        <put-attribute name="body" value="/WEB-INF/jsp/view/{1}.jsp" />
    </definition>

    <definition name="*/*" extends="tiles-default">
        <put-attribute name="body" value="/WEB-INF/jsp/view/{1}/{2}.jsp" />
    </definition>

    <definition name="*/*/*" extends="tiles-default">
        <put-attribute name="body" value="/WEB-INF/jsp/view/{1}/{2}/{3}.jsp" />
    </definition>

</tiles-definitions>

 

JSP 파일 폴더 구조

 

layoutTiles.xml에서 각각 화면의 경로와 일치하게 JSP 파일을 등록 해 주고 필요한 화면 작업을 진행 해 줍니다.

 

/layouts/default.jsp 화면의 예시는 다음과 같습니다.

<!-- Page Header -->
<tiles:insertAttribute name="header" />

<!-- Page Contents -->
<tiles:insertAttribute name="body" />

<!-- Page Footer -->
<tiles:insertAttribute name="footer" />

레이아웃 설정

 

결과

---

 

상단 (header.jsp)

<a class="navbar-brand" href="/mainHome/main">Players (G-Land Enterprise)</a>
<li class="nav-item"><a class="nav-link" href="/mainHome/main">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/mainHome/about">About</a></li>
<a class="nav-link dropdown-toggle" id="" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Games</a>
<li class="nav-item"><a class="nav-link" href="/mainHome/news">News</a></li>
<li class="nav-item"><a class="nav-link" href="/mainHome/faq">FAQ</a></li>
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">채용</a>
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">해외지사</a>
<li class="nav-item"><a class="nav-link" href="/mainHome/login">로그인</a></li>

 

실제 화면에서는 툴바 메뉴 부분 입니다.

상단 레이아웃

 

내용 (main.jsp)

<h2 class="fw-bolder mb-0">
   저희는 4가지의 재미있는 상상을 현실화 하여, 당신의 삶에 활력을 넣어줄 것 입니다.
</h2>



생략..



<div class="fs-4 mb-4 fst-italic">
   게임은 우리에게 삶의 활력을 더욱 증진 시킬 수 있는
   가성비 좋은 최고의 수단 중 하나라 생각합니다.
</div>

중단 레이아웃

 

하단(footer.jsp)

<div class="small m-0 text-white">Players (G-Land Enterprise)</div>
<div class="small m-0 text-white">서울특별시 행복구 행복동 1004로 1004길</div>
<a class="link-light small" href="#!">Developer</a>
<a class="link-light small" href="#!">Artist</a>
<a class="link-light small" href="#!">Planner</a>

하단 레이아웃