JSF selectManyListbox

En JSF, el componente h: selectManyListbox renderiza un elemento <select> de HTML especificando los atributos:

JSF selectManyListbox con una cantidad fija de opciones

En el primer ejemplo se muestra su utilización agregando una cantidad fija de opciones mediante la utilización de f: selectItem:

<h:selectManyListbox id="mlb-countries" value="#{bean.selectedCountries}">
	<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:selectManyListbox>

El atributo value de h: selectManyListbox contiene una expresión que hace referencia a un array de String en el Managed Bean. Los valores de las opciones seleccionadas por el usuario se asignarán automáticamente a este array, lo que permitirá manipular los valores seleccionados desde el código Java.

El código HTML generado es el siguiente:

<select id="customerForm:mlb-countries" name="customerForm:mlb-countries" multiple="multiple" 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>

JSF selectManyListbox con una cantidad variable de opciones

En el siguiente ejemplo se muestran dos casos en los que el número de opciones renderizadas en la página puede ser determinado en tiempo de ejecución gracias al componente f: selectItems:

<h:selectManyListbox id="mlb-rivers" value="#{bean.selectedRivers}">
	<f:selectItems value="#{bean.rivers}" />
</h:selectManyListbox>
					
<h:selectManyListbox id="mlb-lakes" value="#{bean.selectedLakes}">
	<f:selectItems value="#{bean.lakes}" />
</h:selectManyListbox>

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[] selectedCountries;
	private String[] selectedRivers;
	private String[] selectedLakes;
	
	
	@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 los métodos getCheckedCountriesString(), getCheckedRiversString() y getCheckedLakesString() para visualizar los valores seleccionados.

Conclusión

El componente JSF selectManyListbox es una poderosa herramienta para crear formularios complejos y permitir a los usuarios seleccionar múltiples opciones de una lista. Mediante el uso de este componente, los desarrolladores pueden vincular fácilmente los datos a una lista y personalizar su apariencia y comportamiento para satisfacer sus necesidades. Con su sólido conjunto de características, el componente selectManyListbox puede mejorar la experiencia del usuario y mejorar la eficiencia y productividad general de las aplicaciones web basadas en JSF.

Te puede interesar: