OmniFaces & JSF Fans: august 2015

OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...
.	.	.	.	.	.	.	.

duminică, 30 august 2015

[JSF Page Author Beginner's Guide] JSF <selectManyListbox> / HTML5 <select> [multiple]

The <h:selectManyListbox> renders an HTML "select multiple" element

VDL / UISelectMany / HTML Reference

Common/basic usage in JSF (I) - using hard-coded <f:selectItem>:

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html">

<h:head>

<title>JSF selectManyListbox examples</title>

</h:head>

<h:body>

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayers}">

<f:selectItem itemValue="Rafael Nadal" itemLabel="Rafa" />

<f:selectItem itemValue="Roger Federer" itemLabel="Roger F" />

<f:selectItem itemValue="Novak Djokovic" itemLabel="Nole" />

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

</h:body>

</html>

Common/basic usage in JSF (II) - "populate" <f:selectItems> from a Map

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html">

<h:head>

<title>JSF selectManyListbox examples</title>

</h:head>

<h:body>

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayers}">

<f:selectItems value="#{playerBean.playersMap}"/>

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

</h:body>

</html>

Common/basic usage in JSF (III) - "populate" <f:selectItems> from an array of Object

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html">

<h:head>

<title>JSF selectManyListbox examples</title>

</h:head>

<h:body>

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayers}">

<f:selectItems value="#{playerBean.playersArray}" var="t" itemLabel="#{t.label}" itemValue="#{t.value}"/>

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

</h:body>

</html>

The <h:selectManyListbox> will be rendered in HTML as:

<option value="Roger Federer">Roger F</option>

</select>

The PlayerBean will be:

package beans;

import java.io.Serializable;

import javax.enterprise.context.SessionScoped;

import javax.inject.Named;

import java.util.LinkedHashMap;

import java.util.Map;

@Named

@SessionScoped

public class PlayerBean implements Serializable {

private String[] selectedPlayers;

private static final Map<String, Object> playersMap;

private static final Player[] playersArray;

static {

playersMap = new LinkedHashMap<>();

playersMap.put("Rafa", "Rafael Nadal"); //label, value

playersMap.put("Roger F", "Roger Federer");

playersMap.put("Nole", "Novak Djokovic");

}

static {

playersArray = new Player[3];

playersArray[0] = new Player("Rafa", "Rafael Nadal");

playersArray[1] = new Player("Roger F", "Roger Federer");

playersArray[2] = new Player("Nole", "Novak Djokovic");

}

public Map<String, Object> getPlayersMap() {

return playersMap;

}

public Player[] getPlayersArray() {

return playersArray;

}

public String[] getSelectedPlayers() {

return selectedPlayers;

}

public void setSelectedPlayers(String[] selectedPlayers) {

this.selectedPlayers = selectedPlayers;

}

public String selectedAction() {

return "data";

}

The Player simply encapsulate an item label and value (used in case III from above):

package beans;

import java.io.Serializable;

import java.util.Objects;

public class Player implements Serializable {

private String label;

private String value;

public Player(String label, String value) {

this.label = label;

this.value = value;

}

public String getLabel() {

return label;

}

public void setLabel(String label) {

this.label = label;

}

public String getValue() {

return value;

}

public void setValue(String value) {

this.value = value;

}

@Override

public int hashCode() {

int hash = 5;

hash = 29 * hash + Objects.hashCode(this.label);

hash = 29 * hash + Objects.hashCode(this.value);

return hash;

}

@Override

public boolean equals(Object obj) {

if (obj == null) {

return false;

}

if (getClass() != obj.getClass()) {

return false;

}

final Player other = (Player) obj;

if (!Objects.equals(this.label, other.label)) {

return false;

}

if (!Objects.equals(this.value, other.value)) {

return false;

}

return true;

}

@Override

public String toString() {

return label + "/" + value;

}

The data.xhtml page is:

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html">

<h:head>

</h:head>

<h:body>

Selected players:

#{playerBean.selectedPlayers[0]}

#{playerBean.selectedPlayers[1]}

#{playerBean.selectedPlayers[2]}

</h:body>

</html>

Data flow in image:

More examples:

Add xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" for pass-through attributes

Adjust the number of visible items via the 'size' attribute

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayers}" size="2">

<f:selectItem itemValue="Rafael Nadal" itemLabel="Rafa" />

<f:selectItem itemValue="Roger Federer" itemLabel="Roger F" />

<f:selectItem itemValue="Novak Djokovic" itemLabel="Nole" />

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

Styling messages with inner CSS

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayers}" style="color:#00f;">

