VIRGIN FOREST OF JAVA
不要埋头苦干,要学习,学习,再学习。。。。。
powered by R.Zeus
转自:http://www.javaworld.com.tw/confluence/pages/viewpage.action?pageId=2630

請至 JSF 官方網站的 下載區 下載參考實作,在下載壓縮檔並解壓縮之後,將其 lib 目錄下的 jar 檔案複製至您的Web應用程式的/WEB-INF/lib目錄下,另外您還需要 jstl.jar 與 standard.jar 檔案,這些檔案您可以在 sample 目錄下,解壓縮當中的一個範例,在它的/WEB-INF/lib目錄下找到,將之一併複製至您的Web應用程式的/WEB-INF/lib目錄下,您總共需要以下的檔案:
* jsf-impl.jar
    * jsf-api.jar
    * commons-digester.jar
    * commons-collections.jar
    * commons-beanutils.jar
    * jstl.jar
    * standard.jar

  接下來配置Web應用程式的web.xml,使用JSF時,所有的請求都透過FacesServlet來處理,您可以如下定義:


  • web.xml
web.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
 <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">
 
    <description>
        JSF Demo
    </description>
    <display-name>JSF Demo</display-name>
    <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>index.html</welcome-file>
    </welcome-file-list>
 </web-app>

  在上面的定義中,我們將所有.faces的請求交由FaceServlet來處理,FaceServlet會喚起相對的.jsp網頁,例如請求是/index.faces的話,則實際上會喚起/index.jsp網頁,完成以上的配置,您就可以開始使用JSF了。

先看看應用程式開發人員要作些什麼事,我們撰寫一個簡單的JavaBean:

UserBean.java
package onlyfun.caterpillar;

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

  這個Bean將儲存使用者的名稱,編譯好之後放置在/WEB-INF/classes下。

  接下來設計頁面流程,我們將先顯示一個登入網頁/pages/index.jsp,使用者填入名稱並送出表單,之後在/pages/welcome.jsp中顯示Bean中的使用者名稱與歡迎訊息。

  為了讓JSF知道我們所設計的Bean以及頁面流程,我們定義一個/WEB-INF/faces-config.xml:

faces-config.xml
<?xml version="1.0"?>
 <!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.UserBean
         </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>所指定的頁面。

  在<managed-bean>中我們可以統一管理我們的Bean,我們設定Bean物件的存活範圍是session,也就是使用者開啟瀏覽器與程式互動過程中都存活。

  接下來要告訴網頁設計人員的資訊是,他們可以使用的Bean名稱,即<managed-bean-name>中設定的名稱,以及上面所定義的頁面流程。

網頁設計人員

  首先網頁設計人員撰寫index.jsp網頁:

index.jsp
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 <%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
 <%@page contentType="text/html;charset=Big5"%> 
 <html>
 <head>
 <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的進階標籤。

  <f:view>與<html>有類似的作用,當您要開始使用JSF元件時,這些元件一定要在<f: view>與</f:view>之間,就如同使用HTML時,所有的標籤一定要在<html>與< /html>之間。

  html標籤庫中幾乎都是與HTML標籤相關的進階標籤,<h:form>會產生一個表單,我們使用<h: inputText>來顯示user這個Bean物件的name屬性,而<h:commandButton>會產生一個提交按鈕,我們在action屬性中指定將根據之前定義的login頁面流程中前往welcome.jsp頁面。

  網頁設計人員不必理會表單傳送之後要作些什麼,他只要設計好歡迎頁面就好了:

welcome.jsp
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
 <%@page contentType="text/html;charset=Big5"%> 
 <html>
 <head>
 <title>第一個JSF程式</title>
 </head>
 <body>
    <f:view>
        <h:outputText value="#{user.name}"/> 您好!
        <h3>歡迎使用 JavaServer Faces!</h3>
    </f:view>
 </body>
 </html>

  這個頁面沒什麼需要解釋的了,如您所看到的,在網頁上沒有程式邏輯,網頁設計人員所作的就是遵照頁面流程,使用相關名稱取出資料,而不用擔心實際上程式是如何運作的。

  接下來啟動Container,連接上您的應用程式網址,例如:http://localhost:8080/jsfDemo/pages/index.faces,填入名稱並送出表單,您的歡迎頁面就會顯示了。

posted on 2005-08-22 21:22 R.Zeus 阅读(701) 评论(1)  编辑  收藏 所属分类: JSF

FeedBack:
# re: JSF 入门
2006-08-25 16:11 | majin
sdfgsdfg  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: