From Gossip@caterpillar

Spring Gossip: 第一個 JSF 程式

JSF的實作參考檔案可以至http://java.sun.com/j2ee/javaserverfaces/download.html進行下載。

JSF是一個技術標準，各個廠商可以根據標準的規範來進行自己的實作版本，Sun網站上提供的是Sun公司的實作參考版本。

對於要實作的第一個JSF程式，將使用到您下載回來的jsf-impl.jar與jsf-api.jar，另外JSF需要使用到JSTL的API，因而您需要JSTL的jstl.jar與standard.jar，除此之外，您還需要commons-digester.jar、commons- collections.jar、commons-beanutils.jar等檔案，總計您所需要的.jar如下所示：

jsf-impl.jar
jsf-api.jar
jstl.jar
standard.jar
commons-digester.jar
commons-collections.jar
commons-beanutils.jar

JSF基本上也是採用Web MVC架構，使用JSF時擔任前端控制器（Front controller）的是javax.faces.webapp.FacesServlet類別，您要在web.xml定義它，例如：

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	→ http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
	 version="2.4">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    
    <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>
</web-app>

在上面的定義中，將所有的".faces"的請求交由FaceServlet來處理，FaceServlet會喚起相對於請求網址的.jsp網頁，例如請求是/index.faces的話，則實際上會喚起/index.jsp網頁，完成以上的配置，您就可以開始使用JSF了，先來撰寫一個簡單的Bean類別：

User.java

package onlyfun.caterpillar;

public class User {
    private String name;
   
    public void setName(String name) {
        this.name = name;
    }
   
    public String getName() {
        return name;
    }
}

這個User類別只是個簡單的JavaBean，用以儲存使用者的請求參數值。JSF與Struts雖然都是Web MVC架構的實現，但兩者所偏重的並不相同，Struts著重的是控制物件的設計；JSF則著重於頁面流程的設計，也就是定義在何種條件成立下，上一個頁面與下一個頁面之間是如何連結，您可以在faces-config.xml中定義頁面流程，例如：

faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC
 "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
 "http://java.sun.com/dtd/web-facesconfig_1_0.dtd">

<faces-config>
    <navigation-rule>
        <from-view-id>/pages/index.jsp</from-view-id>
        <navigation-case>
            <from-outcome>login</from-outcome>
            <to-view-id>/pages/welcome.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
       
    <managed-bean>
        <managed-bean-name>user</managed-bean-name>
            <managed-bean-class>
                onlyfun.caterpillar.User
             </managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
</faces-config>

在<navigation-rule>標籤中定義了頁面流程，當頁面流程上一個頁面是來自<from-view-id>標籤中指定的頁面，並且請求中包括了<navigation-case>標籤中的<from-outcome>標籤指定的"login" 值時，則會將請求導向至<to-view-id>標籤中所指定的頁面。

在上面的定義中也可以看到，JSF也協助Bean物件的管理，只是功能上比Spring容器少了許多；在<managed-bean>標籤中可以管理Bean物件，可設定Bean物件的存活範圍為"session"，也就是使用者開啟瀏覽器與Web程式互動的會話階段期間，Bean都可以存在作用。

接下來要告訴網頁設計人員的資訊是，他們可以使用的Bean名稱，也就是<managed-bean-name>標籤中設定的"user"名稱，以及上面所定義的頁面流程，在使用頁面元件時需要設定這些值，例如網頁設計人員會撰寫以下的JSP網頁：

index.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<html>
    <head>
        <meta http-equiv="Content-Type" 
              content="text/html; charset=UTF-8">
        <title>第一個JSF程式</title>
    </head>
    <body>
    <f:view>
        <h:form>
            <h3>請輸入您的名稱</h3>
            名稱: <h:inputText value="#{user.name}"/><p>
            <h:commandButton value="送出" action="login"/>
        </h:form>
    </f:view>
    </body>
</html>

在上面的網頁中使用了JSF的"core"與"html"標籤庫，"core"是有關於UI元件的處理，而"html"則是有關於HTML的進階標籤。

當您要開始使用JSF元件時，這些元件一定要在<f:view>與</f:view>標籤之間；"html"標籤庫中幾乎都是與 HTML標籤相關的進階標籤，<h:form>會產生一個表單，使用<h:inputText>來顯示faces- config.xml定義檔中"user"這個Bean物件的"name"屬性，而<h:commandButton>會產生一個提交按鈕，在"action"屬性中之指定將根據faces-config.xml中定義的"login"頁面流程中前往welcome.jsp頁面，其設計如下：

welcome.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<html>
    <head>
        <meta http-equiv="Content-Type" 
              content="text/html; charset=UTF-8">
        <title>第一個JSF程式</title>
    </head>
    <body>
    <f:view>
        <h:outputText value="#{user.name}"/> 您好！
        <h3>歡迎使用 JavaServer Faces！</h3>
    </f:view>    
    </body>
</html>

<h:outputText>標籤可以取得"user"這個Bean物件的"name"屬性，這個屬性將包括先前index.jsp中所送出的請求參數值，而在這個網頁中則將之顯示出來。

有興趣的話，您可以在 JSF 學習筆記找到更多有關於JSF的介紹。