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

Project Dynamic Faces是数个扩展JavaServer Faces技术的的项目之一。Project Dynamic Faces是一个创新型的项目，提供了向基于JavaServer Faces技术的应用软件增添Ajax功能的方法。它使我们能够让应用软件已经在使用的任何JavaServer Faces组件支持Ajax功能。我们无需对组件进行修改就能够使它们支持Ajax，我们也无需对应用软件进行任何修改就可以使它具有Ajax的魔力。

要使应用软件具有Ajax魔力，我们必须首先确定应用中希望Ajax功能更新的网页部分。象基于JavaServer Faces技术的开发人员了解的那样，JavaServer Faces网页是由组件树表示的。利用Dynamic Faces，我们能够确定组件树中的哪个组件会受益于异步更新。就象使用Ajax更新代表网页的HTML DOM树的一部分那样，我们使用Dynamic Faces更新代表JavaServer Faces网页的组件树的一部分。因此，Dynamic Faces机制对于Ajax和JavaServer Faces开发人员而言是熟悉的。

更重要的是，Dynamic Faces使用JavaServer Faces组件模式，使我们能够以一种更有效的方式利用Ajax功能。由于组件模式的协作特性，一些网页组件上的JavaScript事件能够触发该网页上任何数量的其它组件的异步更新。Dynamic Faces使得这些异步更新只是向服务器发送的一次Ajax请求的结果，而不是导致每次异步更新的Ajax请求的结果。

Dynamic Faces还利用JavaServer Faces组件模式有效地管理客户机端和服务器端的状态。当Dynamic Faces更新客户机端上的组件状态时，它更新的只是已经改变的组件而不是整个树的状态。最好的一点是Dynamic Faces在后台完成所有这些操作，而且是以一种与JavaServer Faces技术的生命周期完全一致的方式完成的。

除了简化向应用软件增添Ajax功能外，Dynamic Faces还向我们提供了增添Ajax功能的方法的灵活性。这篇文章将讨论利用Dynamic Faces使应用软件更具交互性和活力的三种方法：

利用Dynamic Faces提供的定制ajaxZone标签确定组件树中需要被Ajax化的部分。

利用Dynamic Faces提供的JavaScript库向单个组件增添Ajax功能。

在一个网页中增添支持Ajax的组件，例如jMaki widget。

在学习这些技术前，我们先来看看应用软件如何才能使用Dynamic Faces技术。

开发利用Dynamic Faces的应用软件

通过向一个标准的JavaServer Faces 1.2实现中增添Ajax功能，Dynamic Faces利用了JavaServer Faces技术的运行时间库的可扩展性。 Dynamic Faces的核心是定制的Lifecycle和ViewRoot实现。这二个实现是JavaServer Faces技术提供的标准Lifecycle和ViewRoot实现的扩展， 一个标准的Lifecycle对象代表JavaServer Faces生命周期的一个实例，一个标准的ViewRoot对象代表一个组件树的根。联合使用定制Lifecycle对象和定制ViewRoot对象，使JavaServer Faces生命周期能够处理Ajax事务，在无需对整个网页更新的情况下重新显示组件树的一部分。这些定制实现服从于不支持Ajax请求的标准实现。

为了使JavaServer Faces技术运行时间库知道定制Lifecycle对象的存在，我们必须在配置描述器中利用一个初始化参数向FacesServlet实例报告该对象。

此外，我们还必须将Dynamic Faces依赖的Java Archive（JAR）文件添加到应用软件的web archive（WAR）文件的lib目录中。因为Dynamic Faces是基于Java Platform Enterprise Edition 5（Java EE 5）的，我们所需要的几乎所有依赖关系都已经存在。最后一个依赖是Shale Remoting，Dynamic Faces利用它从Java类路径中加载JavaScript文件和其它资源。 Shale Remoting依赖于commons-logging，因此我们必须向应用软件提供commons-logging。

最后，我们必须在使用它的每个网页中说明该Dynamic Faces标签库。 对于符合标准的非XML语法的JavaServer Pages（JSP）网页而言，这种说明如下所示：

对于符合XML语法的JavaServer Pages（JSP）网页而言，这种说明如下所示：

如果使用Facelets而非JSP，语法与JSP XML的语法非常相似，如下所示：

好了。我们可以开始利用Dynamic Faces向应用软件中增添Ajax功能了。

作为一种手动配置应用软件的替代性方案，我们可以使用Dynamic Faces下载包，其中包括面向JSP和Facelets的空白应用软件。如果使用现成的空白应用软件，所有的设置工作已经预先完成，我们就可以开始编写网页了。

利用ajaxZone标签更新部分网页

确定网页上哪些组件将支持Ajax的一种方式是用Dynamic Faces提供的ajaxZone定制标签封装它们。当这样做时，我们就告诉Dynamic Faces只异步更新使用ajaxZone标签确定的组件树部分。

例如，假设我们有一个带有一系列按钮的网页，客户在网上购买汽车时，可以用这些按钮选择标准或豪华装修。当客户点击一个按钮时，一系列其它组件的值会发生变化，而不会造成整个网页被更新。当客户改变一个组件的值时，汽车的价格也会改变，但不会造成整个网页的更新。

图1显示的是cardemo应用软件中网页的一个屏幕快照，它使客户能够选择汽车的配置情况。

图1：选择汽车的配置

图1显示了二个由ajaxZone标签划分的区域。 当客户点击区域2中的一个按钮时，该区域中组件的值会发生变化。当客户改变区域2中的一个组件的值时，区域1中Your Price输出组件的值也会随之变化。

要实现这样的功能，我们需要将所有组件封装在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化。

使用Dynamic Faces fireAjaxTr bgcolor=e6e6e6 class=codeansaction方法

为了对与Ajax相关的任务进行细粒度的控制，我们可以使用Dynamic Faces提供的内置JavaScript库。通过使用现有组件标签中合适的DynaFaces.fireAjaxTr bgcolor=e6e6e6 class=codeansaction JavaScript函数，我们可以对网页中组件异步更新方式有更细粒度的组件级控制。

例如，假设我们希望网页中的一些组件对一种类型的JavaScript事件━━例如onclick作出响应，并希望该网页中的其它组件对其它类型的JavaScript事件作出响应。又假设我们希望生成一个Ajax请求的每个组件能够引起组件树的不同部分被异步更新。为了完成这些任务，我们需要使用fireAjaxTr bgcolor=e6e6e6 class=codeansaction函数。

为了使用fireAjaxTr bgcolor=e6e6e6 class=codeansaction函数，需要完成下面的准备工作：

在一个组件标签中增添一个JavaScript事件属性，例如onclick。

将该属性的值设置成DynaFaces.fireAjaxTr bgcolor=e6e6e6 class=codeansaction函数。

向该函数传递一系列参数。

下面的代码是一个简单的Hello World例子中一个网页的一部分，用户可以输入他或她的名字，点击一个按钮，应用程序会用一条包含用户名字的问候语响应用户的输入。