绑定表达式 “prop:greeting”是一个绑定表达式（Binding Expression），其中“prop”是其前缀。除 了“prop”，还有很多其它前缀，各前缀及其代表的意义如下： asset Asset 的路径。 block Block 的 ID。 component 组件的 ID。 context Context asset 的路径。 literal 文本字符串。 nullfieldstrategy 用于设置预定义 NullFieldStrategy。 message 用于获取本地化信息。 prop 属性名。 translate Translator 名称。 validate Validator 名称。 var 组件变量。 这些前缀的用法和例子，在后面的章节中陆陆续续会出现，而现在我们只需先了解“p 第二章 基础 16 rop”前缀的用法，这也是最常用的一个前缀。 “prop”表示类中的一个属性。 在一个典型的 JavaBean 中，一个名为“greeting”的属性的代码如下： private String greeting; public String getGreeting() { return greeting; } public void setGreeting(String greeting) { this.greeting = greeting; } 其中包括私有的属性和公开的 getter 和 setter 方法。 getter 方法的命名规则是把属性名 第一个字母大写然后在前面加上“get”（如果是布尔型，也可以加“is”）， setter 方法的命 名规则是把属性名第一个字母大写然后在前面加上“set”。如果属性只读则省略 setter 方法。 在使用“prop”时，并不要求类中真的存在一个叫做“greeting”的成员变量，只需要 有相应的 getter/setter 方法就行了，正如我们在 Start 类中看到的一样。同时“prop”是大小 写不敏感的，因此即使我们把页面模板中的表达式写成“prop:gReetinG”而且把页面类中的 getter 方法名写成“getgreEtiNg”也是可以的。 我们还可以获取属性的属性，例如： prop:user.firstName 我们还可以在表达式中直接使用方法名而不是属性名，例如： prop:getGreeting() prop:getUser().getFirstName() 直接使用方法名的话，必须在方法名后加括号，同时方法必须公开、无参数且返回一个 non-void 值。使用方法名最大的好处是可以方便我们获取那些非 getter 方法的返回值，比如 Collection.size()。 我们也可以混合使用属性名和方法名，例如： prop:user.getFirstName() 如果要避免空指针引发异常，可以用“?.”代替“.”，例如： prop:foo?.bar?.baz 这样，不管 foo 或者 bar 是 null，整个表达式都会返回 null，对其赋值则不会引发任何操作。 在 Expansion 中，“prop”是缺省前缀，因此我们可以省略${prop:greeting}中的“prop” 前缀，把 Start.tml 修改成： ${greeting} 第二章 基础 17 使用组件 现在，我们要在 Start 页面增加一个超链接，指向一个叫做“Another”的页面。 修改 Start.tml： ${greeting}
The value is: ${value} 修改 Another 类： public class Another { private String value; @Component(parameters = { "page=start" }) private PageLink goToStart; public String getValue() { return value; } public void setValue(String value) { this.value = value; } } 修改 Start 类： public class Start { @Property 第二章 基础 28 private String theValue = "Init Value"; @InjectPage private Another anotherPage; public String getGreeting() { return "Hello Tapestry!"; } @OnEvent(value = "action", component = "actionLink1") Object toAnotherPage() { return anotherPage; } Object onSuccessFromForm1() { anotherPage.setValue(theValue); return anotherPage; } } 然而，当我们提交表单，Another 页面并没有显示 Start 页面传过来的数据，如图 2-10。 （图 2-10） 这是为什么呢？ 要知道造成这个问题的原因，需要了解 Tapestry 的页面池。 页面池 当 Tapestry 收到一个页面请求时，Tapestry 需要一个页面实例来生成 Html 代码。页面 实例可看成是页面类和页面模板的混合体，用于生成最终的 Html 代码。 假设在一段时间内有许多用户请求 A 页面。如果对每个请求，都为其新建一个 A 页面 实例并在使用后销毁，那么新建和销毁页面实例将是不小的开销。为了提高性能，Tapestry 使用页面池。当一个用户请求 A 页面，Tapestry 将从页面池中取出一个 A 页面实例并在使用 后放回页面池供以后的请求使用，这样就减少了新建和销毁页面实例的开销。 当用户往页面中输入了某些数据，这些数据将保存在页面实例中，如果不加处理就把此 页面实例放回页面池，那么这些数据将会被暴露给下一个使用此页面实例的用户。为了避免 第二章 基础 29 出现这种情况，在一个页面实例被放回页面池之前 Tapestry 会对其进行清理，把其中的变量 重置为初始值。 回过头来看前面的问题，当我们在 Start 页面中输入数据并提交表单，会依次发生如下 事情： 第一步，客户端向 Tapestry 发出一个组件事件请求，触发 Start 页面实例的 onSuccessFr omForm1()方法。 第二步，Tapestry 从页面池取出一个 Another 页面实例并设置其 value 属性。 第三布，Tapestry 通知客户端重定向到此 Another 页面。 第四步，客户端请求 Another 页面。 第五步，Tapestry 从页面池取出一个 Another 页面实例用来生成 Html 代码发送给客户端。 很显然，在整个过程中，客户端向 Tapestry 发送了两次请求。对每次请求，Tapestry 都 是从页面池中新取出一个 Another 页面实例来处理，请求处理完成后，Another 页面实例又 会被放回页面池，保存在其中的数据也就被清除了。因此即使第五步中所用 Another 页面实 例就是第二步中所用的那一个（也有可能不是同一个），其中的数据也已经被清除过了。 试想如果在第二步设置完 Another 页面实例的 value 属性后，就直接用此页面实例生成 Html 代码发送给客户端，而不需要经过重定向，那么前面数据丢失的问题就不存在了。 我们可以配置 Tapestry 以禁止重定向。 禁止重定向 修改 AppModule 类： public class AppModule { public static void contributeApplicationDefaults( MappedConfiguration
用户名：
第二章 基础 33 密**码：
首页
Contact.java： public class Contact { } Contact.tml： 联系我们
把“MyComponent”工程加入 Tomcat 服务器，重启服务器，页面效果如图 3-1 和 3-2。 （图 3-1） （图 3-2） 创建组件 在 Start 和 Contact 页面，最上面的导航菜单是一样的，我们把它做成一个 NaviMenu 组 件，这样我们就可以在这两个或者更多的页面上重用 NaviMenu 组件。 在 Tapestry 5 中，组件和页面的差别很小。组件也有组件类和组件模板，类似于前面的 页面类和页面模板，同样的，组件里也可以包含其他组件。我们可以把页面看成是一棵组件 树的根组件。 组件和页面的差别之一是它们的类所在的包不同。 在“example.mycomponent.components”包中新建 NaviMenu 类： public class NaviMenu { } 在“example.mycomponent.components”包中新建 NaviMenu.tml： 首页
修改 Contact.tml： 联系我们
运行程序，一切正常。 组件参数 现在我们要改进导航菜单，在 Start 页面，让导航栏菜单的“首页”只显示文字而不是 超链接，同样的在 Contact 页面“联系我们”也只显示文字。 我们来创建一个新的组件 NaviItem，此组件对应导航菜单上的一个导航项，如果其目标 页面就是当前页面的话，则显示文字，否则显示超链接。 NaviItem 组件有两个参数，“desc”表示目标页面描述，“page”表示目标页面逻辑名。 Tapestry用@Parameter注释标识组件参数，参数名由@Parameter注释的name属性指定， 定义参数的代码如下： @Parameter(name = "desc") private String pageDesc; @Parameter(name = "page") private String pageName; 如果不显式指定参数名，那么属性名就是参数名，因此上面的代码可以简写成如下： @Parameter private String desc; 第三章 创建自己的组件 41 @Parameter private String page; 现在，我们来创建 NaviItem 组件。 在“example.mycomponent.components”包中新建 NaviItem 类： public class NaviItem { @Parameter private String desc; @Parameter private String page; @Inject private ComponentResources componentResources; public boolean isSelf() { return componentResources.getPageName().equalsIgnoreCase(pag e); } public String getPageDesc() { return desc; } public String getPageName() { return page; } } 方法 isSelf()用于判断当前页面是否就是目标页面，其中我们使用 ComponentResources# getPageName()方法获取当前页面名称。 在“example.mycomponent.components”包中新建 NaviItem.tml： 首页
在Contact.tml中使用layout/Main组件： ${var:index}:首页
${defaultTitle}
Customer Service
注册
注册
注册
注册
注册
注册
注册
注册
第四章 表单 71
... 注册
注册
把“注册”这两个字改成一个 Expansion，其表达式前缀是“message”。 第五章 本地化 75 修改 Start.tml： ${message:heading}
${message:heading}
Localize template.
Localization_zh_CN.tml： 本地化模板。
第五章 本地化 83 这样我们就为不同语言的用户提供了不同的模板（Localization_en.tml 和 Localization_zh _CN.tml），而不需要把本地化信息都放到 properties 文件中了。 本地化 Asset Asset 就是页面中需要浏览器额外下载的文件，如图片、css 文件和 javascript 文件等。 这些也可以进行本地化。 接下来，我们要在 Start 页面的最上方放一张图片，这张图片也是需要本地化的。 首先，我们新建一个包“example.register.img”， 在其中放两张图片，register_en.gif 如图 5-10 所示，register_zh_CN.gif 如图 5-11 所示。 （图 5-10） （图 5-11） 然后修改 Start.tml： 
${message:heading}
... 这里的绑定表达式的前缀是“asset”， 后面可以用相对路径。英文页面效果如图 5-12。 （图 5-12） “asset”前缀默认从 classpath 获得 asset，我们还可以把 asset 放在 web context 中，然 后通过“context”前缀获得 asset，例如“${asset:context:img/register.gif}”或者“${context: img/register.gif}”。 在 WebContent 目录下建一个子目录 css，在 css 目录新建以下两个 css 文件： main_en.css 代码如下： @CHARSET "UTF-8"; 第五章 本地化 84 div label:first-child { width: 140px; float: left; text-align: right; } div label:first-child:after { content: ":"; } main_zh_CN.css 代码如下： @CHARSET "UTF-8"; div label:first-child { width: 140px; float: left; text-align: right; } div label:first-child:after { content: "："; } 注意这两个 css 文件中的红色部分，一个是英文冒号，一个是中文冒号。 修改 Start 类，为 Start 页面加上 css。 @IncludeStylesheet("context:css/main.css") public class Start { ... } 英文页面效果如图 5-13。 第五章 本地化 85 （图 5-13） 切换 Locale 最后，我们要在页面上方显示超链接，点击超链接可以切换 Locale。我们把它做成一个 LocaleBar 组件。 本章开头我们在 AppModule 类里设置了 tapestry.supported-locales（“ en,zh_CN”），现在 我们要在 LocaleBar 组件类中读取这个参数，根据这个参数生成相应数量的超链接。 在“example.register.components”包中新建 LocaleBar 类： public class LocaleBar { @Inject @Service("ApplicationDefaults") private SymbolProvider symbolProvider; public String[] getLocales() { String symbol = symbolProvider .valueForSymbol(SymbolConstants.SUPPORTED_LOCALES); return symbol.split(","); } } 在“example.register.components”包中新建 LocaleBar.tml： 电话本中有此联系人。
"; } else { result = "电话本中没有此联系人。
"; } return new TextStreamResponse("text/html", result); } } Any 组件的 id 为“ checker”， 在 Start 类中与之对应的事件方法是 onActionFromChecker(S tring name)，我们将在此方法中检查电话本中是否有某个联系人。此方法有一个参数 name， 表示姓名，我们将通过请求类似 http://localhost:8080/Ajax/Start.checker/name 的 URL 来触发 onActionFromChecker(String name)方法。 onActionFromChecker(String name)方法将返回 org.apache.tapestry5.StreamResponse，St reamResponse 用于直接向客户端输出流，不会有重定向发生。 把“Ajax”加入 Tomcat 服务器，重启服务器。 在浏览器中打开 http://localhost:8080/Ajax/，页面效果如图 6-1，打开 http://localhost:8 080/Ajax/Start.checker/XueBaoChai，页面效果如图 6-2。 （图 6-1） （图 6-2） 添加 Javascript 现在我们来实现 javascript 部分。当我们点击 Start 页面中的查询超链接，发送 Ajax 请求 到 http://localhost:8080/Ajax/Start.checker/name，把返回的内容显示在 Start 页面的下方。 修改 Start 类： public class Start { @SessionState private PhoneBook phoneBook; @Environmental private RenderSupport renderSupport; void setupRender() { 第六章 Ajax 95 renderSupport.addScript("check = function(source, result) {" + " new Ajax.Request('Start.checker/' + $F(source), {" + " method: 'get'," + " onSuccess: function(transport) {" + " $(result).update(transport.responseText);" + " }" + " });" + "}"); } StreamResponse onActionFromChecker(String name) { String result; if (phoneBook.selectByName(name) != null) { result = "电话本中有此联系人。
"; } else { result = "电话本中没有此联系人。
"; } return new TextStreamResponse("text/html", result); } } RenderSupport#addScript(String format, Object... arguments)方法用于往页面中添加 java script 代码，此方法调用 String.format(String format, Object… arguments)方法生成格式化字 符串，其中的 arguments 用于替换 format 中的参数（例如“%s”）。 我们把此类操作放在 SetupRender 阶段执行。 当点击查询超链接，调用 javascript 函数 check(source, result)。 修改 Start.tml： 刷新 Start 页面，在文本框输入“XueBaoChai”，点击查询，页面效果如图 6-3。 第六章 Ajax 96 （图 6-3） 基础 Javascript 库 回头看 javascript 函数 check(source, result)，它并非是原始的 javascript，实际上它是基 于 Prototype 的，也就是说，只有在页面引入了 Prototype 库的情况下才能正确执行这个函 数。但是我们无需自己为页面引入 Prototype 库，因为 Tapestry 已经自动为我们完成了这个 工作。 图 6-4 是使用 Firebug 看到的 Start 页面的 Html 源代码。 （图 6-4） 图 6-4 中绿色方框部分就是 Tapestry 自动引入的 javascript 库，它实际上是多个 javascri pt 库的联合体，包括 Tapestry 自己的 javascript 库以及 Prototype、Scriptaculous 等 Tapestry 所依赖的第三方 javascript 库，把它们放到一个库中，可以减少请求次数。另外，如果客户 端浏览器支持 gzip 压缩，这个库也将会被压缩。 第六章 Ajax 97 安装 Firebug Firebug 是 Firefox 浏览器的附加组件，可以让我们更加方便的查看 Html 源代码、调试 j avascript 等等，是一个很有用的工具。 要安装 Firebug，点击 Firefox 菜单【工具】【 附加组件】，在“获取附加组件”面板中查 找“firebug”，如图 6-5。点击“添加至 Firefox”按钮，安装完成后重启 Firefox，在 Firefox 状态栏的右边就能找到 Firebug 图标 ，点击此图标就可以打开 Firebug。 （图 6-5） 添加 Javascript 库 有时候，我们要把 javascript 放在外部文件中，这样更便于管理和维护，也便于代码重 用。 我们把 Start 页面中的 javascript 代码放到外部文件中。 在 WebContent 目录下新建子目录 js，在 js 下新建文件 main.js，其内容如下： check = function(source, result) { new Ajax.Request('Start.checker/' + $F(source), { method : 'get', onSuccess : function(transport) { $(result).update(transport.responseText); } }); }; 修改 Start 类： 第六章 Ajax 98 public class Start { @SessionState private PhoneBook phoneBook; @Environmental private RenderSupport renderSupport; @Inject @Path("context:js/main.js") private Asset mainJs; void setupRender() { renderSupport.addScriptLink(mainJs); // renderSupport.addScript("check = function(source, result) {" // + " new Ajax.Request('Start.checker/' + $F(source), {" // + " method: 'get'," // + " onSuccess: function(transport) {" // + " $(result).update(transport.responseText);" // + " }" // + " });" // + "}"); } StreamResponse onActionFromChecker(String name) { String result; if (phoneBook.selectByName(name) != null) { result = "电话本中有此联系人。
"; } else { result = "电话本中没有此联系人。
"; } return new TextStreamResponse("text/html", result); } } RenderSupport#addScriptLink(Asset... scriptAssets)方法用于往页面中添加 javascript 库。 刷新页面，页面运行效果和刚才还是一样的。查看 Html 源代码，你会看到 main.js 已经 和 Tapestry 的那些基础 javascript 库一起被打包成一个库文件了。 还有一种更简单的添加 javascript 库的方法，就是使用@IncludeJavaScriptLibrary 注释。 修改 Start 类： @IncludeJavaScriptLibrary("context:js/main.js") public class Start { @SessionState private PhoneBook phoneBook; 第六章 Ajax 99 // @Environmental // private RenderSupport renderSupport; // @Inject // @Path("context:js/main.js") // private Asset mainJs; // void setupRender() { // renderSupport.addScriptLink(mainJs); // } StreamResponse onActionFromChecker(String name) { String result; if (phoneBook.selectByName(name) != null) { result = "电话本中有此联系人。
"; } else { result = "电话本中没有此联系人。
"; } return new TextStreamResponse("text/html", result); } } 多次添加同一个 javascript 库不会造成重复，后来者会被简单忽略掉，因此每个页面/ 组件都可以添加它自己所需的 javascript 库而不必考虑其它页面/组件是否已经添加过同一个 javascript 库。 Autocomplete Mixin 我们经常会在一些网页上看到这样的功能：在文本框中输入一些字符，文本框下方就会 出现一系列候选项供我们选择。 Tapestry 5 内置了一个 Mixin 叫做 Autocomplete，可以让我们方便的实现这样的功能。 我们来新建一个 Edit 页面，页面里有一个表单，表单里有一个文本框，我们在这个文 本框上使用 Autocomplete。 在“example.ajax.pages”包中新建 Edit.tml： ${entry.name}
${entry.number}
${entry.name}
${entry.number}
${entry.name}
${entry.number}
姓名：
号码：
