Tiles与YUI LayoutManager的结合
来源:互联网 发布:万万没想到 知乎 编辑:程序博客网 时间:2024/06/05 11:44
最近在学习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进行定义和组装。
- Tiles与YUI LayoutManager的结合
- Struts tiles 与 frame结合使用
- 结合dwr的yui-ext分页例子
- Struts与Apache Tiles结合实现像HTML一样的Frame框架
- LayoutManager
- 与Tiles框架的第一次亲密接触
- 与Tiles框架的第一次亲密接触
- JSF与Tiles框架的整合1
- 解析Tiles组件的组合与扩展
- 解析Tiles组件的组合与扩展
- RecycleView的layoutManager.setStackFromEnd(true);layoutManager.setReverseLayout(true);
- RecyclerView自适应高度的LayoutManager
- 打造属于你的LayoutManager
- 打造属于你的LayoutManager
- 打造属于你的LayoutManager
- yui 与 jQuery
- phpstorm 结合 YUI Compressor 实现自动压缩文件
- tiles应用与疑惑
- 2009.01.03
- 二元操作符重载
- 当前打印机驱动程序与计算机上启用的某个策略不兼容,阻挡了windows?NT?4.0或windows?2000内核模式驱动程
- 將EXCEL數據倒入MSSQL中的混合格式(2+2)出現NULL問題
- 如何在.net中配置自己的数据库
- Tiles与YUI LayoutManager的结合
- 关于F2812片内Flash烧写的问题
- 当下10大最热门的WEB开发技术
- css小记
- Ant入门
- 禁止暴风影音的自动升级的方法
- MSSQL导入/导出数据 "启用标识插入"选项的作用
- 如何用VNC远程管理Linux桌面
- Enterprise Architect