首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> Java 程式設計 >> Java 相關知識

使用 JavaServer Faces 構建 Apache Geronimo 應用程式:第 1 部分 - 使用 Eclipse 和 MyFaces Core 建立基礎應用

     編輯:Java 相關知識

本教學向 Java 程式設計師介紹如何使用 JSF 元件來構建具有高度互動性的部署在 Apache Geronimo 上的 Java EE 應用程式。本教學假定讀者使用 Eclipse 整合開發環境 (IDE) 作為開發平台。

關於本教學

本教學介紹了 Apache Geronimo,它是一個純 Java EE 應用伺服器。還介紹了使用 Eclipse IDE 和 Apache MyFaces(這是一個開放原始碼的 JSF 框架實作)的 JSF 程式設計環境。這裡將會開發一個開發者論壇註冊頁面的前端,並學會如何使用常見的輸入方法和資料驗證技術。

關於本系列

這是一個關於使用 JSF 構建 Apache Geronimo 應用程式的教學,教學分五部分,這是其中的第 1 部分。在後面的系列教學中包括以下幾個部分:

  • 第 2 部分:在 JavaServer Faces 中使用 Tomahawk — 展示了如何在 Geronimo 應用程式中整合 Apache Tomahawk。Tomahawk 提供了幾個定製元件,可跟 JSF 100% 相容。
  • 第 3 部分:在 JavaServer Faces 中使用 ajax4jsf — 演示了如何使用 Sun 的 ajax4jsf 工具使 Geronimo 應用程式獲得與 Ajax 的相容性。
  • 第 4 部分:使用 ADF Faces 擴展 JSF — 教您怎樣將 ADF Faces 中的元件整合到 Geronimo 應用程式中。Oracle 的 ADF Faces 是構建於 JSF 之上的一組非常豐富的 UI 元件。
  • 第 5 部分:將 JSF 應用程式與 Spring 整合 — 展示了如何將 JSF 應用程式與 Spring 框架整合。Spring 是一個流行的框架,它使 Geronimo 開發者能更容易地構建 Java EE 應用程式。

系統需求

為了學習本教學,需要有下列一些工具:

  • Geronimo,Apache 的 Java EE 伺服器專案。根據需要,Geronimo 可提供 Tomcat 和 Jetty 兩種風格。我們採用的是 Jetty 風格(1.1 版),因為它較小。
  • MyFaces,Apache 的 JSF 實作。請從 Apache 下載核心版本(不帶 Tomcat)。本教學中我們使用的版本是 1.1.3 版。
  • 一個空的 MyFaces Web 應用程式。請從 coreservelets.com 這個 Web 網站下載 Marty Hall 的 jsf-blank-myfaces-minimal.zip 歸檔檔案。該歸檔檔案包括一個空的 Web 應用程式,其中含有基本 MyFaces 應用程式所必需的最小的 MyFaces 程式庫,幾乎可以原封不動地轉到 Geronimo 上去。是的,兩次下載了這些 .jar 檔案(一次在這裡,一次在 MyFaces 核心歸檔檔案那裡),因為仍需要從 MyFaces 歸檔檔案裡獲得文件和您可能會感興趣的其他可選 JAR 檔案。
  • Eclipse,這是一個可支援大量語言和平台的可擴展開放原始碼整合開發環境 (IDE)。
  • Eclipse Web Tools Platform (WTP),它給 Eclipse 新增了對 XML 的支援和對 JSF 的基本支援。
  • 將 Java 1.4 或更新版本 安裝到您的系統中。Eclipse 二進制檔案中帶有它自己的 Java 執行時,但 Geronimo 和 MyFaces 則沒有(帶執行時會使下載歸檔檔案的尺寸急劇變大)。在本教學中,我們使用 Mac OS X 10.4 所用的 Java 1.5,但平台應該不是問題。可以從 Sun Microsystems 或 IBM 處獲得 Java 技術的文件。

概述

在建立 Web 應用程式時,Java Servlet 和 JavaServer Pages (JSP) 技術提供了一個效能強大的環境,但其中並沒有給出建立使用者介面 (UI) 的標準方法。您必須全靠自己來管理 JSP 頁面中所有表單的狀態,而且還必須把進來的 HTTP 請求轉發給適當的事件處理程式。如果網站的 GUI 很複雜,隨應用程式而產生的複雜基礎設施會變得難以管理。此外,網站還會有些特有的行為以及其他一些細節問題,使得您構建的程式碼很難被重用。JSF 提供了一種簡化高層任務(例如 UI 元件的排列和重用)的現成工具,並把元件的狀態和輸入處理跟決定應用程式行為的物件關聯了起來。

