JSF pickList

<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="theme" 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>

@ManagedBean
public class PickListView {

@ManagedProperty("#{themeService}")
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 event) {
    FacesContext context = FacesContext.getCurrentInstance();
    context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Selected", event.getObject().toString()));
}
 
public void onUnselect(UnselectEvent event) {
    FacesContext context = FacesContext.getCurrentInstance();
    context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Unselected", event.getObject().toString()));
}
 
public void onReorder() {
    FacesContext context = FacesContext.getCurrentInstance();
    context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "List Reordered", null));
}

}