AJAX和Web开发新技术DynamicFaces简介(2)

转载：http://www.verydemo.com/demo_c107_i19688.html

在上面的例子中，inputText标签代表一个输入域。当用户在该输入域中输入内容，并点击commandButton标签表示的按钮，就会出现下面的情况：

1、DynaFaces.fireAjaxTr bg>

2、服务器返回一个Dynamic Faces JavaScript库处理的特别XML响应。

3、合适的库函数用新的值更新HTML DOM树。

为了告诉fireAjaxTr bg>

οnclick="DynaFaces.fireAjaxTr bg>{execute: 'input', 'button', render: 'input', 'text'}); return false;"

This参数指的是代表触发该事件的按钮的标签，其它参数由指示Dynamic Faces如何处理该请求的选项组成。在这个例子中，选项是execute和render。

Execute和render选项指的是JavaServer Faces生命周期的部分，如图2所示：

498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/files/uploadimg/20061220/1333461.jpg" border=1>
图2： Dynamic Faces如何利用execute和render选项划分JavaServer Faces技术的生命周期

Execute是在postback期间执行的生命周期部分。它包含有处理模式对象的数据转换、验证、更新阶段； Render根据对网页的请求显示该网页。

在对fireAjaxTr bg>

execute: 'input', 'button'

接受用户名的input组件必须执行生命周期的execute部分，因为它的数据必须被保存到模式对象中。Button组件也应当执行生命周期的execute部分，因为Invoke Application阶段是生命周期execute片断的一部分。

当生命周期的render片断显示一个使用Dynamic Faces的网页时，作为一次Ajax请求的结果，它只显示该网页上被选定的组件。我们使用render选项显示要重新显示的组件的ID，Hello World例子中的render选项如下所示：

render: 'input', 'text'

在这一例子中，作为Ajax请求的结果，生命周期的render片断会重新显示网页上的input和text组件。当用户点击该按钮时，代表input组件的输入字段和代表text组件的输出文本会被再次显示。输入字段会被重新显示，清除在点击该按钮前用户输入的值。输出文本会被重新显示，显示包含在点击该按钮前用户在输入域中输入的值的信息。该网页上的其它组件无需被重新显示。

除了execute和 render选项外，我们还可以使用其它选项，进一步定制Dynamic Faces处理事件的方式。需要记住的是，使用fireAjaxTr bg>

联合使用Dynamic Faces和jMaki

至此，我们已经学习了如何使用Dynamic Faces重新显示支持Ajax的JavaServer Faces组件。但是，如何增添曾经在基于JavaServer Faces的应用软件中看到的支持Ajax的widget呢？

我们可以利用Project jMaki将喜欢的widget封装在JavaServer Faces组件中。这样，我们既能够享受到JavaServer Faces组件模式的好处，也能够获得使用被封装为JavaServer Faces组件的widget的灵活性。 同时，我们无须编写为现有组件实现Ajax功能的JavaScript代码，以及为widget创建JavaServer Faces组件所要求的Java平台代码。

如何联合使用jMaki和Dynamic Faces呢？对于网页创作者而言，这非常简单，就是将与jMaki widget相关的标签拖到网页中。
为了联合使用jMaki widget和Dynamic Faces，widget开发人员需要对jMaki widget的组件文件作一些小小的修改。这些修改使jMaki widget能够充分利用JavaServer Faces技术提供的组件状态管理系统，正确地转换Dynamic Faces要求的header。修改的细节超出了三篇文章的讨论范围，读者可以参阅相关资料。

Dynamic Faces开发团队已经完成了转换3个与Dynamic Faces.联合使用的jMaki widget所需要的工作。被转换的jMaki widget是script.aculo.us in-place editor widget、Dojo fisheye widget、Dojo inline-editor widget。

除了转换fisheye widget，开发团队还修改了jMaki API，使widget能够触发一个JavaServer Faces价值修改事件，如下图所示：

