Practical_RichFaces要点Chapter07

Chapter07      Data Iteration Components

 

1.     常用的dataTable类的控件有：

l           <rich:dataTable>

l           <rich:dataDefinitionList>

l           <rich:dataOrderedList>

l           <rich:dataList>

l           <rich:dataGrid>

 

 

2.     <rich:dataTable>

1)      <rich:dataTable>具有<h:dataTable>的所有基本功能，此外还具有换肤、部分行刷新、合并行或列的功能。

2)      在其内部仍然可以使用<h:column>.

 

 

3.     <rich:dataDefinitionList>

1)      <rich:dataDefinitionList>可以创建一个HTML定义列表；

2)      可以使用<f:facet name=”term”>来设定特定的数据格式，例如：

<rich:dataDefinitionListvalue="#{airlinesBean.airlines}" var="air">

<f:facet name="term">

<h:outputTextvalue=”#{air.code}” />

</f:facet>

<h:outputTextvalue=”#{air.name}, #{air.code}” />

</rich:dataDefinitionList>

 

 

4.     <rich:dataOrderedList>

1)      <rich:dataOrderedList>可以生成列表，并在每一行开头添加上行号，从1开始。

2)      例如：

<rich:dataOrderedListvalue="#{airlinesBean.airlines}" var="air">

<h:outputText value=”#{air.name}, #{air.code}” />

</rich:dataOrderedList>

 

 

5.     <rich:dataList>

1)      <rich:dataList >可以生成列表，并在每一行开头添加一个圆点。

2)      例如：

<rich:dataListvalue="#{airlinesBean.airlines}" var="air">

<h:outputText value=”#{air.name}, #{air.code}” />

</rich:dataList>

 

 

6.     <rich:dataGrid>

1)      <rich:dataGrid>是<rich:dataTable>和<h:panelGrid>的混合体。

2)      仍然遍历数据集合，但是通过columns属性控制每一行容纳多少条记录。例如：

<rich:dataGridvalue="#{airlinesBean.airlines}" var="air"border="1" columns="2">

<h:outputText value=”#{air.name}, #{air.code}” />

</rich:dataGrid>

 

 

7.     除以上几种之外，还有之前讲过的<a4j:repeat>，它本身并不产生任何HTML标记

<a4j:repeatvalue="#{airlinesBean.airlines}" var="air"rowKeyVar="i">

#{air.name} -

#{air.code}

<h:outputText value="," rendered="#{i lt(airlinesBean.size-1)}"/>

</a4j:repeat>

 

 

8.     添加滚动条<rich:datascroller>

1)      对于要使用<rich:datascroller>作为滚动条的dataTable类控件，应该将它们的rows属性设置好，设为每页需要显示的数据行数。

2)      对于<rich:dataTable>只需要将<rich:datascroller>置于<f:facet name=”footer”>中就可以了；

而对于其他dataTable类控件，则应该将<rich:datascroller>置于控件外，并将<rich:datascroller>的for属性设置为dataTable类控件的ID。

3)      <rich:datascroller>需要在form中使用。

4)      <rich:datascroller>的前后翻页等样式可以通过属性，任意定于。

5)      pageIndexVar属性，指定代表当前页码的变量名称；pagesVar属性，指定代表总页码数的变量名称。例如：

<rich:datascroller maxPages="4"selectedStyle="font-weight:bold"

pageIndexVar="currentPage"pagesVar="totalPages">

<f:facet name="pages">

<h:outputText value="#{currentPage}/#{totalPages}” />

</f:facet>

...

</rich:datascroller>

6)      maxPages属性设定滚动条中，每次最多能同时显示的页码数。

 

 

9.     使用JavaScript事件

1)      <rich:dataTable>等控件定义了许多onXXXX属性，对应JavaScript事件，以调用自定义JavaScript代码。如：onclick、ondblclick、onRowClick、onRowDblClick等。

2)      可以与<a4j:support>和<f:setPropertyActionListener>等一起使用，用来触发Ajax Request。例如：

<rich:dataTableid="dtTabel" border="1"value="#{dataTableTestBean.xcvrList}" var="xcvr"rows="10" onRowContextMenu="#{rich:component('detail')}.show()">

 

<a4j:supportevent="onRowDblClick" reRender="grid1"action="#{dataTableTestBean.rowDblClickedAction}" oncomplete="#{rich:component('detailModalPanel')}.show()">

<f:setPropertyActionListener target="#{dataTableTestBean.selectedXcvr}"value="#{xcvr}" />

</a4j:support>

……

</rich:dataTable>

       【注意】

这段代码是希望通过双击或右键，弹出modalPanel，里面显示行的详细信息。但是<rich:dataTable>的onRowContextMenu所调用弹出的modalPanel里面一开始是不会有值的，因为页面从未提交dataTableTestBean.selectedXcvr里面还没有值；而<a4j:support>的oncomplete属性调用弹出的modalPanel里面就有值，因为<a4j:support>的event属性根据<rich:dataTable>的onRowDblClick事件引发了Ajax Request，这一切完成之后（oncomplete），才调用弹出的modalPanel，自然就能找到值了。

 

 

10.  实现部分控件的数据刷新

1)      基本思路就是要确定哪一行的哪一个控件要刷新。

2)      联想到之前<a4j:repeat>里面的定位方法，ajaxKeys用来定义哪些行需要被局部刷新。ajaxKeys属性接受EL表达式。

3)      至于哪些列（控件）需要局部更新，那就需要在将这些列（控件ID）放在引发刷新的控件的reRender属性里面。

4)      具体例子如下：

<a4j:form>

