OrderList is used to sort a collection via Drag and Drop based reordering, transition effects, pojo support, theme support and more.
Documentation<h:form> <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" /> <h3 style="margin-top: 0">Basic OrderList</h3> <p:orderList value="#{orderListView.cities}" var="city" controlsLocation="none" itemLabel="#{city}" itemValue="#{city}" /> <p:commandButton value="Submit" update="displayCities" oncomplete="PF('cityDialog').show()" style="margin-top:5px" /> <h3>Pojo Support with Clip Effect, Captions, Custom Content, Reorder Controls, Events and Responsive</h3> <p:orderList value="#{orderListView.themes}" var="theme" itemValue="#{theme}" converter="#{themeConverter}" controlsLocation="left" responsive="true"> <p:ajax event="select" listener="#{orderListView.onSelect}" update="msgs"/> <p:ajax event="unselect" listener="#{orderListView.onUnselect}" update="msgs"/> <p:ajax event="reorder" listener="#{orderListView.onReorder}" update="msgs"/> <f:facet name="caption">Available</f:facet> <p:column style="width:40px"> <h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{theme.name}.png" alt="#{theme.name}" styleClass="ui-theme"/> </p:column> <p:column> <h:outputText value="#{theme.displayName}" /> </p:column> </p:orderList> <p:commandButton value="Submit" update="displayThemes" oncomplete="PF('themesDialog').show()" style="margin-top:5px" /> <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="cityDialog" header="Cities" width="200"> <p:dataList id="displayCities" value="#{orderListView.cities}" var="city"> <h:outputText value="#{city}" /> </p:dataList> </p:dialog> <p:dialog modal="true" showEffect="fade" hideEffect="fade" widgetVar="themesDialog" header="Themes" width="200" id="dlgThemes"> <h:panelGrid id="displayThemes" columns="2"> <ui:repeat value="#{orderListView.themes}" var="theme"> <h:outputText value="#{theme.displayName}" style="margin-right:5px" /> <br /> </ui:repeat> </h:panelGrid> </p:dialog> </h:form>
@Named @RequestScoped public class OrderListView { @Inject private ThemeService service; private List<String> cities; private List<Theme> themes; @PostConstruct public void init() { //Cities cities = new ArrayList<String>(); cities.add("San Francisco"); cities.add("London"); cities.add("Paris"); cities.add("Istanbul"); cities.add("Berlin"); cities.add("Barcelona"); cities.add("Rome"); //Themes themes = service.getThemes().subList(0, 6); } public ThemeService getService() { return service; } public void setService(ThemeService service) { this.service = service; } public List<String> getCities() { return cities; } public void setCities(List<String> cities) { this.cities = cities; } public List<Theme> getThemes() { return themes; } public void setThemes(List<Theme> themes) { this.themes = themes; } 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; } }