你的第一個 JSF 專案

1. 建置 Web Application Server - Tomcat

下載網址 : http://tomcat.apache.org/

2. 下載 Mojarra JSF 執行套件

The JSF team at GlassFish has announced a new name for the project: Mojarra (as in the fish - although La Mojarra is also an interesting linkage).

Ryan and Jason provide details on the why, but in a nutshell: "Mojarra" is is much shorter than "the JSF Production-Quality Reference Implementation from GlassFish".
下載網址 : http://javaserverfaces.java.net/

3. 建立 JSF 專案目錄

login/

├── index.xhtml
├── WEB-INF
│   ├── classes
│   │   └── com
│   │       └── corejsf

│   │           └── UserBean.class
│   ├── lib
│   │   └── javax.faces.jar
│   └── web.xml
└── welcome.xhtml

4. 編寫 JSF 網頁

我們從登入頁面開始，如圖1-1。

登入頁面

圖1-1

這是一個簡單的 HTML 登入網頁，只使用了少數的一些標籤，如程式碼 1-1。

程式碼 1-1 : login/web/index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
   <h:head>
      <title>Welcome</title>
   </h:head>
   <h:body>
      <h:form>
         <h3>Please enter your name and password.</h3>
         <table>
            <tr>
               <td>Name:</td>
               <td><h:inputText value="#{user.name}"/></td>
            </tr>
            <tr>
               <td>Password:</td>
               <td><h:inputSecret value="#{user.password}"/></td>
            </tr>
         </table>
         <p><h:commandButton value="Login" action="welcome"/></p>
      </h:form>
   </h:body>
</html>

XHTML，是一種類似於 HTML 同時支持 XML 的網頁寫法，在 JSF2.0 中，可以使用 .xhtml 做為網頁的副檔名。換句話說，一個 JSF 的網頁是類似於 HTML 的寫法，檔案格式為 XHTML。

h ，是一個標籤，在這個範例中，我們使用 JSF 中的 HTML 標籤庫。在第 4 行，先宣告 namespace ，第 5 行，宣告 h 標籤是關於 html 的進階標籤。 <h:head> <h:body> <h:form> 就如同 HEML 中的 <head> <body> <form>。

在 JSF 的標籤庫中，還有另一種標籤是和 HTML 沒有太大的相關性，core ，如果需要使用這個標籤，必須宣告另一個 namespace :

xmlns:f="http://java.sun.com/jsf/core"

你也可以自行定義標籤的名稱，而不使用 h 或是 f。如同 HTML，XHTML 中的標籤從 <標籤:xxx> 開始 </標籤:XXX> 結束。

<h:form> 會產生一個表單，<h:inputText> 是文字區，連結到 user 這個物件中的 name 屬性。<h:inputSecret> 輸入密碼區，連結到 user 這個物件的 password 屬性。這個部份，我們將在下一個段落 "撰寫 userBean.java (Managed Bean)" 中在討論。<h:commandButton> 會產生一個 "Login" 的提交按鈕，在 action 屬性中指定當這個按鈕被按下時，將會到那一個頁面。

所以，當使用者輸入了姓名、密碼，按下 "Login" 按鈕後，welcome.xhtml 檔案就會被展示出來，如圖 1-2。

圖 1-2

程式碼 1-2 : login/web/welcome.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
   <h:head>
      <title>Welcome</title>
   </h:head>
   <h:body>
      <h3>Welcome to JavaServer Faces, #{user.name}!</h3>
   </h:body>
</html>

你的第一個 JSF 範例，是由以下 3 個部份所組成:

@ 登入頁面和歡迎頁面，分別為 index.xhtml 及 welcome.xhtml。

@ 一個 Java Bean 管理使用者資料(name、password)，稱為 Managed Bean。Bean 是一個由 getter 和 setter 方法所組成的 Java 類別檔，這種類別檔用來取得和放入我們需要的屬性。程式碼 UserBean.java，如程式碼 1-3。

@ 配置檔，web.xml 及 beans.xml。

5.撰寫 userBean.java (Managed Bean)

程式碼 1-3 : login/src/java/com/corejsf/UserBean.java

package com.corejsf;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable {
    private String name;
    private String password;

    public String getName() {
      return this.name;
    }

    public void setName(String nameString) {
        this.name = nameString;
    }

    public String getPassword() {
        return this.password;
    }

    public void setPassword(String passWordString) {
        this.password = passWordString;
    }

}

6. 啟動 JSF 專案

在開始啟動 JSF 專案前，還有需要一個 web.xml，如程式碼 1_4。

程式碼 1_4 : login/web/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
      http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
   version="2.5">
   <servlet>
      <servlet-name>Faces Servlet</servlet-name>
      <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
   </servlet>
   <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>/faces/*</url-pattern>
   </servlet-mapping>
   <welcome-file-list>
      <welcome-file>faces/index.xhtml</welcome-file>
   </welcome-file-list>
   <context-param>
      <param-name>javax.faces.PROJECT_STAGE</param-name>
      <param-value>Development</param-value>
   </context-param>
</web-app>

檢查你的第一個 JSF 範例程式的檔案目錄（參考3.建立 JSF 專案目錄)，打包成 war 檔，佈署上 server。以 tomcat 為例。

在你的第一個範例程式 login 資料夾下，輸入

jar -cvfM0 tomcat路徑/webapps/login.war ./

圖 1-3

到 tomcat路徑/webapps 檢查看看剛剛佈署的 login.war。如下圖。

圖 1-4

啟動 Tomcat

tomcat路徑/bin/startup.sh

圖 1-5

在流灠器中輸入

http://localhost:8080

應該要看到 Apache Tomcat 頁面，如圖 1-6。

圖 1－6

7. 執行 JSF 專案
在流灠器中輸入

http://localhost:8080/login

圖 1-7

Java 憤怒鳥

2012年3月13日星期二