richface的配置、用法介紹和注意事項

richface的配置、用法介紹和注意事項1、RichFaces (3.1.x) 技術需求 
1.JDK 1.5 或更高版本； 
2.支持的 JSF 實現： 
Sun JSF 1.1 RI - 1.2 
MyFaces 1.1.1 - 1.1.5 
Facelets JSF 1.1.1 - 1.2 
3.支持的應用服務器： 
Apache Tomcat 4.1 - 6.0 
IBM WebSphere 5.1 - 6.0 
BEA WebLogic 8.1 - 9.0 
Oracle AS/OC4J 10.1.3 
Resin 3.0 
Jetty 5.1.X 
Sun Application Server 8 (J2EE 1.4) 
Glassfish (J2EE 5) 
JBoss 3.2 - 4.0.x 
Sybase EAServer 6.0.1 
4.支持的瀏覽器： 
Internet Explorer 5.5 - 7.0 
Firefox 1.5 - 2.0 
Opera 8.5 - 9.0 
Netscape 7.0 
Safari 2.0 

注意事項：不能用ajax4jsf1.1.1.jar,這個包會致使參數不匹配。 
2、安裝配置 
1.解壓下載的壓縮包文件，複製其中的「richfaces-api-3.1.0.jar」，「richfaces-impl-3.1.0.jar」，「richfaces-ui-3.1.0.jar」文件到應用程序 "WEB-INF/lib" 目錄下。 
2.添加以下內容到應用程序「WEB-INF/web.xml」文件中。 
<context-param> 
<param-name>org.richfaces.SKIN</param-name> 
<param-value>blueSky</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> 
3.添加以下幾行到應用程序 JSP 頁面中： 
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %> 
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %> 
對於 XHTML 頁面： 
<xmlns:a4j="http://richfaces.org/a4j" /> 
<xmlns:rich="http://richfaces.org/rich" /> 

3、web.xml 中的 Richfaces 參數 
I、初始化參數（<context-param>） 
1.org.richfaces.SKIN 
默認值：DEFAULT 
其它八種預約義的皮膚： 
DEFAULT 
plain 
emeraldTown 
blueSky 
wine 
japanCherry 
ruby 
classic 
deepMarine 
其值爲在應用中使用的皮膚的名字。其值可用一個精確（大小寫）的字符串作爲皮膚名字，或指向一個字符串屬性的 EL 表達式（#{...}），或 org.richfaces.framework.skin 類型的一個屬性。 
2.org.ajax4jsf.LOGFILE 
默認值：none 
這是一個指向應用程序或容器日誌文件的 URL （若是有日誌文件的話）。若是設置了這個參數，那麼日誌文件的內容將會做爲一個調試錯誤頁面在框架（iframe）窗口中顯示。 
3.org.ajax4jsf.VIEW_HANDLERS 
默認值：none 
這是一個由逗號分隔的自定義 ViewHandler 實例的序列，用於插入到 Handlers 鏈路上。Handlers 按照給定的順序被插入到 RichFaces viewhandlers 以前。例如，在 facelets 應用程序中，這個參數必須包含 com.sun.facelets.FaceletViewHandler，來代替在 faces-onfig.xml 文件中的聲明。 
4.org.ajax4jsf.CONTROL_COMPONENTS 
默認值：none 
這是一個逗號分隔的名字序列，用於將一個組件做爲一個特殊的控制情形，例如資源文件加載器，別名（alias）bean 組件等等。這是一個從 COMPONENT_TYPE 靜態屬生反射獲得的一個組件類型。對於這樣類型組件的編碼方法經常在呈現的 Ajax 響應中被調用，儘管這個組件不在被更新部分中。 
5.org.ajax4jsf.ENCRYPT_RESOURCE_DATA 
默認值：false 
爲了生成的資源，例如加密生成的數據，它會在資源的 URL 上被編碼加密。例如，URL 指向一個由 mediaOutput 組件生成的圖片，而 mediaOutput 組件包含一個生成方法的名字，那麼對於一個黑客的攻擊來講，他極可能建立一個對於任何 JSF baked beans 或其它屬性的請求。爲了不這樣的攻擊，在重要的應用程序中設置這個參數爲「true」（應用於 JRE > 1.4）。 
6.org.ajax4jsf.ENCRYPT_PASSWORD 
默認值：random 
用於資源數據加密的一個密碼。若是沒有設置，將使用一個隨機的密碼。 
7.org.ajax4jsf.COMPRESS_SCRIPT 
默認值：true 
不容許框架從新格式化 JavaScript 文件（使其不利於調試） 
II、org.ajax4jsf.Filter 初始化參數 
1.log4j-init-file 
這是一個指向 log4j.xml 配置文件的路徑（相對於應用程序上下文），log4j.xml 可用於建立每一個應用程序的自定義日誌信息。 
2.enable-cache 
默認值：true 
啓用框架所生成資源（JavaScript，CSS，images，等等）的緩存。爲了調試開發自定義的 JavaScript 或 Style(css) 目的，應避免在瀏覽器中使用舊的緩存數據。 
3.forceparser 
默認值：true 
經過一個 HTML 語法檢查器強制解析每個 JSF 頁面。若是爲「false」，只有 Ajax 響應才被語法檢查器解析且被轉換爲規範的 XML。設置爲「false」除了提升了性能，還爲 Ajax 更新提供視覺的效果。 

