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="/p_w_picpaths/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 p_w_picpaths on-the-fly">
Resourceframework can generate p_w_picpaths on-the-fly so that it becomes possible
to createp_w_picpaths 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="/p_w_picpaths/icons/edit.gif"/>
<h:outputLabel value="Edit" for="edit" />
</rich:toolBarGroup>
<rich:toolBarGroup>
<h:graphicImage id="find" value="/p_w_picpaths/icons/find.gif"/>
<h:outputLabel value="Find" for="find" />
</rich:toolBarGroup>
<rich:toolBarGroup>
<h:graphicImage id="filter"value="/p_w_picpaths/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="/p_w_picpaths/ajax/passed.gif" />
</f:facet>
<f:facet name="errorMarker">
<h:graphicImage value="/p_w_picpaths/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="/p_w_picpaths/ajax/passed.gif" />
</f:facet>
<f:facet name="errorMarker">
<h:graphicImage value="/p_w_picpaths/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="/p_w_picpaths/ajax/passed.gif" />
</f:facet>
<f:facet name="errorMarker">
<h:graphicImage value="/p_w_picpaths/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="/p_w_picpaths/ajax/passed.gif" />
</f:facet>
<f:facet name="errorMarker">
<h:graphicImage value="/p_w_picpaths/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="/p_w_picpaths/ajax/passed.gif" />
</f:facet>
<f:facet name="errorMarker">
<h:graphicImage value="/p_w_picpaths/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"οnclick="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属性从而达到排序的目的。
转载于:https://blog.51cto.com/hanxiaoya/1344134
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