Apache Geronimo

Apache Geronimo 是一個開放原始碼的(採用 Apache Software Foundation 授權協議)的 Java EE 伺服器,其設計目的是盡可能增強應用程式的相容性和效能。它的當前版本(到寫本文時為止是 1.1 版)通過了 Sun 的 Java 2 Platform, Enterprise Edition (J2EE) 的 Technology Compatibility Kit (TCK) 測試,這表示它符合 Sun 的規範,跟 J2EE 伺服器完全相容。

與 Jetty 或 Tomcat Web 伺服器打包使用時,Geronimo 非常易於啟用和運行,而且它已經部署了一個極其有用的管理介面應用程式。不需要以任何方式重新啟動或重新配置伺服器,就可以上傳並啟動 Web 應用程式。

MyFaces

MyFaces 是第一個免費的開放原始碼的 JSF Web 應用程式框架實作。JSF 類似於流行的 Struts 框架,實現了模型-視圖-控制器 (MVC) 模式,但是它有一些功能是 Struts 沒有提供的。JSF 是由 Java Specification Request #127 (JSR 127) 規範所定義的,它被 Web 應用行業的專家批准成為 Java Community Process (JCP) 的規範。

Eclipse

Eclipse 是按照一個可擴展的基於外掛的架構而構建的,它是一個開放原始碼的整合開發環境 (IDE)。這樣,只要一個 IDE 就能夠支援做任何工作所需的幾乎任何語言、任務、平台和資料檔案。這樣,將可以從 Java 對開發的出色支援和 WTP 專案的外掛中獲益。WTP 提供了支援 XML 的編輯器,它還提供了實驗性的對 MyFaces 的支援。

應用程式範例

在本教學中,將使用 Geronimo 部署一個簡單的用 MyFaces 寫的 Web 應用程式,它為您建立自己的 Web 應用程式提供了一個很好的開端。將為一個假想的面向開發者的討論區論壇構建一個註冊過程。

誠然,這不是 Slashdot.org 或是什麼可怕的論壇,但這裡的東西確實是每個人都熟悉的(這就像註冊到某個論壇、郵件列表或 beta 測試的情況)。

在下一節,您將了解所有需要做的工作,並為這個應用程式建立一個 Eclipse 專案。

建立專案

首先,為使用 MyFaces 的應用程式建立一個準備放到 Geronimo Java EE 伺服器上的 Eclipse 專案。這一節將完成所有不需要費力的工作(建立 Eclipse 專案、進行必要的設置、匯出 .war 檔案並把它部署到伺服器上)。

在 Eclipse 中進行必要的設置

