Apusic JSF — 体验Ajax

1.    目的

本文是Apusic JSF 系列教程之二，在上一篇教程中，我们学习了如何利用Apusic JSF构建一个具有“系统登录原型”功能的JSF应用示例。在本文中，我们即将体验Apusic JSF的Ajax特性，您将通过一个具有“系统用户注册原型”功能的示例 （Ajax Register ）学会如何基于Apusic JSF构建一个Ajax支持的JSF示例。

2.    主题

1)  目的

2)  主题

3)  概述

4)  示例目录结构

5)  构建并配置 UserBean

6)  在 Apusic JSF 中使用 Ajax

7)  用户存在性检测

8)  用户注册

9)  用户过滤查询

10) Ajax Register 在线示例及下载

11) 总结

3.    概述

Ajax Register 应用示例源于“系统用户注册原型”，这里我们抽象为三点功能：一是注册用户存在性检测，二是用户注册功能、三是系统用户动态过滤查找。

1)         注册用户存在性检测：对用户输入用户名进行可用性检测，如该用户存在提示用户“该用户存在，不可用”，否则提示用户“该用户可用”。

2)         用户注册：对可用用户进行系统注册，并及时更新页面用户列表。

3)         用户动态过滤查找：对系统用户动态过滤查找。

Ajax Register由三大页面构成：   

Ø         导航页面（ index.jsp ）：作为 Ajax Register 应用示例的起点，其主要功能为页面导航之用，将用户 url 请求如 http://localhost:6888/ajaxregister/ 导向到

http://localhost:6888/ajaxregister/register.faces

Ø          注册及用户查询主页面(register.jsp)：基于Ajax技术，完成用户存在性检测、用户注册及用户动态过滤查找等三大功能。

注：register.jsp 页面以UserBean 为支持，完成上述三大功能。

Ø          欢迎页面(welcome.jsp)：用于演示注册成功并导向欢迎页面。

在本示例中，您将会学习以下内容：

ü          基于Apusic JSF构建一个Ajax支持的应用。

ü          使用标签<ajax:status>，定制Ajax请求提交前与处理后的响应事件。

ü          使用标签<ajax:aciton>，定制Ajax请求触发事件。

ü          JSF常规组件的使用。

4.    示例目录结构

Ajax Register 应用示例是一个典型的 web 应用示例，其目录结构如下图所示：

Ajax Register 示例目录结构

Ajax Register 主界面如下图所示：     

Ajax Register 主界面

 

5.    构建并配置UserBean

1)        构建UserBean

UserBean 作为 Ajax Register 示例的核心 Bean ，从逻辑功能数据和逻辑功能操作两个角度可以总结为：

a)        逻辑功能数据：

Ø         提示信息（ msg ）：存储逻辑功能操作结果信息。

Ø         提示信息颜色（ msgColor ）：存取逻辑功能操作结果信息颜色。

Ø         用户名（ username ）：存取用户名域参数。

Ø         用户名过滤前缀（ prefix ）：用于搜索用户时存取用户名过滤前缀。

Ø         用户列表（ users ）：存取过滤结果用户。当未使用搜索功能时，显示所有用户。

Ø         用户数据存储体（ ALL_USERS ）：存储所有注册用户，作为示例后台数据存储载体。

b)       逻辑功能操作：

Ø         用户存在性检测：对用户输入的用户名进行检测，如存在重复，以红色字体提示用户“该用户存在，不可用！”，否则以黑色字体提示用户“会员名可以使用！”。

Ø         用户注册：将已检测通过用户进行注册，并刷新用户列表。“注册并到下一页”功能用于演示注册成功并导向欢迎页面。

Ø         用户过滤查询：用户输入搜寻用户，用户列表会根据用户输入动态更新列表值。

Ø         Ajax 请求提交前后处理：对 Ajax 请求提交前，以一 <DIV> 动态显示“数据检测中，请稍等 ... ”字样， Ajax 请求结束时，隐藏该 <DIV> ，并显示功能操作结果提示信息。

构建逻辑功能数据的 getter 、 setter 操作：

