JSF2.3 selectManyListbox – Ejemplos

En JSF, la etiqueta <h: selectManyListbox /> se utiliza para crear un cuadro de lista desplegable de selección múltiple – cuya representación en HTML es <select>, con atributo «multiple» y «size».  El atributo «size»   define el número de opciones visibles en una lista desplegable.

La documentación de JSF 2.3 etiqueta selectManyListbox está disponible aqui.

JSF:

<h:selectManyListbox value="#{ejemploSelectManyListbox.comidasPreferidas}">
     <f:selectItem itemValue="1" itemLabel="1. Ceviche" />
     <f:selectItem itemValue="2" itemLabel="2. Arroz con pollo" />
     <f:selectItem itemValue="3" itemLabel="3. Lomo Saltado" />
     <f:selectItem itemValue="4" itemLabel="4. Arroz chufa" />
     <f:selectItem itemValue="5" itemLabel="5. Aji de gallina" />
</h:selectManyListbox>

HTML:

<select name="form:j_idt6" multiple="multiple" size="5">	
        <option value="1">1. Ceviche</option>
	<option value="2">2. Arroz con pollo</option>
	<option value="3">3. Lomo Saltado</option>
	<option value="4">4. Arroz chufa</option>
	<option value="5">5. Aji de gallina</option>
</select>

Ejemplo 

Utilizar ejemplos para animales preferidos, marca de autos preferidos, aves preferidas.  Usar otras formas de representar la lista de elementos.

La instalación y configuración de JSF 2.3 con eclipse y wildfly 14 como servidor está desarrollada en este enlace.

Desarrollando el ejemplo:

CDI Managed Bean  EjemploSelectManyListbox.java

package com.josehuaman.ejemplos;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.faces.model.SelectItem;
import javax.inject.Named;

@Named
@RequestScoped
public class EjemploSelectManyListbox implements Serializable {

	private static final long serialVersionUID = 1L;
	
	private String[] animalesPreferidos;
	private String[] autosPreferidos;
	private String[] avesPreferidas;
	
	private List<SelectItem> listaAnimales;
	private String[] listaAutos;
	private Map<String, Object> listaAves;

	@PostConstruct
	public void init() {
		//lista de animales utilizando la classe SelecItem
		listaAnimales = new ArrayList<SelectItem>();
		listaAnimales.add(new SelectItem(1, "1. Perro"));
		listaAnimales.add(new SelectItem(2, "2. Gato"));
		listaAnimales.add(new SelectItem(3, "3. Oso"));
		listaAnimales.add(new SelectItem(4, "4. Caballo"));
		listaAnimales.add(new SelectItem(5, "5. Toro"));
		
		//lista de autos utilizando Arrays
		listaAutos = new String[5];
		listaAutos[0] = "1. Ford";
		listaAutos[1] = "2. Nissan";
		listaAutos[2] = "3. Volkswagen";
		listaAutos[3] = "4. Fiat";
		listaAutos[4] = "5. Toyota";
		
		//lista de aves utilizando Map
		listaAves = new LinkedHashMap<String,Object>();
		listaAves.put("1. Loro", "1"); //label, value
		listaAves.put("2. Condor", "2");
		listaAves.put("3. Papagallo", "3");
		listaAves.put("4. Aguila", "4");
		listaAves.put("5. Canario", "5");
	}
	
	public String getAnimalesString() {
		return "Animales preferidos: " + Arrays.toString(animalesPreferidos);		
	}
	
	public String getAutosString() {
		return "Autos preferidos: " + Arrays.toString(autosPreferidos);		
	}
	
	public String getAvesString() {
		return "Aves preferidas: " + Arrays.toString(avesPreferidas);
	}

	public String[] getAnimalesPreferidos() {
		return animalesPreferidos;
	}

	public void setAnimalesPreferidos(String[] animalesPreferidos) {
		this.animalesPreferidos = animalesPreferidos;
	}

	public String[] getAutosPreferidos() {
		return autosPreferidos;
	}

	public void setAutosPreferidos(String[] autosPreferidos) {
		this.autosPreferidos = autosPreferidos;
	}

	public String[] getAvesPreferidas() {
		return avesPreferidas;
	}

	public void setAvesPreferidas(String[] avesPreferidas) {
		this.avesPreferidas = avesPreferidas;
	}

	public List<SelectItem> getListaAnimales() {
		return listaAnimales;
	}

	public void setListaAnimales(List<SelectItem> listaAnimales) {
		this.listaAnimales = listaAnimales;
	}

	public String[] getListaAutos() {
		return listaAutos;
	}

	public void setListaAutos(String[] listaAutos) {
		this.listaAutos = listaAutos;
	}

	public Map<String, Object> getListaAves() {
		return listaAves;
	}

	public void setListaAves(Map<String, Object> listaAves) {
		this.listaAves = listaAves;
	}

}

Página JSF con el formulário: ejemploSelectManyListbox.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
	<title>Ejemplo JSF2.3 SelectManyListbox </title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectManyListbox</h2> 
  	<h:form id="form">
		<!-- Utilizando SelectItem en la lista en el bean -->
		<h:outputLabel for="animales" value="Cuales son tus animales preferidos? "/>
   		<h:selectManyListbox id="animales" value="#{ejemploSelectManyListbox.animalesPreferidos}">
		   	<f:selectItems value="#{ejemploSelectManyListbox.listaAnimales}"/>
		</h:selectManyListbox>
		<br/><br/>
		<!-- Utilizando Array en la lista -->
		<h:outputLabel for="autos" value="Cuales son tus autos preferidos? "/>
   		<h:selectManyListbox id="autos" value="#{ejemploSelectManyListbox.autosPreferidos}">
		   	<f:selectItems value="#{ejemploSelectManyListbox.listaAutos}"/>
		</h:selectManyListbox>
		<br/><br/>
		<!-- Utilizando Map en la lista-->
		<h:outputLabel for="aves" value="Cuales son tus aves preferidas? "/>
   		<h:selectManyListbox id="aves" value="#{ejemploSelectManyListbox.avesPreferidas}">
		   	<f:selectItems value="#{ejemploSelectManyListbox.listaAves}"/>
		</h:selectManyListbox>
		<br/><br/>
				
		<h:commandButton value="Enviar" action="respuesta" />
	</h:form>
</h:body>
</html>

Página JSF con la respuesta. respuesta.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
	<title>Ejemplo SelectManyListbox - Respuesta</title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectManyListbox - Respuesta</h2>
	<h:form>
		<h:outputText value="#{ejemploSelectManyListbox.animalesString}" />
		<br />
		<h:outputText value="#{ejemploSelectManyListbox.autosString}" />
		<br />
		<h:outputText value="#{ejemploSelectManyListbox.avesString}" />
	</h:form>
</h:body>
</html>

Resultado: 

http://localhost:8080/ejemplo_web_jsf23/ejemploSelectManyListbox.xhtml