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

上一页  [1] [2] [3] [4] [5] 下一页