Tiles与YUI LayoutManager的结合

yiyu · 发表于 2013-2-8 00:23:39

最近在学习YUI，深感功能全面，正在试探是否可以作为页面部分的一揽子解决方案。
现在只发现缺少页面组装的功能，看来不得不依赖 apache tiles 了。
这两天做了个小例子，结合了YUI的LayoutManager和Tiles的功能，现在贴出来，欢迎对YUI感兴趣的朋友指正。
也欢迎对YUI感兴趣的朋友谈谈在企业开发里YUI的长处和短处。

首先是tiles的模板jsp文件，其中由tiles管理的Attribute都放在了中，这些又是LayoutManager的管理对象，代码如下：

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%><html><head><title><tiles:getAsString name="title" /></title><%String path = request.getContextPath();%><link rel="stylesheet" type="text/css" href="<%=path%>/yui/assets/skins/sam/resize.css"><link rel="stylesheet" type="text/css" href="<%=path%>/yui/assets/skins/sam/layout.css"><link rel="stylesheet" type="text/css" href="<%=path%>/yui/logger/assets/skins/sam/logger.css"><script type="text/javascript" src="<%=path%>/yui/yahoo-dom-event/yahoo-dom-event.js"></script><script type="text/javascript" src="<%=path%>/yui/dragdrop/dragdrop-min.js"></script><script type="text/javascript" src="<%=path%>/yui/element/element-beta-min.js"></script><script type="text/javascript" src="<%=path%>/yui/logger/logger-min.js"></script><script type="text/javascript" src="<%=path%>/yui/animation/animation-min.js"></script><script type="text/javascript" src="<%=path%>/yui/resize/resize-min.js"></script><script type="text/javascript" src="<%=path%>/yui/layout/layout-min.js"></script><script type="text/javascript">function initLayout() {var layout = new YAHOO.widget.Layout( {units : [ {position :'top',height :50,body :'titlebar'}, {position :'bottom',height :50,body :'statusbar'}, {position :'center',body :'content'} ]});layout.render();};YAHOO.util.Event.onDOMReady(initLayout);</script></head><body class="yui-skin-sam"><script type="text/javascript">var myLogReader = new YAHOO.widget.LogReader();</script><div id="titlebar"><tiles:insertAttribute name="header" /></div><div id="content"><table><tr><td><tiles:insertAttribute name="menu" /></td></tr><tr><td><tiles:insertAttribute name="body" /></td></tr></table></div><div id="statusbar"><tiles:insertAttribute name="footer" /></div></body></html>

其次是tiles的定义文件，其中有一个抽象页面定义和三个具体的页面定义，代码如下：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN" "http://tiles.apache.org/dtds/tiles-config_2_0.dtd"><tiles-definitions><definition name="simpleweb.common" template="/pages/tiles/mainlayout.jsp"><put-attribute name="title" value="Simpleweb" /><put-attribute name="header" value="/pages/banner.jsp" /><put-attribute name="menu" value="/pages/mainmenu.jsp" /><put-attribute name="footer" value="/pages/footer.jsp" /><put-attribute name="body" value="" /></definition><definition name="simpleweb.main" extends="simpleweb.common"><put-attribute name="body" value="/pages/welcome.jsp" /></definition><definition name="simpleweb.person.register" extends="simpleweb.common"><put-attribute name="body" value="/pages/person/register.jsp" /></definition><definition name="simpleweb.person.search" extends="simpleweb.common"><put-attribute name="body" value="/pages/person/search.jsp" /></definition></tiles-definitions>

通过使用struts2-tiles-plugin，画面的迁移需要在struts.xml中这样定义：
<result-types><result-type name="tiles" class="org.apache.struts2.views.tiles.TilesResult" /></result-types><action name="LoginAction" method="execute" class="loginAction"><result name="input">/index.jsp</result><result name="success" type="tiles">simpleweb.main</result></action>

这样，就可以实现一个由YUI LayoutManager进行布局的页面中，页面的各个组成部分通过tiles进行定义和组装。

		自动登录	找回密码
密码			立即注册