<rich:dataTableid="dtTabel" border="1" value="#{dataTableTestBean.xcvrList}"var="xcvr" rows="10" ajaxKeys="#{dataTableTestBean.rowsToUpdate}" onRowContextMenu="#{rich:component('detail')}.show()">

 

<a4j:supportevent="onRowDblClick" reRender="grid1" action="#{dataTableTestBean.rowDblClickedAction}"oncomplete="#{rich:component('detail')}.show()">

<f:setPropertyActionListenertarget="#{dataTableTestBean.selectedXcvr}" value="#{xcvr}"/>

</a4j:support>

 

<h:column id="column1">

<f:facet name="header">

<h:outputText value="ItemCode"></h:outputText>

</f:facet>

<h:outputText id="out1"value="#{xcvr.itemCode}"></h:outputText>

</h:column>

 

<h:column id="column2">

<f:facet name="header">

<h:outputTextvalue="Tech"></h:outputText>

</f:facet>

<h:outputText id="out2"value="#{xcvr.tech}"></h:outputText>

</h:column>

……

</rich:dataTable>

</a4j:form>

 

<rich:modalPanelid="detail">

<f:facet name="header">

<h:outputText value="XcvrDetail"></h:outputText>

</f:facet>

<f:facet name="controls">

<h:panelGroup>

<a4j:commandLink id="closeLink"value="Close"></a4j:commandLink>

<rich:componentControlfor="detail" attachTo="closeLink" event="onclick"operation="hide" />

</h:panelGroup>

</f:facet>

<a4j:form>

<h:panelGrid id="grid"columns="2">

<h:outputText value="ItemCode"></h:outputText>

<h:inputText value="#{dataTableTestBean.selectedXcvr.itemCode}"></h:inputText>

<h:outputTextvalue="Technology"></h:outputText>

<h:inputTextvalue="#{dataTableTestBean.selectedXcvr.tech}"></h:inputText>

</h:panelGrid>

<h:panelGroup>

<a4j:commandButtonvalue="Save" actionListener="#{dataTableTestBean.editXcvr}"onclick="#{rich:component('detail')}.hide()" reRender="out1,out2" />

<a4j:commandButtonvalue="Cancel" immediate="true"onclick="#{rich:component('detail')}.hide()" />

</h:panelGroup>

</a4j:form>

</rich:modalPanel>

 

       【注意】

根据书上的代码，modalPanel中用于保存修改的按钮的reRender属性，里面放的是，<rich:dataGrid>的元素一个<h:panelGrid>的ID；于是我开始以为我的这个例子就应该放置column1和column2。但结果证明我错了，没有任何刷新。

于是我想，难道是防止整个dataTable的ID？试了一下，倒是刷新了。但我担心并不是dataTable局部刷新，而是整个表都刷新了。于是略一测试，果然是整个dataTable都被刷新了。

再次调整思路，我把需要刷新的两列的<h:outputText>的ID out1、out2放入按钮的reRender属性，测试结果成功，表格被局部刷新了。

现在反思一下，感觉因为<h:column>是被当作列来对待的，它并不像<h:panelGrid>那样充当一个纯粹的容器，因此将<h:panelGrid>的ID放入reRender时，其内部的内容都可以被刷新，而<h:column>就不行。

 

 

11.  创建行或列span

1)      <rich:column>属性与<h:column>基本功能相同，但提供了我行或列合并的功能。

2)      colspan属性用于设定某一单元格实际占用多少列的值。

3)      <rich:columnGroup>控件可以绑定多个列，并形成新的一行。

4)      <rich:columnbreakBefore="true">可以替代 <rich:columnGroup>产生新的一行。

5)      rowspan属性用于设定某一单元格实际占用多少行的值。

6)      要想知道具体结果是什么，最好亲自写一下试试看。

 

 

12.  <rich:columns>

1)      虽然这一章并没有讲到<rich:columns>，我还是查看了用户指南，简单学习了一下。感觉某些方面还是很有用的。

2)      整体思路就是<rich:columns>在<rich:dataTable>中，将<rich:columns>自己的value属性传进来的Collection进行遍历。为了帮助理解，可以这么认为：

l       通常，<rich:dataTable>的value属性传进来的Collection，包含的是整个数据表，含有很多行；而<rich:columns>传进来的Collection，是对于每一行来说都相同的多个“列信息”。

l       <rich:dataTable>是遍历每一行，但是需要逐列设置每一列现实的内容；而<rich:columns>则“更进一步”，将逐列设置每一列内容也省了，通过遍历每一列，设置列信息。

例如：

<rich:dataTableid="dtTabel" border="1"value="#{dataTableTestBean.xcvrList}" var="xcvr">

<rich:columns var="field"index="index" value="#{dataTableTestBean.fields}">

<f:facetname="header">

<h:outputTextvalue="#{field.fieldName}" />

</f:facet>

 

<h:outputTextvalue="#{xcvr[field.fieldName]}" />

</rich:columns>

</rich:dataTable>

3)      value属性，可以接受List类型的值，List的元素可以是任意类型的。上面例子里，#{dataTableTestBean.fields}是一个Field的List（Field是一个自定义类，具有fieldName成员变量）。这个Field List里可以包括需要显示在表格里的Xcvr类的属性名。

在<rich:columns>的体里，#{xcvr[field.fieldName]}就是要取每一行xcvr对象的名称为field.fieldName的值的属性。

4)      在<rich:dataTable>内<rich:columns>和<rich:column>、<h:columns>任然可以混合使用，互不干扰。

5)      columns属性定义显示出来的列数；

begin属性定义从哪一列开始显示；

end属性定义到哪一列结束。

6)      还有一些关于sort、filter的属性，用户指南上也写得不太清楚，等到PracticalRichFaces在第10章讲到scrollableDataTable的时候可能会涉及到。到时再仔细研究吧。