论坛首页 → Java企业应用论坛 →

T5 技巧 3：使用“t::body”进行布局。

浏览 3300 次
锁定老帖子 主题：T5 技巧 3：使用“t::body”进行布局。
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • dengyin2000
  • 等级: 四钻会员
  • 性别:
  • 文章: 1467
  • 积分: 1725
  • 来自: 广州
   发表时间：2007-08-25  
现在正在使用T5开发一个小项目。 因为现在T5还正处于发展中。 而且没有像T4一样有许多的文档。 和例子(Workbench, Vlib)。 所以我会把在这个开发中遇到的一些问题记录下来。

我们知道在tapestry4的自带的例子中会有个Border组件。这个自定义的组件其实是起到了一个布局的作用。对网站的统一风格有很大的好处。但是在tapestry5中没有RenderBody这个组件。然而在tapestry5的文档中倒是有提怎样实现。请看http://tapestry.apache.org/tapestry5/tapestry-core/guide/templates.html， 但是作者也是随便提了提。

我们创建一个Layout组建。这个其实就是tapestry4中Border组建了。
Layout.html 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">   
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gtts</title>
<link rel="stylesheet" type="text/css" href="../../css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../css/print.css" media="print" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6_or_less.css" />
<![endif]-->
<script type="text/javascript" src="../../js/common.js"></script>
<style type="text/css">
table.t-data-grid {
	border-collapse:collapse;
	border-left:1px solid silver;
	width:100%;
}

table.t-data-grid thead tr {
background:#990000 url(../../images/sprites.gif) repeat-x scroll 0pt -1300px;
color:white;
}

div.t-data-grid-pager span.current {
background:#FFFFFF none repeat scroll 0%;
border:1px solid #CCCCCC;
color:#CCCCCC;
padding:2px 5px;
text-decoration:none;
}

div.t-data-grid-pager a:hover {
background:#CC0000 none repeat scroll 0%;
color:#FFFFFF;
}

div.t-data-grid-pager a {
border:1px solid silver;
color:#CC0000;
font-size:medium;
margin-right:5px;
padding:2px 5px;
text-decoration:none;
}

div.t-data-grid-pager span.current {
border:1px solid silver;
color:black;
font-size:medium;
margin-right:5px;
padding:2px 5px;
text-decoration:none;
}
</style>
</head>
<body id="type-a">
<div id="wrap">

	<div id="header">
		<div id="site-name">Gtts</div>
		<div id="search">
			<form action="">
			<label for="searchsite">Site Search:</label>
			<input id="searchsite" name="searchsite" type="text" />
			<input type="submit" value="Go" class="f-submit" />
			</form>
		</div>
		<ul id="nav">
		<li class="first"><a href="#">Home</a></li>
		<li class="active"><a href="#">Products</a>
			<ul>
			<li class="first"><a href="#">Maecenas</a></li>
			<li class="active"><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li class="last"><a href="#">Mauris at enim</a></li>
			</ul>
		</li>
		<li><a href="#">Client list</a>
			<ul>
			<li class="first"><a href="#">Maecenas</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li class="last"><a href="#">Mauris at enim</a></li>
			</ul>
		</li>
		<li><a href="#">Case Studies &amp; References</a>
			<ul>
			<li class="first"><a href="#">Maecenas</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li class="last"><a href="#">Mauris at enim</a></li>
			</ul>
		</li>
		<li class="last"><a href="#">Locations</a>
			<ul>
			<li class="first"><a href="#">Maecenas</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li class="last"><a href="#">Mauris at enim</a></li>
			</ul>
		</li>
		</ul>
	</div>
	
	<div id="content-wrap">
	
		<div id="content">
		
			<!-- body goes here. -->
			<t:body/>
			
			<div id="footer">
			<p>作者：邓胤</p>
			<p><a href="mailto:deng.yin@gmail.com">邮箱</a> | <a href="http://dengyin2000.iteye.com">博客</a></p>
			</div>		
		</div>
	</div>

</div>
</body>
</html>



这其实是一个很普通的tapestry的页面模板。请注意123行的“<t:body/>”。这就是关键所在，当你使用这个Layout组建时， 组建body的内容就会被render到t:body的地方。

对应的，你需要再增加个page class， 虽然它在这里其实是个空壳。 但是你也可以定义参数之类的。 它是一个tapestry component（组件）

Layout.java 

package com.javaeye.dengyin2000.gtts.components;

