JSF 二 事件处理、JavaScript 和 Ajax
日期：2014-05-16 浏览次数：20413 次
JSF 的最大卖点在于它是一种基于组件的框架。这意味着您可以实现供其他人重用的组件。这种强大的重用机制在 JSF 1 中基本上是不可能实现的，因为在 JSF 1 中实现组件是非常困难的事情。
然而，正如 第 2 部分 所述，JSF 2 通过一种名为复合组件 的新特性简化了组件的实现 — 无需 Java 代码和配置。这一特性可以说是 JSF 2 中最重要的部分，因为它真正实现了 JSF 组件的潜力。
在这份有关 JSF 2 的第三篇也是最后一篇文章中，我将展示如何利用新的 Ajax 和事件处理功能（也在 JSF 2 中引入）构建复合组件特性，要从 JSF 2 中获得最大收益，需要遵循下面的技巧：
- 技巧 1：组件化
- 技巧 2：Ajax 化
- 技巧 3：展示进度
对于第一个技巧，我将简要回顾已在 第 2 部分 中详细描述过的两个组件。对于后面的技巧，我将展示如何使用 Ajax 和事件处理功能来改造这些组件。
技巧 1：组件化
我在 第 1 部分 中引入的 places 应用程序包含有大量复合组件。其中之一便是 map 组件，它显示一个地址地图，其中包含一个缩放级别下拉菜单，如图 1 所示：
图 1. places 应用程序的 map 组件
清单 1 显示了经过删减的 map 组件列表：
清单 1. map 组件
<!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:Palatino">
<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 图像
map 组件的更新后的代码（进行了删减）如清单 2 所示：
清单 2. 使用一个 GMaps4JSF 组件替换 map 图形
<h:selectOneMenu onchange="submit()"
value="#{cc.parent.attrs.location.zoomIndex}"
valueChangeListener="#{cc.parent.attrs.location.zoomChanged}"
style="font-size:13px;font-family:Palatino">
<f:selectItems value="#{places.zoomLevelItems}"/>
</h:selectOneMenu>
...
<m:map id="map" width="420px" height="400px"
address="#{cc.parent.attrs.location.streetAddress}, ..."
zoom="#{cc.parent.attrs.location.zoomIndex}"
renderOnWindowLoad="false">
<m:mapControl id="smallMapCtrl"
name="GLargeMapControl"
position="G_ANCHOR_TOP_RIGHT"/>
<m:mapControl id="smallMapTypeCtrl" name="GMapTypeControl"/>
<m:marker id="placeMapMarker"/>
</m:map>
|
?
要使用 GMaps4JSF 组件，我从 GMaps4JSF 组件集合中使用 <m:map> 标记替换了 <h:graphicImage>
