三、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 更新提供視覺的效果。
四、其他
因為本人現在使用的是 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 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
另外一個類似的組件是 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="
<%@ taglib uri="
<%@ taglib uri="
<%@ taglib uri="
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 特性的地方。當刪除一行時,頁面沒有感覺刷新,但表格發生了變化。