Tiles实践

时间：2007-08-07 来源：sdwsyjp

使用tiles构建网页的过程

下面，我们通过构建一个本篇开头提及的那种简单页面来体会一下tiles构建网页的过程。

在struts-config.xml中加入tiles插件

<plug-in className="org.apache.struts.tiles.TilesPlugin">
 <set-property property="definitions-config" value="/WEB-INF/til
es-defs.xml" />
 </plug-in>

创建tiles-defs.xml文件，并把它放在应用程序的WEB-INF目录下

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC "-
//Apache Software Foundation
//DTD Tiles Configuration 1.1
//EN" "http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd">
<tiles-definitions> 
 <definition name="testLayout" path="/testLayout.jsp">
 <put name="title" value="my tiles test" />
 <put name="header" value="/header.jsp" />
 <put name="body" value="/body.jsp" />
 <put name="footer" value="/right.jsp" />
 </definition>
</tiles-definitions>

创建一个名为testLayout.jsp的布局模板文件

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<html>
<head>
<title><tiles:get name="title"/>
</title>
</head>
<body>
 <table>
 <tr>
 <td height="80" width="778" bgcolor="#aa0000">
 <tiles:insert attribute="header"/>
 </td>
 </tr>
 <tr>
 <td height="360" width="778" bgcolor="#00aa00">
 <tiles:insert attribute="body"/>
 </td>
 </tr>
 <tr>
 <td height="80" width="778" bgcolor="#0000aa">
 <tiles:insert attribute="footer"/>
 </td>
 </tr>
 </table> 
</body>
</html>

从该文件的代码可以看出：

<tiles:insert 标签中的attribute属性值
是由tiles-defs.xml中定义的逻辑名来表示的

这为基于该模板的网页动态地装入tile奠定了基础。最后,创建几个用于实验的.jsp文件，它们包括header.jsp、body.jsp、body2.jsp以及right.jsp。

header.jsp的代码

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
<title>
header
</title>
</head>
<body bgcolor="#ffffff">
<h1>

这是页头部分

</h1>
</body>
</html>

body.jsp的代码

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
<title>
body
</title>
</head>
<body bgcolor="#ffffff">
<h1>

这是内容部分

</h1>
</body>
</html>

body2.jsp的代码

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
<title>
body
</title>
</head>
<body bgcolor="#ffffff">
<h1>

这是内容部分2

</h1>
</body>
</html>

right.jsp的代码

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
<title>
right
</title>
</head>
<body bgcolor="#ffffff">
<h1>

这是版权页

</h1>
</body>
</html>

4、演示tiles的使用效果

为此，我们还要建两个.jsp文件，它们分别名为：page1.jsp和page2.jsp

page1.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="/testLayout.jsp" flush="true">
 <tiles:put name="title" content="My first page" direct="true"/>
 <tiles:put name="header" value="/header.jsp"/>
 <tiles:put name="body" value="/body.jsp"/>
 <tiles:put name="footer" value="/right.jsp"/>
</tiles:insert>

page2.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="/testLayout.jsp" flush="true">
 <tiles:put name="title" content="My second page" direct="true"/>
 <tiles:put name="header" value="/header.jsp"/>
 <tiles:put name="body" value="/body2.jsp"/>
 <tiles:put name="footer" value="/right.jsp"/>
</tiles:insert>

从这两个文件可以看出：

文件的布局是与模板相对应，而这两个文件的body部分则对应着不同的.jsp文件。可以想象，如果要对页头和版权信息做修改，只要对header.jsp和right.jsp做相应的修改，则修改的结果则会反映到page1.jsp和page2.jsp页面上。

以上，只是对tiles的使用做了一个简单的介绍，它还有其他一些特征如：tile的定义可以扩展等等，值得大家深入探讨。至于上面各种文件中出现的一些标签，大多可以从标签本身看出其含义，实在不清楚的也可以参考这方面的有关资料，如果详细在这里讲解这些东西会显得冗长乏味。

现在，如果您在浏览器中输入：http://127.0.0.1:8080/mystruts/page1.jsp就可以看到网页效果了；对比输入：http: //127.0.0.1:8080/mystruts/page2.jsp 看看网页的变化。就可以体会到使用tiles框架的作用了。

下一篇文章，笔者准备介绍一下用tiles框架构建frame形式的网页的问题。之所以准备写它们是因为frame形式的网页应用还是比较广泛，而且笔者发现这方面的参考文献比较少见。另外，本系列第八篇发表后，就有读者来信提出过这样的要求，希望整理出来的东西能对这部分读者有所帮助。

参考文献：

《Programming Jakarta Struts》Chuck Cavaness著

运行成功！~