JSP에 타일즈를 적용하는 간단한 예시이다.
JSP는 다루지 않았기 때문에 어떻게 설정하고 이루어지는지 간단하게 알아본다.
타일즈는 레이아웃을 다루기 위해 제공하는것으로 JSP 페이지 레이아웃을 위한 프레임워크이다. 페이지 레이아웃을 쉽고 단순하게 구현하고 공통된 레이아웃을 사용하므로 유지관리가 쉽다.
이를 적용하기 위해 pom.xml을 통해 쉽게 라이브러리에 설치할 수 있다.
그림과 같이 라이브러리가 설치된것을 확인할 수 있다.
다음으로 타일즈 관련 XML 파일을 설정한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
<beans:property name="definitions">
<beans:list>
<beans:value>classpath:tiles/*.xml</beans:value> <!-- 페이지 tiles의 모든 설정 xml파일을 읽음 -->
</beans:list>
</beans:property>
<beans:property name="preparerFactoryClass"
value="org.springframework.web.servlet.view.tiles2.SpringBeanPreparerFactory" />
</beans:bean>
<!-- 타일즈 뷰리졸버를 사용해 화면을 표시 -->
<beans:bean id="viewResolver"
class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView" />
</beans:bean>
<context:component-scan base-package="com.myspring.pro27" />
|
cs |
프로젝트의 spring/appServlet/servlet-context.xml 파일의 기존에 사용한 jsp 뷰리졸버를 지우고 타일즈 기능에 관련된 빈들을 설정한다.
스프링의 TilesConfigurer 클래스 빈을 생성하면서 URL요청에 대한 브라우저에 나타낼 정보가 저장된 타일즈 설정 파일을 패키지 tiles에서 읽도록 한다.
JSP에 적용
JSP에 적용하기 위해 xml파일을 생성한다.
src/main/resource/tiles/tiles_member.xml 의 경로로 생성하고 코드를 작성한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<tiles-definitions>
<definition name="baseLayout" template="/WEB-INF/views/common/layout.jsp">
<put-attribute name="title" value="" />
<put-attribute name="header" value="/WEB-INF/views/common/header.jsp" />
<put-attribute name="side" value="/WEB-INF/views/common/side.jsp" />
<put-attribute name="body" value="" />
<put-attribute name="footer" value="/WEB-INF/views/common/footer.jsp" />
</definition>
<definition name="main" extends="baseLayout">
<put-attribute name="title" value="메인페이지" />
<put-attribute name="body" value="/WEB-INF/views/main.jsp" />
</definition>
<definition name="/member/listMembers" extends="baseLayout">
<put-attribute name="title" value="회원목록창" />
<put-attribute name="body" value="/WEB-INF/views/member/listMembers.jsp" />
</definition>
<!-- 컨트롤러에서 반환되는 뷰이름을 지정, 레이아웃 페이지의 본문에 표시할 JSP 지정 -->
<definition name="/member/loginForm" extends="baseLayout">
<put-attribute name="title" value="로그인창" />
<put-attribute name="body" value="/WEB-INF/views/member/loginForm.jsp" />
</definition>
<!-- tiles_member.xml에 요청했을 때 로그인창을 나타내주는 태그를 추가 -->
<definition name="/member/memberForm" extends="baseLayout">
<put-attribute name="title" value="회원등록창" />
<put-attribute name="body" value="/WEB-INF/views/member/memberForm.jsp" />
</definition>
<definition name="/member/viewDetail" extends="baseLayout">
<put-attribute name="title" value="회원상세창" />
<put-attribute name="body" value="/WEB-INF/views/member/viewDetail.jsp" />
</definition>
</tiles-definitions>
|
cs |
먼저 공통 레이아웃을 baseLayout으로 지정하고 다른 태그는 baseLayout을 상속받으면서 title과 body속성만을 변경하여 사용한다.
이제 레이아웃 관련 JSP를 나타내본다. 구조는 아래와 같다.
layout.jsp 는 화면 전체의 구조를 정의한다. tiles_member.xml 설정에 따라 jsp파일을 알맞게 만들어야 한다.
layout.jsp 의 일부는 아래와 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"
%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<!-- 타일즈를 사용하기 위해 반드시 추가 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- style 부분 제외-->
<title><tiles:insertAttribute name="title" /></title>
<!-- tiles_member.xml의 <definition>의 하위 태그인 <put-attribute> 태그의 name이 title인 값을 표시 -->
</head>
<body>
<div id="container">
<div id="header">
<tiles:insertAttribute name="header"/>
<!-- tiles_member.xml의 <definition>의 하위 태그인 <put-attribute> 태그의 name이 header인 JSP표시
아래의 나머지도 같은 맥락-->
</div>
<div id="sidebar-left">
<tiles:insertAttribute name="side"/>
</div>
<div id="content">
<tiles:insertAttribute name="body"/>
</div>
<div id="footer">
<tiles:insertAttribute name="footer"/>
</div>
</div>
</body>
</html>
|
cs |
남은 header.jsp, side.jsp, footer.jsp 역시 작성한 후 main.jsp 파일을 통해 브라우저에서 요청하면 내용이 레이아웃의 본문에 표시되도록 한다.
마지막으로 <definition> 태그 name 속성의 뷰ㅠ이름을 타일즈 뷰리졸버로 변환하는 컨트롤러를 작성하여 테스트한다. 해당 컨트롤러의 return 값이 <definition> 태그의 뷰이름과 동일하게 한다. *첫번째 코드 참고*
그림과 같이 컨트롤러는 생성한 후 로컬서버에서 http://localhost:8090/pro27/main.do 로 요청하면 아래와 같다.
Reference
자바 웹을 다루는 기술
'Servlet JSP MVC Spring' 카테고리의 다른 글
| [Spring] REST API 기본 (0) | 2020.07.25 |
|---|---|
| 게시판 프로젝트 - 본문 업데이트- (0) | 2020.07.25 |
| [Spring] 게시판 프로젝트 (0) | 2020.06.28 |
| [Spring] 마이바티스 프레임워크, 애너테이션 (0) | 2020.06.23 |
| [Spring] Maven 설치와 STS 프로젝트 구조 (0) | 2020.04.13 |