【JSP】Tiles框架的基本使用

本文轉載自查看原文 2016-11-11 19:17 4922 Java/ Maven/ Web

Tiles介紹

　　Tiles 是一種JSP布局框架，主要目的是為了將復雜的jsp頁面作為一個的頁面的部分機能，然后用來組合成一個最終表示用頁面用的，這樣的話，便於對頁面的各個機能的變更及維護。 Tiles使得struts在頁面的處理方面多了一種選擇。並且更容易實現代碼的重用。有點類是jsp:inlcude。

Tiles模版

　　在Tiles中，模板（Template）是一個頁面的布局部分。你能將一個頁面結構看成是由不同的需要填補空白組成，本例中采用的模版結構如下：

Tiles使用步驟

　　新建一個maven web項目，可以參照：【Maven】Eclipse 使用Maven創建Java Web項目

　　引入tiles所需要的jar包。在pom文件中添加依賴

 1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 2     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
 3     <modelVersion>4.0.0</modelVersion>
 4     <groupId>com.hd</groupId>
 5     <artifactId>test-tiles</artifactId>
 6     <packaging>war</packaging>
 7     <version>0.0.1-SNAPSHOT</version>
 8     <name>test-tiles Maven Webapp</name>
 9     <url>http://maven.apache.org</url>
10     <dependencies>
11 
12         <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
13         <dependency>
14             <groupId>org.apache.tiles</groupId>
15             <artifactId>tiles-jsp</artifactId>
16             <version>3.0.5</version>
17         </dependency>
18         <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-servlet -->
19         <dependency>
20             <groupId>org.apache.tiles</groupId>
21             <artifactId>tiles-servlet</artifactId>
22             <version>3.0.5</version>
23         </dependency>
24         <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-extras -->
25         <dependency>
26             <groupId>org.apache.tiles</groupId>
27             <artifactId>tiles-extras</artifactId>
28             <version>3.0.5</version>
29         </dependency>
30 
31         <!-- Servlet -->
32         <dependency>
33             <groupId>javax.servlet</groupId>
34             <artifactId>javax.servlet-api</artifactId>
35             <version>3.0.1</version>
36             <scope>provided</scope>
37         </dependency>
38         <dependency>
39             <groupId>javax.servlet.jsp</groupId>
40             <artifactId>jsp-api</artifactId>
41             <version>2.2</version>
42             <scope>provided</scope>
43         </dependency>
44 
45         <dependency>
46             <groupId>junit</groupId>
47             <artifactId>junit</artifactId>
48             <version>3.8.1</version>
49             <scope>test</scope>
50         </dependency>
51     </dependencies>
52     <build>
53         <finalName>test-tiles</finalName>
54     </build>
55 </project>

　　創建一個模版，在webapp/view/core中新建一個test-layout.jsp

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
 4 <!DOCTYPE html>
 5 <html lang="en">
 6 <head>
 7 <meta charset="utf-8">
 8 <meta name="viewport"
 9     content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
10 
11 <title><tiles:insertAttribute name="title" ignore="true" /></title>
12 
13 <tiles:insertAttribute name="cssresources" />
14 </head>
15 <body class="sticky-header">
16     
17     <tiles:insertAttribute name="header" />
18     <tiles:insertAttribute name="body" />
19     <tiles:insertAttribute name="footer" />
20 </body>
21 <tiles:insertAttribute name="jsresources" />
22 </html>

創建組成頁面 ,如下圖：

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2     pageEncoding="UTF-8"%>
3 <div>
4     這是頭部
5 </div>

test-header.jsp

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2     pageEncoding="UTF-8"%>
3 <%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
4 
5 <tiles:insertDefinition name="index" />

index.jsp

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2     pageEncoding="UTF-8"%>
3     <button onclick="go(123)">body按鈕</button>

test-body.jsp

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2     pageEncoding="UTF-8"%>
3 <div>
4     這是尾部
5 </div>

test-footer.jsp

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2     pageEncoding="UTF-8"%>
3 
4 <script src="js/test.js"></script>

test-js.jsp

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2     pageEncoding="UTF-8"%>
3 
4 <link href="css/test.css" rel="stylesheet">
5

test-css.jsp

1 function go(content)
2 {    
3     alert(content);
4 }

test.js

1 div {
2     border: 1px solid black;
3 }

test.css

　　5. 　　創建一個定義，在webapp/tiles/test-tiles.xml文件

　　　　默認情況，“定義”文件是/WEB-INF/tiles.xml。如果你使用的是CompleteAutoloadTilesListener,tiles將會使用webapp目錄下按/WEB-INF/tiles*.xml匹配或classpath下按/META-INF/tiles*.xml匹配的任何文件作為“定義 ”文件；如果發現多個，tiles將會合並這些文件到一起。

 1 <?xml version="1.0" encoding="UTF-8" ?>  
 2 <!DOCTYPE tiles-definitions PUBLIC  
 3        "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"  
 4        "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
 5 <!-- http://tiles.apache.org/framework/config-reference.html -->
 6 <tiles-definitions>
 7     <!-- tiles基礎模板 -->
 8     <definition name="baseTemplate" template="/view/core/test-layout.jsp">
 9         <put-attribute name="title" value="標題" />
