The rich:pickList component allows one to select multiple values from a list, with move controls and reordering of items in the resulting list. The pickList also supports a multi-column list representation.
This example shows a pickList in the simpler, single column display, with ordering of the result list enabled:
In the next example, the list of capitals is displayed in a multi-column format:
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <h:form id="form"> <p>This example shows a pickList in the simpler, single column display, with ordering of the result list enabled:</p> <rich:panel style="width:560px;"> <f:facet name="header"> <h:outputText value="Simple pick list" /> </f:facet> <rich:pickList value="#{listSelectBean.selectedCapitals}" sourceCaption="Available cities" targetCaption="Selected cities" listWidth="165px" listHeight="100px" orderable="true"> <f:selectItems value="#{listSelectBean.capitals}" var="capital" itemValue="#{capital}" itemLabel="#{capital.name}" /> <f:converter converterId="CapitalsConverter" /> </rich:pickList> </rich:panel> <br /> <p>In the next example, the list of capitals is displayed in a multi-column format:</p> <rich:panel style="width:560px;"> <f:facet name="header"> <h:outputText value="Pick list with columns" /> </f:facet> <rich:pickList value="#{listSelectBean.selectedCapitals}" var="capital" listHeight="200px"> <f:selectItems value="#{listSelectBean.capitals}" /> <f:converter converterId="CapitalsConverter" /> <rich:column> <f:facet name="header">Flag</f:facet> <h:graphicImage value="#{capital.stateFlag}" alt="flag" width="33"/> </rich:column> <rich:column> <f:facet name="header">Name</f:facet> #{capital.name} </rich:column> <rich:column> <f:facet name="header">State</f:facet> #{capital.state} </rich:column> </rich:pickList> </rich:panel> </h:form> </ui:composition>
package org.richfaces.demo.lists; import java.util.List; import javax.faces.bean.ManagedBean; import javax.faces.bean.ManagedProperty; import javax.faces.bean.RequestScoped; import org.richfaces.demo.tables.model.capitals.Capital; @ManagedBean @RequestScoped public class ListSelectBean { @ManagedProperty(value = "#{capitalsParser.capitalsList}") private List<Capital> capitals; private List<Capital> selectedCapitals; public List<Capital> getCapitals() { return capitals; } public void setCapitals(List<Capital> capitals) { this.capitals = capitals; } public List<Capital> getSelectedCapitals() { return selectedCapitals; } public void setSelectedCapitals(List<Capital> selectedCapitals) { this.selectedCapitals = selectedCapitals; } }
package org.richfaces.demo.tables.model.capitals; import javax.el.ELContext; import javax.faces.component.UIComponent; import javax.faces.context.FacesContext; import javax.faces.convert.Converter; import javax.faces.convert.FacesConverter; /** * @author <a href="http://community.jboss.org/people/bleathem">Brian Leathem</a> */ @FacesConverter("CapitalsConverter") public class CapitalsConverter implements Converter { private CapitalsParser capitalsParser; public Object getAsObject(FacesContext facesContext, UIComponent component, String s) { for (Capital capital : getCapitalsParser(facesContext).getCapitalsList()) { if (capital.getName().equals(s)) { return capital; } } return null; } public String getAsString(FacesContext facesContext, UIComponent component, Object o) { if (o == null) return null; return ((Capital) o).getName(); } private CapitalsParser getCapitalsParser(FacesContext facesContext) { if (capitalsParser == null) { ELContext elContext = facesContext.getELContext(); capitalsParser = (CapitalsParser) elContext.getELResolver().getValue(elContext, null, "capitalsParser"); } return capitalsParser; } }