為 Geronimo 伺服器建立新的 MyFaces 應用程式時,要做的第一件事就是建立一個 Eclipse 專案。注意,為了繼續進行這部分的教學,必須先安裝好 Eclipse,並透過 Eclipse 的更新管理器安裝好 WTP。安裝完 Eclipse 後,可到 WTP 的 Web 網站了解如何安裝 WTP。

  1. 啟動 Eclipse,然後從選單選擇 File > New > Project。會彈出一個新專案精靈。
  2. 在 "Web" 處選擇 Dynamic Web Project。這樣將會建立一個專案,它按下面的結構存放一個 Web 應用程式:
    • build
    • classes
    • src
    • WebContent
      • META-INF
      • MANIFEST.MF
      • WEB-INF
        • lib
        • faces-config.xml
        • web.xml
    除 faces-config.xml 檔案外,Web 應用程式開發者應該對 WebContent 資料夾中的檔案和目錄很熟悉。Java 類別的原始碼會存到 src 資料夾中,而構建輸出檔案(例如 .class 檔案)會建立在 build 資料夾中。
  3. 單擊 Next,顯示 New Dynamic Web Project 精靈。填入專案名稱,並從下拉配置清單中選擇 Java Server Faces 1.1 Project。建立一個名為 devSignup 的專案。
  4. 單擊 Next 顯示 New Dynamic Web Project 精靈的 Project Facets 面板。這裡不需要做任何事,所以再次單擊 Next 顯示 Web Module 面板。這個面板上的 Context Root 欄位決定了部署到 Web 伺服器上時應用程式目錄的名稱。預設的目錄名與專案名稱相同,在這個範例中為 devSignup。如果不喜歡這樣,就改個目錄名,然後單擊 Next 顯示 JSF Capabilities 面板。在 JSF Capabilities 面板上可以定義幾組在專案中使用的 JSF JAR。為了便於部署,也可以在匯出這個 Web 應用程式時讓 Eclipse 自動包含這些 JAR。
  5. 在面板頂部,選中 Deploy jars to WEB-INF/lib,這是因為建立應用程式時希望包括 JSF 程式庫。單擊這個核取方塊正下方的 New 按鈕,顯示 Create JSF Implementation Library 對話方塊。這樣就可以設置一組在 Web 應用程式中可以重用的標準 JSF JAR。
  6. 給這個程式庫起一個描述性的名字(我起的名字是 MyFaces (Core))。從 Version Supported 下拉清單中選擇 v1_1,因為 Apache MyFaces 支援 1.1 版的 JSF 規範。單擊 Add 按鈕,選擇要包括在這個程式庫的定義裡的 JSF .jar 檔案。程式庫中包括的檔案列在下面:
    • commons-beanutils-1.7.0.jar
    • commons-codec-1.3.jar
    • commons-collections-3.1.jar
    • commons-digester-1.6.jar
    • commons-el-1.0.jar
    • commons-lang-2.1.jar
    • commons-logging-1.0.4.jar
    • jstl-1.1.0.jar
    • myfaces-api-1.1.3.jar
    • myfaces-impl-1.1.3.jar
    這是在當前的 MyFaces 實作中最精簡的一組 JSF 程式庫(有些文件中在這個清單裡沒有 jstl.jar,但這是一個必要的檔案)。在最小空應用程式歸檔檔案中,這些 JAR 的副本省略了版本號(而且它帶了兩個額外的程式庫:commons-validator.jar 和 jakarta-oro.jar,它們分別提供資料驗證類別和對正則表示式的支援)。
  7. 添加完所需的 .jar 檔案後,單擊 Finish 建立一個 JSF Implementation 程式庫。已經完成了 New Dynamic Project 精靈的設置,所以單擊 Finish 建立一個 Web 應用程式骨架。Eclipse 自動轉到 Java EE 透視圖,目前這對於您的 JSF 開發沒有什麼幫助。WTP 中對 JSF 的支援目前是 0.5 版,所以還不能指望會有無縫的整合。從選單中選擇 Window > Close Perspective,切回到 Resource 透視圖。在 Navigator 視圖下把專案展開,觀察精靈建立的目錄結構和檔案。現在就可以把應用程式放到伺服器上試試了。

把東西都拼起來

現在已經建立了一個基本的 Web 應用程式,還需要再加一些東西進去,這樣才能讓它成為一個真正的(基本)Web 應用程式,並使它適合部署到一個 Geronimo 伺服器上。

編輯 web.xml 檔案

如果 Eclipse 的 XML 編輯器以設計模式啟動(看見底部的選項卡了嗎?),單擊 Source 選項卡,就可以直接編輯 XML 檔案了。可以將它編輯成類似下列所示。

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="devSignup" version="2.4"
 xmlns="https://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="https://java.sun.com/xml/ns/j2ee
 https://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>devSignup</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

在 <web-app> 標記中,把 id 屬性從其預設值(WebApp_ID)改過來;這是在這個伺服器上啟動 Web 應用程式的 URL。我會採用 devSignup 來代替它。還需要加入 xmlns 宣告和 xsi:schemaLocation 宣告。刪掉 <servlet> 和 <servlet-mapping> 區塊,並從 <welcome-file-list> 部分刪掉一些 <welcome-file> 標記。<welcome-file> 標記定義了顯示 Web 應用程式時將使用的檔案(按指定的順序)。例如,預設的清單包括 index.html、index.htm、index.jsp 和其他一些檔案。去掉除 index.jsp 外的所有檔案,然後就要建立一個 index.jsp 檔案。