4、其餘 
由於本人如今使用的是 Myfaces，因此下面列出了有關 Myfaces 與 RichFaces 集成的問題： 
問題在於 web.xml 文件中所定義的多個不一樣的過濾器之間存在衝突。爲了不這些問題，RichFaces 過濾器在配置文件中的位置必須被定義在其它過濾器之上。 
當使用 MyFaces + Seam 時，還有其它問題。若是使用這個組合，那麼應該在 <f:view> 標籤內部使用 <a4j:page> 標籤，而後再在 <a4j:page> 標籤中包含其它內容，由於 Myfaces 中的 <f:view> 實現存在一些問題。 
這個問題可能在不久的未來被攻克。 

RichFaces 3.1.3 發佈了, 相關主要改動介紹以下: from http://in.relation.to/Bloggers/RichFaces313Released 
Updated - 添加了<rich:orderingList /> 組件, calendar組件添加了locale設置 
RichFaces 開發小組發佈了 RichFaces 3.1.3.GA. 這是自從 3.1.0之後的第一個發佈版本,包含了一些新的組件(也包含3.1.1 和3.1.2中的bug 修復),所以這裏我想着重介紹下主要的改進地方. 
Time Picker 
RichFaces timepicker 漂亮的地方是和calendar control集成了 - 你能夠很容易的爲 date, time or date and time 字段提供一個圖形輸入控件.這是很容易使用的, 僅僅綁定該組件到模型上就能夠了: 
<rich:calendar value="#{flight.departureDate}" 
               locale="#{locale}" 
               datePattern="dd/M/yy hh:mm" /> 
就如你看到的同樣, 她仍是徹底國際化的呢! 
Controlling one component from another 
當一個js事件在當前的控件上觸發時,<rich:componentControl /> 容許你再另一個組件上觸發一個動做. 這是很是強大的功能,因此可能很難理解. 下面咱們來看個簡單的例子:這裏咱們有個modal panel (a bit like a css/div based popup), 咱們想從頁面上的其餘地方來啓動這個panel: 
<rich:modalPanel id="panel" width="350" height="100"> 
  <f:facet name="header"> 
    <h:outputText value="Modal Panel" /> 
  </f:facet> 
  <h:outputText value="This panel is called using rich:componentControl"/> 
</rich:modalPanel> 
<h:outputLink value="#"> 
  Show Modal Panel 
  <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/> 
