JSF Chapter08

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>
[color=red]from:http://blog.csdn.net/gengv/archive/2009/06/13/4265338.aspx[/color]