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) 定製事件響應函數

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>標籤中增加：

其中，D:/ ajaxregister.war爲您下載的ajaxregister示例存放路徑。

您也可以從以下地址獲得ajaxregister的在線示例：

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

11.總結

在本文中，我們學習了：

ü 基於Apusic JSF構建一個Ajax支持的應用。

ü 使用標籤<ajax:status>，定製Ajax請求提交前與處理後的響應事件。

ü 使用標籤<ajax:aciton>，定製Ajax請求觸發事件。

ü JSF常規組件的使用。

Apusic JSF — 體驗Ajax

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

MVC與三層架構的研討

如何獨立設計完成一個軟件項目

To use Firefox more effectively

CORBA 入門

MYSQL 語法參考

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結