JSF2.3 selectOneMenu – Ejemplos

En JSF, la etiqueta selectOneMenu se utiliza para crear un cuadro desplegable (combobox), y se  representa como un HTML <select> donde el atributo «size» tiene el valor de 1.  Las etiquetas <option> dentro del elemento <select> definen las opciones disponibles en la lista.

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

JSF:

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

HTML:

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

Para representar la lista de elementos, se puede realizar de varias formas, entre ellas:

– Valor codificado en la etiqueta «f: selectItem».

– Valores en un mapa utilizando la etiqueta «f: selectItems».

– Generar valores en una matriz de objetos y colocarlos en la etiqueta «f: selectItems», luego representar el valor con el atributo «var».

Ejemplo 

Escribir un formulario que seleccione de combobox 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  EjemploSelectOneMenu.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 EjemploSelectOneMenu 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: ejemploSelectOneMenu.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 SelectOneMenu</title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectOneMenu</h2>
	<h:form id="form">
  		<h:outputLabel value="Eliga color favorito: "/>
   		<h:selectOneMenu value="#{ejemploSelectOneMenu.colorFavorito}">
		   	<f:selectItems value="#{ejemploSelectOneMenu.listaColores}" />
		</h:selectOneMenu>
		<br/><br/>
		<h:outputLabel value="Eliga animal favorito: "/>
		<h:selectOneMenu value="#{ejemploSelectOneMenu.animalFavorito}">
		   	<f:selectItems value="#{ejemploSelectOneMenu.listaAnimales}" />
		</h:selectOneMenu>
		<br/><br/>
		<h:outputLabel value="Eliga auto favorito: "/>
		<h:selectOneMenu value="#{ejemploSelectOneMenu.autoFavorito}">
		   	<f:selectItems value="#{ejemploSelectOneMenu.listaAutos}" />
		</h:selectOneMenu>		
		<br/><br/>
		<h:commandButton value="Clicar" 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 SelectOneMenu - Respuesta</title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectOneMenu - Respuesta</h2>
	<h:form>
		<h:outputText value="#{ejemploSelectOneMenu.colorString}" /><br/>
		<h:outputText value="#{ejemploSelectOneMenu.animalString}" /><br/>
		<h:outputText value="#{ejemploSelectOneMenu.autoString}" />
	</h:form>
</h:body>
</html>

Resultado: 

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