<f:selectItem itemValue="Rafael Nadal" itemLabel="Rafa" />

<f:selectItem itemValue="Roger Federer" itemLabel="Roger F" />

<f:selectItem itemValue="Novak Djokovic" itemLabel="Nole" />

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

Styling messages with CSS class

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayers}" styleClass="selectmanylistbox-css">

<f:selectItem itemValue="Rafael Nadal" itemLabel="Rafa" />

<f:selectItem itemValue="Roger Federer" itemLabel="Roger F" />

<f:selectItem itemValue="Novak Djokovic" itemLabel="Nole" />

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

Preselect some items via the bean's (post) constructor

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayers}">

<f:selectItem itemLabel="Select a player ..."/>

<f:selectItems value="#{playerBean.playersArray}" var="t" itemLabel="#{t.label}" itemValue="#{t.value}"/>

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

And place initialization in the bean constructor:

@Named

@SessionScoped

public class PlayerBean implements Serializable {
...

public PlayerBean() {

selectedPlayers = new String[]{"Rafael Nadal","Novak Djokovic"};

}

...

}

Or in post constructor (this is useful if you need to perform initialization based on some injected artifacts):

@Named

@SessionScoped

public class PlayerBean implements Serializable {

@Inject
private SelectedPlayersBean selectedPlayersBean;
...

@PostConstruct

public void init() {

selectedPlayers = selectedPlayersBean.getPlayers(); // must return String[] with valid items

}

...

}

Keep in mind that constructor (and post constructor) are invoked at each request in case of request scoped beans, so initialization will take place at each request ! This kind of initialization is commonly useful in view/session scoped beans where constructor (and post constructor) are invoked per view/session.

Add a no selection option

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayers}">

<f:selectItem itemLabel="Select a player ..." noSelectionOption="true"/>

<f:selectItems value="#{playerBean.playersArray}" var="t" itemLabel="#{t.label}" itemValue="#{t.value}"/>

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

Use a built-in converter

<h:form>

<h:selectManyListbox value="#{playerBean.selectedRanks}" converter="javax.faces.Integer">

<f:selectItems value="#{playerBean.playersRanks}"/>

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

The story behind this example is pretty simple and we start by supposing that the above converter is not specified. Basically, the playersRanks is a list of integers that "populates" our list, and the selectedRanks represents the user selections:

private ArrayList<Integer> selectedRanks;

private static final ArrayList<Integer> playersRanks;

static {

playersRanks = new ArrayList<>();

playersRanks.add(1);

playersRanks.add(2);

playersRanks.add(3);

}

public ArrayList<Integer> getPlayersRanks() {

return playersRanks;

}

public ArrayList<Integer> getSelectedRanks() {

return selectedRanks;

}

public void setSelectedRanks(ArrayList<Integer> selectedRanks) {

this.selectedRanks = selectedRanks;

}

So, the user may select the ranks and submit them without issues/errors. Even if no error occurred, we can notice a "strange" behavior if we try to run the following snippet of code:

<ui:repeat value="#{playerBean.selectedRanks}" var="i">

#{i}: #{i.getClass()}

</ui:repeat>

The output reveals that the selected ranks are strings, not integers as we expected to see:

1: class java.lang.String

3: class java.lang.String

