sitemesh简化布局

| No Comments | No TrackBacks

sitemesh一个系统,添加到Web应用中并促进模式HTML世界里的应用。
可从http://www.opensymphony.com/sitemesh/ 获得。

sitemesh仅处理html的内容,象图象,PDF文件和下载这样的媒体是被忽略的。

下面我们将用实例来介绍如何分析内容网页和装饰器如何被映射到网页。以及从sitemesh中获取
信息的一些技术。

整个事例用到login.jsp, date.jsp , 索引的index.html
配置文件decorators.xml
装饰文件:window.jsp ,simple.jsp
运用的样式表:style.css


目标是把内容与布局分离,一达到简化布局,以及重用代码的作用。


实质是使用simple.jsp,window.jsp以及提取的longin.jsp,date,jsp的实际主体来构成最终显示
给用户的页面。


布局主体是simple.jsp控制:它控制了网页的整体架构。

<%@ taglib uri="sitemesh-decorator" prefix="decorator" %>
<%@ taglib uri=
"sitemesh-page" prefix="page" %>

<html>
<head>
<title><decorator:title/></title>
<link rel=
"stylesheet" href="decorators/style.css">
<decorator:head/>
</head>
<body>

<table width=
"100%">
<tr>
<td class=
"title" colspan="2">
<decorator:title/>
</td>
</tr>
<tr>
<td class=
"body" valign="top">
<decorator:body/>
</td>
<td valign=
"top">

<page:applyDecorator name=
"window" page="date.jsp"/>

<page:applyDecorator name=
"window" title="Disclaimer">
This site is not legally binding in any way. <br>
All rights reserved. Elvis has left the building.
</page:applyDecorator>

</td>
</tr>
<tr>
<td class=
"footer" valign="top" colspan="2">
<b>Title:</b> <decorator:title/> <br>
<b>Author:</b> <decorator:getProperty property=
"meta.author"/> <br>
</td>
</tr>
</table>

</body>
</html>
这个文件将在decorators.xml中被定义,其中给出装饰器的名称,位置,模式匹配。
模式匹配可以使用通配符和正则表达式。在这对于simple.jsp使用了通配符*配置该
装饰器用来匹配Web应用中的所有网页。有关正则表达式的相关内容请参看本博客 http:
//192.168.0.3/blog3/meiking_archive_2005_05_20_18525.html)。

<decorators>

<decorator name=
"simple" page="/decorators/simple.jsp">
<pattern>*</pattern>
</decorator>


</decorators>

上面我们讨论了装饰器设计模式,将装饰器和内容组合,下面我们来看看如何运用组合设计模式

在页面中引用子装饰器 ,子内容。
让我们来看看一个子装饰器window.jsp


<%@ taglib uri=
"sitemesh-decorator" prefix="decorator" %>
<table class=
"window">
<tr>
<th><img src=
"decorators/snazzy.gif"><decorator:title/></th>
</tr>
<tr>
<td>
<decorator:body/>
</td>
</tr>
</table>

在回头看看simple.jsp在其中我们已经包含了window.jsp的运用,我们把他运用到了date.jsp
上,运用样式表date.jsp的主体内容应该会出现在最终显示页面的右上角。

在decorators.xml中被定义
<decorators>

<decorator name=
"window" page="/decorators/window.jsp"/>

</decorators>



现在我们可以给出完整的decorators.xml了:
<decorators>

<decorator name=
"simple" page="/decorators/simple.jsp">
<pattern>*</pattern>
</decorator>

<decorator name=
"window" page="/decorators/window.jsp"/>

</decorators>
在装饰器中拥有一个技术:sitemesh有一个pageparser对象,它通过内容网页获取输出的内容
并把它解析到一个page对象中
假如一个内容网页有如下列标题:
<html>
<head>
<title>Please login</title>
<meta name=
"author" content="Homer Simpson">
</head>
...
装饰器使用JSP标识符可以访问title属性,也能访问auther属性
让我们看看simple是如何做的:
<%@ taglib uri=
"sitemesh-decorator" prefix="decorator" %>
...
<b>Title:</b> <decorator:title/> <br>
<b>Author:</b> <decorator:getProperty property=
"meta.author"/> <br>
...


简单的login.jsp,date.jsp页面

login.jsp

<html>
<head>
<title>Please login</title>
<meta name=
"author" content="Homer Simpson">
</head>
<body>
<form action=
"#" method="post">

<input type=
"hidden" name="section" value="store">

Login Name:<br>
<input type=
"text" name="loginname"><br>

Password:<br>
<input type=
"password" name="password"><br>

<input type=
"submit" value="Login">

</form>
</body>
</html>

<--------------------------------------------------->
date.jsp

<html>
<head>
<title>Time and date</title>
<meta name=
"author" content="Fred Flintstone">
</head>
<body>
Right now, it's:<br>
<b><%= new java.util.Date().toString() %></b>
</body>
</html>



其他:1 对于页面可将公共代码重构到应用文件中来简化代码和重用代码
2 对于页面可以使用样式表做的更彻底,使页面的主体部分不会淹没带大量的结构代码中

No TrackBacks

TrackBack URL: http://www.wujianrong.com/mt-tb.cgi/1309

Leave a comment

About this Entry

This page contains a single entry by kevinwu published on November 1, 2006 11:26 AM.

SiteMesh介绍 (转) was the previous entry in this blog.

道可道 非常道 is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.