본문 바로가기

Dev.BackEnd/Spring & Spring Boot

[Spring boot] 웹페이지 tiles를 사용해서 간편하게 레이아웃 설정하기

tiles: 개발할 때 공통으로 사용되는 상위에 배치된 네비게이션바, 메뉴, 그리고 하단의 회사정보 같은 header, footer를 각 jsp 페이지마다 입력해야하는 번거로움을 한꺼번에 처리할 수 있게 해주는 아파치 라이브러리이다.

 

1. pom.xml에 추가해준다.

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

2. mvcconfiguration에 코드작성

    /**
     * Tiles View
     *
     * @return
     */
    @Bean
    public UrlBasedViewResolver tilesViewResolver() {
        UrlBasedViewResolver resolver = new UrlBasedViewResolver();
        resolver.setViewClass(TilesView.class);
        resolver.setOrder(1);
        return resolver;
    }

    /**
     * Tiles View
     *
     * @return
     */
    @Bean
    public TilesConfigurer tilesConfigurer() {
        TilesConfigurer tilesConfigurer = new TilesConfigurer();
        tilesConfigurer.setDefinitions("/WEB-INF/tiles-*.xml");
        return tilesConfigurer;
    }

1. urlbasedViewResolver: 가장 보편적? 으로 사용하는 것 같다. viewResolver의 구현체로 특별한 맵핑 정보 없이 view 일므을 url로 사용하고 view 이름과 실제 view자원과의 이름이 같을 때 사용할 수 있다. 

2.tileConfigurer : tiles.xml에 tiles에 대한 명시를 작성해야한다. 그 작성한 파일의 경로를 입력해주는 곳

 

 

3. tiles 명시서 작성하기

<?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>
<!--    front 다음 **이 두개 있는이유: main은 *로도 불러와지는데 *로는 user/userList는 불러오지 못한다-->
    <definition name="front:**" template="/WEB-INF/layouts/layoutDefault.jsp">
        <put-attribute name="header" value="/WEB-INF/layouts/header.jsp" />
        <put-attribute name="body" value="/WEB-INF/view/{1}.jsp" />
        <put-attribute name="footer" value="/WEB-INF/layouts/footer.jsp" />
    </definition>
    
</tiles-definitions>

2번에서 작성했던것 처럼 tiles.xml파일을 web-inf 하위에 넣어준다. 그리고 이렇게 작성을 한다.

extend를 사용하는 방법도 있지만, 좀 복잡한 것 같아 가장 단순하게 했다.

 

definition name에는 controller에서 return으로 jsp페이지를 입력하는 이름입니다.

저는  이런식으로

    @RequestMapping(value = "/registerForm")
    public String userRegisterForm(Model model, User user) {
        System.out.println(">>>>registerForm");
        return "front:user/registerForm";
    }

그리고 front:** 이 있는데, *은 front: 이후 나오는 모든 페이지를 받을 수 있다는 말입니다.

front 다음 **이 두개 있는이유: view 하위에 user/register가 있고 main이 있었다..

front:* 로 하면 main은 정상작동 하는데 user/register는 정상작동이 되지 않았다.

**로 해야 user/register 또는 user/user/~~~ 가 정상 작동하였다.

 

4.layoutDefault

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%--<jsp:useBean id="today" class="java.util.Date" />--%>
<%--<fmt:formatDate value="${today}" pattern="yyyyMMddhhmm" var="nowDate"/>--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>

<body>

<!-- wrap -->
<div>

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

	<!-- container -->
	<div >
		<tiles:insertAttribute name="body" />
	</div>
	<!--// container -->

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

</div>
<!--// wrap -->
	
	
</body>
</html>

pom.xml에서 라이브러리를 추가했기 때문에 tiles:을 사용할 수 있다.

 

p.s: 페이지마다 jquery.js, jstl, css 등 공통적으로 필요한 부분을 모두 header에 넣었다. header는 기본적으로 다 필요했기 때문에 하지만, tag lib 같은 

<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

이런것들은 페이지마다 넣어줘야 한다.

 

 

 

 

출처: https://tiles.apache.org/framework/tutorial/index.html

 

Apache Tiles - Framework - Tutorial

Copyright © 2001-2017 The Apache Software Foundation. All Rights Reserved. Apache Tiles, Tiles, Apache, the Apache feather logo, and the Apache Tiles project logos are trademarks of The Apache Software Foundation.

tiles.apache.org

Spring - 뷰 리졸버(View resolver) (tistory.com)

 

Spring - 뷰 리졸버(View resolver)

뷰 리졸빙(View resolving)사용자에게 결과를 랜더링하여 보여주기 위하여 사용 뷰 리졸버 구현체 뷰 리졸버 설명 BeannameViewResolver 논리적 뷰 이름과 동일한 ID를 갖는 으로 등록된 View의 구현체를 찾

isstory83.tistory.com

 

Spring Boot | Tiles (타일즈) 적용하기 :: venh.log (tistory.com)

 

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

▶ Tiles 란? 웹 페이지의 상단(Header)이나 하단(Footer)과 같이 반복적으로 사용되는 부분들에 대한 코드를 분리하여, 한 곳에서 관리를 가능하게 해 준다. 1. pom.xml javax.servlet jstl org.apache.tiles tiles-jsp

kitty-geno.tistory.com

 

Spring Boot Tiles 설정하기 - Try (has3ong.github.io)