public class Layout {

}


下面是怎样使用这个布局组件。

AddOrEditDriver.html 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<t:layout xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
			<form  t:type="form" t:id="form" clientValidation="true" action="forms.html" method="post" class="f-wrap-1">
			
			<div class="req"><b>*</b> 为必填项</div>
			
			<fieldset>

			<h3>${action}司机</h3>
			<table width="100%" border="0">
				<tr>
					<td colspan="2">
						<div t:type="Message" />
						<t:errors/>			
					</td>
				</tr>
				<tr>
					<td>
						<label t:type="Any" for="name"><b><span class="req">*</span>姓名：</b>
						<input t:type="TextField" t:id="name"  validate="required" value="driver.name" label="姓名"  class="f-name" tabindex="1" /><br />
						</label>					
					</td>
					<td>
						<label t:type="Any" for="idCard"><b><span class="req">*</span>身份证：</b>
						<input t:type="TextField" t:id="idCard"  validate="required" value="driver.idCard" label="身份证"  class="f-name" tabindex="2" /><br />
						</label>					
					</td>
				 </tr>
				 <tr>
				 	<td>
						<label t:type="Any" for="carNo"><b><span class="req">*</span>车牌号码：</b>
						<input t:type="TextField" t:id="carNo"  validate="required" value="driver.carNo" label="车牌号码"  class="f-name" tabindex="3" /><br />
						</label>					
					</td>		
				 	<td>
						<label t:type="Any" for="telNo"><b><span class="req">*</span>电话：</b>
						<input t:type="TextField" t:id="telNo"  validate="required" value="driver.telNo" label="电话"  class="f-name" tabindex="4" /><br />
						</label>					
					</td>						
				 </tr>
				 <tr>
				 	<td>
						<label t:type="Any" for="national"><b>民族：</b>
						<input t:type="TextField" t:id="national"  value="driver.national" label="民族"  class="f-name" tabindex="5" /><br />
						</label>					
					</td>		
				 	<td>
						<label t:type="Any" for="carLong"><b>车长：</b>
						<input t:type="TextField" t:id="carLong"  value="driver.carLong" label="车长"  class="f-name" tabindex="6" /><br />
						</label>					
					</td>						
				 </tr>
				 <tr>
				 	<td>
						<label t:type="Any" for="carWidth"><b>车宽：</b>
						<input t:type="TextField" t:id="carWidth"  value="driver.carWidth" label="车宽"  class="f-name" tabindex="7" /><br />
						</label>					
					</td>		
				 	<td>
						<label t:type="Any" for="carHeight"><b>车高：</b>
						<input t:type="TextField" t:id="carHeight"  value="driver.carHeight" label="车高"  class="f-name" tabindex="8" /><br />
						</label>					
					</td>						
				 </tr>
				 <tr>
				 	<td colspan="2">
						<label t:type="Any" for="address"><b>住址：</b>
						<input t:type="TextField" t:id="address"  value="driver.address" label="住址" size="30"  class="f-name" tabindex="9" /><br />
						</label>					
					</td>	
				 </tr>			 		 
				<tr>
					<td colspan="2">
							<div class="f-submit-wrap">
							<input type="submit" value="修改" class="f-submit" tabindex="9" /><br />
							</div>						
					</td>
				</tr>			
			</table>
			
			</fieldset>
			</form>
</t:layout>


所有的页面都是t:layout包括。  当然这部分页面会被layout组件render出来。

注意： 你最好是在你的所有的page template开头加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 这个部分。 要不然会遇到页面中如果有&nbsp;之类的tag。 页面解析会报错。
返回顶楼
         
  • hitalang
  • 等级: 初级会员
  • 性别:
  • 文章: 12
  • 积分: 30
  • 来自: 杭州
   发表时间：2007-08-30  
<form  t:type="form" t:id="form" clientValidation="true" action="forms.html" method="post" class="f-wrap-1"> 
中的action="forms.html"什么意思??
返回顶楼
          回帖地址
0 请登录后投票
  • dengyin2000
  • 等级: 四钻会员
  • 性别:
  • 文章: 1467
  • 积分: 1725
  • 来自: 广州
   发表时间：2007-08-31  
hitalang 写道
<form  t:type="form" t:id="form" clientValidation="true" action="forms.html" method="post" class="f-wrap-1"> 
中的action="forms.html"什么意思??


没有意思，  假的， tapestry  render会忽略这些属性。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Java企业应用版

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