richface1-3

RichFaces開發指南3.3.3

 

1  介紹

 

RichFaces是一個開源框架,它不藉助於JavaScript而增加Ajax能力到存在的JSF應用程序中。

 

RichFaces利用了JavaServer Faces框架,包括生命週期,驗證,轉換工具,以及靜態和動態的資源管理。具用內建Ajax 支持和高度可定製觀感的RichFaces組件能夠容易地被納入到JSF應用程序中。

 

RichFaces准許:

 

l    強化了整套JSF的好處,而且與Ajax一起工作。RichFaces完全集成到了JSF的生命週期內。雖然其它框架只給了你存取管理的beans的工具,而RichFaces在Ajax請求響應週期的時候,卻促進了動作和值改變的偵聽器,以及調用服務器邊的驗證和轉換。

l    增加了Ajax能力到存在的JSF應用程序中。框架提供了兩個組件庫(Core Ajax 和 UI)。Core庫設置Ajax功能到存在的頁面,所以不需要編寫任何JavaScript代碼或者用新的Ajax組件替換存在的組件。RichFaces啓用頁面範圍的Ajax支持,而不是傳統的組件範圍的支持,並且它給了在頁面上定義事件的機會。 一個事件調用一個Ajax請求,並且在由根據客戶端引發的事件的Ajax請求改變了在服務器上的數據之後,變成爲同步於JSF組件樹的頁面區域。

l             快速創建基於開箱即用的組件的複雜視圖。RichFaces UI庫包含組件,用於添加富裕用戶界面的功能到JSF應用程序。它擴展了RichFaces框架,包含了大量(不斷增長的)強大的富裕的Ajax可用的帶有廣泛皮膚支持的組件的集合。

l           利用內建Ajax支持編寫你自己的定製富裕組件。我們始終致力於組件開發包(CDK)的改善,它用於RichFaces UI庫的創建。CDK包括了一個代碼生成工具和一個使用了類似於JSP語法的模板工具。這些工具幫助避免了創建組件的常規流程。組件工廠就象一個運行良好的機器,允許創建一流的帶有Ajax功能的富裕組件,比用傳統編碼方式的手段創建的簡單組件要容易的多。

l            使用java類打包資源。除了它的核心,RichFaces的Ajax功能提供一個高級支持,用於不同的資源管理:圖片、JavaScript代碼和CSS樣式表。資源框架可以容易地使得你的資源連同你定製組件的代碼一起打包到jar文件中。

l            快速輕鬆地生成二進制資源。資源框架可以快速地生成圖象、聲音、Excel電子表格等等,因此,例如,使用“Java Graphics2D”庫熟悉的方法創建圖象成爲可能。

l           利用基於皮膚的技術,創建一個現代的富裕的用戶界面的觀感。RichFaces提供了一個可換膚的功能,它允許你容易定義和管理色彩方案,以及其他帶有命名皮膚參數幫助的UI參數。因此,可以從JSP代碼或JAVA代碼訪問這些皮膚參數(例如,調整基於UI文本部分生成的快速圖象)。RichFaces自帶大量的讓你着手的預定義皮膚,但是你也可以輕鬆地創建你自己的定製皮膚。

l          讓你同時測試和創建組件、動作、偵聽器和頁面。一個自動測試工具是在我們將來不久的發展藍圖中。這個工具會生成測試案例,用於你儘可能快地開發你的組件。測試框架不僅測試組件,而且也用於任何其他服務邊或者客戶端的包含JavaScript代碼的功能。此外,它不用部署測試應用程序到Servlet容器中就會做這一切。

 

RichFaces UI組件成爲了準備就緒開箱即用,因此,節約了開發者的時間,並且立刻得到上面提及的在網頁應用程序創建中的功能的好處。所以,可以更快、更輕鬆地獲得使用的經驗。


2 技術要求

 

開發RichFaces使用了一個開放的體系結構,可以最廣泛地兼容各種環境。

 

下面是你開始運行RichFaces 3.3.3需要的東西:

 

1 Java

2 JavaServer Faces

3 Java 應用程序服務器或servlet容器

4 瀏覽器(在客戶邊)

5 RichFaces框架

 

2.1          支持的java版本

 

1 JDK 1.5 或更高

 

2.2          支持的JavaServer Faces實現和框架

 

1 Sun JSF-RI - 1.2_x (1.2_14 recommended), 2.x

2 MyFaces 1.2.x (1.2.5 recommended), 2.x

3 Facelets 1.1.x

4 Seam 2.x

 

2.3          支持的服務器

 

1 Apache Tomcat 5.5 - 6.0

2 BEA WebLogic 9.1 - 10.0

