PickList
PickList is a dual list input component featuring Drag and Drop based reordering, transition effects, pojo support, theme support and more.
Source
<h:form id="form">
<h3>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()"/>
<h3>Pojo Support with Bounce Effect, Captions, Custom Content and Reorder Controls</h3>
<p:pickList id="pojoPickList" value="#{pickListBean.players}"
var="player" iconOnly="true" effect="bounce"
itemValue="#{player}" converter="player"
showSourceControls="true" showTargetControls="true">
<f:facet name="sourceCaption">Available</f:facet>
<f:facet name="targetCaption">Starting</f:facet>
<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} - #{player.number}
</p:column>
</p:pickList>
<p:commandButton id="pojoSubmit" value="Submit" update="displayPlayers" oncomplete="playerDialog.show()"/>
<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 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;
}
}