事件处理、JavaScript 和 Ajax（1）
|
- UID
- 1066743
|
事件处理、JavaScript 和 Ajax（1）
JSF 的最大卖点在于它是一种基于组件的框架。这意味着您可以实现供其他人重用的组件。这种强大的重用机制在 JSF 1 中基本上是不可能实现的，因为在 JSF 1 中实现组件是非常困难的事情。
然而，正如 所述，JSF 2 通过一种名为复合组件 的新特性简化了组件的实现 — 无需 Java 代码和配置。这一特性可以说是 JSF 2 中最重要的部分，因为它真正实现了 JSF 组件的潜力。
在这份有关 JSF 2 的第三篇也是最后一篇文章中，我将展示如何利用新的 Ajax 和事件处理功能（也在 JSF 2 中引入）构建复合组件特性，要从 JSF 2 中获得最大收益，需要遵循下面的技巧：
- 技巧 1：组件化
- 技巧 2：Ajax 化
- 技巧 3：展示进度
对于第一个技巧，我将简要回顾已在 中详细描述过的两个组件。对于后面的技巧，我将展示如何使用 Ajax 和事件处理功能来改造这些组件。
技巧 1：组件化我在 中引入的 places 应用程序包含有大量复合组件。其中之一便是 map 组件，它显示一个地址地图，其中包含一个缩放级别下拉菜单，如图 1 所示：
图 1. places 应用程序的 map 组件 清单 1 显示了经过删减的 map 组件列表：
清单 1. map 组件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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml"
...
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:places="http://java.sun.com/jsf/composite/components/places">
<!-- INTERFACE -->
<composite:interface>
<composite:attribute name="title"/>
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation">
<div class="map">
...
<h:panelGrid...>
<h:panelGrid...>
<h:selectOneMenu onchange="submit()"
value="#{cc.parent.attrs.location.zoomIndex}"
valueChangeListener="#{cc.parent.attrs.location.zoomChanged}"
style="font-size:13px;font-family alatino">
<f:selectItems value="#{places.zoomLevelItems}"/>
</h:selectOneMenu>
</h:panelGrid>
</h:panelGrid>
<h:graphicImage url="#{cc.parent.attrs.location.mapUrl}"
style="border: thin solid gray"/>
...
</div>
...
</composite:implementation>
</html>
|
组件的一大优点就是可以使用更有效的替代方法替换它们，同时不会影响到相关的功能。比如，在图 2 中，我使用一个 Google Maps 组件替换了 清单 1 中的 image 组件，Google Maps 组件由 GMaps4JSF 提供（见 ）：
图 2. GMaps4JSF 的 map 图像 |
|
|
|
|
|