3 Resin 3.1.x

4 Jetty 6.1.x

5 Sun Application Server 9 (J5EE)

6 Glassfish V2, V3

7 JBoss 4.2.x - 5

8 Websphere 7.0. 或更高

9 Geronimo 2.0或更高

 

2.4          支持的瀏覽器

 

Linux環境:

1 Firefox 3.0或更高

2 Opera 9.5或更高r

 

Windows環境:

1 Firefox 3.0或更高

2 Google Chrome

3 Internet Explorer 6.0或更高

4 Opera 9.5或更高

5 Safari 3.0或更高

 

Mac OS環境

1 Safari 3.0或更高

2 Firefox 3.5或更高

 

這個列表是基於我們的用戶的報告構成。我們假設這個列表不完整,並在該列表缺少你的環境,但並不意味着不兼容.

 

我們感激你反饋有關不在該列表中的,但與RichFaces兼容的平臺和瀏覽器。幫助我們保持列表的更新


3           RichFaces入門

 

本章描述所有必要的行爲和應該做的配置,用於將RichFaces組件插入到一個JSF應用程序中。該描述依靠一個簡單JSF,它具有RichFaces應用程序從下載庫到在瀏覽器中運行應用程序的創建過程。在這裏描述的應用程序創建過程是通用的,並不依賴於使用的IDE。

 

3.1          下載RichFaces

 

