JSF2.3 selectOneRadio – Ejemplos
En JSF, la etiqueta selectOneRadio representa un HTML <TABLE> con un conjunto de elementos de entrada HTML del tipo “radio” <input type = «radio”> . El componente selectOneRadio obliga al usuario a seleccionar una opción de forma inherente. El conjunto de elementos de entrada depende de JSF <selectItem> o <f: selectItems />. JSF 2.x proporciona atributos adicionales para selectOneRadio, 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:selectOneRadio value="#{userData.data}">
<f:selectItem itemValue="1" itemLabel="Rojo" />
<f:selectItem itemValue="2" itemLabel="Azul" />
<f:selectItem itemValue="3" itemLabel="Verde" />
<f:selectItem itemValue="4" itemLabel="Blanco" />
</h:selectOneRadio>
HTML:
<table>
<tr>
<td>
<input type="radio" name="form:j_idt8" id="form:j_idt8:0" value="1" />
<label for="form:j_idt8:0"> Rojo</label>
</td>
<td>
<input type="radio" name="form:j_idt8" id="form:j_idt8:1" value="2" />
<label for="form:j_idt8:1"> Azul</label></td>
<td>
<input type="radio" name="form:j_idt8" id="form:j_idt8:2" value="3" />
<label for="form:j_idt8:2"> Verde</label></td>
<td>
<input type="radio" name="form:j_idt8" id="form:j_idt8:3" value="4" />
<label for="form:j_idt8:3"> Blanco</label></td>
</tr>
</table>
Ejemplo
Escribir un formulario que muestre:
- Varias entradas de tipo ‘radio’ con el nombre de animales.
- Una pregunta que diga: Cual es tu animal favorito?
- Y un botón ‘Enviar’. Al clicar en el botón ‘Enviar’, el formulario debe mostrar el resultado en otra página.
Desarrollando el ejemplo:
CDI Managed Bean EjemploSelectManyCheckbox.java
package com.josehuaman.ejemplos;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.faces.model.SelectItem;
import javax.inject.Named;
@Named
@RequestScoped
public class EjemploSelectOneRadio implements Serializable {
private static final long serialVersionUID = 1L;
private String animalFavorito;
private List<SelectItem> listaAnimales;
@PostConstruct
public void init() {
//lista utilizando la classe colores
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"));
}
public String getAnimalString() {
return "Animal favorito: " + animalFavorito;
}
public String getAnimalFavorito() {
return animalFavorito;
}
public void setAnimalFavorito(String animalFavorito) {
this.animalFavorito = animalFavorito;
}
public List<SelectItem> getListaAnimales() {
return listaAnimales;
}
public void setListaAnimales(List<SelectItem> listaAnimales) {
this.listaAnimales = listaAnimales;
}
}
Página JSF con el formulário: ejemploSelectOneRadio.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 SelectOneRadio</title>
</h:head>
<h:body>
<h2>Ejemplo JSF2.3 SelectOneRadio</h2>
<h:form id="form">
<h:outputLabel for="color" value="Cual es tu animal favorito?" />
<h:selectOneRadio value="#{ejemploSelectOneRadio.animalFavorito}">
<f:selectItems value="#{ejemploSelectOneRadio.listaAnimales}"/>
</h:selectOneRadio>
<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 SelectOneRadio - Respuesta</title>
</h:head>
<h:body>
<h2>Ejemplo JSF2.3 SelectOneRadio - Respuesta</h2>
<h:form>
<h:outputText value="#{ejemploSelectOneRadio.animalString}" />
</h:form>
</h:body>
</html>
Si seleccionamos el tercer item (3. Oso) y clicamos en Enviar.
