PickList is a dual list input component featuring Drag and Drop based reordering, transition effects, pojo support, theming filtering, captions, checkbox selection, client-server callbacks, responsive layout and more.
Documentation<h:form> <p:growl id="msg" showDetail="true" escape="false" /> <h3 style="margin-top: 0">Basic PickList</h3> <p:pickList id="pickList" value="#{pickListView.cities}" var="cities" itemLabel="#{cities}" itemValue="#{cities}" /> <p:commandButton id="citySubmit" value="Submit" update="displayCities" oncomplete="PF('cityDialog').show()" style="margin-top:5px" /> <h3>PickList on Steroids: Pojo Support with Effect, Captions, Custom Content, Reordering, Filtering, Checkboxes, <br /> Ajax Events and Responsive</h3> <p:pickList id="PojoPickList" value="#{pickListView.themes}" var="theme" effect="bounce" itemValue="#{theme}" itemLabel="#{theme.displayName}" showSourceControls="true" showTargetControls="true" showCheckbox="true" showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains" converter="#{themeConverter}" responsive="true"> <f:facet name="sourceCaption">Available</f:facet> <f:facet name="targetCaption">Starting</f:facet> <p:ajax event="transfer" listener="#{pickListView.onTransfer}" update="msg" /> <p:ajax event="select" listener="#{pickListView.onSelect}" update="msg"/> <p:ajax event="unselect" listener="#{pickListView.onUnselect}" update="msg"/> <p:ajax event="reorder" listener="#{pickListView.onReorder}" update="msg"/> <p:column style="width:15%"> <h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{theme.name}.png" alt="#{theme.name}" styleClass="ui-theme"/> </p:column> <p:column style="width:85%;"> <h:outputText value="#{theme.displayName}" /> </p:column> </p:pickList> <p:commandButton id="pojoSubmit" value="Submit" update="displayThemes" oncomplete="PF('themesDialog').show()" style="margin-top:5px" /> <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="cityDialog"> <h:panelGrid id="displayCities" columns="2"> <h:outputText value="Source: " style="font-weight:bold" /> <ui:repeat value="#{pickListView.cities.source}" var="item"> <h:outputText value="#{item}" style="margin-right:5px" /> </ui:repeat> <h:outputText value="Target: " style="font-weight:bold" /> <ui:repeat value="#{pickListView.cities.target}" var="item"> <h:outputText value="#{item}" style="margin-right:5px" /> </ui:repeat> </h:panelGrid> </p:dialog> <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="themesDialog"> <h:panelGrid id="displayThemes" columns="2"> <h:outputText value="Source: " style="font-weight:bold" /> <ui:repeat value="#{pickListView.themes.source}" var="theme"> <h:outputText value="#{theme.name}" style="margin-right:5px" /> </ui:repeat> <h:outputText value="Target: " style="font-weight:bold" /> <ui:repeat value="#{pickListView.themes.target}" var="theme"> <h:outputText value="#{theme.name}" style="margin-right:5px" /> </ui:repeat> </h:panelGrid> </p:dialog> </h:form>
@Named @RequestScoped public class PickListView { @Inject private ThemeService service; private DualListModel<String> cities; private DualListModel<Theme> themes; @PostConstruct public void init() { //Cities List<String> citiesSource = new ArrayList<String>(); List<String> citiesTarget = new ArrayList<String>(); citiesSource.add("San Francisco"); citiesSource.add("London"); citiesSource.add("Paris"); citiesSource.add("Istanbul"); citiesSource.add("Berlin"); citiesSource.add("Barcelona"); citiesSource.add("Rome"); cities = new DualListModel<String>(citiesSource, citiesTarget); //Themes List<Theme> themesSource = service.getThemes().subList(0, 5); List<Theme> themesTarget = new ArrayList<Theme>(); themes = new DualListModel<Theme>(themesSource, themesTarget); } public DualListModel<String> getCities() { return cities; } public void setCities(DualListModel<String> cities) { this.cities = cities; } public ThemeService getService() { return service; } public void setService(ThemeService service) { this.service = service; } public DualListModel<Theme> getThemes() { return themes; } public void setThemes(DualListModel<Theme> themes) { this.themes = themes; } public void onTransfer(TransferEvent event) { StringBuilder builder = new StringBuilder(); for(Object item : event.getItems()) { builder.append(((Theme) item).getName()).append("<br />"); } FacesMessage msg = new FacesMessage(); msg.setSeverity(FacesMessage.SEVERITY_INFO); msg.setSummary("Items Transferred"); msg.setDetail(builder.toString()); FacesContext.getCurrentInstance().addMessage(null, msg); } public void onSelect(SelectEvent<Theme> event) { FacesContext context = FacesContext.getCurrentInstance(); context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Selected", event.getObject().getName())); } public void onUnselect(UnselectEvent<Theme> event) { FacesContext context = FacesContext.getCurrentInstance(); context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Unselected", event.getObject().getName())); } public void onReorder() { FacesContext context = FacesContext.getCurrentInstance(); context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "List Reordered", null)); } }
@Named @ApplicationScoped public class ThemeService { private List<Theme> themes; @PostConstruct public void init() { themes = new ArrayList<>(); themes.add(new Theme(0, "Nova-Light", "nova-light")); themes.add(new Theme(1, "Nova-Dark", "nova-dark")); themes.add(new Theme(2, "Nova-Colored", "nova-colored")); themes.add(new Theme(3, "Luna-Blue", "luna-blue")); themes.add(new Theme(4, "Luna-Amber", "luna-amber")); themes.add(new Theme(5, "Luna-Green", "luna-green")); themes.add(new Theme(6, "Luna-Pink", "luna-pink")); themes.add(new Theme(7, "Omega", "omega")); } public List<Theme> getThemes() { return themes; } }