</h:outputLink> 
不用調用一些js代碼了, 咱們只要再link上面添加一個component controller,而後告訴她在什麼組件上執行什麼動做就能夠了. 
<rich:componentControl /> 能夠作的不僅這些 - 詳細狀況請參考 online demo . 
Shuttle list 
這是個很不錯的控件, 我很讚揚RichFaces guys,固然這也很容易使用: 



<rich:listShuttle sourcue="#{items.availableItems}" 
            targetValue="#{items.selectedItems}" 
            var="item" 
            sourceCaptionLabel="Available Items" 
            targetCaptionLabel="Currently Active Items"> 
  <rich:column width="18"> 
    <h:graphicImage value="#{item.icon}"/> 
  </rich:column> 
  <rich:column> 
    <h:outputText value="#{item.label}"/> 
  </rich:column> 
</rich:listShuttle> 
注意咱們是如何在lists 面板上添加其餘 rich 組件的. 
Notice how we've embedded other rich components to layout the lists! 
Orderable list 
另一個相似的組件是 orderable list. 使用起來也是很簡單的 





<rich:orderingList value="#{myMusic}" var="album"> 
  <rich:column> 
    <f:facet name="header"> 
      Song Name 
    </f:facet> 
    <h:outputText value="#{album.title}"/> 
  </rich:column> 
  <rich:column> 
    <f:facet name="header"> 
      Artist Name 
    </f:facet> 
    <h:outputText value="#{album.artist.name}" /> 
  </rich:column> 
</rich:orderingList> 
Context sensitive menu 
RichFaces 已經有組件來顯示 menu bar了,如今在 3.1.3又添加了右鍵菜單. 
<s:div id="flower"> 
  <h:graphicImage value="flower.jpg"/> 
  <rich:contextMenu event="oncontextmenu" 
                    attached="true" 
                    submitMode="none"> 
    <rich:menuItem value="Zoom In" 
                   onclick="enlarge();"/> 
    <rich:menuItem value="Zoom Out" 
                   onclick="decrease();"/> 
  </rich:contextMenu> 
</s:div> 
咱們添加了一個上下文右鍵菜單到<s:div /> 中. 
There's also 
Big improvements to Portal support (we are just finishing off support for Seam and RichFaces in a portlet) 
A system for customising how styles are loaded (one big lump, or on demand) 
Over 180 bug fixes (see the release notes) 
Congratulations to the RichFaces team! 

使用 Richfaces/Ajax4Jsf 建立 Web 應用 



文檔選項 
  
打印本頁 
  
將此頁做爲電子郵件發送 
  
樣例代碼 
級別： 初級 
周 進光 (zhoujinguang@yahoo.com.cn), 軟件工程師, 舜聯軟件科技 
2007 年 11 月 30 日 
本文簡要介紹如何運用 Richfaces/A4J 來構建 JSF 應用，包括如何定義配置文件、控件使用等。 
概念介紹 
JSF 和 Ajax 概念你們必定不陌生，兩者結合起來衍生出 A4J（Ajax4JSF）。其目的就是將 Ajax 的功能集成到 JSF 組件中去。後來 JBoss 收購 A4J 後，又將其集成到 RichFaces 中，不但豐富了控件庫和還添加了新功能。如今 RichFaces 已是一個具備 Ajax 和 JSF 特性 的 Web 框架。對開發人員來講，只要按照 JSF 的組件規範來組織頁面，免去了書寫或調用龐雜的 JavaScript 代碼或庫，就能達到求之不得的 Ajax 效果 ---- 能夠只更新局部內容而不用刷新整個頁面，加強了用戶體驗。 

請訪問 Ajax 技術資源中心，這是有關 Ajax 編程模型信息的一站式中心，包括不少文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這裏找到。 
   訂閱 Ajax 相關文章和教程的 RSS 提要 
