利用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 |