JSF2.3 selectOneListbox – Ejemplos

En JSF, la etiqueta selectOneListbox se utiliza para crear una lista desplegable, y se  representa como un HTML <select>.  Las etiquetas <option> dentro del elemento <select> definen las opciones disponibles en la lista. El atributo «size»   define el número de opciones visibles en una lista desplegable.

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

JSF:

<h:selectOneListbox value="#{ejemploSelectOneListbox.colorFavorito}">
     <f:selectItem itemValue="1" itemLabel="1. Rojo" />
     <f:selectItem itemValue="2" itemLabel="2. Azul" />
     <f:selectItem itemValue="3" itemLabel="3. Verde" />
</h:selectOneListbox>

HTML:

<select name="form:j_idt6" size="3">	
     <option value="1">1. Rojo</option>
     <option value="2">2. Azul</option>
     <option value="3">3. Verde</option>
</select>

Ejemplo 

Escribir un formulario que seleccione de tres listas desplegables (colores, animales y marca de autos).  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  EjemploSelectOneListbox.java

package com.josehuaman.ejemplos;

import java.io.Serializable;
import java.util.ArrayList;
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 EjemploSelectOneListbox implements Serializable {

	private static final long serialVersionUID = 1L;
	
	private String colorFavorito;
	private String animalFavorito;
	private String autoFavorito;
	
	private List<SelectItem> listaColores;
	private String[] listaAnimales;
	private Map<String, Object> listaAutos;

	@PostConstruct
	public void init() {
		//lista de colores utilizando la classe SelecItem
		listaColores = new ArrayList<SelectItem>();
		listaColores.add(new SelectItem(1, "1. Azul"));
		listaColores.add(new SelectItem(2, "2. Verde"));
		listaColores.add(new SelectItem(3, "3. Rojo"));
		listaColores.add(new SelectItem(4, "4. Azul"));
		listaColores.add(new SelectItem(5, "5. Amarrillo"));
		
		//lista de autos utilizando Arrays
		listaAnimales = new String[5];
		listaAnimales[0] = "1. Perro";
		listaAnimales[1] = "2. Gato";
		listaAnimales[2] = "3. Oso";
		listaAnimales[3] = "4. Caballo";
		listaAnimales[4] = "5. Tigre";
		
		//lista de aves utilizando Map
		listaAutos = new LinkedHashMap<String,Object>();
		listaAutos.put("1. Bmw", "1"); 
		listaAutos.put("2. Chevrolet", "2");
		listaAutos.put("3. Ford", "3");
		listaAutos.put("4. Fiat", "4");
		listaAutos.put("5. Honda", "5");
	}

	public String getColorString() {
		return "Color favorito: " + colorFavorito;
	}
	
	public String getAnimalString() {
		return "Animal favorito: " + animalFavorito;
	}
	
	public String getAutoString() {
		return "Auto favorito: " + autoFavorito;
	}



	public List<SelectItem> getListaColores() {
		return listaColores;
	}

	public void setListaColores(List<SelectItem> listaColores) {
		this.listaColores = listaColores;
	}

	public String[] getListaAnimales() {
		return listaAnimales;
	}

	public void setListaAnimales(String[] listaAnimales) {
		this.listaAnimales = listaAnimales;
	}

	public Map<String, Object> getListaAutos() {
		return listaAutos;
	}

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

	public String getColorFavorito() {
		return colorFavorito;
	}

	public void setColorFavorito(String colorFavorito) {
		this.colorFavorito = colorFavorito;
	}

	public String getAnimalFavorito() {
		return animalFavorito;
	}

	public void setAnimalFavorito(String animalFavorito) {
		this.animalFavorito = animalFavorito;
	}

	public String getAutoFavorito() {
		return autoFavorito;
	}

	public void setAutoFavorito(String autoFavorito) {
		this.autoFavorito = autoFavorito;
	}
}

Página JSF con el formulário: ejemploSelectOneListbox.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 SelectOneListbox  </title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectOneListbox </h2> 
  	<h:form id="form">
  		<h:outputLabel value="Eliga color favorito: "/>
   		<h:selectOneListbox value="#{ejemploSelectOneListbox.colorFavorito}">
		   	<f:selectItems value="#{ejemploSelectOneListbox.listaColores}" />
		</h:selectOneListbox>
		<br/><br/>
		<h:outputLabel value="Eliga animal favorito: "/>
		<h:selectOneListbox value="#{ejemploSelectOneListbox.animalFavorito}">
		   	<f:selectItems value="#{ejemploSelectOneListbox.listaAnimales}" />
		</h:selectOneListbox>
		<br/><br/>
		<h:outputLabel value="Eliga auto favorito: "/>
		<h:selectOneListbox value="#{ejemploSelectOneListbox.autoFavorito}">
		   	<f:selectItems value="#{ejemploSelectOneListbox.listaAutos}" />
		</h:selectOneListbox>		
		<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 SelectOneListbox - Respuesta</title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectOneListbox - Respuesta</h2>
	<h:form>
		<h:outputText value="#{ejemploSelectOneListbox.colorString}" /><br/>
		<h:outputText value="#{ejemploSelectOneListbox.animalString}" /><br/>
		<h:outputText value="#{ejemploSelectOneListbox.autoString}" />
	</h:form>
</h:body>
</html>

Resultado: 

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