逻辑功能数据作为界面外观控制的数据载体，其 getter 、 setter 操作必须严格满足 Managed Bean 命名规范：方法名必须以 get 或 set 开始， get 操作不能有参数， set操作必须带一个参数且没有返回值。方法名严格满足getXxx、setXxx格式，方法中属性名第一个字母大写。以msg属性值为例，其get、set操作如下：

public  String getMsg() {
    return msg;
  }
  public void setMsg(String msg) {
    this.msg = msg;
  }

用户数据存储体（ ALL_USERS ）作为所有用户数据的后台存储载体，与界面外观显示无关，在 UserBean 的 get 、 set 操作的构建过程中，因而无须对其加以实现。

注：UserBean的逻辑功能操作实现将在本文后续章节作详细介绍。

2)        配置UserBean

在 Ajax Register 应用中， UserBean 的应用实例（ Instance ）配置是在 faces-config.xml 文件中完成的，具体配置如 listing 1-1 所示：

Listing 1-1 ajaxregister/WEB-INF/faces-config.xml

< managed-bean >

              < managed-bean-name > userbean </ managed-bean-name >

              < managed-bean-class >

                  com.apusic.ajaxregister.UserBean

              </ managed-bean-class >

              < managed-bean-scope > session </ managed-bean-scope >

</ managed-bean >

以上配置完成了：构建了 com.apusic.ajaxregister .UserBean 的一个对象，并赋予其逻辑引用名 userbean ，该 UserBean 在一个用户 session 周期内有效，也即是在同一个客户的所有请求中有效。一旦 UserBean 配置成功，用户即可在示例中通过其逻辑引用名访问。

6.    在Apusic JSF中使用Ajax

在 Apusic JSF 中，要对组件进行 Ajax 支持，只须两个简单步骤：

1)        引入 Apusic JSF 的 Ajax 标签库

<%@ taglib prefix="ajax" uri="http://www.apusic.com/jsf/ajax"%>

2)        替换控制页面输出阶段的 Render kit

您可以这样替换 Apusic JSF 的默认 Render Kit 为 Ajax Render Kit ：

在 <f:view> 标签增加 renderKitId 属性： <f:view renderKitId="AJAX">

注：在JSF规范中，JSF页面输出阶段所采用的Render Kit是可替换的，默认的HTML_BASIC Render Kit输出的是标准的HTML语法，不包含任何Java Script代码，Apusic JSF引擎实现了一个 AJAX Render Kit，可以在HTML文档中嵌入Java Script代码来实现Ajax特性。

    至此，您已可以使用 Apusic JSF 组件的 Ajax 特性了，你不再需要编写任何 Java Script 代码，引擎会自动帮你生成这些代码。

7.    用户存在性检测

用户存在性检测包括如下功能：

1)        用户存在性检测

a)        构建UserBean检测方法

思路：检测用户命名是否已经存在于用户数据（ ALL_USERS ）中，如果存在将消息设置为“ XX 已经存在，不可用！”，并将字体颜色设置为红色；否则设置消息为“ XX 会员名可以使用！”，字体颜色为黑色。在检测中，还将增加对输入用户名是否为空的判断。 Listing 1-1 为 检测方法的实现代码清单。

Listing 1-1 ajaxregister/com/apusic/ajaxregister/UserBean.java

  public boolean  checkUser() {
    msg = (new StringBuilder(String.valueOf(username)))
        .append("   会员名可以使用 !" ).toString();
    msgColor = "#000000";
    if (username != null)
      username = username.toLowerCase();
    if (username.trim().equals("")) {
      msg = " 用户名不能为空！ " ;
        return false;
      }
      for (Iterator i = ALL_USERS.iterator(); i.hasNext();)
        if (username.equals((String) (String) i.next())) {
         msg = (new StringBuilder(String.valueOf(username))).append(
            "   已经存在，不可用 !!" ).toString();
          msgColor = "red";
          return false;
        }
      return true;
    }

b)       检测方法的调用

Ø         username 的值绑定

<h:inputText id =" username " value ="#{userbean.username}" />

Ø         检测方法的调用

< h:commandButton id = "submit" value = "check"

action = "#{userbean.checkUser}"/>

2)        检测结果信息输出

