Apache Tiles 學習(四)、Tiles實戰

一、建立maven項目

    New-->Maven Project-->
html

    

      勾選上Create a simple project(skip archetype selection), Next java

    輸入Group Id和Artifact Id ,Packaging 選 war, Finish ,就建立好了Maven Project。


    在pom.xml文件中加入Tiles的相關依賴: web

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

    到此項目建立完成,而且在項目中引入了tiles的相關jar包 apache

二、配置環境

2.一、在web.xml文件中加入tiles配置

<listener>
    <listener-class>org.apache.tiles.extras.complete.CompleteAutoloadTilesListener
    </listener-class>
</listener>
2.二、加入difinition定義文件tiles.xml

    在/WEB-INF/目錄下建立一個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>
 
</tiles-definitions>

三、建立一個模板(template)

3.一、 建立相關目錄


  • /WEB-INF/view:放置JSP頁面視圖
  • /WEB-INF/view/tempalte:模板文件夾放置tiles的模板文件(這個沒有硬性規定的,能夠隨便本身放的,到時候配置的時候配置好就好了。)
  • /WEB-INF/view/difirent:放置模板中不能重用的部分
  • /WEB-INF/view/tempalte/template1:這裏是一模板文件夾,其中放置了模板jsp頁面和一些能夠重用的界面。
    提示:

    你徹底不必按照以上的方式放置JSP頁面,以上只是爲了很好的管理和考慮安全性。你徹底能夠在建立以下目錄:/webapp(或WebContext或WebRoot)/jsp,將頁面放置在jsp目錄下,徹底不會有任何影響,由於,tiles在定義difinitions時手動配置相關文件的路經的,若是這裏還不能理解的話,請繼續往下看,你將會理解的! 安全


3.二、建立模板

    如今就來建立一個模板來試試,在/WEB-INF/view/tempalte/template1下建立template.jsp文件,添加以下內容: app

template.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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:getAsString name="title" /></title>
</head>
<body>
	<table>
		<tr>
			<td colspan="2"><tiles:insertAttribute name="header" /></td>
		</tr>
		<tr>
			<td><tiles:insertAttribute name="menu" /></td>
			<td><tiles:insertAttribute name="body" /></td>
		</tr>
		<tr>
			<td colspan="2"><tiles:insertAttribute name="footer" /></td>
		</tr>
	</table>
</body>
</html>

        以上模板就是以下「經典佈局」用tiles定義的模板 webapp


        而且,從以上文件中你看到了: jsp

        <tiles:getAsString name="title" /> maven

        <tiles:insertAttribute name="header" />

        <tiles:insertAttribute name="menu" />

        <tiles:insertAttribute name="body" />

       <tiles:insertAttribute name="footer" />

        以上就是tiles 在模板中插入了屬性,用來留出空白的,而後再渲染的時候將屬性的值配置的頁面一塊兒將整個頁面呈現出來。 從而,達到了複合視圖模式。

四、建立屬性(attribute) 

4.一、Tiles的屬性

    能夠當作是模板中各空白區域的名字和真實顯示的頁面文件的路徑的「鍵值對」的形式。

4.二、建立屬性對應的頁面

   在/WEB-INF/view/tempalte/template1目錄下建立以下jsp頁面:
  • header.jsp
  • menu.jsp
  • footer.jsp

   /WEB-INF/view/diffrent目錄下建立

  • body1.jsp
  • body2.jsp


五、添加定義(difinition)

    如今,添加tiles的定義,在/WEB-INF/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="test"
		template="/WEB-INF/view/template/template1/template.jsp">
		<put-attribute name="title" value="Tiles tutorial homepage" />
		<put-attribute name="header"
			value="/WEB-INF/view/template/template1/header.jsp" />
		<put-attribute name="menu"
			value="/WEB-INF/view/template/template1/menu.jsp" />
		<put-attribute name="body" value="/WEB-INF/view/diffrent/body1.jsp" />
		<put-attribute name="footer"
			value="/WEB-INF/view/template/template1/footer.jsp" />
	</definition>
</tiles-definitions>

6、建立測試頁面

    在/WEB-INF/目錄下建立一個example.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="test" />


七、測試

在瀏覽器中輸入:http://localhost:8080/tiles-first/example.jsp

顯示以下:

        至此,tiles的一個小小的demo就完成了。

八、項目分析

    當咱們想更換body時,咱們只要在tiles.xml文件中配置一下相關的文件路徑就能夠了。上面只是簡單的使用Servlet API 來處理請求 ,接下來將結合SpringMVC來處理請求,並將Tiles做爲視圖來使用。 



   【做者聲明】轉載請註明原文地址

相關文章
相關標籤/搜索