Practical_RichFaces要点Chapter08

Chapter08     
Selection Components


 

1.     


<rich:pickList>


1)     

实际上，这个控件与
<h:selectManyMenu>
和
<h:selectManyListbox>
本质上是一样的，都允许选择一到多个值，存于
List
中。

2)     

可以使用
<f:selectItem>
和
<f:selectItems>
为其添加选项，这些选项会显示在左侧框体里；

【注意】

l           

当
SelectItem
的值是自定义类对象的时候，应该为其创建自定义
Converter
，并
Override
该自定义类的
equals
方法（这一步可以借助
Eclipse
自动生成）。

l           

应当使用
converter
属性指定在
faces-config.xml
中注册的自定义
Converter
的
ID
；我曾想将
Converter
注册默认为一类对象做转换，但这种方法对
<rich:pickList>
的
<f:selectItems>
里面的自定义类无效。

3)     

value
属性必须绑定到一个可以接受多个值的对象上去，比如
List
、数组等。如果
value
对应的
List
或数组里默认有元素，则说明这些元素在初始阶段就被选中了，它们会一开始就自动出现在右侧框体里。

4)     

可以修改
copyAllControlLabel
、
copyControlLabel
、
removeControlLabel
、
removeAllControlLabel
四个属性的值，指定按钮上的显示
Label
。

5)     

可以用名为
copyAllControl
、
copyAllControlDisabled
、
removeAllControl
、
removeAllControlDisabled
、
copyControl
、
copyControlDisabled
、
removeControl
、
removeControlDisabled
的
<f:facet>
自定义控制按钮的外观。每一个按钮都需要定义
enabled
和
disabled
两种状态时的外观。

6)     

showButtonsLabel
属性默认为
true
，当设为
false
时，控制按钮不显示
Label
文字。

7)     

默认情况下，通过双击
Item
可以实现左右增删；当
switchByClick
属性设为
true
时，则单击即可完成以上操作。

8)     

除了支持
onclick
、
onchange
等基本
JavaScript
事件以外，还支持如
onlistchanged
等额外事件。可以使用
<a4j:support>
来指定
onlistchanged
等事件到
event
属性，已触发
Ajax Request
，刷新
reRender
中的控件。

9)     

例如：

<h:panelGrid>

<a4j:form>

<rich:dataTable
id="xcvrTable" value="#{dataTableTestBean.xcvrList}"
var="xcvr" rows="10">

<f:facet
name="header">

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

</f:facet>

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

<f:facet
name="header">

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

</f:facet>

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

</rich:columns>

<f:facet
name="footer">

<rich:datascroller></rich:datascroller>

</f:facet>

</rich:dataTable>

</a4j:form>

 

<a4j:form>

<rich:pickList
converter="fieldConverter"
value="#{dataTableTestBean.selectedFields}" copyAllControlLabel="Add
All" copyControlLabel="Add" removeAllControlLabel="Del All"
removeControlLabel="Del"
showButtonsLabel="false">

<f:selectItems
value="#{dataTableTestBean.allFieldOptions}" />

<a4j:support
event="onlistchanged"
reRender="xcvrTable" actionListener="#{dataTableTestBean.listChanged}">

</a4j:support>

</rich:pickList>

</a4j:form>

</h:panelGrid>

 

 

2.     


<rich:orderingList>


1)     

<rich:orderingList>
的形式很像
dataTable
类控件，只是增加了一些额外功能；可以像使用
<h:dataTable>
或
<rich:dataTable>
一样使用它。

2)     

value
属性接受
List
之类的值。通过
var
属性指定的行变量进行遍历。

3)     

value
的
List
中，如果使用的是自定义类对象，则也要提供自定义
Converter
，并用
converter
属性指定
faces-config.xml
中的注册名；同时，还要
Override
自定义类的
equals
和
hashCode
方法（这个也可以由
Eclipse
代劳）。

4)     

注意，通过右侧按钮实现的顺序调整，是
Client
端的。只有通过提交（如
commandButton
或者
<a4j:support>
），才能更新
managed bean
内的值。

5)     

可以使用
<h:column>
、
<rich:column>
、
<rich:columns>
来定义其内容，就像使用
dataTable
一样。

6)     

selection
属性用来定义哪些元素是一开始就已经处于选中状态的了，该属性接受
Set
类型的值。

7)     

可以使用
<f:facet name="caption">
为控件添加一个标题。

8)     

