記錄

Spring+Mybatis+Tiles 4) Tiles의 사용(layout.jsp를 중심으로) 본문

Web/Spring framework

Spring+Mybatis+Tiles 4) Tiles의 사용(layout.jsp를 중심으로)

surhommejk 2018. 5. 6. 13:00

Tiles.xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">

<tiles-definitions>
<definition name="emp.*" template="/WEB-INF/views/inc/layout.jsp">
     <put-attribute name="header" value="/WEB-INF/views/inc/header.jsp" />
     <put-attribute name="footer" value="/WEB-INF/views/inc/footer.jsp" />
     <put-attribute name="content" value="/WEB-INF/views/{1}.jsp" />
</definition>
</tiles-definitions>







layout.jsp



<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!-- tiles를 사용하기 위한 태그 -->
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>

<!DOCTYPE html>
<html>

<!-- 여기 head의 내용들은 내가 사용한 bootstrap template을 위한 것들이다 -->
<head>

<!-- 핵심 사항은 head에 담겨야 할 내용들은 tiles로 들어올 페이지가 아니라 -->
<!-- layout.jsp와 같이 몸체가 될 .jsp에만 있으면 된다는 사실이다 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>직원 정보 관리 시스템</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Page level plugin CSS-->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>

<body class="fixed-nav sticky-footer bg-dark" id="page-top">
    

   <!-- <tiles:insertAttribute name="~" />로 원하는 tile을 불러온다 -->
   <!-- name에 들어가는 내용은 Tiles.xml에서 정의한 name들을 똑같이 써준다 -->
    
   <!-- ******************************************************************************** -->

   <!-- 가져올 tile에서 코드들이 넘어오는 방식은 copy & paste와 같다고 보면 된다 -->
   <!-- 즉, 있는 그대로를 복붙해서 <tiles:insertAttribute name="" /> 영역에 들어간다는 의미다 -->
   <!-- 이것이 의미하는 바는 layout.jsp에 있는 body와 같은 태그를 가져올 tile에서 구현하면 안된다는 것 -->
   
<!-- Header 영역 -->
   <tiles:insertAttribute name="header" />
        
   <!-- Main 영역 -->
   <div id="main">
   
<!-- Content 영역 -->
   <tiles:insertAttribute name="content" />
   </div>
        
   <!-- Footer 영역 -->
   <tiles:insertAttribute name="footer" /> 
   <!-- ******************************************************************************** -->


    <!-- 사이드바 밀기 -->
    <a class="scroll-to-top rounded" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">로그아웃</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">로그아웃 하시겠습니까?</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="http://www.naver.com">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/datatables/jquery.dataTables.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<!-- Custom scripts for this page-->
<script src="js/sb-admin-datatables.min.js"></script>
<script src="js/sb-admin-charts.min.js"></script>

</body>

</html>


Comments