RichFace標籤學習筆記
rich:componentControl 標籤和rich:ModolPanel標籤
示例：
<rich:modalPanel id="panel" width="350"height="100">
<f:facetname="header">
<h:panelGroup>
<h:outputText value="Modal Panel"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facetname="controls">
<h:panelGroup>
<h:graphicImage value="/images/modal/close.png"style="cursor:pointer" id="hidelink"/>
<rich:componentControl for="panel" attachTo="hidelink"operation="hide" event="
</h:panelGroup>
</f:facet>
<h:outputText value="Thispanel is called using Component ControlComponent"></h:outputText>
<br/>
<h:outputText value="Closurelink (X) works also through Component Control"></h:outputText>
</rich:modalPanel>
<h:outputLink value="#" id="link">
Show Modal Panel
<rich:componentControlfor="panel" attachTo="link" operation="show"event="
</h:outputLink>
ModolPanel效果：當點擊頁面中的某元素時，彈出一個類似關機效果的面板。
inputNumberSlider輸入數字滑竿
Panel:
帶標題欄的panel
它可以通過h:fecter標籤指定標題和底部。
PanelBar:
效果說明：該控件可以實現多個面板的摺疊效果，在每個面板的數據區域可以放入任何JSF標籤。並且面板的標題可以設定。
<rich:panelBar height="400" width="500">
<rich:panelBarItem
label="Write your own custom rich components with built-in AJAXsupport">
ComponentDevelopment Kit (CDK) is a design-time extension for Ajax4jsf. The CDK includes
</rich:panelBarItem>
<rich:panelBarItem
label="Package resources with the application's Java classes ">
In additionto its core, Ajax functionality of Ajax4jsf provides an advanced
support forthe diff
</rich:panelBarItem>
<rich:panelBarItemlabel="Easily generate images on-the-fly">
Resourceframework can generate images on-the-fly so that it becomes possible
to createimages using the familiar approach of the Java graphic2D library.
</rich:panelBarItem>
</rich:panelBar>
PanelMenu標籤:
<h:panelGrid columns="2" columnClasses="cols"width="100%">
<rich:panelMenu style="width:200px" mode="ajax"
iconExpandedGroup="disc"iconCollapsedGroup="disc"
iconExpandedTopGroup="chevronUp"iconGroupTopPosition="right"
iconCollapsedTopGroup="chevronDown"iconCollapsedTopPosition="right" >
<rich:panelMenuGrouplabel="Group 1">
<rich:panelMenuItem label="Item 1.1"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 1.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 1.2"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 1.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 1.3"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 1.3"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
<rich:panelMenuGrouplabel="Group 2">
<rich:panelMenuItem label="Item 2.1"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.2"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.3"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.3"/>
</rich:panelMenuItem>
<rich:panelMenuGroup label="Group 2.4">
<rich:panelMenuItem label="Item 2.4.1"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.4.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.4.2"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.4.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.4.3"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.4.3"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
<rich:panelMenuItem label="Item 2.5"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.5"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
<rich:panelMenuGrouplabel="Group 3">
<rich:panelMenuItem label="Item 3.1"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 3.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 3.2"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 3.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 3.3"action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 3.3"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
</rich:panelMenu>
<rich:panelbodyClass="rich-laguna-panel-no-header">
<a4j:outputPanelajaxRendered="true">
<h:outputText value="#{panelMenu.current} selected"id="current"/>
</a4j:outputPanel>
</rich:panel>
</h:panelGrid>
progressBar標籤 :
<h:form>
<a4j:outputPanelid="progressPanel">
<rich:progressBar value="#{progressBarBean.currentValue}"
interval="2000" label="#{progressBarBean.currentValue} %"
enabled="#{progressBarBean.enabled}" minValue="-1"maxValue="100"
reRenderAfterComplete="progressPanel">
<f:facet name="initial">
<br />
<h:outputText value="Process doesn't started yet" />
<a4j:commandButton action="#{progressBarBean.startProcess}"
value="Start Process" reRender="progressPanel"
rendered="#{progressBarBean.buttonRendered}"
style="margin: 9px 0px 5px;" />
</f:facet>
<f:facet name="complete">
<br />
<h:outputText value="Process Done" />
<a4j:commandButton action="#{progressBarBean.startProcess}"
value="Restart Process" reRender="progressPanel"
rendered="#{progressBarBean.buttonRendered}"
style="margin: 9px 0px 5px;" />
</f:facet>
</rich:progressBar>
</a4j:outputPanel>
</h:form>
Separator標籤：
<p>This is default separator:</p>
<rich:separator/>
<p>This is tick 75% beveled separator aligned to thecenter:</p>
<rich:separator lineType="beveled"height="8" width="75%"/>
<p>Here is more examples of different linetypes:</p>
<rich:separator height="2"lineType="dotted"/><br/>
<rich:separator height="2"lineType="dashed"/><br/>
<rich:separator height="4"lineType="double"/><br/>
<rich:separator height="2"lineType="solid"/><br/>
simpleTogglePanel 標籤：
<rich:simpleTogglePanel switchType="client"label="Add AJAX capability to existing JSF applications">
The framework is implemented byusing a component library. The library
set Ajax functionality into existingpages, so there is no need to write
any JavaScript code or to replace existingcomponents with new Ajax one.
Ajax4jsf enables page-wide Ajaxsupport instead of the traditional
component-wide support and it givesthe opportunity to define the event
on the page. An event invokes anAjax request and areas of the page
which are synchronized with the JSFComponent Tree after changing the
data on the server by Ajax requestin accordance with events fired on
theclient.
</rich:simpleTogglePanel>
解釋：點擊該panel的標題欄將隱藏、顯示內容部分。其中的switchType爲client將無刷新的隱藏顯示內容部分。該控件的標題欄不能添加圖片，樣式不可以自己設定。
tablePanel標籤：
<rich:tabPanel>
<rich:tablabel="First">
Here is tab#1
</rich:tab>
<rich:tablabel="Second">
Here is tab#2
</rich:tab>
<rich:tablabel="Third">
Here is tab#3
</rich:tab>
</rich:tabPanel>
<br/><br/>
<p>Here is an example of tab panel switched in"ajax" style. Second tab is disabled.</p>
<rich:tabPanel switchType="ajax">
<rich:tablabel="First">
Here is tab#1
</rich:tab>
<rich:tablabel="Second" disabled="true">
Here is tab#2
</rich:tab>
<rich:tablabel="Third">
Here is tab#3
</rich:tab>
</rich:tabPanel>
<br/><br/>
<p>Here is an example of tab panel switched completelyon client.</p>
<rich:tabPanel switchType="client">
<rich:tablabel="First">
Here is tab#1
</rich:tab>
<rich:tablabel="Second">
Here is tab#2
</rich:tab>
<rich:tablabel="Third">
Here is tab#3
</rich:tab>
</rich:tabPanel>
解釋：tabPanel 的switchType有server client ajax三種。Server會產生頁面的刷新，ajax會異步的刷新，client則不會跟服務器進行交互。
Tool Bar標籤：
<style>
.barsearch {
height:14px;
width:100px;
}
.barsearchbutton {
border-width:1px;
background-color:#{a4jSkin.generalBackgroundColor};
}
</style>
<h:form>
<rich:toolBarheight="34" itemSeparator="line">
<rich:toolBarGroup>
<h:graphicImage id="edit" value="/images/icons/edit.gif"/>
<h:outputLabel value="Edit" for="edit" />
</rich:toolBarGroup>
<rich:toolBarGroup>
<h:graphicImage id="find" value="/images/icons/find.gif"/>
<h:outputLabel value="Find" for="find" />
</rich:toolBarGroup>
<rich:toolBarGroup>
<h:graphicImage id="filter"value="/images/icons/filter.gif" />
<h:outputLabel value="Filter" for="filter" />
</rich:toolBarGroup>
<rich:toolBarGroup location="right">
<h:inputText styleClass="barsearch" />
<h:commandButton styleClass="barsearchbutton" value="Search" />
</rich:toolBarGroup>
</rich:toolBar>
</h:form>
ToolTip標籤：
<style>
.tooltip {
background-color:#{richSkin.generalBackgroundColor};
border-width:3px;
padding:10px;
}
.tooltip-text {
width:350px;
height:80px;
cursor:arrow;
border-width:2px;
text-align:center;
display:table-cell;
vertical-align: middle;
}
.tooltipData {
font-weight:bold;
}
</style>
<h:panelGrid columns="2">
<rich:panel id="sample1"styleClass="tooltip-text"bodyClass="rich-laguna-panel-no-header">
<p>
Here you cansee <b>default client-side</b> tool-tip
</p>
<rich:toolTip>
<spanstyle="white-space:nowrap">
This tool-tip content was <strong>pre-rendered</strong> to thepage.<br/>
The look of this tool-tip is 100% defined by skin.
</span>
</rich:toolTip>
</rich:panel>
<rich:panel id="sample2"styleClass="tooltip-text"bodyClass="rich-laguna-panel-no-header">
<p>
Thistool-tip will <b>follow mouse</b>. Also this tool-tip has a<b>delay 0.5 sec</b>,
so bepatient!
</p>
<rich:toolTipfollowMouse="true" direction="top-right"showDelay="500" styleClass="tooltip">
<span style="white-space:nowrap">
This tool-tip content also <strong>pre-rendered</strong> to thepage.<br/>
However, the look of this tool-tip is customized<br/>
by styleClass attribute.
</span>
</rich:toolTip>
</rich:panel>
<h:form>
<rich:panel id="sample3"styleClass="tooltip-text"bodyClass="rich-laguna-panel-no-header">
<p>
Thistool-tip rendered on server <b>in separate request</b>.
</p>
<rich:toolTipdirection="top-right" mode="ajax"styleClass="tooltip" layout="block">
<f:facetname="defaultContent">
<strong>Wait...</strong>
</f:facet>
<span style="white-space:nowrap">This tool-tipcontent was <strong>rendered on server</strong>
</span>
<h:panelGrid columns="2">
<h:outputText style="white-space:nowrap"value="tooltips requested:" />
<h:outputText value="#{toolTipData.tooltipCounter}"styleClass="tooltipData" />
</h:panelGrid>
</rich:toolTip>
</rich:panel>
</h:form>
<h:form>
<rich:panel id="sample4"styleClass="tooltip-text"bodyClass="rich-laguna-panel-no-header">
<p>
Thistool-tip will be <b>activated on mouse click</b>. It also has a<b>bottom-left</b> position.
</p>
<rich:toolTipshowEvent=" direction="bottom-left"mode="ajax" styleClass="tooltip"layout="block">
<f:facetname="defaultContent">
<strong>Wait...</strong>
</f:facet>
<span style="white-space:nowrap">This tool-tipcontent was <strong>rendered onserver</strong><br/></span>
<h:panelGrid columns="2">
<h:outputText style="white-space:nowrap"value="tooltips requested:" />
<h:outputText value="#{toolTipData.tooltipCounter}"styleClass="tooltipData" />
</h:panelGrid>
</rich:toolTip>
</rich:panel>
</h:form>
</h:panelGrid>
Calendar標籤：
右邊控件綁定been層中的屬性都是Calendar的一系列屬性。
<style type="text/css">
.ecol1 { vertical-align: top;padding-right : 25px }
.ecol2 { vertical-align: top;border-left: #ACBECE 1px solid; padding-left : 10px }
.rich-calendar-tool-btn{
font-family:Arial, Verdana;
}
</style>
<h:form>
<h:panelGrid id="panel"columns="2" columnClasses="ecol1, ecol2">
<a4j:outputPanel id="calendar" layout="block">
<rich:calendar value="#{calendarBean.selectedDate}"
locale="#{calendarBean.locale}"
popup="#{calendarBean.popup}"
datePattern="#{calendarBean.pattern}"
showApplyButton="#{calendarBean.showApply}"cellWidth="24px" cellHeight="22px"style="width:200px"/>
</a4j:outputPanel>
<h:panelGrid columns="2">
<h:outputText value="Popup Mode:" />
<h:selectBooleanCheckbox value="#{calendarBean.popup}">
<a4j:support event=" reRender="calendar"/>
</h:selectBooleanCheckbox>
<h:outputText value="Apply Button:" />
<h:selectBooleanCheckbox value="#{calendarBean.showApply}">
<a4j:support event=" reRender="calendar"/>
</h:selectBooleanCheckbox>
<h:outputText value="Select Locale" />
<h:selectOneRadio value="en/US"valueChangeListener="#{calendarBean.selectLocale}">
<a4j:support event=" reRender="calendar"/>
<f:selectItem itemLabel="US" itemValue="en/US"/>
<f:selectItem itemLabel="DE" itemValue="de/DE"/>
<f:selectItem itemLabel="FR" itemValue="fr/FR"/>
<f:selectItem itemLabel="RU" itemValue="ru/RU"/>
</h:selectOneRadio>
<h:outputText value="Select Date Pattern:"/>
<h:selectOneMenu value="#{calendarBean.pattern}">
<a4j:support event="onchange" reRender="calendar"/>
<f:selectItem itemLabel="d/M/yy HH:mm" itemValue="d/M/yyHH:mm"/>
<f:selectItem itemLabel="dd/M/yy hh:mm a" itemValue="dd/M/yyhh:mm a"/>
<f:selectItem itemLabel="d/MMM/y"itemValue="d/MMM/y"/>
<f:selectItem itemLabel="MMM d, yyyy" itemValue="MMM d,yyyy"/>
</h:selectOneMenu>
</h:panelGrid>
</h:panelGrid>
</h:form>
comboBox 標籤：
該控件可以實現google搜索框的效果，唯一不同的地方就是右邊有一個向下的箭頭。
File Upload控件：
說明：在建立的頁面中發現不到該標籤。
Inplace Input標籤：
SuggestionBox標籤：
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:form id="suggestionbox_form">
<p>
Suggestion Box will suggest you states capitals names. Comma and space could beused as suggestions separators."
</p>
<h:inputText value="#{capitalsBean.capital}" id="text"/>
<rich:suggestionbox id="suggestionBoxId" for="text"tokens=",["
rules="#{suggestionBox.rules}"
suggestionAction="#{capitalsBean.autocomplete}"var="result"
fetchValue="#{result.name}" rows="#{suggestionBox.intRows}"
first="#{suggestionBox.intFirst}"
minChars="#{suggestionBox.minchars}"
shadowOpacity="#{suggestionBox.shadowOpacity}"
border="#{suggestionBox.border}"width="#{suggestionBox.width}"
height="#{suggestionBox.height}"
shadowDepth="#{suggestionBox.shadowDepth}"
cellpadding="#{suggestionBox.cellpadding}"
nothingLabel="No capitals found" columnClasses="center">
<h:column>
<f:facet name="header">
<h:outputText value="123"></h:outputText>
</f:facet>
<h:graphicImage value="#{result.stateFlag}" />
</h:column>
<h:column>
<h:outputText value="#{result.name}" />
</h:column>
<h:column>
<h:outputText value="#{result.state}"style="font-style:italic"/>
</h:column>
</rich:suggestionbox>
<rich:spacerheight="30px"/>
<h:panelGridcolumns="2" border="0" >
<h:outputText value="Border" />
<rich:inputNumberSlider minValue="1" maxValue="5"
value="#{suggestionBox.border}">
<a4j:support event="onchange" reRender="suggestionBoxId"/>
</rich:inputNumberSlider>
<h:outputText value="Width" />
<rich:inputNumberSlider minValue="150" maxValue="350"step="50"
value="#{suggestionBox.width}">
<a4j:support event="onchange" reRender="suggestionBoxId"/>
</rich:inputNumberSlider>
<h:outputText value="Height" />
<rich:inputNumberSlider minValue="100" maxValue="300"step="50"
value="#{suggestionBox.height}">
<a4j:support event="onchange" reRender="suggestionBoxId"/>
</rich:inputNumberSlider>
<h:outputText value="Shadow Depth" />
<rich:inputNumberSlider minValue="3" maxValue="6"
value="#{suggestionBox.shadowDepth}">
<a4j:support event="onchange" reRender="suggestionBoxId"/>
</rich:inputNumberSlider>
<h:outputText value="Shadow Opacity" />
<rich:inputNumberSlider minValue="1" maxValue="9"
value="#{suggestionBox.shadowOpacity}">
<a4j:support event="onchange" reRender="suggestionBoxId"/>
</rich:inputNumberSlider>
<h:outputText value="Cellpadding" />
<rich:inputNumberSlider minValue="1" maxValue="20"
value="#{suggestionBox.cellpadding}">
<a4j:support event="onchange" reRender="suggestionBoxId"/>
</rich:inputNumberSlider>
</h:panelGrid>
</h:form>
</ui:composition>
Tree標籤：
Page Source:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.col, .col2 {
width:50%;
vertical-align:top;
}
</style>
<h:form>
<h:panelGridcolumns="2" width="100%"columnClasses="col1,col2">
<rich:tree style="width:300px" nodeSelectListener="#{simpleTreeBean.processSelection}"
reRender="selectedNode" ajaxSubmitSelection="true" switchType="client"
value="#{simpleTreeBean.treeNode}" var="item">
</rich:tree>
<h:outputTextescape="false" value="Selected Node:#{simpleTreeBean.nodeTitle}" id="selectedNode" />
</h:panelGrid>
</h:form>
</ui:composition>
Action Parameter標籤：
解釋：parameter標籤的value屬性會通過assingnto屬性賦值給been層中的name。
Ajax Form標籤：
當單擊左邊的按鈕時頁面看不到刷新效果，當點擊右邊的按鈕時會有刷新效果。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style type="text/css">
.dr-pnl-b {
padding:25px;
}
</style>
<h:panelGrid columns="2">
<rich:panel>
<f:facetname="header">
<h:outputText value="Form with ajaxSubmit equals true"/>
</f:facet>
<a4j:formajaxSubmit="true" reRender="name">
<h:panelGrid>
<h:commandButton value="Set Local Name to John (Ajax)"action="#{userBean.nameItJohn}" />
<h:outputText id="name" value="Name:#{userBean.name}"/>
</h:panelGrid>
</a4j:form>
</rich:panel>
<rich:panel>
<f:facetname="header">
<h:outputText value="Form with ajaxSubmit equals false"/>
</f:facet>
<a4j:form>
<h:panelGrid>
<h:commandButton value="Set Both Name to Mark (non-Ajax)"action="#{userBean.nameItMark}" />
<h:outputText id="name" value="Name:#{userBean.name}"/>
</h:panelGrid>
</a4j:form>
</rich:panel>
</h:panelGrid>
</ui:composition>
JS Function標籤：
說明：當鼠標放到三個名字上時在name後會顯示相應的名字。
使用說明：:jsFunction的name屬性綁定的是JS方法名，該方法有一個參數，該參數是通過actionparam 標籤的assignTo屬性傳給been層的。該標籤的reRender屬性指定要刷新的區域。該標籤要用a4j:form標籤包起來。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<table width="400">
<tbody>
<tr>
<td><span
<td><span
<td><span
</tr>
<rich:spacerheight="10" />
<tr>
<tdcolspan="3">Name: <b><h:outputTextid="showname" value="#{userBean.name}"/></b></td>
</tr>
</tbody>
</table>
<a4j:form>
<a4j:jsFunctionname="updateName" reRender="showname">
<a4j:actionparam name="param1"assignTo="#{userBean.name}" />
</a4j:jsFunction>
</a4j:form>
<br />
</ui:composition>
Poll標籤：
說明：該標籤相當於一個計時器，會以某頻率刷新頁面上的指定區域。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<a4j:region>
<h:form>
<a4j:pollid="poll" interval="500"enabled="#{pollBean.pollEnabled}"
reRender="poll,grid" />
</h:form>
</a4j:region>
<h:form>
<h:panelGridcolumns="2" width="80%" id="grid">
<h:panelGrid columns="1">
<h:outputText value="Polling Inactive"
rendered="#{not pollBean.pollEnabled}"></h:outputText>
<h:outputText value="Polling Active"
rendered="#{pollBean.pollEnabled}"></h:outputText>
<a4j:commandButton style="width:120px" id="control"
value="#{pollBean.pollEnabled?'Stop':'Start'} Polling"
reRender="poll, grid">
<a4j:actionparam name="polling"value="#{!pollBean.pollEnabled}"
assignTo="#{pollBean.pollEnabled}" />
</a4j:commandButton>
</h:panelGrid>
<h:outputTextid="serverDate" style="font-size:16px"
value="Server Date: #{pollBean.date}" />
</h:panelGrid>
</h:form>
</ui:composition>
Status:標籤：
說明：該標籤是一個在等待異步刷新過程中需要在頁面中呈現的元素。
List Shuttle標籤：
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jstl/core">
<style>
.pic {
margin-bottom: -4px;
margin-right: 2px;
}
</style>
<h:form>
<rich:toolBarid="toolBar" itemSeparator="line"height="28px">
<c:forEach items="#{toolBar.items}" var="item">
<h:panelGroup>
<h:graphicImage value="#{item.iconURI}" styleClass="pic"/>
<h:outputLink value="#"style="color:#{a4jSkin.generalTextColor}; text-decoration:none;" >
<h:outputText value="#{item.label}" />
</h:outputLink>
</h:panelGroup>
</c:forEach>
</rich:toolBar>
<rich:spacerheight="20" />
<rich:listShuttlesourceValue="#{toolBar.freeItems}"
targetValue="#{toolBar.items}" var="items"listHeight="300"
listWidth="300" sourceCaptionLabel="Available Items"
targetCaptionLabel="Currently Active Items"
converter="listShuttleconverter">
<rich:column width="18">
<h:graphicImagevalue="#{items.iconURI}"></h:graphicImage>
</rich:column>
<rich:column>
<h:outputText value="#{items.label}"></h:outputText>
</rich:column>
<a4j:support event="onlistchanged" reRender="toolBar"/>
<a4j:support event="onorderchanged" reRender="toolBar"/>
</rich:listShuttle>
</h:form>
</ui:composition>
Ordering List標籤：
說明：value爲List<T>類型的
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.cent{
text-align:center;
}
</style>
<rich:orderingListvalue="#{library.libraryAsList}" var="lib"listHeight="300" listWidth="350">
<rich:column width="180">
<f:facetname="header">
<h:outputText value="Song Name" />
</f:facet>
<h:outputText value="#{lib.title}"></h:outputText>
</rich:column>
<rich:column>
<f:facetname="header">
<h:outputText value="Artist Name" />
</f:facet>
<h:outputTextvalue="#{lib.album.artist.name}"></h:outputText>
</rich:column>
</rich:orderingList>
</ui:composition>
Pick List標籤：
Message標籤：
說明：該標籤相當於客戶端數據驗證控件。
該控件要和驗證控件一起使用，使用時一起做爲某控件的子控件。並且在該控件內要有正確和錯誤時兩種不同的信息。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<styletype="text/css">
.rich-message-marker img {
padding-right:7px;
}
.rich-message-label {
color:red;
}
</style>
<rich:panel>
<f:facetname="header">
<h:outputText value="Validation Form"/>
</f:facet>
<h:form>
<h:panelGrid columns="3">
<h:outputText value="Name:" />
<h:inputText label="Name" id="name"required="true" value="#{userBean.name}">
<f:validateLength minimum="3" />
</h:inputText>
<rich:message for="name">
<f:facet name="passedMarker">
<h:graphicImage value="/images/ajax/passed.gif" />
</f:facet>
<f:facet name="errorMarker">
<h:graphicImage value="/images/ajax/error.gif" />
</f:facet>
</rich:message>
<h:outputText value="Job:" />
<h:inputText label="Job" id="job"required="true" value="#{userBean.job}">
<f:validateLength minimum="3" maximum="50" />
</h:inputText>
<rich:message for="job">
<f:facet name="passedMarker">
<h:graphicImage value="/images/ajax/passed.gif" />
</f:facet>
<f:facet name="errorMarker">
<h:graphicImage value="/images/ajax/error.gif" />
</f:facet>
</rich:message>
<h:outputText value="Address:" />
<h:inputText label="Address" id="address"required="true" value="#{userBean.address}">
<f:validateLength minimum="10" />
</h:inputText>
<rich:message for="address">
<f:facet name="passedMarker">
<h:graphicImage value="/images/ajax/passed.gif" />
</f:facet>
<f:facet name="errorMarker">
<h:graphicImage value="/images/ajax/error.gif" />
</f:facet>
</rich:message>
<h:outputText value="Zip:" />
<h:inputText label="Zip" id="zip"required="true" value="#{userBean.zip}">
<f:validateLength minimum="4" maximum="9" />
</h:inputText>
<rich:message for="zip">
<f:facet name="passedMarker">
<h:graphicImage value="/images/ajax/passed.gif" />
</f:facet>
<f:facet name="errorMarker">
<h:graphicImage value="/images/ajax/error.gif" />
</f:facet>
</rich:message>
<f:facet name="footer">
<a4j:commandButton value="Validate" />
</f:facet>
</h:panelGrid>
</h:form>
</rich:panel>
</ui:composition>
Messages標籤：
該標籤可以理解爲驗證組控件，它將頁面上所有的不合法信息打到頁面上。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<styletype="text/css">
.rich-messages-marker img {padding-right:7px;}
.rich-message-label {color:red;}
.top{vertical-align:top;}
</style>
<rich:panelstyle="width:400px">
<f:facetname="header">
<h:outputText value="Validation Form"/>
</f:facet>
<h:form>
<rich:messages passedLabel="Data is allowed to be stored."layout="list">
<f:facet name="header">
<h:outputText value="Entered DataStatus:"></h:outputText>
</f:facet>
<f:facet name="passedMarker">
<h:graphicImage value="/images/ajax/passed.gif" />
</f:facet>
<f:facet name="errorMarker">
<h:graphicImage value="/images/ajax/error.gif" />
</f:facet>
</rich:messages>
<h:panelGrid columns="2">
<h:outputText value="Name:" />
<h:inputText label="Name" id="name"required="true" value="#{userBean.name}">
<f:validateLength minimum="3" />
</h:inputText>
<h:outputText value="Job:" />
<h:inputText label="Job" id="job"required="true" value="#{userBean.job}">
<f:validateLength minimum="3" maximum="50" />
</h:inputText>
<h:outputText value="Address:" />
<h:inputText label="Address" id="address"required="true" value="#{userBean.address}">
<f:validateLength minimum="10" />
</h:inputText>
<h:outputText value="Zip:" />
<h:inputText label="Zip" id="zip"required="true" value="#{userBean.zip}">
<f:validateLength minimum="4" maximum="9" />
</h:inputText>
<f:facet name="footer">
<a4j:commandButton value="Validate" />
</f:facet>
</h:panelGrid>
</h:form>
</rich:panel>
</ui:composition>
jQuery標籤：
說明:該標籤可以爲目標控件設置樣式等。在該示例中當鼠標移動到某一數據行時該行背景會發生變化，離開後顏色又恢復。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style type="text/css">
.odd-row {
background-color: #ECF3FE;
}
.even-row {
background-color: #FCFFFE;
}
.active-row {
background-color: #FFEBDA;
}
</style>
<br/>
<rich:dataTable width="483" id="carList"rows="15"
value="#{dataTableScrollerBean.allCars}" var="category">
<f:facet name="header">
<rich:columnGroup>
<h:column><h:outputText value="Make" /></h:column>
<h:column><h:outputText value="Model" /></h:column>
<h:column><h:outputText value="Price" /></h:column>
<h:column><h:outputText value="Mileage"/></h:column>
</rich:columnGroup>
</f:facet>
<h:column>
<h:outputText value="#{category.make}" />
</h:column>
<h:column>
<h:outputText value="#{category.model}" />
</h:column>
<h:column>
<h:outputText value="#{category.price}" />
</h:column>
<h:column>
<h:outputText value="#{category.mileage}" />
</h:column>
</rich:dataTable>
<rich:jQuery selector="#carList tr:odd"query="addClass('odd-row')" />
<rich:jQueryselector="#carList tr:even" query="addClass('even-row')"/>
<rich:jQuery selector="#carList tr"
query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
<rich:jQuery selector="#carList tr"
query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
<br/>
</ui:composition>
DataTable及Column及Columns標籤：
說明：一句話，它太強了，照着會超就行了~~~~~~~~~~~~~~~
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<rich:dataTable
onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
cellpadding="0" cellspacing="0"
width="700" border="0" var="record"value="#{report.expReport.records}">
<f:facet name="header">
<rich:columnGroup>
<rich:column rowspan="2">
<rich:spacer />
</rich:column>
<rich:column colspan="3">
<h:outputText value="Expenses" />
</rich:column>
<rich:column rowspan="2">
<h:outputText value="subtotals" />
</rich:column>
<rich:column breakBefore="true">
<h:outputText value="Meals" />
</rich:column>
<rich:column>
<h:outputText value="Hotels" />
</rich:column>
<rich:column>
<h:outputText value="Transport" />
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column colspan="5">
<h:outputText value="#{record.city}" /></rich:column>
<rich:subTable
onRowMouseOver="this.style.backgroundColor='#F8F8F8'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
var="expense" value="#{record.items}">
<rich:column>
<h:outputText value="#{expense.day}"></h:outputText>
<f:facet name="footer">
<rich:spacer />
</f:facet>
</rich:column>
<rich:column>
<h:outputTextvalue="#{expense.meals}"><f:convertNumber pattern="$####.00" /></h:outputText>
<f:facet name="footer">
<h:outputText value="#{record.totalMeals}"><f:convertNumber pattern="$####.00" /></h:outputText>
</f:facet>
</rich:column>
<rich:column>
<h:outputTextvalue="#{expense.hotels}"><f:convertNumber pattern="$####.00" /></h:outputText>
<f:facet name="footer">
<h:outputTextvalue="#{record.totalHotels}"><f:convertNumber pattern="$####.00" /></h:outputText>
</f:facet>
</rich:column>
<rich:column>
<h:outputTextvalue="#{expense.transport}"><f:convertNumber pattern="$####.00" /></h:outputText>
<f:facet name="footer">
<h:outputText value="#{record.totalTransport}"><f:convertNumber pattern="$####.00" /></h:outputText>
</f:facet>
</rich:column>
<rich:column>
<rich:spacer></rich:spacer>
<f:facet name="footer">
<h:outputText value="#{record.total}"><f:convertNumber pattern="$####.00" /></h:outputText>
</f:facet>
</rich:column>
</rich:subTable>
<f:facet name="footer">
<rich:columnGroup>
<rich:column>Totals</rich:column>
<rich:column>
<h:outputTextvalue="#{report.expReport.totalMeals}"><f:convertNumber pattern="$####.00" /></h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{report.expReport.totalHotels}"><f:convertNumber pattern="$####.00" /></h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{report.expReport.totalTransport}"><f:convertNumber pattern="$####.00" /></h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{report.expReport.grandTotal}"><f:convertNumber pattern="$####.00" /></h:outputText>
</rich:column>
</rich:columnGroup>
</f:facet>
</rich:dataTable>
</ui:composition>
Data Definition List標籤：
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.label{
font-weight:bold;
}
</style>
<h:form>
<rich:dataListvar="car" value="#{dataTableScrollerBean.allCars}"rows="10">
<h:outputText value="#{car.make} #{car.model}"/><br/>
<h:outputTextvalue="Price:" styleClass="label"></h:outputText>
<h:outputText value="#{car.price} " />
<h:outputText value="Mileage:"styleClass="label"></h:outputText>
<h:outputText value="#{car.mileage} " />
<h:outputText value="VIN:"styleClass="label"></h:outputText>
<h:outputText value="#{car.vin}" />
</rich:dataList>
</h:form>
</ui:composition>
DataFilter Slider標籤：
該標籤用來對數據進行篩選，它有兩種模式，一種模式是存儲界面數據對象到session中，所以數據篩選時用戶體驗比較好，變化比較平緩，另一種模式是隻發送先前和新的數據作爲sliderEvent被傳回到been層。
需要注意的是如果使用rich標籤的***Listenr屬性時，需要在been層爲該屬性寫一個方法，這個方法要有一個參數，參數的類型就是***Event。如DataFilter Slider標籤有sliderListener屬性，在been層要有一個含有sliderEvent類型參數的方法於該屬性綁定。
其中filterBy屬性用來綁定需要篩選的數據，在本例中該屬性是對dataTable的mileage字段進行篩選，所以綁定的是getMileage字段。
For屬性指定對哪個控件中的數據進行篩選。
Forvalref屬性需要綁定一個返回值爲string類型的方法。
Onslide屬性如果爲true，說明以滑竿的形式呈現。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.rich-table-firstrow .rich-table-cell {
border-top-width: 0px;
}
</style>
<h:form id="form1">
<rich:dataFilterSlidersliderListener="#{dfsBean.doSlide}"
binding="#{inventoryList.dataFilterSlider}" for="carList"
forValRef="inventoryList.carInventory"filterBy="getMileage"
manualInput="true" onSlide="true" onChange="true"storeResults="true"
width="200px" startRange="10000" endRange="60000"increment="10000"
trailer="true" handleValue="60000"/>
<rich:spacerheight="15" />
<h:dataTableid="carIndex" rows="10"
binding="#{inventoryList.carMakeIndexUIData}"
value="#{inventoryList.carMakeIndex}" var="category"
styleClass="list-table1" columnClasses="column-index"
rowClasses="list-row3">
<h:column>
<a4j:commandLink actionListener="#{inventoryList.filterCarList}"
reRender="carList">
<h:outputText value="#{category}" />
<f:attribute name="filterRule" value="showTable" />
</a4j:commandLink>
</h:column>
</h:dataTable>
<rich:spacerheight="15" />
<rich:dataTablewidth="300" id="carList" rows="10"
value="#{inventoryList.carInventory}" var="category">
<f:facetname="header">
<rich:columnGroup>
<h:column>
<h:outputText styleClass="headerText" value="Make" />
</h:column>
<h:column>
<h:outputText styleClass="headerText" value="Model"/>
</h:column>
<h:column>
<h:outputText styleClass="headerText" value="Price"/>
</h:column>
<h:column>
<h:outputText styleClass="headerText" value="Mileage"/>
</h:column>
</rich:columnGroup>
</f:facet>
<h:column>
<h:outputText value="#{category.make}" />
</h:column>
<h:column>
<h:outputText value="#{category.model}" />
</h:column>
<h:column>
<h:outputText value="#{category.price}" />
</h:column>
<h:column>
<h:outputText value="#{category.mileage}" />
</h:column>
</rich:dataTable>
<rich:spacerheight="15" />
</h:form>
</ui:composition>
Data Grid標籤：
該控件是一個可與其他控件配合使用的強大數據控件。
該控件從been獲取一個數據列表List，在輸出到界面時跟h:PanelGrid一樣，相當於HTML中的table控件，它可以設置數據顯示時分幾列，在界面顯示幾條數據（在於rich:datascroller配合使用時指每一頁顯示的記錄條數）。
Value屬性用來綁定數據列表List
Columns屬性指定每一頁分幾列顯示
Elements屬性指定顯示幾條數據
如果要爲該控件添加分頁功能，只需在該控件聲明的內部下面添加<f:facet><rich:scroller></rich:scroller></f:facet>即可。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.label{
font-weight:bold;
}
</style>
<rich:panel>
<f:facetname="header">
<h:outputText value="Car Store"></h:outputText>
</f:facet>
<h:form>
<rich:dataGridvalue="#{dataTableScrollerBean.allCars}" var="car"columns="3" elements="9">
<rich:panel style="width:200px">
<f:facet name="header">
<h:outputText value="#{car.make} #{car.model}"></h:outputText>
</f:facet>
<h:panelGrid columns="2">
<h:outputText value="Price:"styleClass="label"></h:outputText>
<h:outputText value="#{car.price}" />
<h:outputText value="Mileage:"styleClass="label"></h:outputText>
<h:outputText value="#{car.mileage}" />
<h:outputText value="VIN:"styleClass="label"></h:outputText>
<h:outputText value="#{car.vin}" />
<h:outputText value="Stock:"styleClass="label"></h:outputText>
<h:outputText value="#{car.stock}" />
</h:panelGrid>
</rich:panel>
<f:facetname="footer">
<rich:datascroller></rich:datascroller>
</f:facet>
</rich:dataGrid>
</h:form>
</rich:panel>
</ui:composition>
Datascroller控件：
該控件是一個專門的分頁控件。它需要和dataTable等數據控件配合使用。
它的使用有兩種方式，一種是在數據控件內部聲明，那樣則不需要用for指定目標數據控件。另一種是在數據控件外部聲明，此時則需要使用for屬性指定目標數據控件。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.col {
width: 100px;
}
</style>
<h:form>
<rich:datascrolleralign="left" for="carList" maxPages="20"
page="#{dataTableScrollerBean.scrollerPage}" reRender="sc2"id="sc1" />
<rich:spacerheight="30" />
<rich:dataTablewidth="483" id="carList" rows="10"columnClasses="col"
value="#{dataTableScrollerBean.allCars}" var="category">
<f:facetname="header">
<rich:columnGroup>
<h:column>
<h:outputText styleClass="headerText" value="Make" />
</h:column>
<h:column>
<h:outputText styleClass="headerText" value="Model"/>
</h:column>
<h:column>
<h:outputText styleClass="headerText" value="Price"/>
</h:column>
<h:column>
<h:outputText styleClass="headerText" value="Mileage"/>
</h:column>
</rich:columnGroup>
</f:facet>
<h:column>
<h:outputText value="#{category.make}" />
</h:column>
<h:column>
<h:outputText value="#{category.model}" />
</h:column>
<h:column>
<h:outputText value="#{category.price}" />
</h:column>
<h:column>
<h:outputText value="#{category.mileage}" />
</h:column>
</rich:dataTable>
<rich:datascrolleralign="left" for="carList" maxPages="20"
page="#{dataTableScrollerBean.scrollerPage}" id="sc2"reRender="sc1" />
</h:form>
</ui:composition>
Scrollable Data Table標籤：
該標籤是一個含有滾動條的數據控件。
Row屬性指定該控件內存放的最大記錄條數，
sortMode屬性指定排序方式
selection屬性指定該控件選中的行。
frozenColCount屬性指定可以選中行的數目。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:form>
<rich:spacer height="30" />
<rich:scrollableDataTable rowKeyVar="rkv"frozenColCount="1" height="400px"
width="700px" id="carList" rows="40"columnClasses="col"
value="#{dataTableScrollerBean.allCars}" var="category"sortMode="single"
binding="#{dataTableScrollerBean.table}"
selection="#{dataTableScrollerBean.selection}">
<rich:column id="make">
<f:facet name="header"><h:outputTextstyleClass="headerText" value="Make" /></f:facet>
<h:outputText value="#{category.make}" />
</rich:column>
<rich:column id="model">
<f:facet name="header"><h:outputTextstyleClass="headerText" value="Model" /></f:facet>
<h:outputText value="#{category.model}" />
</rich:column>
<rich:column id="price">
<f:facet name="header"><h:outputTextstyleClass="headerText" value="Price" /></f:facet>
<h:outputText value="#{category.price}" />
</rich:column>
<rich:column id="mileage">
<f:facet name="header"><h:outputTextstyleClass="headerText" value="Mileage" /></f:facet>
<h:outputText value="#{category.mileage}" />
</rich:column>
<rich:column width="200px" id="vin">
<f:facet name="header"><h:outputTextstyleClass="headerText" value="VIN" /></f:facet>
<h:outputText value="#{category.vin}" />
</rich:column>
<rich:column id="stock">
<f:facet name="header"><h:outputTextstyleClass="headerText" value="Stock" /></f:facet>
<h:outputText value="#{category.stock}" />
</rich:column>
</rich:scrollableDataTable>
<rich:spacer height="20px"/>
<a4j:commandButton value="Show Current Selection"reRender="table"
action="#{dataTableScrollerBean.takeSelection}"
oncomplete="javascript:Richfaces.showModalPanel('panel');"/>
</h:form>
<rich:modalPanelid="panel" autosized="true">
<f:facet name="header">
<h:outputText value="Selected Rows"/>
</f:facet>
<f:facet name="controls">
<span style="cursor:pointer"onclick="javascript:Richfaces.hideModalPanel('panel')">X</span>
</f:facet>
<rich:dataTable value="#{dataTableScrollerBean.selectedCars}"var="sel" id="table">
<rich:column>
<f:facet name="header"><h:outputText value="Make"/></f:facet>
<h:outputText value="#{sel.make}" />
</rich:column>
<rich:column id="model">
<f:facet name="header"><h:outputText value="Model"/></f:facet>
<h:outputText value="#{sel.model}" />
</rich:column>
<rich:column id="price">
<f:facet name="header"><h:outputText value="Price"/></f:facet>
<h:outputText value="#{sel.price}" />
</rich:column>
<rich:column id="mileage">
<f:facet name="header"><h:outputTextvalue="Mileage" /></f:facet>
<h:outputText value="#{sel.mileage}" />
</rich:column>
<rich:column id="stock">
<f:facet name="header"><h:outputText value="Stock"/></f:facet>
<h:outputText value="#{sel.stock}" />
</rich:column>
</rich:dataTable>
</rich:modalPanel>
</ui:composition>
Table Sorting:
它不是一個標籤，但可以爲rich:column標籤添加sortBy屬性從而達到排序的目的。
