PickList
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 and more.
Source
<h:form>
<p:growl id="msg" showDetail="true" escape="false" />
<h3 style="margin-top:0">Basic PickList</h3>
<p:pickList id="pickList" value="#{pickListBean.cities}" var="city"
itemLabel="#{city}" itemValue="#{city}" />
<p:commandButton id="citySubmit" value="Submit" update="displayCities" oncomplete="cityDialog.show()" style="margin-top:5px"/>
<h3>PickList on Steroids: Pojo Support with Effect, Captions, Custom Content, Reordering, Filtering, Checkboxes and Ajax Transfer</h3>
<p:pickList id="pojoPickList" value="#{pickListBean.players}" var="player" effect="bounce"
itemValue="#{player}" itemLabel="#{player.name}" converter="player"
showSourceControls="true" showTargetControls="true" showCheckbox="true"
showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains" >
<f:facet name="sourceCaption">Available</f:facet>
<f:facet name="targetCaption">Starting</f:facet>
<p:ajax event="transfer" listener="#{pickListBean.onTransfer}" update="msg" />
<p:column style="width:25%">
<p:graphicImage value="/images/barca/#{player.photo}" width="30" height="40" />
</p:column>
<p:column style="width:75%;">
#{player.name}
</p:column>
</p:pickList>
<p:commandButton id="pojoSubmit" value="Submit" update="displayPlayers" oncomplete="playerDialog.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="#{pickListBean.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="#{pickListBean.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="playerDialog">
<h:panelGrid id="displayPlayers" columns="2">
<h:outputText value="Source: " style="font-weight:bold"/>
<ui:repeat value="#{pickListBean.players.source}" var="player">
<h:outputText value="#{player.name}" style="margin-right:5px" />
</ui:repeat>
<h:outputText value="Target: " style="font-weight:bold"/>
<ui:repeat value="#{pickListBean.players.target}" var="player">
<h:outputText value="#{player.name}" style="margin-right:5px" />
</ui:repeat>
</h:panelGrid>
</p:dialog>
</h:form>
package org.primefaces.examples.view;
import java.util.ArrayList;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import org.primefaces.event.TransferEvent;
import org.primefaces.examples.domain.Player;
import org.primefaces.model.DualListModel;
public class PickListBean {
private DualListModel<Player> players;
private DualListModel<String> cities;
public PickListBean() {
//Players
List<Player> source = new ArrayList<Player>();
List<Player> target = new ArrayList<Player>();
source.add(new Player("Messi", 10, "messi.jpg"));
source.add(new Player("Iniesta", 8, "iniesta.jpg"));
source.add(new Player("Villa", 7, "villa.jpg"));
source.add(new Player("Alves", 2, "alves.jpg"));
source.add(new Player("Xavi", 6, "xavi.jpg"));
source.add(new Player("Puyol", 5, "puyol.jpg"));
players = new DualListModel<Player>(source, target);
//Cities
List<String> citiesSource = new ArrayList<String>();
List<String> citiesTarget = new ArrayList<String>();
citiesSource.add("Istanbul");
citiesSource.add("Ankara");
citiesSource.add("Izmir");
citiesSource.add("Antalya");
citiesSource.add("Bursa");
cities = new DualListModel<String>(citiesSource, citiesTarget);
}
public DualListModel<Player> getPlayers() {
return players;
}
public void setPlayers(DualListModel<Player> players) {
this.players = players;
}
public DualListModel<String> getCities() {
return cities;
}
public void setCities(DualListModel<String> cities) {
this.cities = cities;
}
public void onTransfer(TransferEvent event) {
StringBuilder builder = new StringBuilder();
for(Object item : event.getItems()) {
builder.append(((Player) 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);
}
}
