struts的Tiles浅谈（其实就是学习笔记）

      我们在开发web的时候往往有很多页面具有相同或者类似的结构，他们共有导航栏，页眉，页脚等基础页面，如下图所示，一种较为普遍的页面布局格式。

 

 

 

 

       那我们每个页面都要写这么多的代码是不是会很麻烦呢？的确，会相当的麻烦。有人说我们只要用jcp的include标签来引入具有共同结构的页面会省去很多的麻烦，是这样的。但是如果我们要该掉这个框架呢？我们要把页脚变的高一些呢？是不是我们又得到所有页面当中去修改呢？是的，那样真的很麻烦。那我们又开始想了，有没有一种方法可以使得这个框架被抽出来呢？要修改框架的话只要修改一个就可以了。答案是肯定的。struts的tiles就可以完成这个功能。

       就像刚刚说的那样，我们需要有一个基础的框架。这里我们定义一个layout.jsp的页面

<%@ page language="java" pageEncoding="GB2312"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
	<html:base />

	<title>MyJsp.jsp</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

</head>

<body>
	<table style="width: 100%" border="1">
		<tr style="height: 80px">
			<td rowspan="3" style="width: 20%">
				<tiles:insert attribute="sidebar" />
			</td>
			<td><tiles:insert attribute="header" /></td>
		</tr>
		<tr style="height: 400px">
			<td>
				<tiles:insert attribute="content" />
			</td>
		</tr>
		<tr style="height: 40px">
			<td>
				<tiles:insert attribute="footer" />
			</td>
		</tr>
	</table>
</body>
</html:html>

 

      <tiles:insert attribute="sidebar" />大家都看到了这个标签，这就是传说中的tiles标签。说通俗点，该标签在该闻之留下了记号，这个记号就是sidebar（就像小狗喜欢在自己的地盘留下点气味一样）。这条叫tiles的小狗留下这个所谓的气味有什么用呢，这个吗，慢慢会过来和大家说的。

      我们再来看看这个布局，这个布局一共需要4个页面组成。我们把这四个页面定义成head.jsp;sidebar.jsp;content.jsp;footer.jsp。这四个页面的代码分别如下所示

<%@ page language="java" pageEncoding="GB2312"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
  <head>
    <html:base />
    
    <title>页眉</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
    这个标题页面
  </body>
</html:html>

      其余3个页面和该页面类似，我们就不写了。下面我们需要一个实实在在的页面，通过tiles这只小狗的气味把这4个页面给召唤过来，我们把这个页面取名为index.jsp吧。代码如下图所示：

<%@ page language="java" pageEncoding="GB2312"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
  <head>
    <html:base />
    
    <title>主页</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
   <tiles:insert page="layout.jsp" flush="true" >
   <tiles:put name="header" value="head.jsp"/>
   <tiles:put name="sidebar" value="sidebar.jsp"/>
   <tiles:put name="content" value="content.jsp"/>
   <tiles:put name="footer" value="footer.jsp"/>
   </tiles:insert>
  </body>
</html:html>

 我们来看一看这个index的效果图

 

      看到效果了吧，我们来解释一些，这个index怎么通过layout和tiles小狗的气味把这些页面吸引过来的呢？来看看下面这段代码;

 

   <tiles:insert page="layout.jsp" flush="true" >
   <tiles:put name="header" value="head.jsp"/>
   <tiles:put name="sidebar" value="sidebar.jsp"/>
   <tiles:put name="content" value="content.jsp"/>
   <tiles:put name="footer" value="footer.jsp"/>
   </tiles:insert>

 

      大家应该可以看的很清楚index是利用tiles:insert的page属性来引入框架的，而且通过tiles:put的name属性和小狗的气味进行关联，将相应的页面给吸引过来的。如果这个时候添加一个新的index2页面，也很简单，只要重新些一个属于index2的content页面就可以了。然后利用tiles可以轻轻松松的完成操作。

       回到我们刚开始的话题，如果我们想把页脚调整的高一些，那么我们该怎么办呢？哈哈，你会发现这个很简单，只需要修改layout.jsp页面就可以了。不需要一个页面一个页面的修改。

       怎么样？很方便吧。其实tiles还有很多功能，我们只是说了一个小方面，下面的大家自己去看吧，有时间继续更新自己的博客。