타일즈 레이아웃 정의하기
앞서 배운 타일즈를 실습 진행 중인 도서 쇼핑몰 애플리케이션에 적용해 보겠습니다.
기본 템플릿과 이를 구성하는 데 필요한 웹 페이지, 기본 템플릿을 정의할 템플릿 정의 파일을
만들어 보겠습니다.
도서 쇼핑몰의 기본 템플릿은 title, menu, heading, subheading, content, footer 속성으로
구성합니다.
타일즈 레이아웃 정의 파일 만들기
tiles.xml
WEB-INF 폴더에 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>
<definition name="base-Template" template="/WEB-INF/tiles/layout/baseLayout.jsp">
<put-attribute name="title" value="Sample Title"/>
<put-attribute name="heading" value=""/>
<put-attribute name="subheading" value=""/>
<put-attribute name="menu" value="/WEB-INF/tiles/template/menu.jsp"/>
<put-attribute name="content" value=""/>
<put-attribute name="footer" value="/WEB-INF/tiles/template/footer.jsp"/>
</definition>
</tiles-definitions><definition> 요소의 기본 템플릿 이름을 base-Template로 정의하고
기본 템플릿 페이지는 /WEB-INF/tiles/layout/ 경로에 있는 baseLayout.jsp 파일에 정의합니다.
<put-attribute> 요소를 사용해서 기본 템플릿 이름을 title, menu, heading, subheading, content, footer로 지정합니다.
baseLayout.jsp
WEB-INF/tiles 폴더에 layout 폴더를 생성하고 기본 템플릿 페이지로 다음과 같이 작성해 줍니다.
<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<html>
<head>
<link href="<c:url value="/resources/css/bootstrap.min.css"/>" rel="stylesheet">
<title><tiles:insertAttribute name="title"/></title>
</head>
<body>
<tiles:insertAttribute name="menu"/>
<div class="jumbotron" align="center">
<div class="container">
<h1 class="display-3"><tiles:insertAttribute name="heading"/></h1>
<p><tiles:insertAttribute name="subheading"/></p>
</div>
</div>
<div class="container">
<div class="row">
<tiles:insertAttribute name="content"/>
</div>
<div class="footer">
<tiles:insertAttribute name="footer"/>
</div>
</div>
</body>
</html><tiles:insertAttribute> 태그를 사용해서 기본 템플릿 페이지의 속성 이름
title, menu, heading, subheading, content, footer를 설정합니다.
menu.jsp
WEB-INF/tiles 폴더에 template 폴더를 생성하고 menu 속성의 템플릿 페이지를 다음과 같이 작성해 줍니다.
<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="${pageContext.request.contextPath }/home">Book Market</a>
</div>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="<c:url value="/home"/>">Home</a></li>
<li class="nav-item"><a class="nav-link" href="<c:url value="/books"/>">Books</a></li>
<li class="nav-item"><a class="nav-link" href="<c:url value="/books/add"/>">Add Book</a></li>
<li class="nav-item"><a class="nav-link" href="<c:url value="/cart/"/>">Cart</a></li>
</ul>
</div>
</div>
</nav>기본 템플릿을 구성하는 menu 속성 페이지는 Book Market, Home, Books, AddBook, Cart 등 메뉴로 구성됩니다.
footer.jsp
WEB-INF/tiles/template 폴더에 footer 속성의 템플릿 페이지를 작성해 줍니다.
<hr>
<p>© Book Market</p>
'SPRING' 카테고리의 다른 글
| [SPRING]#74 도서 쇼핑몰 구현 (타일즈 6) (0) | 2024.03.01 |
|---|---|
| [SPRING]#73 도서 쇼핑몰 구현 (타일즈 5) (0) | 2024.03.01 |
| [SPRING]#71 도서 쇼핑몰 구현 (타일즈 3) (0) | 2024.02.25 |
| [SPRING]#70 도서 쇼핑몰 구현 (타일즈 2) (0) | 2024.02.25 |
| [SPRING]#69 도서 쇼핑몰 구현 (타일즈 1) (0) | 2024.02.25 |