본문 바로가기
웹 프로그래밍 기초/자바기반의 웹&앱 응용SW 개발자

자바기반의 웹&앱 응용 SW개발자 양성과정 69일차 -104

by oncerun 2020. 6. 19.
반응형

Tiles 라이브러리 사용하기.

 

Tiles는 웹페이지의 상단 메뉴나 좌측 메뉴, 공통 파일 include 등의 반복적인 부분을 한 곳에서 깔끔하게 관리할 수 있게 도와주는 템플릿 프레임워크입니다.

 

요구사항

  • JSTL 필요

    • STS를 사용하고 있다면 기본적으로 탑재되어 있고, 그렇지 않다면 JSTL Dependency를 Maven에 추가해줘야 함.

    • JSTL이 없으면 아래와 같은 에러 발생

    • HTTP Status 500 - Handler processing failed; nested exception is java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config

  • JDK 1.7 이상

  • Servlet 2.5 이상(2.4도 가능은 함)

  • JSP 2.1 이상(2.0도 가능은 함)

  • Spring 3.2 이상

 

먼저 pom.xml에 dependency에 라이브러리를 추가해주어야 합니다.

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

 

tiles.xml 설정 예시

<?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="root.*" template="/WEB-INF/view/inc/layout.jsp">
		<put-attribute name="css" value="" />
		<put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
		<put-attribute name="aside" value="/WEB-INF/view/inc/aside.jsp" />
		<put-attribute name="main" value="/WEB-INF/view/{1}.jsp" />
		<put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
	</definition>
	<definition name="admin.*.*.*" template="/WEB-INF/view/inc/layout.jsp">
		<put-attribute name="css" value="" />
		<put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
		<put-attribute name="aside" value="/WEB-INF/view/admin/inc/aside.jsp" />
		<put-attribute name="main" value="/WEB-INF/view/admin/{1}/{2}/{3}.jsp" />
		<put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
	</definition>
	<definition name="admin.*" template="/WEB-INF/view/inc/layout.jsp">
		<put-attribute name="css" value="" />
		<put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
		<put-attribute name="aside" value="/WEB-INF/view/admin/inc/aside.jsp" />
		<put-attribute name="main" value="/WEB-INF/view/admin/{1}.jsp" />
		<put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
	</definition>
	<definition name="member.*" template="/WEB-INF/view/inc/layout.jsp">
		<put-attribute name="css" value="/css/member-main.css" />
		<put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
		<put-attribute name="aside" value="/WEB-INF/view/member/inc/aside.jsp" />
		<put-attribute name="main" value="/WEB-INF/view/member/{1}.jsp" />
		<put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
	</definition>
	<definition name="notice.*" template="/WEB-INF/view/inc/layout.jsp">
		<put-attribute name="css" value="" />
		<put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
		<put-attribute name="aside" value="/WEB-INF/view/inc/aside.jsp" />
		<put-attribute name="main" value="/WEB-INF/view/notice/{1}.jsp" />
		<put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
	</definition>
</tiles-definitions>

 

공통적으로 layout , header , asid, footer 등 공통적인 부분을 먼저 폴더에 각각 생성해주고 그러한 틀을 가지고 사용할 수 있도록 한다.

 

그중 layout부분은 공통적으로 들어갈 부분의 위치를 정해주어야 한다.

<%@page import="java.util.List"%>
<%@page import="com.newlecture.web.entity.NoticeView"%>
<%@page import="com.newlecture.web.service.NoticeService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>

<!DOCTYPE html>
<html>

<head>
    <title>코딩 전문가를 만들기 위한 온라인 강의 시스템</title>
    <meta charset="UTF-8">
    <title>공지사항목록</title>
    
    <link href="/css/customer/layout.css" type="text/css" rel="stylesheet" />
    <link href='<tiles:getAsString name="css"/>' type="text/css" rel="stylesheet" />
    <style>
    
        #visual .content-container{	
            height:inherit;
            display:flex; 
            align-items: center;
            
            background: url("../../images/customer/visual.png") no-repeat center;
        }
    </style>
</head>

<body>
    <!-- header 부분 -->

    <%-- <jsp:include page="../inc/header.jsp" /> --%>
    <tiles:insertAttribute name="header" />

	<!-- --------------------------- <visual> --------------------------------------- -->
	<!-- visual 부분 -->
	
	<div id="visual">
		<div class="content-container"></div>
	</div>
	<!-- --------------------------- <body> --------------------------------------- -->
	<div id="body">
		<div class="content-container clearfix">

			<!-- --------------------------- aside --------------------------------------- -->
			<tiles:insertAttribute name="aside" />

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

    <!-- ------------------- <footer> --------------------------------------- -->
		<%-- <jsp:include page="../inc/footer.jsp" /> --%>
		<tiles:insertAttribute name="footer" />
        
    </body>
    
    </html>

 

 

 

 

반응형

'웹 프로그래밍 기초 > 자바기반의 웹&앱 응용SW 개발자' 카테고리의 다른 글

자바기반의 웹&앱 응용 SW개발자 양성과정 71일차 -106  (0) 2020.06.24
자바기반의 웹&앱 응용 SW개발자 양성과정 70일차 -105  (0) 2020.06.23
자바기반의 웹&앱 응용 SW개발자 양성과정 68일차 -103  (0) 2020.06.18
자바기반의 웹&앱 응용 SW개발자 양성과정 68일차 -102  (0) 2020.06.18
자바기반의 웹&앱 응용 SW개발자 양성과정 67일차 -101  (0) 2020.06.17

관련글

댓글

티스토리툴바