浏览 2012 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-01-04
最后修改:2009-02-04
现在只发现缺少页面组装的功能,看来不得不依赖 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进行定义和组装。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |