用动态元素自动更新 Web 页面 -4 使用 Ajax 刷新 Web 页面的动态元素

look_w

使用 Ajax 刷新 Web 页面的动态元素在本节中，为了刷新页面的动态部分，我在图 2 所示的 “Bean” 和 “GUI” 层之间建立起了一种联系。我使用 RichFaces 的 Ajax4jsf 进行刷新。RichFaces 是一种开源框架，可以无需借助 JavaScript 即可将 Ajax 功能添加到现有的 JSF 应用程序。通过 Ajax4jsf，我克服了当前 JSF 不支持任何服务器端页面刷新的限制，而且我能满足只刷新所需内容的要求。
注册            RichFaces安装 RichFaces 之后，通过添加清单 8 中的这些代码行可以更改 web.xml 文件来注册 RichFaces。
清单 8. 注册 RichFaces

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<!-- Plugging the "Blue Sky" skin into the project --> <context-param>    <param-name>org.richfaces.SKIN</param-name>    <param-value>blueSky</param-value> </context-param> <!-- Making the RichFaces skin spread to standard HTML controls --> <context-param>       <param-name>org.richfaces.CONTROL_SKINNING</param-name>       <param-value>enable</param-value> </context-param> <!-- Defining and mapping the RichFaces filter --> <filter>    <display-name>RichFaces Filter</display-name>    <filter-name>richfaces</filter-name>    <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping>    <filter-name>richfaces</filter-name>    <servlet-name>Faces Servlet</servlet-name>    <dispatcher>REQUEST</dispatcher>    <dispatcher>FORWARD</dispatcher>    <dispatcher>INCLUDE</dispatcher> </filter-mapping>

在 Web 页面上所做的变更注册了 RichFaces 之后，需要将来自清单 9 的那些标记添加到这个 category.jsp 文件以实现 “逆向 ajax”，即将数据从服务器端推到客户端并使用 Ajax 技术来刷新此页面。
清单 9. 将数据推到 Web 页面

1 2 3 4 5 6 7 8 9 10 11 12 13 14

... <f:view>     <h:form id="helloForm">         <a4j:region>            <a4j:push reRender="book" eventProducer="#{InventoryBean.addListener}"/>         </a4j:region>         <h:panelGrid id="title">        <hutputText id = "hello_title" value="Inventory"/>        <a4jutputPanel  id = "book" binding ="#{InventoryBean.categorygrid}"/>        <hutputText id = "summary"                     value="#{InventoryBean.categoryNumber}"></hutputText>     </h:panelGrid>        </h:form> </f:view>

请注意 a4j:push 标记。利用 eventProducer="#{InventoryBean.addListener}"，此 Web 页面将一个侦听器注册到这个受管 bean，以便这个受管 bean 能够在需要的时候刷新 Web 页面。reRender = "book" 意味着在服务器端数据被推到页面后，只有 ID 为 “book” 的组件才被刷新。a4jutputPanel            允许对页面区域进行标记，该页面区域通过 Ajax 响应被更新。
在受管 bean 内所做的更改在这个受管 bean 内，应该注册 PushEventListener 以便一有推出事件发生就能将服务器端数据推出到客户端。借助 eventProducer 属性，可以将这个方法绑定到 Web  页面。推出事件由 categoryChanged() 方法中的 this.listener.onEvent(new               EventObject(this)); 生成，每当服务器端数据发生改变时都会调用该方法。我之前谈论过 categoryChanged()，清单 10 给出了它的具体实现。
清单 10. 注册 eventProducer 并推出数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

public class InventoryBean implements InventoryListner{ ……      public void addListener(EventListener listener) {     synchronized (listener) {        if (this.listener != listener) {         this.listener = (PushEventListener) listener;        }     }      }      public void categoryChanged() {     refresh();     //code for refresh dynamic part via ajax     this.listener.onEvent(new EventObject(this));      } }

现在，就可以从服务器端进行 Ajax 刷新了。将这种技巧与之前讨论的那些技巧结合起来，就能够将图 2 中所示的 “Database”、“Bean” 和 “GUI” 层连接起来。正如我已经讨论过的所有其他方法一样，这种方法也可以在任何适当的场合独立使用。