richfaces组件的使用

 xmlns:c="http://java.sun.com/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:t="http://myfaces.apache.org/tomahawk"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:d="http://metaarchit.com/dynamica"

 

 

 

1。scrollableDataTable与selectOneRadio

 

<rich:scrollableDataTable id="economicClassificationBudgetTable" value="#{economicClassificationBudgets}" height="140px" var="economicClassificationBudget" width="100%"> <rich:column width="50"> <f:facet name="header"> </f:facet> <t:selectOneRadio id="#{msg['economicClassificationBudget']}" forceId="true" forceIdIndex="false" value="#{expenseCommitment.economicClassificationBudget}" converter="#{entityConverter}"> <f:selectItem itemValue="#{economicClassificationBudget}" itemLabel=""></f:selectItem> </t:selectOneRadio> </rich:column> </rich:scrollableDataTable

 

scrollableDataTable与selectOneRadio的混合使用，注意 <t:selectOneRadio>中

 selectOneRadio中forceId="true"     forceIdIndex="false"这两个属性，倘若要使选项在点击文字时也能选中应该去掉 foreceIdIndex=“false” 这个属性，倘若需要得到竖排的样式可通过定义 layout="pageDirection"定义，通过style可定义鼠标移动时的形状如： style="cursor: pointer;"

 

 

2。h:graphicImage

 

<h:graphicImage value="/spring/ssms/photo?studentId=#{studentClass.student.id}&year=#{semester.year}" width="250" height="300" style="border: 0" />

可定义在value中输入图片的地址，图片默认放在webCountent包下。也可在图片地址中传入参数。

3。日历控件 rich:calendar

<rich:calendar value="#{expensePayment.chequeDate}" id="chequeDate" datePattern="yyyy-MM-dd" inputSize="32" />

 

在日历显示时，可用

<f:convertDateTime pattern="yyyy/MM/dd " timeZone="GMT+8" />

当是数值时可用

<f:convertNumber pattern="###,###,###.00" />

#代表任意，00代表显示。

在输入数值时，可采用组件

<rich:inputNumberSpinner id="floor" label="#{msg['sims']['floor']}" value="#{location.floor}" maxValue="500" minValue="0" inputSize="3" />

定义它的最大最小值。

 

 

4。命令组件a4j:commandButton，a4j:commandLink ，h:commandLink  , h:commdanButton

它们的应用如下：

<a4j:commandLink value="#{msg['query']}" id="queryButton" action="eMonthSelected" reRender="#{flowRenderFragments}" />

当需要弹出一个新的空白页面是，可添加属性 target="_blank"。

a4j与h开头的区别在于，a4j在执行action时不会提交整个页面，但是h开头的组件会提交整个h:form中的内容。

 

5。h:selectBooleanCheckbox 复选框

 

h:selectBooleanCheckbox可与rich:dataTable混合使用这样可以选中整条对象。

<rich:dataTable value="#{repairs}" var="repairVar" width="100%" id="repairTable" onRowMouseOver="this.style.backgroundColor='#F1F1F1' this.style.cursor='hand';"" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"> <rich:column> <f:facet name="header"> <input type="checkbox" οnclick="checkAll(this.checked);" /> </f:facet> <h:selectBooleanCheckbox id="confrimCheckbox#{repairVar.id}" value="#{confrimSelections[repairVar.id]}" /> </rich:column> </rich:dataTable>

在value中confrimSelections是一个空的HashMap，存入键id，值boolean。 可通过input 中onclink调用给value设置。具体js如下：

function checkAll(checked) { var elements = document.forms['listForm'].elements; for ( var i = 0; i < elements.length; i++) { if (elements[i].id.match('confrimCheckbox')) { elements[i].checked = checked; if(elements[i].checked){ elements[i].parentElement.parentElement.style.backgroundColor = '#C3D5FD'; }else{ elements[i].parentElement.parentElement.style.backgroundColor = '#{a4jSkin.tableBackgroundColor}'; } } } }

listForm为整个Form的id，而confrimCheckbox与confrimCheckbox#{repairVar.id}匹配。在check时也可该变其颜色。

 

 

 

 6：rich:panelMenu

给个简单的例子：

 

  <rich:panelMenu mode="ajax" iconExpandedGroup="disc" iconCollapsedGroup="disc" iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right" iconCollapsedTopGroup="chevronDown"> <rich:panelMenuGroup label="#{msg['srfs']['status']}" expanded="true"> <rich:panelMenuItem label="#{msg['srfs']['all']}" id="priorityAll" action="statistic" reRender="#{flowRenderFragments}"> <a4j:actionparam name="statusVar" value="#{''}" assignTo="#{viewScope.statusVar}" /> </rich:panelMenuItem> <c:forEach items="#{viewScope.statuses}" var="statusVar"> <rich:panelMenuItem label="#{statusVar.name}" id="statusVar#{statusVar}" action="statistic" reRender="#{flowRenderFragments}"> <a4j:actionparam name="statusVar" value="#{statusVar}" assignTo="#{viewScope.statusVar}" /> </rich:panelMenuItem> </c:forEach> </rich:panelMenuGroup> </rich:panelMenu> <a4j:outputPanel id="outputPanel"/>

 

 

要善用c:forEach 迭代，在c:forEach中可迭代rich:panelMenuGroup也可迭代rich:panelMenuItem，不同的是，迭代Group它只是标签不会调用cation，而迭代的item会有action触发，在action中可传递参数。当action触发时，可把值传递至a4j:outputPanel中。

 

 

7。a4j:support一个很有用的组件。

它的event有 event="onRowClick"，event="onchange" event="onviewactivated" event="onclick"

它有一个属性onsubmit 可以在提交的时候弹出对话框进行确认。

如：

<rich:inplaceInput layout="block" value="#{building.name}" id="buildingNmae" changedHoverClass="hover" viewHoverClass="hover" viewClass="buildingName" changedClass="buildingName" selectOnEdit="true" editEvent="ondblclick"> <a4j:support event="onviewactivated" action="edit" reRender="#{flowRenderFragments}" οnsubmit="if (!confirm('#{msg['sims']['confirmEdit']}?')) return false;" /> </rich:inplaceInput>

 

其他的例子和其叶差不多。这个比较特殊一点，它是与inplaceInput组件配合使用的。在rich:inplaceInput 组件中需要注意一个属性

editEvent="ondblclick" 即当你在双击它时，它便有block状态变为可编辑的状态，但是变量的改变需要借助于a4j：support所触发的action。

 

 

8。h:panelGrid

它主要的几个属性为 columns="1"定义列 ， cellspacing="0" cellpadding="0" 定义行间距，列间距。style="text-align:left"定义它的出现位置。可与自己多个嵌套使用。

 

 

9。rich:dataGrid 与dataTable，scrollDataTable一样都是用于迭代数据的。但是它可以实现数据的横向迭代，其他都是实现数据的纵向迭代。