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

问题描述

1、在一个Portal环境中，开发者不负责为用户界面产生HTML，界面通过解析符合Facelet的XHTML文件来产生。即使JSF管理bean的属性包含HTML字符串作为其值，它并不是由Portal解析的，而是照原样在用户界面上显示给用户。如何产生可以被Web浏览器执行以创建UI部件的DOJO特定HTML呢？
2、DOJO提供了丰富事件模型，而且可以在Javascript中截获这些事件。DWR框架可以用来在服务器端接收这些事件，但是服务器端会话状态需要维护在什么地方？
3、当树上的节点超过几百个时，在IE或Mozilla中Javascript创建DOJO树节点需要花些时间。因此是否这意味着如果节点超过几百个，应用不能在浏览器使用DOJO的树部件？
4、在Web应用中使用AJAX后，当窗口上发生用户事件时如何产生HTML或HTML片断？应该在Java代码中编码产生还是从一个外部文件获取？应用程序能否在AJAX请求的响应中显示复杂用户界面？
5、当使用AJAX时，代码可能因使用HttpServletRequest的getParameter("fieldName")方法而变得混乱，难以维护。

解决方案

自定义JSF组件

自定义JSF组件用来为DOJO的树和分隔容器组件产生所需的HTML。JSF组件所产生的HTML总是由浏览器解析，而不是由Portal作为文本输出。下面是XHTML的部分内容，展示了如何自定义JSF组件用来产生DOJO的树和标签面板窗口部件。

<div xmlns="http://www.w3.org/1999/xhtml"
...
...
xmlns:dojo="http://dojotoolkit.org/"
xmlns:mytree="http://mytree.com/tree"
xmlns:mytab="http://mypane.com/tabPane">
<ui:composition>
<ui:define name="body">
<f:view>
<h:form styleClass="form" id="formId">
<div dojoType="SplitContainer" orientation="horizontal" 
                   sizerWidth="5" activeSizing="false" style="overflow:
auto; whitespace: nowrap; height: 550px;  
                background: transparent; padding: 5px;" >
<div dojoType="ContentPane" sizeShare="20"
style="overflow: auto; whitespace: nowrap;">
<mytree:treeComponent backingBeanName="treeBackingBean">
                    </mytree:treeComponent>
</div>
<div dojoType="ContentPane" sizeShare="80" style="overflow: auto; 
                   white-space nowrap;">
<mytab:tabPaneComponent/>
</div>
</div>
...
...

如果树上的节点数很大（超过200），自定义JSF组件不应为多于200的节点产生代码。如果节点数超过了200，在装载页面时IE将花费大量时间去创建这些窗口部件。本文例子应用的自定义JSF组件只创建100个树节点（在根一级上）并在最后显示‘Show more...’选项。当用户选择了‘Show More..’选项，则由DWR负责将剩余的节点信息从数据库中取来。该信息接着被传递给Javascript回调方法以便用程序创建TreeNode窗口部件。

MyFaces也提供了能产生DOJO树的组件，但是MyFaces组件一次性创建所有节点，这不是好方法，因为当树上的节点数达到上千时Web应用中的组件将变得无法使用。

DWR 和 JSF

DWR要求你创建Java类并将其配置到dwr.xml配置文件中。DWR创建一个Javascritp文件（文件扩展名为.js），该文件的名字是在dwr.xml中配置的

如下dwr.xml配置信息展示了Java类是如何被配置的：

<create creator="jsf" javascript="AjaxBean" scope="request">
<param name="managedBeanName" value="ajaxBean" />
<param name="class"
value="com.somebean.AjaxBean" />
</create>

creator="jsf"

这一句说明Java类被配置为JSF管理bean。该Java类包含所有将由Javascritp调用的AJAX方法。

<param name="managedBeanName" value="ajaxBean" />

这一句说明在faces-config.xml配置文件中管理bean的名字为ajaxBean。

<param name="class" value="com. somebean.AjaxBean" />

这一句说明所引用的实际Java类。

javascript="AjaxBean"

这一句说明在Javascript代码中以此名称使用Java类。