The explanation relies on the fact that "the generic type information of List<Integer> is lost during runtime and therefore JSF/EL who sees only List is not able to identify that the generic type is Integer and assumes it to be default String (as that's the default type of the underlying HttpServletRequest#getParameter() call during apply request values phase) - BalusC".

There are two approaches:

· explicitly specify a Converter

· use Integer[] instead

In this case, we can use the built-in javax.faces.Integer built-in converter. Now, we can perform the same test and the output will be:

1: class java.lang.Integer

3: class java.lang.Integer

Read further explanations here.

Use a custom converter

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayersList}" converter="playerConverter">

<f:selectItems value="#{playerBean.playersList}" var="t" itemLabel="#{t.label}" itemValue="#{t}"/>

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

This use case continue the story from the above use case. Basically, this time we use data for which we don't have a built-in converter available. The custom converter used here is needed because this time the list is "populated" with several Player instances:

private ArrayList<Player> selectedPlayersList;

private static final ArrayList<Player> playersList;

static {

playersList = new ArrayList<>();

playersList.add(new Player("Rafa", "Rafael Nadal"));

playersList.add(new Player("Roger F", "Roger Federer"));

playersList.add(new Player("Nole", "Novak Djokovic"));

}

public ArrayList<Player> getPlayersList() {

return playersList;

}

public ArrayList<Player> getSelectedPlayersList() {

return selectedPlayersList;

}

public void setSelectedPlayersList(ArrayList<Player> selectedPlayersList) {

this.selectedPlayersList = selectedPlayersList;

}

Remember from the above use case that the generic type of List<> is lost during runtime. Since the selected items are treated as strings instead of Player instances, the below code will cause an error because #{i.label} cannot be evaluated:

<ui:repeat value="#{playerBean.selectedPlayersList}" var="i">

#{i.label}: #{i.getClass()}

</ui:repeat>

Since there is no built-in converter for converting strings to Player instances, we need a custom converter as below:

package beans;

import javax.faces.component.UIComponent;

import javax.faces.context.FacesContext;

import javax.faces.convert.Converter;

import javax.faces.convert.FacesConverter;

@FacesConverter("playerConverter")

public class PlayerConverter implements Converter {

@Override

public Object getAsObject(FacesContext context, UIComponent component,String value) {

String[] parts = value.split("/");

return new Player(parts[0],parts[1]);

}

@Override

public String getAsString(FacesContext context, UIComponent component,Object value) {

return value.toString();

}

Now, everything works as expected!

Use the omnifaces.SelectItemsConverter/omnifaces.SelectItemsIndexConverter converters

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayersList}" converter="omnifaces.SelectItemsConverter">

<f:selectItems value="#{playerBean.playersList}" var="t" itemLabel="#{t.label}" itemValue="#{t}"/>

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayersList}" converter="omnifaces.SelectItemsIndexConverter">

<f:selectItems value="#{playerBean.playersList}" var="t" itemLabel="#{t.label}" itemValue="#{t}"/>

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

If you read the above two use cases (recommended) then is pretty easy to intuit that you will to write a custom converter for each type of data that "populates" a list. Well, a generic solution consist in using the OmniFaces, SelectItemsConverter or SelectItemsIndexConverter. The OmniFaces Showcase provides all the information needed to understand how to use them, so go ahead.

Use HTML 5 'required' attribute

(specifies that the user is required to select a value before submitting the form)

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayers}" pt:required="true" required="true">

<f:selectItem itemValue="Rafael Nadal" itemLabel="Rafa" />

<f:selectItem itemValue="Roger Federer" itemLabel="Roger F" />

<f:selectItem itemValue="Novak Djokovic" itemLabel="Nole" />

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

Notice that this is a client side validation, so reinforce it with a JSF server-side validation (e.g. required built-in validator).

Use HTML 5 'autofocus' attribute

(specifies that the drop-down list should automatically get focus when the page loads)

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayers}" pt:autofocus="true">

<f:selectItem itemValue="Rafael Nadal" itemLabel="Rafa" />

