大魚

          RichFaces 配置及一些用法(web.xml)


          一、RichFaces (3.1.x) 技術(shù)需求

          1.JDK 1.5 或更高版本;

          2.支持的 JSF 實(shí)現(xiàn):
          Sun JSF 1.1 RI - 1.2
          MyFaces 1.1.1 - 1.1.5
          Facelets JSF 1.1.1 - 1.2

          3.支持的應(yīng)用服務(wù)器:
          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


          二、安裝配置

          1.解壓下載的壓縮包文件,復(fù)制其中的“richfaces-api-3.1.0.jar”,“richfaces-impl-3.1.0.jar”,“richfaces-ui-3.1.0.jar”文件到應(yīng)用程序 "WEB-INF/lib" 目錄下。

          2.添加如下內(nèi)容到應(yīng)用程序“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.添加如下幾行到應(yīng)用程序 JSP 頁面中:
          <%@ taglib uri=" <%@ taglib uri="

          對于 XHTML 頁面:
          <xmlns:a4j="
          <xmlns:rich="


          三、web.xml 中的 Richfaces 參數(shù)

          I、初始化參數(shù)(<context-param>)
          1.org.richfaces.SKIN
          默認(rèn)值:DEFAULT

          其它八種預(yù)定義的皮膚:
          DEFAULT
          plain
          emeraldTown
          blueSky
          wine
          japanCherry
          ruby
          classic
          deepMarine

          其值為在應(yīng)用中使用的皮膚的名字。其值可用一個(gè)精確(大小寫)的字符串做為皮膚名字,或指向一個(gè)字符串屬性的 EL 表達(dá)式(#{...}),或 org.richfaces.framework.skin 類型的一個(gè)屬性。

          2.org.ajax4jsf.LOGFILE
          默認(rèn)值:none

          這是一個(gè)指向應(yīng)用程序或容器日志文件的 URL (如果有日志文件的話)。如果設(shè)置了這個(gè)參數(shù),那么日志文件的內(nèi)容將會作為一個(gè)調(diào)試錯(cuò)誤頁面在框架(iframe)窗口中顯示。

          3.org.ajax4jsf.VIEW_HANDLERS
          默認(rèn)值:none

          這是一個(gè)由逗號分隔的自定義 ViewHandler 實(shí)例的序列,用于插入到 Handlers 鏈路上。Handlers 按照給定的順序被插入到 RichFaces viewhandlers 之前。例如,在 facelets 應(yīng)用程序中,這個(gè)參數(shù)必須包含 com.sun.facelets.FaceletViewHandler,來代替在 faces-onfig.xml 文件中的聲明。

          4.org.ajax4jsf.CONTROL_COMPONENTS
          默認(rèn)值:none

          這是一個(gè)逗號分隔的名字序列,用于將一個(gè)組件作為一個(gè)特殊的控制情形,例如資源文件加載器,別名(alias)bean 組件等等。這是一個(gè)從 COMPONENT_TYPE 靜態(tài)屬生反射得到的一個(gè)組件類型。對于這樣類型組件的編碼方法常常在呈現(xiàn)的 Ajax 響應(yīng)中被調(diào)用,盡管這個(gè)組件不在被更新部分中。

          5.org.ajax4jsf.ENCRYPT_RESOURCE_DATA
          默認(rèn)值:false

          為了生成的資源,例如加密生成的數(shù)據(jù),它會在資源的 URL 上被編碼加密。例如,URL 指向一個(gè)由 mediaOutput 組件生成的圖片,而 mediaOutput 組件包含一個(gè)生成方法的名字,那么對于一個(gè)黑客的攻擊來說,他很可能創(chuàng)建一個(gè)對于任何 JSF baked beans 或其它屬性的請求。為了避免這樣的攻擊,在重要的應(yīng)用程序中設(shè)置這個(gè)參數(shù)為“true”(應(yīng)用于 JRE > 1.4)。

          6.org.ajax4jsf.ENCRYPT_PASSWORD
          默認(rèn)值:random

          用于資源數(shù)據(jù)加密的一個(gè)密碼。如果沒有設(shè)置,將使用一個(gè)隨機(jī)的密碼。

          7.org.ajax4jsf.COMPRESS_SCRIPT
          默認(rèn)值:true

          不允許框架重新格式化 JavaScript 文件(使其不利于調(diào)試)

          II、org.ajax4jsf.Filter 初始化參數(shù)
          1.log4j-init-file

          這是一個(gè)指向 log4j.xml 配置文件的路徑(相對于應(yīng)用程序上下文),log4j.xml 可用于創(chuàng)建每個(gè)應(yīng)用程序的自定義日志信息。

          2.enable-cache
          默認(rèn)值:true

          啟用框架所生成資源(JavaScript,CSS,images,等等)的緩存。為了調(diào)試開發(fā)自定義的 JavaScript 或 Style(css) 目的,應(yīng)避免在瀏覽器中使用舊的緩存數(shù)據(jù)。

          3.forceparser
          默認(rèn)值:true

          通過一個(gè) HTML 語法檢查器強(qiáng)制解析每一個(gè) JSF 頁面。如果為“false”,只有 Ajax 響應(yīng)才被語法檢查器解析且被轉(zhuǎn)換為規(guī)范的 XML。設(shè)置為“false”除了提高了性能,還為 Ajax 更新提供視覺的效果。


          四、其他

          因?yàn)楸救爽F(xiàn)在使用的是 Myfaces,所以下面列出了有關(guān) Myfaces 與 RichFaces 集成的問題:

          問題在于 web.xml 文件中所定義的多個(gè)不同的過濾器之間存在沖突。為了避免這些問題,RichFaces 過濾器在配置文件中的位置必須被定義在其它過濾器之上。

          當(dāng)使用 MyFaces + Seam 時(shí),還有其它問題。如果使用這個(gè)組合,那么應(yīng)該在 <f:view> 標(biāo)簽內(nèi)部使用 <a4j:page> 標(biāo)簽,然后再在 <a4j:page> 標(biāo)簽中包含其它內(nèi)容,因?yàn)?Myfaces 中的 <f:view> 實(shí)現(xiàn)存在一些問題。

          這個(gè)問題可能在不久的將來被攻克。


          RichFaces 3.1.3 發(fā)布了, 相關(guān)主要改動介紹如下: from
          http://in.relation.to/Bloggers/RichFaces313Released

          Updated - 添加了<rich:orderingList /> 組件, calendar組件添加了locale設(shè)置

          RichFaces 開發(fā)小組發(fā)布了 RichFaces 3.1.3.GA. 這是自從 3.1.0以后的第一個(gè)發(fā)布版本,包含了一些新的組件(也包含3.1.1 和3.1.2中的bug 修復(fù)),因此這里我想著重介紹下主要的改進(jìn)地方.

          Time Picker

          RichFaces timepicker 漂亮的地方是和calendar control集成了 - 你可以很容易的為 date, time or date and time 字段提供一個(gè)圖形輸入控件.這是很容易使用的, 僅僅綁定該組件到模型上就可以了:
          <rich:calendar value="#{flight.departureDate}"
                         locale="#{locale}"
                         datePattern="dd/M/yy hh:mm" />
          就如你看到的一樣, 她還是完全國際化的呢!
          Controlling one component from another

          當(dāng)一個(gè)js事件在當(dāng)前的控件上觸發(fā)時(shí),<rich:componentControl /> 允許你再另外一個(gè)組件上觸發(fā)一個(gè)動作. 這是非常強(qiáng)大的功能,所以可能很難理解. 下面我們來看個(gè)簡單的例子:這里我們有個(gè)modal panel (a bit like a css/div based popup), 我們想從頁面上的其他地方來啟動這個(gè)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>

          不用調(diào)用一些js代碼了, 我們只要再link上面添加一個(gè)component controller,然后告訴她在什么組件上執(zhí)行什么動作就可以了.

          <rich:componentControl /> 可以做的不只這些 - 詳細(xì)情況請參考 online demo .

          Shuttle list

          這是個(gè)很不錯(cuò)的控件, 我很贊賞RichFaces guys,當(dāng)然這也很容易使用:

           

           


          <rich:listShuttle sourceValue="#{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

          另外一個(gè)類似的組件是 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 已經(jīng)有組件來顯示 menu bar了,現(xiàn)在在 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>
          我們添加了一個(gè)上下文右鍵菜單到<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 創(chuàng)建 Web 應(yīng)用
           
           
           
          文檔選項(xiàng)
            
          打印本頁
            
          將此頁作為電子郵件發(fā)送
            
          樣例代碼

          級別: 初級
          周 進(jìn)光 (zhoujinguang@yahoo.com.cn), 軟件工程師, 舜聯(lián)軟件科技
          2007 年 11 月 30 日
          本文簡要介紹如何運(yùn)用 Richfaces/A4J 來構(gòu)建 JSF 應(yīng)用,包括如何定義配置文件、控件使用等。
          概念介紹
          JSF 和 Ajax 概念大家一定不陌生,二者結(jié)合起來衍生出 A4J(Ajax4JSF)。其目的就是將 Ajax 的功能集成到 JSF 組件中去。后來 JBoss 收購 A4J 后,又將其集成到 RichFaces 中,不但豐富了控件庫和還添加了新功能。現(xiàn)在 RichFaces 已經(jīng)是一個(gè)具有 Ajax 和 JSF 特性 的 Web 框架。對開發(fā)人員來說,只要按照 JSF 的組件規(guī)范來組織頁面,免去了書寫或調(diào)用龐雜的 JavaScript 代碼或庫,就能達(dá)到夢寐以求的 Ajax 效果 ---- 可以只更新局部內(nèi)容而不用刷新整個(gè)頁面,增強(qiáng)了用戶體驗(yàn)。
           
          請?jiān)L問 Ajax 技術(shù)資源中心,這是有關(guān) Ajax 編程模型信息的一站式中心,包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。

             訂閱 Ajax 相關(guān)文章和教程的 RSS 提要

          樣例
          下面就舉一個(gè)簡單的例子來說明如何使用 Richfaces。該例是一個(gè)對列表的編輯,實(shí)現(xiàn)對數(shù)據(jù)的修改/刪除/添加,主要用到了 rich:dataTable 控件。如下圖示:

          圖 1. 樣例
           
          Jar 包
          開發(fā) RichFaces 應(yīng)用,除了 RichFaces 的 Jar 文件外,還需用到 Jsf,jakatar-commons 以及 log4j 等 Jar 包。本例中用到的 RichFaces 的版本為 3.1.0, Jsf 采用 Apache MyFaces 1.1.5。詳細(xì) Jar 包列表如下圖:

          圖 2. Jar 包清單
           
          類圖
          JSF 需要把頁面數(shù)據(jù)和操作對象化,通過 component 來封裝。這里有兩個(gè)類,其中 Bean 為控制類,定義響應(yīng)用戶點(diǎn)擊按鈕的事件方法,并作為連接視圖和數(shù)據(jù)層的橋梁。 Person 為數(shù)據(jù)類,用來封裝頁面數(shù)據(jù)。它們之間關(guān)系參見下圖:

          圖 3. 類圖
           
          配置文件
          Java 的 Web 運(yùn)用一般通過 War 的形式發(fā)布,其中需要 web.xml 作為應(yīng)用的配置文件。RichFaces 要求在該配置文件中除了通常的 JSF Servlet 定義外,再加上一個(gè) RichFaces 的過濾器就行了。下面是樣例配置說明。
          web.xml 文件

          圖 4. web.xml 配置
           
          faces-config.xml 文件
          按照 JSF 要求,需要配置 faces-config.xml 文件,如下圖所示:

          圖 5. faces-config.xml 配置
           
          代碼
          這里著重介紹視圖 JSP 頁面的編碼。首先申明所需的 taglib,如下:
          <%@ taglib uri=" <%@ taglib uri=" <%@ taglib uri=" <%@ taglib uri="

          f,h 用來引用 JSF 的控件,a4j 和 rich 用來引用 Ajax4JSF 和 RichFaces 控件。
          先建立 a4j:form,并將 rich:dataTable 放在里面。dataTable 作為數(shù)據(jù)顯示的載體。
          <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 屬性來把動作執(zhí)行的結(jié)果來刷新整個(gè) dataTable。這就是 richfaces 體現(xiàn) ajax 特性的地方。當(dāng)刪除一行時(shí),頁面沒有感覺刷新,但表格發(fā)生了變化。

          posted on 2009-09-17 11:18 大魚 閱讀(1225) 評論(0)  編輯  收藏 所屬分類: richfaces


          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 徐闻县| 东安县| 九台市| 吉林省| 罗山县| 清苑县| 安阳县| 儋州市| 渝北区| 黔南| 大城县| 黄冈市| 保康县| 冷水江市| 柳林县| 措美县| 长沙县| 若羌县| 登封市| 南漳县| 西平县| 陆丰市| 航空| 碌曲县| 双柏县| 奉贤区| 西贡区| 余姚市| 兴义市| 博野县| 高青县| 涪陵区| 西城区| 富锦市| 沅陵县| 鄯善县| 澜沧| 台安县| 山西省| 静海县| 连山|