最新的RichFaces組件發行版可以在JBoss社區下載: [http://labs.jboss.com/jbossrichfaces/downloads]。二進制文件(這裏是以*.bin.zip或 *.bin.tar.gz檔案形式上傳的)包含編譯的,準備使用的帶有基本皮膚集的RichFaces版本。

 

要開始使用RichFaces,在計算機文件系統創建一個名爲“RichFaces”的文件夾,下載並在這裏解壓二進制文件。

 

對那些希望下載並自己編譯RichFaces的人,在JBoss社區有一篇文章,它描述RichFaces的知識庫的結構概要[http://www.jboss.org/community/docs/DOC-11864],以及操作它的一些情況。

 

3.2          使用RichFaces的簡單的JSF應用程序

 

簡單的應用程序RichFaces Greeter,類似於hello-world應用程序,但有一點不同:RichFaces的世界會首先對用戶說:“Hello!”。

 

使用所有必要的庫創建標準的JSF 1.2項目;命名項目爲“Greeter”,並遵循描述。

 

3.2.1     添加RichFaces庫到項目

 

去到早先解碼RichFaces二進制文件的文件夾,並打開lib文件夾。這個文件夾包含三個*.jar,它們是API,UI和實現庫。拷貝lib文件夾的jars“Greeter”JSF應用程序的WEB-INF/lib文件夾中。

 

[重要: 使用RichFaces的JSF應用程序假定下列包可用於項目中:commons-beanutils-1.7.0.jar, commons-collections-3.2.jar, commons-digester-1.8.jar, commons-logging-1.0.4.jar, jhighlight-1.0.jar

]

 

3.2.2     在web.xml中註冊RichFaces

 

在RichFaces的庫添加到項目內後,需要在web.xml中註冊它們。在web.xml添加下列行:

 

...

<!-- Plugging the "Blue Sky" skin into the project -->

<context-param>

   <param-name>org.richfaces.SKIN</param-name>

   <param-value>blueSky</param-value>

</context-param>

 

<!-- Making the RichFaces skin spread to standard HTML controls -->

<context-param>

      <param-name>org.richfaces.CONTROL_SKINNING</param-name>

      <param-value>enable</param-value>

</context-param>

 

<!-- Defining and mapping the RichFaces filter -->

<filter>

   <display-name>RichFaces Filter</display-name>

   <filter-name>richfaces</filter-name>

   <filter-class>org.ajax4jsf.Filter</filter-class>

</filter>

  

<filter-mapping>

   <filter-name>richfaces</filter-name>

   <servlet-name>Faces Servlet</servlet-name>

   <dispatcher>REQUEST</dispatcher>

   <dispatcher>FORWARD</dispatcher>

   <dispatcher>INCLUDE</dispatcher>

</filter-mapping>

...

 

有關如何操作RichFaces的皮膚的詳情見“換膚”章節。

 

web.xml最終結果如下:

 

<?xml version="1.0"?>

<web-app version="2.5"

                xmlns="http://java.sun.com/xml/ns/javaee"

                xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance

                xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/

javaee/web-app_2_5.xsd">

<display-name>Greeter</display-name>

  

<context-param>

   <param-name>javax.faces.STATE_SAVING_METHOD</param-name>

   <param-value>server</param-value>

</context-param>

  

<context-param>

   <param-name>org.richfaces.SKIN</param-name>

   <param-value>blueSky</param-value>

</context-param>

<context-param>

      <param-name>org.richfaces.CONTROL_SKINNING</param-name>

      <param-value>enable</param-value>

</context-param>

 

<filter>

   <display-name>RichFaces Filter</display-name>

   <filter-name>richfaces</filter-name>

   <filter-class>org.ajax4jsf.Filter</filter-class>

</filter>

<filter-mapping>

   <filter-name>richfaces</filter-name>

   <servlet-name>Faces Servlet</servlet-name>

   <dispatcher>REQUEST</dispatcher>

   <dispatcher>FORWARD</dispatcher>

   <dispatcher>INCLUDE</dispatcher>

</filter-mapping>

  

<listener>

   <listener-class>com.sun.faces.config.ConfigureListener</listener-class>

</listener>

  

<!-- Faces Servlet -->

<servlet>

   <servlet-name>Faces Servlet</servlet-name>

   <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

   <load-on-startup>1</load-on-startup>

</servlet>

<!-- Faces Servlet Mapping -->

<servlet-mapping>

   <servlet-name>Faces Servlet</servlet-name>

   <url-pattern>*.jsf</url-pattern>

</servlet-mapping>

  

<login-config>

   <auth-method>BASIC</auth-method>

   </login-config>

</web-app>

 

3.2.3     管理的bean

 

“RichFaces Greeter”應用程序需要一個管理的bean。在項目的JavaSource文件夾中的demo包中創建一個名爲user的管理的bean。代碼如下:

 

package demo;

 

public class user {

   private String name="";

   public String getName() {

      return name;

   }

   public void setName(String name) {

      this.name = name;

   }

}

 

3.2.4     在faces-cofig.xml註冊bean

 

接下來user bean應該在faces-config.xml文件中被註冊:

 

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

<faces-config version="1.2"

                    xmlns="http://java.sun.com/xml/ns/javaee"

                    xmlns:xi="http://www.w3.org/2001/XInclude"

                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

                    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/

ns/javaee/web-facesconfig_1_2.xsd">

   <managed-bean>

      <description>UsernName Bean</description>

      <managed-bean-name>user</managed-bean-name>

      <managed-bean-class>demo.user</managed-bean-class>

      <managed-bean-scope>request</managed-bean-scope>

      <managed-property>

         <property-name>name</property-name>

         <property-class>java.lang.String</property-class>

         <value/>

      </managed-property>

   </managed-bean>

</faces-config>

 

3.2.5     RichFaces Greeter index.jsp

 

“RichFaces Greete”應用程序只有一個JSP頁面。在WEB CONTENT文件夾的根部創建index.jsp頁面,內容如下:

 

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

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

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

<!-- RichFaces tag library declaration -->

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>

<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

 

<html>

      <head>

            <title>RichFaces Greeter</title>

      </head>

      <body>

            <f:view>

                  <a4j:form>

                        <rich:panel header="RichFaces Greeter" style="width: 315px">

                              <h:outputText value="Your name: " />

                              <h:inputText value="#{user.name}" >

                                    <f:validateLength minimum="1" maximum="30" />

                              </h:inputText>

                              

                              <a4j:commandButton value="Get greeting" reRender="greeting" />

                              

                              <h:panelGroup id="greeting" >

                                    <h:outputText value="Hello, " rendered="#{not empty user.name}" />

                                    <h:outputText value="#{user.name}" />

                                    <h:outputText value="!" rendered="#{not empty user.name}" />

                              </h:panelGroup>

                        </rich:panel>

                  </a4j:form>

            </f:view>

      </body>

</html>

 

應用程序使用了三個RichFaces組件:<rich:panel>用來作爲信息的可視化容器;帶有內建Ajax 支持的<a4j:commandButton>允許在響應返回之後,動態地顯示一個問候;<a4j:form>幫助按鈕執行動作。

 

注意,RichFaces標籤庫應該在每個JSP頁面聲明。

 

對Facelets,你應該添加下列行,用於標籤庫的聲明:

 

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

                xmlns:ui="http://java.sun.com/jsf/facelets"

                xmlns:a4j="http://richfaces.org/a4j"

                xmlns:rich="http://richfaces.org/rich">

   ...

</ui:composition>

 

好了!在服務器上運行該應用程序。在你的瀏覽器中輸入: http://localhost:8080/Greeter/index.jsf,結果如下:

 

3.3          集成RichFaces到Maven項目

 

本節我們將告訴你如何使用Maven,創建一個帶有RichFaces的簡單的JSF應用程序。

 

首先,你需要確保你在本地機器上安裝了Maven。我們將在Tomcat 6.0服務器上運行該JSF應用程序,所以,如果你還沒有這樣估,請下載並安裝它。

 

現在我們可以繼續創建應用程序了。要創建項目結構,並用最小的內容填充它,我們將使用“maven-archetype-jsfwebapp” Maven原型,它是RichFaces CDK的一部分。

 

“maven-archetype-jsfwebapp”原型和項目自身要求提供額外的知識庫,即“http://snapshots.jboss.org/maven2/”和“http://repository.jboss.com/maven2/”。要使知識庫對Maven成爲可見的,最容易的方法是在“maven_installation_folder/conf/settings.xml”的<profiles>元素中創建一個配置。內容如下:

 

<profile>

    <id>jsf-app-profile</id>

    <repositories>

        <repository>

            <releases>

                <enabled>true</enabled>

            </releases>

            <snapshots>

                <enabled>true</enabled>

                <updatePolicy>always</updatePolicy>

            </snapshots>

            <id>snapshots.jboss.org</id>

            <name>Snapshot Jboss Repository for Maven</name>

            <url>http://snapshots.jboss.org/maven2/</url>

            <layout>default</layout>

        </repository>

        <repository>

            <releases>

                <enabled>true</enabled>

            </releases>

            <snapshots>

                <enabled>true</enabled>

                <updatePolicy>always</updatePolicy>

            </snapshots>

            <id>repository.jboss.com</id>

            <name>Jboss Repository for Maven</name>

            <url>http://repository.jboss.com/maven2/</url>

            <layout>default</layout>

        </repository>

    </repositories>

</profile>

 

當配置被添加後,你需要在<activeProfiles>元素中激活它,如下所示:

 

<activeProfiles>

  <activeProfile>jsf-app-profile</activeProfile>

</activeProfiles>

...

 

現在,我們有了使用“maven-archetype-jsfwebapp”原型創建項目的一切了。創建一個文件夾,它將收藏你的項目。然後,在它裏面運行下面的命令:

 

...

mvn  archetype:generate  -DarchetypeGroupId=org.richfaces.cdk  -DarchetypeArtifactId=maven-

archetype-jsfwebapp  -DarchetypeVersion=3.3.3-SNAPSHOT  -DgroupId=org.docs.richfaces  -

DartifactId=jsf-app

...

 

你可以調整命令的一些參數。

 

參數

 描述

-DgroupId

 定義用於管理的bean的包。

-DartifactId

 定義項目的名字

 

這個命令生成的一個JSF項目,結構如下:

 

jsf-app

|-- pom.xml

`-- src

    |-- main

    |   |-- java

    |   |   `-- org

    |   |       `-- docs

    |   |           `-- richfaces

    |   |               `-- Bean.java

    |   |-- resources

    |   `-- webapp

    |       |-- WEB-INF

    |       |   |-- faces-config.xml

    |       |   `-- web.xml

    |       |-- index.jsp

    |       `-- pages

    |           |-- index.jsp

    |           `-- index.xhtml

    `-- test

        `-- java

            `-- org

                `-- docs

                    `-- richfaces

                        `-- BeanTest.java

 

現在,進入“jsf-app”文件夾,它包含了一個項目描述符(pom.xml)。打開項目描述符,編輯並添加依賴關係到<dependencies>元素。如下所示:

 

...

<dependencies>

    <dependency>

        <groupId>junit</groupId>

        <artifactId>junit</artifactId>

        <version>3.8.1</version>

        <scope>test</scope>

    </dependency>

    <dependency>

        <groupId>javax.servlet</groupId>

        <artifactId>servlet-api</artifactId>

        <version>2.4</version>

        <scope>provided</scope>

    </dependency>

    <dependency>

        <groupId>javax.servlet</groupId>

        <artifactId>jsp-api</artifactId>

        <version>2.0</version>

        <scope>provided</scope>

    </dependency>

    <dependency>

        <groupId>jstl</groupId>

        <artifactId>jstl</artifactId>

        <version>1.1.2</version>

    </dependency>

    <dependency>

        <groupId>javax.servlet.jsp</groupId>

        <artifactId>jsp-api</artifactId>

        <version>2.1</version>

        <scope>provided</scope>

    </dependency>

    <dependency>

        <groupId>javax.faces</groupId>

        <artifactId>jsf-api</artifactId>

        <version>1.2_12</version>

    </dependency>

    <dependency>

        <groupId>javax.faces</groupId>

        <artifactId>jsf-impl</artifactId>

        <version>1.2_12</version>

    </dependency>

    <dependency>

        <groupId>javax.el</groupId>

        <artifactId>el-api</artifactId>

        <version>1.0</version>

        <scope>provided</scope>

    </dependency>

    <dependency>

        <groupId>el-impl</groupId>

        <artifactId>el-impl</artifactId>

        <version>1.0</version>

        <scope>provided</scope>

    </dependency>

    <dependency>

        <groupId>javax.annotation</groupId>

        <artifactId>jsr250-api</artifactId>

        <version>1.0</version>

    </dependency>

    <!-- RichFaces libraries -->

    <dependency>

        <groupId>org.richfaces.framework</groupId>

        <artifactId>richfaces-api</artifactId>

        <version>3.3.3-SNAPSHOT</version>

    </dependency>

    <dependency>

        <groupId>org.richfaces.framework</groupId>

        <artifactId>richfaces-impl</artifactId>

        <version>3.3.3-SNAPSHOT</version>

    </dependency>

    <dependency>

        <groupId>org.richfaces.ui</groupId>

        <artifactId>richfaces-ui</artifactId>

        <version>3.3.3-SNAPSHOT</version>

    </dependency>

</dependencies>

...

 

最後三個依賴關係添加RichFaces庫到項目。你現在可以用mvn install命令構建項目。

 

當看見“BUILD SUCCESSFUL”消息時,項目已被裝配,就可以導入IDE和運行在服務器上了。

 

使用命令mvn eclipse:eclipse -Dwtpversion=2.0,可以爲Eclipse IDE構建項目。

 

然後你可以導入項目到Eclipse。在導入Eclipse之後,你可以打開“jsf-app/src/main/

webapp/WEB-INF/web.xml”,並根據指南的“在web.xml中註冊RichFaces”的章節所列內容的配置它。

 

配置了項目,現在你可以開始使用RichFaces。打開“jsf-app/src/main/webapp/pages/index.jsp”文件,並添加標籤庫聲明:

 

...

<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

...

 

添加一些RichFaces組件到index.jsp頁面,如<rich:calendar>實例。如下所示:

 

...

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

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

<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<html>

    <head>

        <title>JSF Application with RichFaces built by Maven</title>

    </head>

    <body>

        <f:view>

        <rich:calendar />

        </f:view>

    </body>

</html>  

...

 

現在,在Tomcat服務器上運行應用程序,在你喜愛的瀏覽器中輸入“http://localhost:8080/jsf-app/”打開它。

3.4 相關的資源連接

 

The Photo Album Application [http://livedemo.exadel.com/photoalbum],使用RichFaces設計和開發。

 

Maven Resource Dependency Plugin Reference

[http://www.jboss.org/community/wiki/MavenResourceDependencyPluginReference],該文章討論了插件的配置和使用。

 

JBoss Developer Studio

 [https://www.redhat.com/apps/store/developers/jboss_developer_studio.html],帶有一個RichFaces組件框架的緊密集成。 下面的鏈接可能對那些已使用IDE和RichFaces開發應用程序的人和那些希望改善開發流程的人是有用的。

 

1 Rich 組件

 [http://download.jboss.org/jbosstools/nightly-docs/en/GettingStartedGuide/html/first_seam.html#rich_components] 。

“JBoss Developer Studio指南”中的“Rich組件”章節,描述瞭如何添加RichFaces組件進入到一個CRUD應用程序;

 

2 JBoss工具箱 [http://download.jboss.org/jbosstools/nightly-docs/en/jsf/html/palette.html] 。

 

“可視網頁工具參考指南”中的“JBoss工具箱”章節,描述了用於包含RichFaces應用程序的快速、方便的頁面製作處理的特定工具箱(連同JBDS一起)的優勢;

 

3 開發網頁應用程序的RichFaces工具包

 [http://docs.jboss.org/tools/movies/demos/rich_faces_demo/rich_faces_demo.htm]

 

這個視頻教程演示了與JBoss Developer Studio交互,同時又操作RichFaces的某些方面的內容;

1. 如何爲RichFaces配置Maven

 [http://docs.jboss.org/tools/movies/demos/rich_faces_demo/rich_faces_demo.htm]

 

該文章簡潔地討論了用於RichFaces的Maven配置;

1 RichFaces發佈步驟[http://www.jboss.org/community/docs/DOC-13446]

 

該文章描述了RichFaces發佈構建如何製作;

RichFaces installing and configuration

[http://www.jboss.org/community/wiki/RichFacesinstallingandconfiguration], 閱讀該文章會找到如何集成RichFaces和Trinidad ,以及在JBoss服務器上啓動RichFaces例子時可以發生的問題。


 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章