Practical_RichFaces要点Chapter07

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:dataDefinitionList value="#{airlinesBean.airlines}" var="air">

<f:facet name="term">

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

</f:facet>

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

</rich:dataDefinitionList>

 

 

4.      <rich:dataOrderedList>

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

2)      例如：

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

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

</rich:dataOrderedList>

 

 

5.      <rich:dataList>

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

2)      例如：

<rich:dataList value="#{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:dataGrid value="#{airlinesBean.airlines}" var="air" border="1" columns="2">

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

</rich:dataGrid>

 

 

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

<a4j:repeat value="#{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:dataTable id="dtTabel" border="1" value="#{dataTableTestBean.xcvrList}" var="xcvr" rows="10" onRowContextMenu="#{rich:component('detail')}.show()" >

 

<a4j:support event="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:dataTable id="dtTabel" border="1" value="#{dataTableTestBean.xcvrList}" var="xcvr" rows="10" ajaxKeys="#{dataTableTestBean.rowsToUpdate}" onRowContextMenu="#{rich:component('detail')}.show()">

 

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

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

</a4j:support>

 

<h:column id="column1">

<f:facet name="header">

<h:outputText value="Item Code"></h:outputText>

</f:facet>

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

</h:column>

 

<h:column id="column2">

<f:facet name="header">

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

</f:facet>

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

</h:column>

……

</rich:dataTable>

</a4j:form>

 

<rich:modalPanel id="detail">

<f:facet name="header">

<h:outputText value="Xcvr Detail"></h:outputText>

</f:facet>

<f:facet name="controls">

<h:panelGroup>

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

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

</h:panelGroup>

</f:facet>

<a4j:form>

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

<h:outputText value="Item Code"></h:outputText>

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

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

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

</h:panelGrid>

<h:panelGroup>

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

<a4j:commandButton value="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:column breakBefore="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:dataTable id="dtTabel" border="1" value="#{dataTableTestBean.xcvrList}" var="xcvr">

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

<f:facet name="header">

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

</f:facet>

 

<h:outputText value="#{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 的属性，用户指南上也写得不太清楚，等到 Practical RichFaces 在第 10 章讲到 scrollableDataTable 的时候可能会涉及到。到时再仔细研究吧。


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/gengv/archive/2009/06/12/4263633.aspx