10         <put-attribute name="cssresources" value="/view/core/test-css.jsp" />
11         <put-attribute name="jsresources" value="/view/core/test-js.jsp" />
12         <put-attribute name="header" value="/view/core/test-header.jsp" />
13         <put-attribute name="body" value="" />
14         <put-attribute name="footer" value="/view/core/test-footer.jsp" />
15     </definition>
16 
17     <definition name="index" extends="baseTemplate">
18         <put-attribute name="title" value="首頁" />
19         <put-attribute name="body" value="/view/core/test-body.jsp" />
20     </definition>
21     
22 </tiles-definitions>

　　6.　　在web.xml中添加Tiles監聽器

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 3     xmlns="http://java.sun.com/xml/ns/javaee"
 4     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
 5     id="WebApp_ID" version="3.0">
 6     <display-name>test-tiles</display-name>
 7     
 8     <!-- 自定義tiles監聽器 -->
 9     <listener>
10         <listener-class>com.test.listener.TestListener</listener-class>
11     </listener>
12     
13     <!-- tiles監聽器，默認配置文件在/WEB-INF/tiles*.xml
14     <listener>
15         <listener-class>org.apache.tiles.extras.complete.CompleteAutoloadTilesListener</listener-class>
16     </listener>
17      -->
18     <welcome-file-list>
19         <welcome-file>index.jsp</welcome-file>
20     </welcome-file-list>
21 </web-app>

　　　自定義tiles監聽器，TestListener

 1 package com.test.listener;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import org.apache.tiles.factory.AbstractTilesContainerFactory;
 7 import org.apache.tiles.factory.BasicTilesContainerFactory;
 8 import org.apache.tiles.request.ApplicationContext;
 9 import org.apache.tiles.request.ApplicationResource;
10 import org.apache.tiles.startup.AbstractTilesInitializer;
11 import org.apache.tiles.startup.TilesInitializer;
12 import org.apache.tiles.web.startup.simple.SimpleTilesListener;
13 
14 public class TestListener extends SimpleTilesListener {
15 
16     @Override
17     protected TilesInitializer createTilesInitializer() {
18         
19         return new AbstractTilesInitializer(){
20             @Override
21             protected AbstractTilesContainerFactory createContainerFactory(ApplicationContext context) {
22                 
23                 BasicTilesContainerFactory basicTilesContainerFactory = new BasicTilesContainerFactory(){
24                     @Override
25                     protected List<ApplicationResource> getSources(ApplicationContext applicationContext) {
26                         //applicationContext.getResources（“/ WEB-INF / my-tiles-definitions-file.xml”）;
27                         
28                         List<ApplicationResource> retValue = new ArrayList<ApplicationResource>(1);
29                         retValue.add(applicationContext.getResource("/tiles/test-tiles.xml"));//修改tiles文件位置
30                         return retValue;
31                         //return super.getSources(applicationContext);
32                     }
33                 };
34                 return basicTilesContainerFactory;
35             }
36         };
37     }
38 
39 }

　　7.　　發布到tomcat中，並啟動tomcat

　　8.　　在瀏覽器中訪問 http://localhost:8080/test-tiles

Tiles在SpringMVC中應用

　　新建一個maven springmvc web項目，參照：【Maven】Eclipse 使用Maven創建SpringMVC Web項目
配置tiles，如上面的步驟（除去添加tiles監聽器的步驟，只要在springmvc配置tiles即可）

　　在springmvc的配置文件中加入一下內容：

 1     <!-- tiles視圖解釋類 -->
 2     <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
 3         <property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
 4     </bean>
 5 
 6     <!-- tiles配置路徑 -->
 7     <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">  
 8         <property name="definitions">
 9             <list>  
10                 <value>/tiles/*.xml</value>
11             </list>  
12         </property>
13     </bean>

　　寫一個測試的controller，TestController.java

 1 package com.test.controller;
 2 
 3 import javax.servlet.http.HttpServletRequest;
 4 
 5 import org.springframework.stereotype.Controller;
 6 import org.springframework.web.bind.annotation.RequestMapping;
 7 
 8 @Controller
 9 @RequestMapping("/testController")
10 public class TestController {
11 
12     @RequestMapping(value="/getView")
13     public String getTest(HttpServletRequest request){
14         
15         return "index";//返回tiles定義中的name
16         
17     }
18 }

　　發布到tomcat，在瀏覽器中訪問TestController中的getTest方法，即可返回界面

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【tiles】簡單使用總結 springMVC框架集成tiles模板 Spring boot 整合jsp和tiles模板 tiles+springmvc 整合使用分分鍾知道tiles框架是干嘛的使用 Apache Tiles 3 構建頁面布局 gdal gdal2tiles.py 的使用 win7下使用TileStache生成geojson格式的Tiles SSH 框架controller向jsp傳遞List jsp中使用el表達式獲取 easyui框架 jsp頁面