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:dataTableid="xcvrTable" value="#{dataTableTestBean.xcvrList}"var="xcvr" rows="10">

<f:facetname="header">

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

</f:facet>

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

<f:facetname="header">

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

</f:facet>

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

</rich:columns>

<f:facetname="footer">

<rich:datascroller></rich:datascroller>

</f:facet>

</rich:dataTable>

</a4j:form>

 

<a4j:form>

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

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

<a4j:supportevent="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>来提交AjaxRequest以更新模型值并刷新页面；或者干脆省掉按钮或链接，直接使用<a4j:support event=”onorderchange”>，当顺序改变时，JavaScript事件会通过<a4j:support>触发AjaxRequest以更新模型值并刷新页面。

11)  例如：

<a4j:form>

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

<f:facetname="header">

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

</f:facet>

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

<f:facet name="header">

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

</f:facet>

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

</rich:columns>

</rich:dataTable>

</a4j:form>

 

<a4j:form>

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

 

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

 

<rich:column>

<f:facetname="header">

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

</f:facet>

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

</rich:column>

</rich:orderingList>

 

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

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

<a4j:supportevent="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端的调整，仍然需要提交AjaxRequest才能更新模型值。

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:dataTableid="xcvrTable" value="#{dataTableTestBean.xcvrList}"var="xcvr" rows="10">

<f:facetname="header">

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

</f:facet>

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

<f:facetname="header">

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

</f:facet>

<h:outputTextvalue="#{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:supportevent="onlistchanged"reRender="xcvrTable"></a4j:support>

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

 

<rich:column>

<f:facetname="header">

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

</f:facet>

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

</rich:column>

</rich:listShuttle>

</a4j:form>