05 julio, 2020

Ejemplo Radio Button

Obtener el valro de un Radio Button seleccionado


PASOS:

1. Crear un Dynamic Web Project

2. Configurar el archivo web.xml.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?xml version="1.0" encoding="UTF-8"?>
    id="WebApp_ID" version="3.0">
    <display-name>GetRadio</display-name>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
</web-app>

3. Crear la clase UserData dentro paquete managed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package managed;
 
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name = "userData")
@SessionScoped
public class UserData implements Serializable {
 
    private static final long serialVersionUID = 1L;
 
    public String data;
 
    public String getData() {
        return data;
    }
 
    public void setData(String data) {
        this.data = data;
    }
 
    // Action method
    public String result() {
        return "resultado";
    }
}

4. Crear la página index.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <title>Inicio</title>
    <h:outputStylesheet library="css" name="bootstrap.css" />
</h:head>
<h:body>
    <div class="container">
        <h:form>
            <h3>Obtener el valor de un Radio Button</h3>
            <h:selectOneRadio value="#{userData.data}">
                <f:selectItem itemValue="1" itemLabel="Item 1" />
                <f:selectItem itemValue="2" itemLabel="Item 2" />
                <f:selectItem itemValue="3" itemLabel="Item 3" />
                <f:selectItem itemValue="4" itemLabel="Item 4" />
                <f:selectItem itemValue="5" itemLabel="Item 5" />
            </h:selectOneRadio>
            <h:commandButton class="btn btn-primary" value="Enviar" action="#{userData.result}" />
        </h:form>
    </div>
</h:body>
</html>

5. Crear la página resultado.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <title>Resultado 2</title>
    <h:outputStylesheet library="css" name="bootstrap.css" />
</h:head>
<h:body>
    <div class="container">
        Seleccionaste la opción
        <h2>#{userData.data}</h2>
    </div>
</h:body>
</html>

Descargar ejercicio

No hay comentarios, ¡cuéntame algo!

Me gustaría saber tu opinión. ¡Saludos!