AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JAVA编程

AJAX和Web开发新技术:Dynamic Faces

51自学网 2015-09-03 http://www.wanshiok.com

 

  利用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不保证资料的完整性。
 

上一篇:JAVA对象序列化保存为XML文件的工具类  下一篇:Java开发技术十年的回顾与展望