检测结果信息的内容已经在 UserBean 的检测方法 checkUser() 中进行了定制，在这里我们只需对结果信息（及其字体颜色）进行值绑定输出。

< h:outputText value = "#{userbean.msg}"

 style="color: #{userbean.msgColor};"/>

注：我们将用于检测结果信息输出的组件放在了一个<DIV>（pagemsg）中，在“定制Ajax请求提交前与处理后的响应事件中将提交。”

3)        定制Ajax请求提交前与处理后的响应事件

Apusic JSF 提供一个名为 <ajax:status> 的标签，可以对发送和完成一个 Ajax 请求时触发的事件进行定制。在本示例中，在用户检测命令完成之前，我们希望显示一个“数据检测中 ... ”字样的提示信息；在检测命令完成之后，我们能够得到用户名检测结果信息。

           出于演示<ajax:status>标签的目的，我们用两个<div>来完成上述功能：其中一个<div>（ID为ajaxmsg）用于显示“数据 检测中，请稍等…”字样，另一个<div>（pagemsg）则用于显示检测结果。页面初始化之时，两者皆处于隐藏状态。

Ø         Ajax 请求提交时：

显示 ajaxmsg ，隐藏 pagemsg ，并赋予 ajaxmsg 显示信息：“数据检测中，请稍等 … ”。

Ø         Ajax 请求完成后：

隐藏 ajaxmsg ，显示 pagemsg ，显示检测结果。

具体实现过程如下：

a)        定制 DIV

< div class = "normalMsg" style = "display:none;width:300;"

id = "ajaxmsg" ></ div >

< div class = "normalMsg" style = "display:none;width:300;"

id = "pagemsg" >

< h:outputText value = "#{userbean.msg}"

style = "color: #{userbean.msgColor};"/>

</ div >

b)        定制事件响应函数

              < script type = "text/javascript" >

function begin() {

           document.getElementById( "pagemsg" ).style.display= "none" ;

          document.getElementById( "ajaxmsg" ).style.display= "" ;

          document.getElementById( "ajaxmsg" ).className = "NormalMsg" ;

          document.getElementById( "ajaxmsg" ).innerHTML = " 数据检测中 ..." ;   

}

function end() {

            document.getElementById( "ajaxmsg" ).style.display= "none" ;

           document.getElementById( "pagemsg" ).style.display= "" ;

            document.getElementById( "pagemsg" ).className = "NormalMsg" ;

}

</ script >

c)        定制Ajax请求前后处理事件

< ajax :status onstart = "javascript:begin();"

onstop = "javascript:end();" />

8.    用户注册

1)        构建用户注册方法

思路：检测用户是否可用，对可用账户，增加到用户数据存储体（ ALL_USERS ）。 Listing 1-2 为用户注册方法实现：

Listing 1-2 ajaxregister/com/apusic/ajaxregister/UserBean.java

public void  register() {
    if (username != null)
      username = username.toLowerCase();
    if (checkUser()) {
      ALL_USERS.add(username);
      msg = (new StringBuilder(String.valueOf(username))).append(
          "   注册成功！ " ).toString();
      users = refreshUsers();
    }
  }

注册用户后，须动态刷新用户列表，刷新用户列表（users）方法实现如Listing 1-3所示。

Listing 1-3 ajaxregister/com/apusic/ajaxregister/UserBean.java

public static  ArrayList refreshUsers() {
    ArrayList result = new ArrayList();

    for (Iterator i = ALL_USERS.iterator(); i.hasNext();) {
      String curuser = (String) (String) i.next();
      result.add(new SelectItem(curuser, curuser));
    }
    return result;
  }

2)        注册方法的调用

 <h:commandButton id="register" value="  注册  " 

action = "#{userbean. register}"/>

3)        “注册并到下页”

在实际应用中，往往是注册成功后转向到另一个页面，因而需要对 Ajax Register 的用户注册进行改进。

Ø         改进注册方法

要实现注册成功后页面进行跳转，我们在 register 方法的基础上添加了动态导航。

改进后的注册方法 registerNext() 代码清单如 Listing 1-4 所示。

