OrderList

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;
    } 
}

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

Nova-Light

Nova-Dark

Nova-Colored

Luna-Blue

Luna-Amber

Luna-Green

Luna-Pink

Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.