|
使用Dynamic Faces fireAjaxTransaction方法
为了对与Ajax相关的任务进行细粒度的控制，我们可以使用Dynamic Faces提供的内置JavaScript库。通过使用现有组件标签中合适的DynaFaces.fireAjaxTransaction JavaScript函数，我们可以对网页中组件异步更新方式有更细粒度的组件级控制。
例如，假设我们希望网页中的一些组件对一种类型的JavaScript事件━━例如onclick作出响应，并希望该网页中的其它组件对其它类型的JavaScript事件作出响应。又假设我们希望生成一个Ajax请求的每个组件能够引起组件树的不同部分被异步更新。为了完成这些任务，我们需要使用fireAjaxTransaction函数。
为了使用fireAjaxTransaction函数，需要完成下面的准备工作：
·在一个组件标签中增添一个JavaScript事件属性，例如onclick。
·将该属性的值设置成DynaFaces.fireAjaxTransaction函数。
·向该函数传递一系列参数。
下面的代码是一个简单的Hello World例子中一个网页的一部分，用户可以输入他或她的名字，点击一个按钮，应用程序会用一条包含用户名字的问候语响应用户的输入。
...
＜f:view＞
...
＜h:form id="form" prependId="false"＞
...
＜h:graphicImage value="wave.med.gif"/＞
＜p＞
Hello, my name is Duke. What is your name?
＜p＞
＜h:inputText id="input" value="#{testBean.name}"/＞
＜h:commandButton id="button"
actionListener="#{testBean.changeText}"
onclick="DynaFaces.fireAjaxTransaction(this,
{execute: 'input', 'button',
render: 'input', 'text'}); return false;"
value="click"/＞
＜p＞
＜h:outputText id="text" value="#{testBean.text}"/＞
＜/h:form＞
...
＜/f:view＞ |
在上面的例子中，inputText标签代表一个输入域。当用户在该输入域中输入内容，并点击commandButton标签表示的按钮，就会出现下面的情况：
1、DynaFaces.fireAjaxTransaction函数执行，使得Dynamic Faces向服务器发送一个Ajax请求。
2、服务器返回一个Dynamic Faces JavaScript库处理的特别XML响应。
3、合适的库函数用新的值更新HTML DOM树。
为了告诉fireAjaxTransaction函数如何生成Ajax请求，我们向它传输一系列参数。在上面的例子中，我们向fireAjaxTransaction函数传递了2个参数。下面是调用fireAjaxTransaction函数的代码：
onclick="DynaFaces.fireAjaxTransaction(this,
{execute: 'input', 'button',
render: 'input', 'text'}); return false;" |
This参数指的是代表触发该事件的按钮的标签，其它参数由指示Dynamic Faces如何处理该请求的选项组成。在这个例子中，选项是execute和render。
Execute和render选项指的是JavaServer Faces生命周期的部分，如图2所示：
 图2： Dynamic Faces如何利用execute和render选项划分JavaServer Faces技术的生命周期 |
Execute是在postback期间执行的生命周期部分。它包含有处理模式对象的数据转换、验证、更新阶段； Render根据对网页的请求显示该网页。
在对fireAjaxTransaction函数的调用中使用的execute选项列出了在JavaServer Faces生命周期的execute部分期间必须处理的组件的ID，Hello World例子中的这行代码如下所示。
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处理事件的方式。需要记住的是，使用fireAjaxTransaction函数使我们能够对网页中的哪些组件会得益于Ajax有更多的控制。事实上，fireAjaxTransaction函数让我们能够能够使网页中的任何组件支持Ajax，而无需编写JavaScript或任何其它代码。
|
