T5 技巧 3：使用“t::body”进行布局。
现在正在使用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
这其实是一个很普通的tapestry的页面模板。请注意123行的“<t:body/>”。这就是关键所在，当你使用这个Layout组建时， 组建body的内容就会被render到t:body的地方。
对应的，你需要再增加个page class， 虽然它在这里其实是个空壳。 但是你也可以定义参数之类的。 它是一个tapestry component（组件）
Layout.java
下面是怎样使用这个布局组件。
AddOrEditDriver.html
所有的页面都是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"> 这个部分。 要不然会遇到页面中如果有 之类的tag。 页面解析会报错。
我们知道在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 & 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:[email protected]">邮箱</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"> 这个部分。 要不然会遇到页面中如果有 之类的tag。 页面解析会报错。