利用ajaxZone标签更新部分网页
确定网页上哪些组件将支持Ajax的一种方式是用Dynamic Faces提供的ajaxZone定制标签封装它们。当这样做时，我们就告诉Dynamic Faces只异步更新使用ajaxZone标签确定的组件树部分。
例如，假设我们有一个带有一系列按钮的网页，客户在网上购买汽车时，可以用这些按钮选择标准或豪华装修。当客户点击一个按钮时，一系列其它组件的值会发生变化，而不会造成整个网页被更新。当客户改变一个组件的值时，汽车的价格也会改变，但不会造成整个网页的更新。
图1显示的是cardemo应用软件中网页的一个屏幕快照，它使客户能够选择汽车的配置情况。
 图1：选择汽车的配置 |
图1显示了二个由ajaxZone标签划分的区域。 当客户点击区域2中的一个按钮时，该区域中组件的值会发生变化。当客户改变区域2中的一个组件的值时，区域1中Your Price输出组件的值也会随之变化。
要实现这样的功能，我们需要将所有组件封装在ajaxZone标签中，如下所示：
＜jsfExt:ajaxZone id="zone1"＞
＜h:panelGrid columns="2"＞
＜h:outputText styleClass="subtitle"
value="#{bundle.basePriceLabel}"/＞
＜h:outputText
binding="#{carstore.currentModel.components.basePrice}"/＞
＜h:outputText styleClass="subtitle"
value="#{bundle.yourPriceLabel}"/＞
＜h:outputText value="#{carstore.currentModel.currentPrice}"/＞
＜/h:panelGrid＞
＜/jsfExt:ajaxZone＞
＜jsfExt:ajaxZone id="zone2"
action="#{carstore.currentModel.updatePricing}"＞
＜h:commandButton id="Standard" value="#{bundle.Standard}"
styleClass="#{carstore.customizers.Standard.buttonStyle}"
actionListener="#{carstore.choosePackage}"/＞
＜h:commandButton id="Deluxe" value="#{bundle.Deluxe}"
styleClass="#{carstore.customizers.Deluxe.buttonStyle}"
actionListener="#{carstore.choosePackage}"/＞
＜h:outputText value="#{bundle.Engine}"
styleClass="optionLabel"/＞
＜h:selectOneMenu styleClass="optionValue"
binding="#{carstore.currentModel.components.engine}"/＞
＜h:outputText value="#{bundle.Speakers}"
styleClass="optionLabel"/＞
＜h:selectOneRadio styleClass="optionValue"
binding="#{carstore.currentModel.components.speaker}"/＞
＜/jsfExt:ajaxZone＞ |
前面的代码中包含名字分别为zone1和zone2的二个域。象代码显示的那样，zone 1中只有一个输出组件，因此它不会产生任何Ajax请求； Zone 2域中包含有输入和输出组件。当客户点击2个按钮中的1个，或者选择菜单或单选按钮列表中的一个选项时，zone2中的组件会启动一个Ajax请求。这一请求将引起方法表达式#{carstore.currentModel.updatePricing}中定义的操作被调用。
当使用域时，每个Ajax事务将使得网页中的所有域被更新。前面例子的效果是，当用户选择zone 2中的任何输入组件时，Ajax功能会自动地更新zone 1中的汽车价格数据。
值得指出的是，我们无需编写一行JavaScript代码就能够实现这一例子，我们也无需任何定制组件。这一应用软件使用了我们熟知的普通而简单的JavaServer Faces组件，但它们已经能够支持Ajax功能了。
ajaxZone标签向网页创作者提供了一种使用Dynamic Faces的简单、熟悉、直观的方式。在最简单的例子中，ajaxZone标签能够向网页创作者提供所需要的功能。ajaxZone标签支持许多使我们能够进一步定制其操作的其它属性，ajaxZone文档中包含有其属性的完整清单。
下面的部分将讨论使用Dynamic Faces的另一种方法，它使我们能够细粒度地控制网页中组件的Ajax化。
说明：本教程来源互联网或网友上传或出版商，仅为学习研究或媒体推广，wanshiok.com不保证资料的完整性。
2/2 首页 上一页 1 2 |
