2019. 9. 27. 14:54ㆍ카테고리 없음
에러페이지 CSS를 변경하기에 앞서 Tiles를 적용시켜보도록 하겠습니다.
1. tiles 란?
타일즈는 웹 페이지의 상단이나 하단 메뉴와 같이 반복적으로 사용되는 부분들에 대한 코드를 분리해서 예쁘게 한 곳에서 관리를 가능하게 해주는 프레임워크이다.
JSP include와의 차이
비슷한 역할이지만, tiles가 여러모로 편리하고 좋다. jsp는 페이지 내에 동일한 레이아웃 정보가 들어가므로 전체적인 레이아웃을 변경하게 될 경우 모든 페이지를 수정해야하는 문제점이 있다. 예를들면 만약 50개의 페이지에 상단 메뉴가 include 되어있는데, 페이지명이 바뀌면 50개 파일을 전부 수정해주어야 하는 것이다. tiles는 이런 일이 있으면 설정파일만 변경해주면 된다.
특징
화면 기본 구성 레이아웃 템플릿 정의하고 상속을 통하여 대부분 구조를 재사용할 수 있는 기능 및 설정파일을 통한 통합 관리를 통하여 확장성 있고 일관되게 페이지 구성을 관리한다.
출처: https://sjh836.tistory.com/133 [빨간색코딩]
apache tiles (jsp include와 차이, Composite View 패턴, spring과 연동 설정, 예제)
참조문서 https://www.javatpoint.com/spring-mvc-tiles-example https://tiles.apache.org 1. tiles 란? 타일즈는 웹 페이지의 상단이나 하단 메뉴와 같이 반복적으로 사용되는 부분들에 대한 코드를 분리해서 예..
sjh836.tistory.com
제가 사용하면서 이해한 Tiles란 무엇이냐면 header,main,footer.jsp 를 만들었을때 <jsp:include 등의 include로 일일이 표시하는 것을 간편? 하게 해주는 것이라고 이해했습니다.
이제 시작해보기 위하여
pom.xml 파일에
<!-- tiles 추가 -->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-extras</artifactId>
<version>3.0.8</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-jsp</artifactId>
<version>3.0.8</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-servlet</artifactId>
<version>3.0.8</version>
</dependency>
tilles를 추가해줍시다. pom.xml이 뭐냐면...음... 저는 원래는 라이브러리를 직접 받아서 임포트 해줘야되는데 일일이 찾아서 다운하기 귀찮으니 저기다 적어주면 maven 이라는 놈이 알아서 받아주는 걸로? 인식하고 있습니다.
https://frontdev.tistory.com/entry/SpringSpring-Boot-Tiles
위의 예제를 보면서 따라해보도록 하겠습니다. tiles를 pom 에 추가했으니 이제 해야될 것은 Tiles 설정 파일을 만들고, 사용할 수 있게 해야될 것 같습니다.
예제를 따라 TilesConfig.java 를 만들어줬습니다
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.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;
@Configuration
public class TilesConfig {
@Bean
public UrlBasedViewResolver viewResolver() {
UrlBasedViewResolver tilesView = new UrlBasedViewResolver();
tilesView.setViewClass(TilesView.class);
return tilesView;
}
@Bean
public TilesConfigurer tilesConfigurer() {
TilesConfigurer tiles = new TilesConfigurer();
tiles.setDefinitions(new String[] { "/views/tiles/tiles.xml"});
return tiles;
}
}
이제 저경로가 가리키는 tiles.xml 을 만들어줬습니다.
<!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>
<!-- base tiles layout add -->
<definition name="base" template="/WEB-INF/jsp/layout/base.jsp">
<put-attribute name="header" value="/WEB-INF/jsp/layout/header.jsp" />
<put-attribute name="body" value="" />
<put-attribute name="footer" value="/WEB-INF/jsp/layout/footer.jsp" />
</definition>
</tiles-definitions>
예시만 가지고는 세개의 jsp 파일이 필요할것같네요 base, header, footer 를 만들어 주기로 합니다. header 와 푸터는 간단하게 헤더임당 푸터임당만 간단히 기록하고 base.jsp를 만들어줍니다. 그리고 위치는 실제 경로를 지정했습니다.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
베이스임당
<section class="content">
<tiles:insertAttribute name="header"/> <!-- /WEB-INF/views/common/layout/header.jsp -->
<tiles:insertAttribute name="body"/> <!-- body -->
<tiles:insertAttribute name="footer"/> <!-- /WEB-INF/views/common/layout/footer.jsp -->
</section>
</body>
</html>
그리고 이미 만들어뒀던 컨트롤러에 아래와같이 return 을 추가해줬습니다.
@RequestMapping(value="/base")
public String base() {
return "base";
}
return "base" 란이름이 definition name="base" 에 맵핑이된다고 생각하면 될것같네요
정상출력됩니다~