右鍵單擊 WebContent 資料夾,然後從右鍵選單選擇 New > Other 顯示新建檔案精靈。展開 Web 組,選擇 JSP,然後單擊 Next。將檔案名設為 index.jsp,然後單擊 Finish 建立新的 index.jsp 檔案。如下列所示編輯 index.jsp。這是 "Hello World" 程式,沒什麼有用的 JSP 或 JSF 互動,所以可以放心不會有什麼問題。

<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
 charset=ISO-8859-1" />
<title>Developer Signup</title>
<jsp:useBean id="datetime" class="java.util.Date"/>
</head>
<body>
<p>
Hello, world!
</p>
<p>
The server's time is ${datetime}.
</p>
</body>
</html>

這還不完全是一個基本的 "Hello World" 程式,因為用 java.util.Date bean 提供了當前日期和時間。

這個拼圖的最後一塊是 Geronimo 的部署描述符。右鍵單擊專案中的 WEB-INF 資料夾,然後從右鍵選單中選擇 New > Other。在新建檔案精靈裡,展開 XML 組,選擇 XML,然後單擊 Next。確保選中 Create XML file from scratch,然後單擊 Next。把檔案名改為 geronimo-web.xml,然後單擊 Finish 建立一個新檔案並編輯它。按下列所示編輯 geronimo-web.xml。這個基本的 Geronimo 部署檔案只是告訴伺服器在哪裡發布這個 Web 應用程式(與我們在 web.xml 中已做過的很類似)。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://geronimo.apache.org/xml/ns/j2ee/web-1.1"
 xmlns:naming="https://geronimo.apache.org/xml/ns/naming">
<context-root>/devSignup</context-root>
</web-app>

在這個範例中,我把 <context-root> 設置為 /devSignup,這樣就可以在伺服器上的 /devSignup 下看到這個應用程式了。挺容易,對吧?現在需要把最初的 Web 應用程式匯出為一個 .war 檔案,並把它部署到伺服器上。繼續閱讀,學習怎麼做到這些!

Web 應用程式風格的 "Hello World" 程式

現在已建立了一個專案,一個基本的歡迎頁面以及一個 Geronimo 部署描述符,可以建立一個 .war 檔案把它部署到伺服器上。

  1. 在 Navigator 視圖內右鍵單擊專案的名字(這裡是 devSignup),然後從右鍵選單中選擇 Export。
  2. 在 Export 精靈中,展開 Web 組,選擇 WAR file,然後單擊 Next 顯示 WAR Export 面板。由於是在導航器中匯出專案的,所以 Web 模組已經被正確地選擇。單擊 Browse 按鈕為 .war 檔案選擇一個目的目錄和檔案名。將它起名為 devSignup.war 存到桌面上,這樣比較容易找到它。然後把它部署到伺服器上。
  3. 單擊 Finish 匯出這個 .war 檔案。如果不熟悉一般的 IDE(或只是不熟悉 Eclipse),您可能不相信它會正確地工作。如果檢查 .war 檔案的內容,看到的東西應該類似於下列所示。
./index.jsp
./META-INF
./META-INF/MANIFEST.MF
./WEB-INF
./WEB-INF/classes
./WEB-INF/faces-config.xml
./WEB-INF/geronimo-web.xml
./WEB-INF/lib
./WEB-INF/lib/commons-beanutils-1.7.0.jar
./WEB-INF/lib/commons-codec-1.3.jar
./WEB-INF/lib/commons-collections-3.1.jar
./WEB-INF/lib/commons-digester-1.6.jar
./WEB-INF/lib/commons-el-1.0.jar
./WEB-INF/lib/commons-lang-2.1.jar
./WEB-INF/lib/commons-logging-1.0.4.jar
./WEB-INF/lib/jstl.jar
./WEB-INF/lib/myfaces-api.jar
./WEB-INF/lib/myfaces-impl.jar
./WEB-INF/web.xml

運行您喜歡的 Web 瀏覽器,並造訪 https://localhost:8080/console/(如果 Geronimo 伺服器不是在同一台主機上運行,則用您的 Geronimo 伺服器主機名代替 localhost)。這樣會顯示一個 Geronimo 管理控制台登錄畫面。登錄以便能造訪管理控制台。請記住預設使用者名為 server,而預設的密碼為 manager — 改過來!