樣例 
下面就舉一個簡單的例子來講明如何使用 Richfaces。該例是一個對列表的編輯，實現對數據的修改/刪除/添加，主要用到了 rich:dataTable 控件。以下圖示： 
圖 1. 樣例 

Jar 包 
開發 RichFaces 應用，除了 RichFaces 的 Jar 文件外，還需用到 Jsf，jakatar-commons 以及 log4j 等 Jar 包。本例中用到的 RichFaces 的版本爲 3.1.0, Jsf 採用 Apache MyFaces 1.1.5。詳細 Jar 包列表以下圖： 
圖 2. Jar 包清單 

類圖 
JSF 須要把頁面數據和操做對象化，經過 component 來封裝。這裏有兩個類，其中 Bean 爲控制類，定義響應用戶點擊按鈕的事件方法，並做爲鏈接視圖和數據層的橋樑。 Person 爲數據類，用來封裝頁面數據。它們之間關係參見下圖： 
圖 3. 類圖 

配置文件 
Java 的 Web 運用通常經過 War 的形式發佈，其中須要 web.xml 做爲應用的配置文件。RichFaces 要求在該配置文件中除了一般的 JSF Servlet 定義外，再加上一個 RichFaces 的過濾器就好了。下面是樣例配置說明。 
web.xml 文件 
圖 4. web.xml 配置 

faces-config.xml 文件 
按照 JSF 要求，須要配置 faces-config.xml 文件，以下圖所示： 
圖 5. faces-config.xml 配置 

代碼 
這裏着重介紹視圖 JSP 頁面的編碼。首先申明所需的 taglib，以下： 
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> 
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> 
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> 
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> 
f，h 用來引用 JSF 的控件，a4j 和 rich 用來引用 Ajax4JSF 和 RichFaces 控件。 
先創建 a4j:form，並將 rich:dataTable 放在裏面。dataTable 做爲數據顯示的載體。 
<rich:dataTable id="p" value="#{bean.people}" var="person" width="100%" 
     binding="#{bean.table}"> 
<f:facet name="header"> 
  <rich:columnGroup> 
      <rich:column> 
       <h:outputText value="name"/> 
      </rich:column> 
      <rich:column> 
       <h:outputText value="agender"/> 
      </rich:column> 
      <rich:column> 
       <h:outputText value="age"/> 
      </rich:column> 
      <rich:column> 
       <h:outputText value="address"/> 
      </rich:column> 
      <rich:column> 
       <h:outputText value="action"/> 
      </rich:column> 
  </rich:columnGroup> 
</f:facet> 

<rich:columnGroup> 
     <rich:column> 
         <h:outputText value="#{person.name}"/> 
     </rich:column> 
     <rich:column> 
         <h:outputText value="#{person.agender}"/> 
     </rich:column> 
     <rich:column> 
         <h:inputText id="age" value="#{person.age}"/> 
     </rich:column> 
     <rich:column> 
         <h:outputText value="#{person.address}"/> 
     </rich:column> 
     <rich:column> 
         <a4j:commandLink onclick="checkDel()" value="delete" 
                action="#{bean.del}" reRender="p"> 
             <a4j:actionparam name="rowIndex" value="#{bean.table.rowIndex}" 
                    assignTo="#{bean.curRow}"/> 
         </a4j:commandLink> 
     </rich:column> 
</rich:columnGroup> 

<f:facet name="footer"> 
  <rich:columnGroup> 
         <rich:column colspan="5"> 
            <h:outputText value="total is #{bean.table.rowCount} items"/> 
         </rich:column> 
        </rich:columnGroup> 
   </f:facet>       
     
</rich:dataTable> 
        
請注意 delete 按鈕，它的 Action 綁定到 Bean 的方法 del()。最神奇的地方是經過 reRender 屬性來把動做執行的結果來刷新整個 dataTable。這就是 richfaces 體現 ajax 特性的地方。當刪除一行時，頁面沒有感受刷新，但表格發生了變化。