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

核心提示： 创建动态的 GUI 元素接下来，我将介绍另外的一个子程序：创建动态 GUI 元素，用动态元素自动更新 Web 页面(6)，本例中的动态 GUI 元素是一些类别链接（参见图 1），如果用户单击主页中的一个特定类别，这种方法具有一些限制：它只能用在所要删除或插入的元素具有固定的父组件并且在运行时之前

创建动态的 GUI 元素

接下来，我将介绍另外的一个子程序：创建动态 GUI 元素。本例中的动态 GUI 元素是一些类别链接（参见图 1）。如果用户单击主页中的一个特定类别，他就会被重定向到一个包含此类别内所有书籍的新的页面。图 3 展示了属于侦探类别的所有书籍。

图 3. 侦探类别的细节

要让这些类别链接发挥作用，需要删除旧的链接、将新的链接插入到网页中的合适位置，并将不同的类别细节信息绑定到不同的类别链接。

插入和删除链接

有两种方式可以删除或插入链接。一种方法是查找 JSF 组件树中的动态元素的父组件，然后删除或插入元素。如果这些动态元素的父组件正在发生改变，就应该采用这种方法。另一种方法是直接将动态元素绑定到 Web 页面。这种方法比第一种方法简单，因为无需寻找 JSF 组件树中的父节点。不过，由于太过简便，这种方法具有一些限制：它只能用在所要删除或插入的元素具有固定的父组件并且在运行时之前父组件就已知的情况下。我之所以选用了这种方法（参见清单 5）是因为在本例中这些类别链接的父组件是固定的，并且也是预先定义了的。

清单 5. 创建/更新 GUI 组件并将不同的组件绑定到不同的动作处理程序
category.jsp　
……　
<f:view>　
　　<h:form　id="helloForm">　
　　　……　
　　　<h:panelGrid　id="title">　　　
　<h:outputText　id　=　"hello_title"　value="Inventory"/>　
　　　<a4j:outputPanel　id　=　"book"　
　　　　　　　　　　　　　　binding　=　"#{InventoryBean.categorygrid}"/>　
　　　……　
　　　</h:panelGrid>　
　　</h:form>　
</f:view>　
　
public　class　InventoryBean　implements　InventoryListner　{　
……　
　　private　Category[]　m_category;　
　　public　HtmlAjaxOutputPanel　getCategorygrid()　{　
　updateGUI();　
　return　categorygrid;　
　　}　
　
　　public　void　setCategorygrid(HtmlAjaxOutputPanel　categorygrid)　{　
　this.categorygrid　=　categorygrid;　
}　
　
　　private　void　updateGUI(){　
　categorygrid.getChildren().clear();　
　if　(m_category　!=　null)　{　
　　　int　num　=　m_category.length;　
　　　for　(int　index　=　0;　index　<　num;　index++)　{　
　HtmlPanelGrid　categorySubgrid　=　
　　　　　　　　　　　JSFUtil.getLinkgrid("Bookstore_sublink"　+　index,　
　　　　"#{InventoryBean.category["　+index+　"].categoryLabel}",　
　　　　"#{InventoryBean.category["　+index+　"].onClickAction}");　
　categorygrid.getChildren().add(categorySubgrid);　
　　　}　
　}　
　　}　
……　
}