在控制台導航清單裡應用程式處單擊 Deploy New 顯示 Install New Applications 畫面。單擊 Archive 欄位旁邊的 Browse 按鈕,並瀏覽到剛建立的 .war 檔案。因為已經選中了 Start app after install,所以單擊 Install 來上傳這個 .war 檔案並啟動應用程式。在瀏覽器把歸檔檔案上傳完且 Geronimo 已啟動應用程式後,將看到一個成功訊息。可以透過單擊 Web App WARs 復查一下,也可以在 Applications 處的控制台導航清單裡這麼做,它將會顯示一個正在運行的所有 Web 應用程式的清單。URL 欄顯示了伺服器上的各個應用程式都是在哪裡被發布的(可以單擊這裡造訪這個應用程式)。在 Commands 欄中,可以找到停止或卸載各個應用程式的連結。

現在已經熟悉了如何使用 Eclipse 在 Geronimo 上部署一個 Web 應用程式,接著可以建立一個範例應用程式了。

建立應用程式

為了學習本教學,將為一個假想的開發者論壇網站建立第一個最簡單版本的註冊過程。需要收集使用者希望採用的螢幕名稱、e-mail 地址和密碼。下圖顯示了一個用傳統的老式 XHTML 建立的演示性註冊 UI。

用 XHTML 寫的演示性註冊應用程式

圖 12. 用 XHTML 寫的演示性註冊應用程式

可以很容易地使用圖像、網站導航等來修飾它,但這並不是本教學的重點問題。

編寫介面

由於已經經過了用 XHTML 寫演示介面的麻煩步驟,現在應建立一個 CSS 檔案和一個 JSP 頁面,其中包括在演示中列出的頁面。在 Eclipse 的 Navigator 視圖下右鍵單擊 WebContent 資料夾,然後從右鍵選單中選擇 New > Other。展開 Web 組,為此頁面選擇 JSP,然後單擊 Next。輸入 signup.jsp 作為新檔案的名字,然後單擊 Next。需要使用 New JSP File (xhtml) 模板,所以請確認已選擇了它,然後單擊 Finish 建立一個幾乎是空的新 signup.jsp 檔案。將編碼設置改為 UTF-8(這樣就可以直接在編輯器裡寫進特殊字符,而不是用實體把檔案弄得亂七八糟),設置 <title>,然後把演示中的 <body> 內容添加到檔案的 <body> 裡。編輯應用程式中的 web.xml 檔案,將它的 <welcome-file> 從 index.jsp 改為 signup.jsp。現在,預設情況下使用者會看到註冊頁面,而不是先前構建的 "Hello World" 示例。

在開始把這個表單轉化為 JSF 元件之前,應該透過一個 JSF 應用程式了解一點兒關於控制流的知識。使用者填寫表單並把它提交給伺服器,這個表單從一個 bean 那裡接收到資料,並呼叫指定的動作。處理完資料後,它會返回一個條件(以一個字串來表示),於是,根據這個條件使用者被轉到一個新的 Web 頁面。因此,需要建立一個 bean 來存放資料,還需要有些 Java 程式碼來處理這些資料並返回條件值。條件值到 Web 頁面的映射是在 faces-config.xml 檔案中進行的,前面在開始這個專案時已看到過 Eclipse 建立這個檔案了。

現在,讓我們回到這段程式碼。為了把這個 XHTML 檔案轉化為 JSF 檔案,需要在該檔案頂部新增 JSF 標記程式庫(見下列程式碼)。

<%@ taglib uri="https://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="https://java.sun.com/jsf/core" prefix="f"%>

你也需要用 <f:view> 標記包裝整個內容,並將表單元件(原始 XHTML 中的 <form>、<input> 和 <select> 標記)轉換為 JSP 元件。下列程式碼顯示整個 JSP 版本。

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ taglib uri="https://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="https://java.sun.com/jsf/core" prefix="f"%>
<f:view>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Developer Forum Signup</title>
</head>
<body>
<h1>Developer Forum Signup</h1>
<p>
Welcome to our forums! Please fill in the following form to create your
forum account.
</p>

<h:form>
<dl>
<dt>Screen name:</dt>
<dd>
<h:inputText name="screenName"/>
</dd>

<dt>Email:</dt>
<dd>
<h:inputText name="email"/>
</dd>

<dt>Password:</dt>
<dd>
<h:inputSecret name="password"/>
</dd>
</dl>