Listing 1-4 ajaxregister/com/apusic/ajaxregister/UserBean.java

  public  String registerNext() {
    if (username != null)
      username = username.toLowerCase();
    if (checkUser()) {
      ALL_USERS.add(username);
      msg = (new StringBuilder(String.valueOf(username)))
          .append("  注册成功！ " ).toString();
      users = refreshUsers();
      return "welcome";
    } else {
      return "";
    }
  }

Ø         构建 Welcome 页面

注：欢迎页面的代码清单请参见本文“下载”工程中的welcome.jsp。

Ø         配置导航规则

             < navigation-rule >

              < from-view-id > /register.jsp </ from-view-id >

              < navigation-case >

                 < from-outcome > welcome </ from-outcome >

                 < to-view-id > /welcome.jsp </ to-view-id >

              </ navigation-case >

            </ navigation-rule >

            < navigation-rule >

              < from-view-id > /welcome.jsp </ from-view-id >

              < navigation-case >

                 < from-outcome > register </ from-outcome >

                 < to-view-id > /register.jsp </ to-view-id >

              </ navigation-case >

</ navigation-rule >   

导航规则的具体配置说明，在这里不再赘述，请参照 "Apusic JSF- Getting Started" 一文中“创建导航规则”一节。

9.    用户过滤查询

功能描述：用户输入搜寻用户名改变时，动态更新用户列表值。

1)        增加 Ajax 请求触发事件

在用户过滤查询功能中，我们需要为其增加Ajax请求触发事件。在本文中，我们采用对“搜寻用户名”组件（ <h:inputText id= "prefix"...> ）增加“按键松开”的“激励事件”：

<ajax:action event =" onkeyup " />

2)        配置事件侦听器

除了增加Ajax请求触发事件，我们还须对“搜寻用户名”组件注册相应的事件侦听器，以 实现用户列表动态刷新。在本例中，我们增加了valueChangeListener侦听器：

< h:inputText id = "prefix" value = "#{userbean.prefix}"

             valueChangeListener = "#{userbean.prefixChanged}"/>

3)        实现事件处理函数

valueChangeListener 事件处理函数如清单 1-5 所示。其中 buildFilteredUsers 实现了根据用户输入前缀更新用户列表功能。

Listing 1-5 ajaxregister/com/apusic/ajaxregister/UserBean.java

    public void  prefixChanged(ValueChangeEvent event) {
      users = buildFilteredUsers((String) event.getNewValue());
      msg = (new StringBuilder(" 搜寻用户名以  " )).append(
        (String) event.getNewValue()).append("  为起始的用户！ " ).toString();
    }

  public  ArrayList buildFilteredUsers(String prefix) {
      ArrayList result = new ArrayList();
      for (Iterator i = ALL_USERS.iterator(); i.hasNext();) {
        String curuser = (String) (String) i.next();
        if (curuser.startsWith(prefix))
          result.add(new SelectItem(curuser, curuser));
      }
      return result;
    }

4)        用户列表输出

< h:selectOneListbox size = "5" style = "width: 18em" >

< f:selectItems value = "#{userbean.users}"/>

</ h:selectOneListbox >

    至此，我们已经完成了 Ajax Register 示例的学习，体验了 Apusic JSF 中的 Ajax 开发的一般思路。

10. Ajax Register 在线示例及下载

您可以从以下地址获得 Ajax Register 示例工程的源码 ajaxregister.war ：

http://www.operamasks.org/downsrc/ajaxregister.war

您可以将下载的 ajaxregister.war 直接部署到 Apusic 5.0 应用服务器上：

   修改应用服务器安装路径 ( 如 c:/ApusicHome ) 下 config 目录下的 server.xml 文件，在 <server> 标签中增加：

<application name="ajaxregister" base="D:/ ajaxregister.war" start="auto"/>

其中， D:/ ajaxregister.war 为您下载的 ajaxregister 示例存放路径。

您也可以从以下地址获得 ajaxregister 的在线示例：

http://www.operamasks.org:8080/ajaxregister/

11. 总结  

在本文中，我们学习了：

ü          基于Apusic JSF构建一个Ajax支持的应用。

ü          使用标签<ajax:status>，定制Ajax请求提交前与处理后的响应事件。

ü          使用标签<ajax:aciton>，定制Ajax请求触发事件。

ü         JSF常规组件的使用。