用动态元素自动更新 Web 页面

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

在 Web 页面上所做的变更

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

清单 9. 将数据推到 Web 页面
...　
<f:view>　
　　<h:form　id="helloForm">　
　　　　<a4j:region>　
　　　　　　<a4j:push　reRender="book"　eventProducer="#{InventoryBean.addListener}"/>　
　　　</a4j:region>　
　　　<h:panelGrid　id="title">　
　　<h:outputText　id　=　"hello_title"　value="Inventory"/>　
　　<a4j:outputPanel　id　=　"book"　binding　="#{InventoryBean.categorygrid}"/>　
　　<h:outputText　id　=　"summary"　
　　　　　　　　　　value="#{InventoryBean.categoryNumber}"></h:outputText>　
　</h:panelGrid>　
　　</h:form>　
</f:view>　　　　　　

请注意 a4j:push 标记。利用 eventProducer="#{InventoryBean.addListener}"，此 Web 页面将一个侦听器注册到这个受管 bean，以便这个受管 bean 能够在需要的时候刷新 Web 页面。reRender = "book" 意味着在服务器端数据被推到页面后，只有 ID 为 “book” 的组件才被刷新。a4j:outputPanel 允许对页面区域进行标记，该页面区域通过 Ajax 响应被更新。

在受管 bean 内所做的更改

在这个受管 bean 内，应该注册 PushEventListener 以便一有推出事件发生就能将服务器端数据推出到客户端。借助 eventProducer 属性，可以将这个方法绑定到 Web 页面。推出事件由 categoryChanged() 方法中的 this.listener.onEvent(new EventObject(this)); 生成，每当服务器端数据发生改变时都会调用该方法。我之前谈论过 categoryChanged()，清单 10 给出了它的具体实现。

清单 10. 注册 eventProducer 并推出数据
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” 层连接起来。正如我已经讨论过的所有其他方法一样，这种方法也可以在任何适当的场合独立使用。

结束语

JSF 是一种十分方便的 Web 框架，可用来生成 HTML 页面、接收用户输入以及管理导航流。要在 JSF 内刷新一个页面，用户通常需要在 Web 页面上执行一些动作来生成 HTTP 请求，由 HTTP 响应回复该请求，进而导致页面的刷新。由服务器端触发 Web 页更新在 JSF 内并非易事。本文提供了这样一个解决方案，不仅能基于服务器端的请求自动更新 Web 页面，并且还可以同步服务器数据与 Web 页面的动态元素，这些动态元素在运行时创建并不断更改。