<h:commandButton name="sign-up" action="register">Sign
up</h:commandButton>
</h:form>
</body>
</html>
</f:view>

儘管語法不同,但這裡的程式碼跟原始程式碼十分類似。還需要為成功和失敗的情況建立結果頁面。目前會讓這部分相當短小,見下列程式碼。

成功頁面 (signup-success.jsp)

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Developer Forum Signup - Welcome!</title>
</head>
<body>
<h1>Developer Forum Signup</h1>
<p>
Your application was successful, welcome to our forums!
</p>
</body>
</html>

在真實的應用程式中,可能想提供一個連結把使用者重定向到論壇、網站主頁面或是其他任何適當位置,而不是讓他們就這樣掛在那裡。

失敗頁面 (signup-failure.jsp)

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Developer Forum Signup - Error</title>
</head>
<body>
<h1>Developer Forum Signup</h1>
<p>
There was an error processing your application, please try again.
</p>
</body>
</html>

在真實的應用中,可能想告訴使用者錯在什麼地方(例如,重複的螢幕名或 e-mail、過於簡單的口令或是當前資料庫不在線),如果可能的話,就讓他們更正錯誤。

使用 Faces 配置編輯器

現在您已知道了 signup.jsp 的動作是什麼(由 <h:commandButton> 標記所指定的 "register")以及結果頁面是什麼,接著可以為此頁面設置導航規則。雙擊專案中的 faces-config.xml 開始配置。這個檔案在一個特殊的 JSF 編輯器中打開。閱讀所顯示的介紹,然後單擊 Start 實際進入編輯器。單擊編輯器底部的 Navigation Rule 選項卡,以顯示用來配置導航規則的圖形工具。單擊 Navigation Rule 選項卡邊沿處的 Palette,顯示一個項目面板,可以用它來建立導航規則。在面板上單擊 Page,然後在編輯器視圖裡任意一個地方單擊。用彈出的選擇器選擇 signup.jsp,按同樣的方法再做兩次,把 signup-success.jsp 和 signup-failure.jsp 也添加到視圖中。在面板上單擊 Link,然後單擊 signup.jsp。在移動滑鼠的時候,可以看到有一條線從 signup.jsp 連接到游標,單擊 signup-success.jsp 建立一個從這個表單到結果頁面的連結。同樣,把 signup.jsp 連結到 signup-failure.jsp。在面板上單擊 Select,然後選擇 Window > Show View > Properties 顯示屬性視圖。在導航規則編輯器中單擊其中一個連結箭頭,在屬性視圖下顯示該連結的設置。對這個從 signup 到 success 頁面的連結,在 From Outcome 欄位輸入 signup-success;這是註冊成功時事件處理程式將會返回的字串。把註冊失敗連結的 From Outcome 欄位設為 signup-failure。現在可以儲存 faces-config.xml 檔案了。如果想確認導航規則編輯器沒做錯事,可以選 Source 選項卡。在那裡每個連結都表示為一個 <navigation-case> 區塊,其中 <from-outcome> 和 <to-view-id> 元素顯示了 From Outcome 屬性和它所連結的頁面。

建立受管 Bean

需要建立一個受管 bean 來存放應用程式的資料。在 Faces 配置編輯器中單擊 Managed Bean 選項卡,以顯示已有的 Managed Bean 元素。單擊 Add 按鈕顯示新 Managed Bean 精靈。選擇 Create a new Java class,然後單擊 Next 顯示 Java 類別面板。將套件設置為 devSignup 並把類別名設置為 SignupData,然後單擊 Next 顯示 Managed Bean 配置面板。將範圍改成 request(這個資料只需要在處理註冊請求時存在,而不是在整個使用者會話期間存在),建立一個 bean 的骨架。在專案中展開 src 資料夾,然後在 devSignup 資料夾中打開 SignupData.java。為了獲取和設置資料,需要給註冊表單添加成員資料和成員存取函數(見下列程式碼)。

package devSignup;

public class SignupData {
    // Properties and accessors.
    private String _screenName = "nobody";
    private String _email = "nobody@company.com";
    private String _password = "";

    public String getScreenName() {
        return _screenName;
    }
    public void setScreenName( String newScreenName ) {
        this._screenName = newScreenName;
    }

    public String getEmail() {
        return _email;
    }
    public void setEmail( String newEmail ) {
        this._email = newEmail;
    }