<f:selectItem itemValue="Roger Federer" itemLabel="Roger F" />

<f:selectItem itemValue="Novak Djokovic" itemLabel="Nole" />

</h:selectManyListbox>

<h:commandButton value="Select" action="#{playerBean.selectedAction()}"/>

</h:form>

AJAXify <h:selectManyListbox> (select a single item)

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayers}">

<f:selectItem itemValue="Rafael Nadal" itemLabel="Rafa" />

<f:selectItem itemValue="Roger Federer" itemLabel="Roger F" />

<f:selectItem itemValue="Novak Djokovic" itemLabel="Nole" />

<f:ajax execute="@this" render="@form"/>

</h:selectManyListbox>

#{playerBean.selectedPlayers[0]}

</h:form>

Use 'valueChangeListener' attribute with <h:selectManyListbox>

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayersList}" onchange="this.form.submit();"
converter="playerConverter" valueChangeListener="#{playerBean.selectedVCLAction}">

<f:selectItems value="#{playerBean.playersList}" var="t" itemLabel="#{t.label}" itemValue="#{t}"/>

</h:selectManyListbox>

</h:form>

The selectedVCLAction() is listed below:

private static final Logger LOG = Logger.getLogger(PlayerBean.class.getName());

public void selectedVCLAction(ValueChangeEvent event) {

LOG.log(Level.INFO, "selectedVCLAction() called, {0}", ((Player)((ArrayList)event.getNewValue()).get(0)).getLabel());

}

AJAXify <h:selectManyListbox> (select a single item) with 'valueChangeListener' attribute

<h:form>

<h:selectManyListbox value="#{playerBean.selectedPlayersList}"
converter="playerConverter" valueChangeListener="#{playerBean.selectedVCLAction}">

<f:selectItems value="#{playerBean.playersList}" var="t" itemLabel="#{t.label}" itemValue="#{t}"/>

<f:ajax execute="@this" render="@form"/>

</h:selectManyListbox>

</h:form>

The selectedVCLAction() is listed below:

private static final Logger LOG = Logger.getLogger(PlayerBean.class.getName());

public void selectedVCLAction(ValueChangeEvent event) {

LOG.log(Level.INFO, "selectedVCLAction() called, {0}", ((Player)((ArrayList)event.getNewValue()).get(0)).getLabel());

}

Complete source code on GitHub.

See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.
SelectManyListbox in JSF Extension on JSF ShowCase ZEEF page.

Abonați-vă la: Postări ( Atom )

My JSF Books/Videos					My JSF Tutorials	OmniFaces/JSF PPTs
					JSF 2.3 Tutorial JSF Caching Tutorial JSF Navigation Tutorial JSF Scopes Tutorial JSF Page Author Beginner's Guide OmniFaces 2.3 Tutorial Examples OmniFaces 2.2 Tutorial Examples JSF Events Tutorial OmniFaces Callbacks Usages JSF State Tutorial JSF and Design Patterns	JSF 2.3 New Features (2.3-m04) Introduction to OmniFaces 25+ Reasons to use OmniFaces in JSF OmniFaces Validators OmniFaces Converters JSF Design Patterns Mastering OmniFaces Reusable and less-verbose JSF code

.

.

.

.

.

.

.

.

Search on blog

Petition by Java EE Guardians

Twitter

duminică, 30 august 2015

[JSF Page Author Beginner's Guide] JSF <selectManyListbox> / HTML5 <select> [multiple]

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

JSF/OmniFaces Resources

Abonaţi-vă la JSF/OmniFaces Fans

Visitors Starting 4 September 2015

Renderers

Platform

Map Wrapper

JNDI

State

Beans

Components

.Events

Servlets

.

Blog Flux

Blogorama

.

.

addyourblogbanner

Reflection

Messages

JSON

Utils

Hacks

Facelets

Exceptions

Callbacks

Ajax

Faces

.

Globe Of Blogs

Blog Listing

.

DaniWeb

blogtopsites