其實我也是最近才有接觸到這個東西

Apache 的一個 framework -- tiles 

簡單形容一下就是為了Web提供了一種模板的概念,能將網頁的排版方式與内容分開。

會使得開發的時候,頁面較為乾淨,也較好維護

下圖就是基本概念了,Header , Menu , Footer  如果都是共用的,那為什麼每一頁都要寫呢!? 

這應該就是 Tiles 的精神了,不需要在每個頁面貼一樣的程式碼

既然只有Body 會換,那把其他的東西都切出來不是更好,若你的網站很大,很多東西,是不是也更容易維護!? 

(1)加入需要的Jar檔案 , Maven Pom.xml 需要的Jar 檔案  (https://tiles.apache.org/download.html

<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-extras</artifactId>
    <version>3.0.7</version>
  </dependency>

  <dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-servlet</artifactId>
    <version>3.0.7</version>
  </dependency>

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

============================================================

(2) 接著在WEB-INF 下新增 tiles.xml 

還需要另外設定一個 layout 將分散的組合來

<?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="defaultTemplate" template="/views/layout.jsp">
		<put-attribute name="title" value="This is Title" />
		<put-attribute name="header" value="/views/header.jsp" />
		<put-attribute name="body" value="" />
		<put-attribute name="foot" value="/views/foot.jsp" />
	</definition>
</tiles-definitions>

============================================================

(3)spring-mvc.xml 配置需要加上設定,告訴它該去哪找tiles.xml

<!-- springframework tiles3 -->
	<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
        <property name="definitions">
            <list>
                <value>/WEB-INF/tiles.xml</value>
            </list>
        </property>
    </bean>

============================================================

(4)拿index.jsp 為範例, 我另外新增的三隻jsp foot.jsp , header.jsp, layout.jsp

先來看 layout.jsp

============================================================

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %> 

<!DOCTYPE html>
<head>
<!--可以在這裡把要用的script 或是 link 設置進來-->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/main.js"></script>
<link href="${pageContext.request.contextPath}/css/main.css" rel="stylesheet" type="text/css">
</head>

<body>
<!--這裡把 header , body, foot 組合起來-->
<!-- Header -->
<tiles:insertAttribute name="header" />
<!-- Body Page -->
<tiles:insertAttribute name="body" />
<!-- foot Page -->
<tiles:insertAttribute name="foot" />
</body>
</html>

============================================================

foot.jsp , header.jsp 就把需要切出去的程式碼寫進去,

但要注意!那些html 標籤要切對地方, 不然版型一樣會跑掉

 看我結尾的地方,是 </body> </html>

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

<div class="footer">
       <div class="container-fluid footer_top"> 
            <ul>
                <li class="col-sm-"><a href="">
                    <i class="contact_us_icon f_icon"></i>
                    <span>
                        聯絡我們
                    </span>            
                </a></li>
                <li><a href="">
                        <i class="qa_icon f_icon"></i>
                        <span>常見問題</span>
                </a></li>
                <li><a href="">
                    <i class="Attention_icon f_icon"></i>
                    <span>旅遊行程注意事項</span>
                </a></li>
            </ul>
       </div>
</div>

</body>
</html>

============================================================

最後 body 的內容就在我們寫的 index .jsp 這裡面 

index.jsp  

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

<tiles:insertDefinition name="defaultTemplate">
    <tiles:putAttribute name="body">
       <!--主要 Body 內容--> 
    </tiles:putAttribute>
</tiles:insertDefinition>

============================================================

最後試著Run 看看,是不是有切成自己想要的版型

文章標籤
創作者介紹
創作者 瑞、瑪姬與小昆妮 的頭像
瑞、瑪姬與小昆妮

瑞瑪姬與小昆妮♫趴趴走黑白吃

瑞、瑪姬與小昆妮 發表在 痞客邦 留言(0) 人氣()