事件处理、JavaScript 和 Ajax（2）
|
- UID
- 1066743
|
事件处理、JavaScript 和 Ajax（2）
map 组件的更新后的代码（进行了删减）如清单 2 所示：
清单 2. 使用一个 GMaps4JSF 组件替换 map 图形1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <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>
...
<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> 标记。将 GMaps4JSF 组件与缩放下拉菜单连接起来也很简单，只需为 <m:map> 标记的 zoom 属性指定正确的 backing-bean 属性。
关于缩放级别需要注意一点，那就是当一名用户修改缩放级别时，我将通过 <h:selectOneMenu> 的 onchange 属性强制执行表单提交，如 中第一处使用粗体显示的代码行所示。这个表单提交将触发 JSF 生命周期，这实际上将把新的缩放级别推入到保存在父复合组件中的 location bean 的 zoomIndex 属性中。这个 bean 属性被绑定到输入组件，如 中的第一行所示。
由于我没有为与缩放级别修改相关的表单提交指定任何导航，JSF 在处理请求后刷新了同一页面，重新绘制地图以反映新的缩放级别。然而，页面刷新还重新绘制了整个页面，即使只修改了地图图像。在 中，我将展示如何使用 Ajax，只对图像部分重新绘制，以响应缩放级别的修改。
login 组件 places 应用程序中使用的另一个组件是 login 组件。图 3 展示了这个 login 组件的实际使用：
图 3. login 组件  展示了创建 所示的 login 组件的标记：
清单 3. 最基础的 login：只包含必需的属性1
2
3
4
5
6
7
8
| <ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:util="http://java.sun.com/jsf/composite/components/util">
<util:login loginAction="#{user.login}"
managedBean="#{user}"/>
</ui:composition>
|
login 组件只包含两个必需的属性：
- loginAction：登录 action 方法
- managedBean：包含名称和密码属性的托管
中指定的托管 bean 如清单 4 所示：
清单 4. User.groovy1
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
| package com.clarity
import javax.faces.context.FacesContext
import javax.faces.bean.ManagedBean
import javax.faces.bean.SessionScoped
@ManagedBean()
@SessionScoped
public class User {
private final String VALID_NAME = "Hiro"
private final String VALID_PASSWORD = "jsf"
private String name, password;
public String getName() { name }
public void setName(String newValue) { name = newValue }
public String getPassword() { return password }
public void setPassword(String newValue) { password = newValue }
public String login() {
"/views/places"
}
public String logout() {
name = password = nameError = null
"/views/login"
}
}
|
中的托管 bean 是一个 Groovy bean。在这里使用 Groovy 替代 Java 语言并不会带来多少好处，只是减少了处理分号和返回语句的麻烦。然而，在技巧 2 的 部分中，我将展示一个对 User 托管 bean 使用 Groovy 的更有说服力的原因。 |
|
|
|
|
|
