首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

事件处理、JavaScript 和 Ajax(2)

事件处理、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-familyalatino">
      
  <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.groovy
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
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 的更有说服力的原因。
返回列表