可以修改
topControlLabel
、
bottomControlLabel
、
upControlLabel
、
downControlLabel
四个属性的值，指定按钮上的显示
Label
。

9)     

可以用名为
topControl
、
topControlDisabled
、
bottomControl
、
bottomControlDisabled
、
upControl
、
upControlDisabled
、
downControl
、
downControlDisabled
的
<f:facet>
自定义控制按钮的外观。每一个按钮都需要定义
enabled
和
disabled
两种状态时的外观。

10) 

再次提醒，通过右侧按钮调整的顺序，仅限于
Client
端。要想调整
managed bean
中的顺序，可以使用
<a4j:commandButton>
或者
<a4j:commandLink>
来提交
Ajax
Request
以更新模型值并刷新页面；或者干脆省掉按钮或链接，直接使用
<a4j:support event=”onorderchange”>
，当顺序改变时，
JavaScript
事件会通过
<a4j:support>
触发
Ajax
Request
以更新模型值并刷新页面。

11) 

例如：

<a4j:form>

<rich:dataTable
id="xcvrTable" value="#{dataTableTestBean.xcvrList}"
var="xcvr" rows="10">

<f:facet
name="header">

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

</f:facet>

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

<f:facet name="header">

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

</f:facet>

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

</rich:columns>

</rich:dataTable>

</a4j:form>

 

<a4j:form>

<rich:orderingList
id="fieldOrderList" value="#{dataTableTestBean.selectedFields}"
var="row" converter="fieldConverter"
>

 

<a4j:support
event="onorderchanged"
reRender="xcvrTable, fieldPickList" ajaxSingle="true"
></a4j:support>

 

<rich:column>

<f:facet
name="header">

<h:outputText
value="Field Name"></h:outputText>

</f:facet>

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

</rich:column>

</rich:orderingList>

 

<rich:pickList
id="fieldPickList" converter="fieldConverter"
value="#{dataTableTestBean.selectedFields}">

<f:selectItems
value="#{dataTableTestBean.allFieldOptions}" />

<a4j:support
event="onlistchanged"
reRender="xcvrTable, fieldOrderList"
actionListener="#{dataTableTestBean.listChanged}" ajaxSingle="true"
></a4j:support>

</rich:pickList>

</a4j:form>

 

 

3.     


<rich:listShuttle>


1)     

<rich:listShuttle>
基本上来说就是
<rich:orderingList>
和
<rich:pickList>
的组合体。既可以选择一到多个值，又可以调整它们的顺序。可以在左右两个框体内显示任意多列。

2)     

可以将左侧框体内的值选择到到右侧框体，然后在右侧框体内调整顺序。而这种调整顺序，仍然是
Client
端的调整，仍然需要提交
Ajax
Request
才能更新模型值。

3)     

对于自定义类对象，仍然需要提供自定义
Converter
，设置
<rich:listShuttle>
的
converter
属性；
Override
自定义类的
equals
和
hashCode
方法。

4)     

sourceValue
属性用于设定左侧框体内的值，也即整体范围
List
；
targetValue
属性用于设定右侧框体内的值，也即选出项
List
。二者都接受集合类（
List
），并且共用一个
var
属性指定变量名称。

5)     

sourceCaptionLabel
和
targetCaptionLabel
属性分别设定左右侧框体的标题。

6)     

对于按钮外观的自定义修改与前面两个控件大同小异。

7)     

可以通过
onlistchanged
或
onorderchanged
事件，使用
<a4j:support>
分别触发
Ajax Request
。

8)     

sourceRequired
或
targetRequired
分别设为
true
的时候，表示左框体或右框体不能为空。

9)     

例如：

<a4j:form>

<rich:dataTable
id="xcvrTable" value="#{dataTableTestBean.xcvrList}"
var="xcvr" rows="10">

<f:facet
name="header">

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

</f:facet>

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

<f:facet
name="header">

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

</f:facet>

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

</rich:columns>

</rich:dataTable>

</a4j:form>

 

<a4j:form>

<rich:listShuttle var="row" targetValue="#{dataTableTestBean.selectedFields}"
sourceValue="#{dataTableTestBean.fields}" converter="fieldConverter"
>

 

<a4j:support
event="onlistchanged"
reRender="xcvrTable"></a4j:support>

<a4j:support
event="onorderchanged"
reRender="xcvrTable"></a4j:support>

 

<rich:column>

<f:facet
name="header">

<h:outputText
value="Field Name"></h:outputText>

</f:facet>

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

</rich:column>

</rich:listShuttle>

</a4j:form>