JSF selectOneListbox

En JSF, el componente h: selectOneListbox renderiza elemento <select> de HTML.

JSF selectOneListbox con una cantidad fija de opciones

El componente que obtendremos contendrá tantas opciones como componentes f: selectItem se hayan agregado a select One Listbox en el formulario JSF.

<h:selectOneListbox id="lb-country" value="#{bean.selectedCountry}">
	<f:selectItem itemValue="argentina" itemLabel="Argentina" />
	<f:selectItem itemValue="uruguay" itemLabel="Uruguay" />
	<f:selectItem itemValue="paraguay" itemLabel="Paraguay" />
	<f:selectItem itemValue="bolivia" itemLabel="Bolivia" />
	<f:selectItem itemValue="peru" itemLabel="Perú" />
</h:selectOneListbox>

El atributo value de h: selectOneListbox contiene una expresión que hace referencia a una propiedad de tipo String en el Managed Bean. El valor de la opción seleccionada por el usuario se asignará automáticamente a esta propiedad, lo que permitirá manipular el valor seleccionado desde el código Java.

El código HTML generado es el siguiente:

<select id="customerForm:lb-country" name="customerForm:lb-country" size="5">
	<option value="argentina">Argentina</option>
	<option value="uruguay">Uruguay</option>
	<option value="paraguay">Paraguay</option>
	<option value="bolivia">Bolivia</option>
	<option value="peru">Perú</option>
</select>

En pantalla obtendremos un elemento <select> de HTML que visualiza todas sus opciones:

Podemos limitar la cantidad de opciones visibles con el atributo size. Las opciones no visibles son accesibles haciendo scroll con la barra lateral del componente o las teclas de flecha. En el siguiente ejemplo asignamos al atributo size el valor «2»:

<h:selectOneListbox id="lb-country" size="2" value="#{bean.selectedCountry}">
	<f:selectItem itemValue="argentina" itemLabel="Argentina" />
	<f:selectItem itemValue="uruguay" itemLabel="Uruguay" />
	<f:selectItem itemValue="paraguay" itemLabel="Paraguay" />
	<f:selectItem itemValue="bolivia" itemLabel="Bolivia" />
	<f:selectItem itemValue="peru" itemLabel="Perú" />
</h:selectOneListbox>

En pantalla obtendremos un elemento <select> de HTML que visualiza sus dos primeras opciones:

JSF selectOneListbox con una cantidad variable de opciones

En el siguiente ejemplo se muestran dos casos en los que el número de opciones que contendrá el elemento <select> puede ser determinado en tiempo de ejecución gracias al componente f: selectItems:

<h:selectOneListbox value="#{bean.selectedRiver}">
	<f:selectItems value="#{bean.rivers}" />
</h:selectOneListbox>
<h:selectOneListbox value="#{bean.selectedLake}">
	<f:selectItems value="#{bean.lakes}" />
</h:selectOneListbox>

El atributo value de los componentes f: selectItems contienen una expresión que hace referencia a un java.util.List y un java.util.Map, respectivamente.

Estos últimos son cargados durante la inicialización del Managed Bean, pudiendo hacerse con datos recuperados, por ejemplo, de una base de datos. A los fines de este ejemplo se hardcodean estos datos en el método init():

@Named("bean")
@RequestScoped
public class ExampleBean implements Serializable {
    private static final long serialVersionUID = 1L;
	private List<SelectItem> rivers;
	private Map<String, String> lakes;
	
	private String selectedCountry;
	private String selectedRiver;	
	private String selectedLake;	
	
	
	@PostConstruct
	public void init() {
		this.rivers = new ArrayList<SelectItem>();
		this.rivers.add(new SelectItem("parana", "Paraná"));
		this.rivers.add(new SelectItem("limay", "Limay"));
		this.rivers.add(new SelectItem("salado", "Salado"));
		this.rivers.add(new SelectItem("uruguay", "Uruguay"));
		
		this.lakes = new HashMap<String, String>();
		this.lakes.put("san-roque", "San Roque");
		this.lakes.put("argentino", "Argentino");
		this.lakes.put("nahuel-huapi", "Nahuel Huapi");
	}
	
	//getters & setters
	public String aceptar() {
		return "result";
	}
}

La página de resultados hace referencia a las propiedades selectedCountry, selectedRiver y selectedLake, que contienen el valor de las opciones seleccionadas, para visualizar los valores seleccionados.

Conclusión

El componente JSF selectOneListbox proporciona una solución fácil de usar para crear listas desplegables que permiten a los usuarios seleccionar una sola opción. Mediante el uso de este componente, los desarrolladores pueden vincular fácilmente los datos a un cuadro de lista y personalizar su apariencia y comportamiento. Con su sólido conjunto de funciones, el componente selectOneListbox es un activo valioso en cualquier proyecto de desarrollo de aplicaciones web basado en JSF y puede mejorar la experiencia del usuario mejorando la eficiencia y la productividad de los formularios web.

Te puede interesar: