为什么使用Tiles框架?
通常来说我们在开发Web应用时都会要求所有Web页面保持一致的外观,比如我们有页头,页脚,菜单和布局。下面如图所示为一种典型的页面布局:
以上网页被划分为了5个部分:Header,Menu,poster,Footer和Content。对于同一个站点所有Web页面来说,Header,Menu,poster和Footer部分的内容相同,而只有Content部分内容不同。如果采用基本的JSP语句来编写所有的Web页面,显然会导致大量的重复编码,增加开发成本。
Tiles框架可以很好得解决这个问题。
Tiles框架的好处
Tiles框架为创建Web页面提供了一种模板机制,它能将页面的布局和内容分离。它允许先创建模板,然后在运行时动态的将内容插入到模板中。Tiles框架是建立在JSP的include指令基础上,但它提供了比JSP更强大的功能。
<tiles:insertAttribute>其功能类似JSP的include指令
Tiles主要特点:
1,模板机制的页面布局功能
2,灵活的布局重构机制。使用模板的页面,可以直接在JSP里使用Tiles提供的标签重新定义块元素,也可以使用类似tiles.xml等配置文件定义。
3,易于与Struts,Shale,JSF等框架集成
如何配置Tiles框架?
1、在创建好web项目后,引入jar包,所需的包如下:
基本包:
Tiles包:
2、把tiles-jsp-2.0.6.jar包下的tiles-jsp.tld 拷贝到WEB-INF下WEB-INF/tiles-jsp.tld
3、配置web.xml,将以下代码copy到web.xml中,此时的web.xml应是已有struts2过滤器,
<context-param>
<param-name>org.apache.tiles.CONTAINER_FACTORY</param-name>
<param-value>
org.apache.struts2.tiles.StrutsTilesContainerFactory
</param-value>
</context-param>
<context-param> <param-name>org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG</param-name>
<param-value></param-value> <!-- 这放着的是用于定义tiles组件的tiles.xml,如果只使用tiles模板可以不定义值 -->
</context-param>
<listener>
<listener-class>org.apache.struts2.tiles.StrutsTilesListener</listener-class>
</listener>
到了这里,基本的环境已经布置好了,现在我们来建个例子来说明该怎么去使用tiles框架。
使用Tiles框架
1、采用Tiles模板创建复合式网页
1)建立模板文件layout.jsp
<%@ page language="java" pageEncoding="GBK"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles"prefix="tiles"%>
<html>
<head>
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000"link="#023264" alink="#023264"
vlink="#023264">
<table border="0" width="768px"height="98%" cellspacing="5"align="center">
<tr height="100px">
<td colspan="2">
<tiles:insertAttribute name="header"></tiles:insertAttribute>
</td>
</tr>
<tr height="1px">
<td colspan="2">
<hr>
</td>
</tr>
<tr>
<td width="140" valign="top">
<tiles:insertAttribute name="siderbar"></tiles:insertAttribute>
</td>
<td valign="top" align="left">
<tiles:insertAttribute name="contant"></tiles:insertAttribute>
</td>
</tr>
<tr height="1px">
<td colspan="2">
<hr>
</td>
</tr>
<tr height="50px">
<td colspan="2">
<tiles:insertAttribute name="footer"></tiles:insertAttribute>
</td>
</tr>
</table>
</body>
</html>
在模板文件中定义了网页的布局,但是没有指定各部分的具体内容。<tiles:insert
attribute="footer" />的attribute属性仅仅定义了待插入的逻辑名,而没有指定文件名。
2)、在index.jsp页面中运用tile模板,记得先创建好head.jsp,siderbar.jsp,contant.jsp,footer.jsp
<%@ page language="java" import="java.util.*"pageEncoding="GBK"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles"prefix="tiles"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<body>
<tiles:insertTemplate template="/WEB-INF/layout.jsp" flush="true">
<tiles:putAttribute name="header"value="/WEB-INF/head.jsp"></tiles:putAttribute>
<tiles:putAttribute name="siderbar"value="/WEB-INF/siderbar.jsp"></tiles:putAttribute>
<tiles:putAttribute name="contant"value="/WEB-INF/contant.jsp"></tiles:putAttribute>
<tiles:putAttribute name="footer"value="/WEB-INF/footer.jsp"></tiles:putAttribute>
</tiles:insertTemplate>
</body>
</html>
2、使用Tiles组件
1)要想使用tiles组件,首先得先在WEB-INF文件下建立tiles.xml文件
<?xml version="1.0"encoding="GB2312" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD TilesConfiguration 2.0//EN"
"http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
<!-- 主页面模板 -->
<definition name="indexModel"template="/WEB-INF/layout.jsp">
<put-attribute name="header" value="/WEB-INF/head.jsp"/>
<put-attribute name="siderbar" value="/WEB-INF/siderbar.jsp"/>
<put-attribute name="contant" value="/WEB-INF/contant.jsp"/>
<put-attribute name="footer" value="/WEB-INF/footer.jsp"/>
</definition>
</tiles-definitions>
2)修改web.xml
3)在index.jsp中插入tiles组件
<%@ page language="java"import="java.util.*" pageEncoding="GBK"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles"prefix="tiles"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<body>
<tiles:insertDefinition name="indexModel">
</tiles:insertDefinition>
</body>
</html>
3、运行效果