用动态元素自动更新 Web 页面 -3 更新数据模型和创建动态 GUI 元素
|
- UID
- 1066743
|
用动态元素自动更新 Web 页面 -3 更新数据模型和创建动态 GUI 元素
重定向 Web 页面本节介绍了如何基于所单击的链接将用户重定向到一个新的页面。我使用 JSF 导航规则来重定向页面。OnClickAction() 方法返回 “success” 以开始这个动作。通过发送到 Httpsession 的数据来为新页面提供内容。数据由受管 bean DetailBean 从新页面的 Httpsession 检索。之后，DetailBean 再相应地创建其 GUI 组件。
清单 7 给出了这些详细的实现。“detail.jsp” 是用户将被重定向到的新页面。getDetailgrid() 是 detail.jsp 内的 DetailBean 的一部分，它被绑定到一个方法，该方法能创建此页面内的动态元素。在这个方法中，首先获得应该显示的类别数据，然后再使用 populate() 方法相应创建 GUI 内容。您可以研究 populate() 了解如何实时创建动态 GUI 元素，甚至进行页面布局。所有的页面信息都将由类别数据从 Httpsession 传递过来，所以，理论上讲，放入 Httpsession 的数据决定了新页面的外观。
清单 7. 将用户重定向到详细信息页面1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| detail.jsp
……
<f:view>
<h:form id="detailForm">
<h:panelGrid id="list">
<h utputText id = "book_list" value="#{DetailBean.title}"/>
<h:panelGrid id = "detail" binding = "#{DetailBean.detailgrid}"/>
</h:panelGrid>
<h:commandButton id="back" value="Back" action="success"/>
</h:form>
</f:view>
public class DetailBean {
……
private HtmlPanelGrid detailgrid = null;
private Category cat;
public HtmlPanelGrid getDetailgrid() {
if(detailgrid == null){
detailgrid = new HtmlPanelGrid();
}
detailgrid.getChildren().clear();
HttpSession session =
(HttpSession)JSFUtil.getFacesContext().getExternalContext().getSession(true);
cat = (Category)session.getAttribute("CATEGORY");
session.removeAttribute("CATEGORY");
populate(detailgrid);
return detailgrid;
}
public void setDetailgrid(HtmlPanelGrid detailgrid) {
this.detailgrid = detailgrid;
}
private void populate(HtmlPanelGrid parent) {
if (cat != null) {
String category = cat.getCategory();
ArrayList<BookItem> items = cat.getBookitems();
if (category.equals("News paper")) {
//create GUI for News paper category.
}else if (category.equals("Magazine")) {
//create GUI for Magazine category.
}else{
//create GUI for other categories.
}
}
|
到目前为止，您已经了解了如何更新数据模型以及如何创建动态 GUI 元素。讨论了三个方面的内容 — 如何插入元素以及如何从 Web 页面的合适位置删除元素、如何将不同的行为绑定到不同的元素以及如何重定向到一个 Web 页面。您不妨试着理解三者之间的关系，并针对自己的开发场景选择您所需要的部分。 |
|
|
|
|
|