    // NOTE: THIS IS NOT SECURE, DON'T DO THIS
    // WITH YOUR PASSWORDS!
    public String getPassword() {
        return _password;
    }
    public void setPassword( String newPassword ) {
        this._password = newPassword;
    }

    // The registration attempt handler.
    public String register() {
        if( ( _email == null ) || ( _screenName == null ) ||
            ( _password == null ) ) {
            // Bad code? lost data?
            return "signup-failure";
        }

        if( ( _email.trim().length() < 3 ) ||
            ( _email.indexOf( "@" ) == -1 ) ) {
            // Bad email address.
            return "signup-failure";
        }

        if( _password.trim().length() < 8 ) {
            // Password too short.
            return "signup-failure";
        }

        return "signup-success";
    }
}

每個成員變數都有相應的 get 和 set 方法,它們是從 JSP 呼叫的。例如,如果螢幕名被改變,則 signupData.setScreenName() 被呼叫。這是由 <h:inputText> 的值 #{signupData.screenName} 所指定的。當有人單擊表單上的 Sign up 按鈕時,呼叫 register() 方法。這個方法還進行了基本的資料有效性驗證(不要把您的密碼存在記憶體裡;這裡只是一個示例),這基本上就差不多了。在真實的應用程式中,很可能想為這個人建立一個資料庫項;如果這樣失敗了,它將會返回 signup-failure,然後提示使用者再做嘗試。儲存所有的檔案,然後單擊 Eclipse 工具列上的 Build All 圖示。bean 應該能不出警告和錯誤地通過編譯。

幾個瑣碎的問題

把專案的 index.jsp 檔案改為 <% response.sendRedirect("signup.faces"); %>。這樣,如果使用者在 URL 中沒有指定頁面,將把他們直接重定向到註冊頁面。敏銳的讀者可能會注意到:儘管這樣把使用者重定向到了 signup.faces 檔案,但顯示的卻是 signup.jsp 檔案。這是 JSF 程式庫的一個特點,也是一個令開發者困惑的根源。只要記住 .faces 將被解讀為 .jsp 就可以了。需要給這個專案的 web.xml 檔案中新增一大堆 JSF 和 MyFaces 配置資訊。完成後,專案的樣子應跟下列所示的類似。

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="devSignup" version="2.4"
 xmlns="https://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="https://java.sun.com/xml/ns/j2ee
 https://java.sun.com/xml/ns/j2ee/web-app_2.4.xsd">

<display-name>devSignup</display-name>

<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>
 /WEB-INF/faces-config.xml
</param-value>
</context-param>

<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>

<context-param>
<param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
<param-value>true</param-value>
</context-param>

<context-param>
<param-name>org.apache.myfaces.PRETTY_HTML</param-name>
<param-value>true</param-value>
</context-param>

<context-param>
<param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
<param-value>false</param-value>
</context-param>

<context-param>
<param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
<param-value>true</param-value>
</context-param>

<listener>
<listener-class>org.apache.myfaces.webapp.
StartupServletContextListener</listener-class>
</listener>

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>

<welcome-file-list>
<welcome-file>signup.jsp</welcome-file>
</welcome-file-list>
</web-app>

儲存所有檔案,然後祈禱,因為現在要試運行這個東西了。

在伺服器上試運行專案

萬事俱備,我們來試航一下!將該專案匯出為一個 .war 檔案(如前面 Web 應用程式風格的 "Hello World" 程式一節所述),並將它導入 Geronimo 伺服器(如同一節所述)。打開一個 Web 瀏覽器,然後造訪 https://localhost:8080/devSignup/ 查看能否使用。看到的應該類似於下圖所示。如果是這樣,您就成功了!

應用程式終於運行了!

圖 19. 應用程式終於運行了!

輸入一些資料,然後點擊 Submit Query 按鈕。根據輸入內容的不同,應該可以看到一個成功頁面或失敗頁面。勝利了!

結束語

您已經學會了如何用 Eclipse 來建立和構建一個採用 JSF 標準 MyFaces 實作的 Web 應用程式。還開發了一個簡單的 JSF 應用程式並成功地將它部署到了 Geronimo 伺服器上。

原文地址:https://www.ibm.com/developerworks/cn/edu/os-dw-os-ag-jsf1.html

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved