JSF2.3 selectManyCheckbox – Ejemplos

por jahuaman · Publicada 16/01/2019 · Actualizado 20/01/2019

En JSF, la etiqueta selectManyCheckBox representa un HTML <TABLE> con múltiples casillas de verificación <input type = «checkbox”> . El número de casillas de verificación depende de JSF <selectItem>. El atributo principal de ese componente selectManyCheckBox es un valor que podría asociarse con una lista de objetos. JSF 2.x proporciona atributos adicionales para selectManyCheckbox, esos atributos agregados están relacionados con los estilos (enabledClass, disabledClass, selectedClass, unSelectedClass) y la forma en que se muestran los datos (hideNoSelectionOption y collectionType).

JSF:

<h:selectManyCheckbox value="#{ejemploSelectManyCheckbox.color}">
     <f:selectItem itemValue="1" itemLabel="Rojo" />
     <f:selectItem itemValue="2" itemLabel="Azul" />
     <f:selectItem itemValue="3" itemLabel="Verde" />
</h:selectManyCheckbox>

HTML:

<table>
     <tr>
          <td>
               <input name="form:j_idt6" id="form:j_idt6:0" value="1" type="checkbox" />
               <label for="form:j_idt6:0" class=""> Rojo</label>
          </td>
          <td>
                <input name="form:j_idt6" id="form:j_idt6:1" value="2" type="checkbox" />
                <label for="form:j_idt6:1" class=""> Azul</label></td>
          <td>
                <input name="form:j_idt6" id="form:j_idt6:2" value="3" type="checkbox" />
                <label for="form:j_idt6:2" class=""> Verde</label>
          </td>
     </tr>
</table>

Ejemplo 1

Escribir un formulario que muestre:

Varias casillas de verificación que contengan el nombre de un color.
Una pregunta que diga: Cuales son tus colores preferidos?
Y un botón ‘Enviar’. Al clicar en el botón ‘Enviar’, el formulario debe mostrar el resultado en otra página.

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 EjemploSelectManyCheckbox.java

package com.josehuaman.ejemplos;

import java.io.Serializable;
import java.util.Arrays;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class EjemploSelectManyCheckbox implements Serializable {

	private static final long serialVersionUID = 1L;
	
	private String[] color;

	public String[] getColor() {
		return color;
	}

	public void setColor(String[] color) {
		this.color = color;
	}

	public String getColorString() {
		return "Tus colores preferidos: " + Arrays.toString(color);		
	}
	
}

Página JSF con el formulário: ejemploSelectManyCheckbox.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 SelectManyCheckbox </title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectManyCheckbox</h2> 
  	<h:form id="form">
  		<h:outputLabel for="color" value="Cuales son tus colores preferidos? "/>
   		<h:selectManyCheckbox id="color" value="#{ejemploSelectManyCheckbox.color}">
		   	<f:selectItem itemValue="1" itemLabel="1. Rojo" />
		   	<f:selectItem itemValue="2" itemLabel="2. Azul" />
		   	<f:selectItem itemValue="3" itemLabel="3. Verde" />
		   	<f:selectItem itemValue="4" itemLabel="4. Amarillo" />
		   	<f:selectItem itemValue="5" itemLabel="5. Naranja" />
		   	<f:selectItem itemValue="6" itemLabel="6. Blanco" />
		</h:selectManyCheckbox>
		<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 SelectManyCheckbox - Respuesta</title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectManyCheckbox</h2> 
	<h:form>
	    <h:outputText value="#{ejemploSelectManyCheckbox.colorString}"/>	
	</h:form>        
</h:body>
</html>

Resultado:

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

Ejemplo 2

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

Desarrollando el ejemplo:

CDI Managed Bean EjemploSelectManyCheckbox.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 EjemploSelectManyCheckbox implements Serializable {

	private static final long serialVersionUID = 1L;
	
	private String[] coloresPreferidos;
	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 getColoresString() {
		return "Colores preferidos: " + Arrays.toString(coloresPreferidos);		
	}
	
	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[] getColoresPreferidos() {
		return coloresPreferidos;
	}

	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;
	}

	public void setColoresPreferidos(String[] coloresPreferidos) {
		this.coloresPreferidos = coloresPreferidos;
	}
	
}

Página JSF con el formulário: ejemploSelectManyCheckbox.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 SelectManyCheckbox </title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectManyCheckbox</h2> 
  	<h:form id="form">
  		<!-- Utilizando SelectItem en el lado del cliente -->
  		<h:outputLabel for="color" value="Cuales son tus colores preferidos? "/>
   		<h:selectManyCheckbox id="color" value="#{ejemploSelectManyCheckbox.coloresPreferidos}">
		   	<f:selectItem itemValue="1" itemLabel="1. Rojo" />
		   	<f:selectItem itemValue="2" itemLabel="2. Azul" />
		   	<f:selectItem itemValue="3" itemLabel="3. Verde" />
		   	<f:selectItem itemValue="4" itemLabel="4. Amarillo" />
		   	<f:selectItem itemValue="5" itemLabel="5. Naranja" />
		   	<f:selectItem itemValue="6" itemLabel="6. Blanco" />
		</h:selectManyCheckbox>
		<br/>
		<!-- Utilizando SelectItem en la lista en el bean -->
		<h:outputLabel for="animales" value="Cuales son tus animales preferidos? "/>
   		<h:selectManyCheckbox id="animales" value="#{ejemploSelectManyCheckbox.animalesPreferidos}">
		   	<f:selectItems value="#{ejemploSelectManyCheckbox.listaAnimales}"/>
		</h:selectManyCheckbox>
		<br/>
		<!-- Utilizando Array en la lista -->
		<h:outputLabel for="autos" value="Cuales son tus autos preferidos? "/>
   		<h:selectManyCheckbox id="autos" value="#{ejemploSelectManyCheckbox.autosPreferidos}">
		   	<f:selectItems value="#{ejemploSelectManyCheckbox.listaAutos}"/>
		</h:selectManyCheckbox>
		<br/>
		<!-- Utilizando Map en la lista-->
		<h:outputLabel for="aves" value="Cuales son tus aves preferidas? "/>
   		<h:selectManyCheckbox id="aves" value="#{ejemploSelectManyCheckbox.avesPreferidas}">
		   	<f:selectItems value="#{ejemploSelectManyCheckbox.listaAves}"/>
		</h:selectManyCheckbox>
		<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 SelectManyCheckbox - Respuesta</title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectManyCheckbox</h2>
	<h:form>
		<h:outputText value="#{ejemploSelectManyCheckbox.coloresString}" />
		<br />
		<h:outputText value="#{ejemploSelectManyCheckbox.animalesString}" />
		<br />
		<h:outputText value="#{ejemploSelectManyCheckbox.autosString}" />
		<br />
		<h:outputText value="#{ejemploSelectManyCheckbox.avesString}" />
	</h:form>
</h:body>
</html>

Resultado:

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

Ejemplo 3

Escribir un formulario que muestre los colores preferidos, esta vez utilizando un objeto.

Para ello necesitamos definir una clase modelo llamado Colores con dos variables: id y nombre del color.

package com.josehuaman.modelos;

public class Colores {
	
	private String id;
	private String color;
	
	public Colores(String id, String color) {
		this.id = id;
		this.color = color;
	}
	
	public String getId() {
		return id;
	}
	
	public void setId(String id) {
		this.id = id;
	}

	public String getColor() {
		return color;
	}

	public void setColor(String color) {
		this.color = color;
	}	
}

CDI Managed Bean EjemploSelectManyCheckbox.java

package com.josehuaman.ejemplos;

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

import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

import com.josehuaman.modelos.Colores;

@Named
@RequestScoped
public class EjemploSelectManyCheckbox implements Serializable {

	private static final long serialVersionUID = 1L;
	
	private String[] coloresPreferidos;
	private List<Colores> listaColores;

	@PostConstruct
	public void init() {
		//lista utilizando la classe colores
		listaColores = new ArrayList<Colores>();
		listaColores.add(new Colores("1", "Rojo"));
		listaColores.add(new Colores("2", "Azul"));
		listaColores.add(new Colores("3", "Verde"));
		listaColores.add(new Colores("4", "Amarillo"));
		listaColores.add(new Colores("5", "Naranja"));
	}

	public String getColoresString() {
		return "Colores preferidos: " + Arrays.toString(coloresPreferidos);		
	}

	public String[] getColoresPreferidos() {
		return coloresPreferidos;
	}

	public void setColoresPreferidos(String[] coloresPreferidos) {
		this.coloresPreferidos = coloresPreferidos;
	}

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

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

Página JSF con el formulário: ejemploSelectManyCheckbox.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 SelectManyCheckbox </title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectManyCheckbox</h2> 
  	<h:form id="form">
  		<!-- Utilizando utilizando Selectitem com classe Color -->
  		<h:outputLabel for="color" value="Cuales son tus colores preferidos? "/>
   		<h:selectManyCheckbox id="color" value="#{ejemploSelectManyCheckbox.coloresPreferidos}">
		   	<f:selectItems value="#{ejemploSelectManyCheckbox.listaColores}" var="item" 
                             itemValue="#{item.id}"  itemLabel="#{item.color}"  />
		</h:selectManyCheckbox>
		<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 SelectManyCheckbox - Respuesta</title>
</h:head>
<h:body>
	<h2>Ejemplo JSF2.3 SelectManyCheckbox</h2>
	<h:form>
		<h:outputText value="#{ejemploSelectManyCheckbox.coloresString}" />
	</h:form>
</h:body>
</html>

Resultado:

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

JSF2.3 selectManyCheckbox – Ejemplos

También te podría gustar...

Deja un comentarioCancelar respuesta

JSF 2.3 Etiquetas básicas

JSF2.3 selectManyCheckbox – Ejemplos

También te podría gustar...

JSF2.3 inputText – Ejemplos

JSF2.3 outputText – Ejemplos

JSF2.3 h:commandLink – Ejemplo

Deja un comentarioCancelar respuesta

JSF 2.3 Etiquetas básicas