论坛首页 Java企业应用论坛

Tiles与YUI LayoutManager的结合

浏览 2012 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-01-04   最后修改:2009-02-04
最近在学习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进行定义和组装。
论坛首页 Java企业应用版

跳转论坛:
Global site tag (gtag.js) - Google Analytics