＜a:ajax name="dojo.fisheye" value="#{fishEyeBean.selectedIndex}" valueChangeListener="#{fishEyeBean.valueChanged}" args="{items:[ {iconSrc:'images/150x126_jalopy.jpg',caption:'Jalopy',index:0}, {iconSrc:'images/150x126_luxury.jpg',caption:'Luxury',index:1}, {iconSrc:'images/150x126_roadster.jpg',caption:'Roadster',index:2}, {iconSrc:'images/150x126_suv.jpg',caption:'SUV',index:3} ]}" /＞

Dynamic Faces和jMaki开发团队正在加紧工作，确保所有的jMaki widgets支持Dynamic Faces。

现在，让我们来站在网页创作者的角度来讨论这一问题。要想搞明白如何联合使用jMaki script.aculo.us in-place editor widget和 Dynamic Faces，我们在一个JavaServer Faces数据表组件中包含该widget，使我们能够编辑该表中一个单元的值。

在JSP网页中，我们必须说明要求的标签库，以及Dynamic Faces和jMaki标签，如下所示：

＜%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%＞ ＜%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%＞ ＜%@taglib prefix="jsfExt" uri="http://java.sun.com/jsf/extensions/dynafaces"%＞ ＜%@taglib prefix="a" uri="http://java.sun.com/jmaki-jsf" %＞

下面的代码添加的是＜jsfExt:scripts /＞标签：

＜f:view＞ ＜html＞ ＜head＞ ＜title＞Table with jMaki＜/title＞ ＜jsfExt:scripts /＞ ＜/head＞ ＜body＞

这一标签显示Dynamic Faces所要求的JavaScript文件的＜script＞元素。

最后，通过包含一个指定被封装为jMaki widget 的in-place editor的 jMaki ajax标签，我们就将该widget添加到了网页上。

＜h:form＞ ＜h:dataTable ... rows="10" binding="#{ResultSetBean.data}" value="#{ResultSetBean.list}" var="customer"＞ ＜h:column＞ ＜f:facet name="header"＞ ＜h:outputText value="Account Id"/＞ ＜/f:facet＞ ＜h:outputText id="accountId" value="#{customer.accountId}"/＞ ＜/h:column＞ ＜h:column＞ ＜f:facet name="header"＞ ＜h:outputText value="Customer Name"/＞ ＜/f:facet＞ ＜a:ajax name="scriptaculous.inplace" value="#{customer.name}"/＞ ＜/h:column＞ ＜/h:dataTable＞ ... ＜/h:form＞ ＜/body＞ ＜/html＞ ＜/f:view＞

图3显示的是上述网页：

498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/files/uploadimg/20061220/1333462.jpg" border=1>
图3：用户修改一个单元的值之前

图4显示的是当用户点击Customer Name列中一个单元的链接时的情况：

498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/files/uploadimg/20061220/1333463.jpg" border=1>
图4： 用户点击Customer Name列中一个链接后的情况

需要注意的是，当用户点击Customer Name列中的一个元素时，客户名字元素会被一个输入组件、一个"OK"按钮、一个"Cancel"链接所取代，使用户能够编辑当前的客户名字。如果用户点击"Cancel"而不是"OK"，该单元就会被重新显示为原来的值；如果用户输入一个值，并点击"OK"按钮，新的值就会被利用Ajax技术发送到服务器，使该模式更新为新的值。 然后，被编辑的单元就会被重新显示。 图5显示的是是单元被修改后的网页：

498)this.width=498;' onmousewheel = 'javascript:return big(this)' src="/files/uploadimg/20061220/1333464.jpg" border=1>
图5：在用户向服务器提交新的值后，网页重新显示为新的值

结论

Project Dynamic Faces向我们提供了一种向基于JavaServer Faces的应用软件中添加Ajax功能的灵活、有效的方式，而无需放弃JavaServer Faces组件模式的任何优势。在内置的JavaScript库、Ajax实现、Dynamic Faces提供的组件交互模式的帮助下，我们会发现利用Dynamic Faces添加Ajax功能更容易了。基于JavaServer Faces的应用软件能够得益于jMaki widget提供的更多的灵活性。

(责任编辑：铭铭 mingming_ky@126.com TEL：（010）68476636)

2

内容导航

• 给力
• 动心
• 废话
• 专业
• 标题党
• 路过