用JSF/DWR/DOJO创建动态Web应用(1)

例子应用

本文中所讨论的例子应用是一个产品管理应用。该应用为期用户提供了如下特性：

1、用户可以基于名字搜索一个产品类型
2、当用户选择了一个产品，将显示一个带有分隔面板（split pane）的新窗口。该分隔面板左侧以树的形式（就像你在Windows Explorer所看到的那样）显示所有属于该产品类型的产品子类型。可能每个产品子类型还有它自己的子类型。分隔面板右侧显示还有如下标签的标签面板（tabbed pane）：

◆Products（产品） —— 这个标签页显示属于所选子类型的产品列表
◆Add Product Subtype（增加产品子类型） —— 这个标签页显示一个表单，用来接受给所选产品子类型增加新产品子类输入值
◆在分隔面板的底部，有一个back按钮以便回到搜索产品类型页。

3、当某个子类型关联的产品列表显示在分隔面板右侧时，每一页应该只显示10个产品。这意味着应该能够对屏幕上的结果进行分页和排序。
4、显示在分隔面板左侧的树应该可以展开/折叠（expandable/collapsable）而且不应导致页面刷新，这样会增强用户体验。
5、鼠标右键点击树上任何一个节点（代表一个产品子类型）应该给用户显示弹出菜单，带有给所选子类增加新产品子类子节点、删除所选产品子类型、用数据库的最新数据刷新所选产品子类的孩子产品子类列表等选项。
6、当一个新的产品子类被增加到所选产品子类上后，无需刷新页面，新产品子类应该立刻显示在树上。

图1显示了当用户选择一个产品类型/子类型时，屏幕上的期望效果。

图1：产品子类详细信息窗口

DOJO

创建跨浏览器兼容的树结构、标签面板、分隔面板、弹出菜单等等是耗时的工作，同时这些工作最好是由有经验的Javascript/DHTML程序员来完成。有许多工具包支持这些UI部件并且是跨浏览器兼容的，但是支持丰富事件处理模型的工具包却不多。以下罗列了一些例子应用需要响应以满足用户需求的用户动作：

DOJO工具包是一个Javascript/DHTML工具包，它提供了一套丰富UI部件（包括但不止限于树、标签面板、弹出菜单），该套UI部件带有一个非常适合用于本例子应用的丰富事件处理模型。

DWR

DWR ( Direct Web Remoting ) 是一个简化构建用Java编写的AJAX应用的AJAX框架。DWR提供了许多特性，包括（但不只限于此）：

◆由Java类（开发者创建用来处理AJAX请求）创建Javascript
◆允许JSF管理bean作为处理AJAX请求的Java类
◆用转换器（converter）对Javascript关联数组（associative array）和Java bean进行双向转换
◆用转换器对Javascript数组和Java集合进行双向转换

转换器在DWR中扮演一个十分重要的角色，并提供了一个更整洁的编程模型。例如，如果用户输入新产品子类信息，并需要应用程序保存它，那么在Web层有两种方法获得其信息：

◆用 HttpServletRequest 的 getParameter 方法获得所有关于新产品子类的信息。
◆创建一个DTO（数据传输对象） ProductSubtype，其所有产品子类属性都有getter和setter。在dwr.xml文件中配置一个转换器将ProductSubtype指定为一个bean转换器。在Javascript中，简单地创建一个关联数组（associative array）并把它传递给Java类（由它来处理AJAX请求）中以ProductSubtype作为参数的方法。在本例中DWR将做由Javascript关联数组到ProductSubtype的转换，因为ProductSubtype在DWR中被声明用于bean 转换器。

后一种选择提供了一个更整洁的编程模型，你不必处理获取请求参数及创建一个在Java程序中被使用的DTO。

当AJAX请求被处理时，大多数时候需要在Javascript回调方法中接收状态编码、消息或一些的数据，以决定给用户显示什么、不显示什么。Bean转换器在这种情景下非常方便。

DOJO的丰富事件模型结合DWR处理Java应用AJAX请求的整洁方法，提供了创建高交互性Web应用（类似于例子应用）的一种途径，应用中由DOJO组件产生的事件被传递给DWR去处理。