003.- Botones de Radio o Botones de Opción con Java y NetBeans

 

Desarrollo de Aplicaciones Java con NetBeans - Nivel Básico

Convencido de que nadie puede comprender algo a nivel avanzado o complejo sin antes entender la parte básica, es que ahora publico este blog para poder programar usando Java con NetBeans a un nivel básico y muy didáctico.

003.- Botones de Radio o Botones de Opción con Java y NetBeans

A continuación presento un ejemplo de uso práctico de botones de opción en NetBeans.

Realiza los siguientes pasos:

1.- Crear un nuevo proyecto.

2.- Dentro de Source Package crea un Java Package y llamalo paqueteInicial.

3.- Dentro de paqueteInicial crea un JFrame Form y nombralo VentanaInicial.

4.- Dentro de VentanaInicial haz lo siguiente:

      a) Agrega un botón (JButton) con el texto "Aceptar" y nombralo btnAceptar.

      b) Añade una etiqueta (JLabel) sin texto, con borde y nombralo etiPuntosCardinales.

      c) Inserta un panel (JPanel), el cual es un objeto rectangular donde se puede colocar elementos como etiquetas, botones, campos de texto, etc.

      d) Después de agregar el panel en la VentanaInicial para su fácil ubicación agregale un borde de a siguiente forma:

• Selecciona el panel haciendo un click sobre el.
• En la ventana de propiedades busca la propiedad border y haz click sobre el botón con tres puntos que está a su derecha.

• Busca el tipo de borde llamado Titled Border (Borde con Título) para luego colocar el título Puntos Cardinales: como se muestra en la siguiente imagen:

• Acepta los cambios.

5.- El diseño de la ventana hasta ahora debe ser el siguiente:

6.- Coloca dentro del panel cuatro botones de opción (JRadioButton).

7.- Modifica la propiedad Text de los botones de opción insertados anteriormente colocando los cuatro puntos cardinales: "Este", "Oeste", "Norte" y "Sur".

8.- Cambia el nombre de los cuatro botones de opción de tal manera que se llamen: optEste, optOeste, optNorte y optSur.

9.- Ahora la ventana tendrá el siguiente diseño:

10.- Al ejecutar el programa notarás que puedes seleccionar varios puntos cardinales a la vez, esto no debería ocurrir puesto que los botones de opción se utilizan para escoger sólo una  de varias opciones.

11.- Lo correcto es que sólo un botón de opción esté seleccionado a la vez; para ello se debe realizar los siguientes pasos.

12.- Agrega un objeto de tipo ButtonGroup a la ventana. Este objeto no se mostrará en la ventana pero si se puede ver en el Inspector (Navigator) en la sección Otros Componentes (Other Components).

13.- Cambia el nombre del ButtonGroup por el siguiente: grupoPuntosCardinales.

14.- El siguiente paso que debes hacer es que los cuatro botones de opción pertenezcan al mismo grupo, me estoy refiriendo al grupoPuntosCardinales.

15.- Selecciona el botón de opción optEste y cambia su propiedad buttonGroup, escogiendo de la lista desplegable grupoPuntosCardinales.

16.- Realiza el paso anterior para los botones de opción optOeste, optNorte y optSur.

17.- Al estar asociado los cuatro botones de opción al mismo grupo a través de su propiedad buttonGroup ocasiona que sólo se pueda activar uno de los cuatro botones de opción.

18.- Prueba ejecutando el programa.

19.- Cuando ejecutas el programa podrás observar que al inicio ningún botón de opción se encuentra seleccionado; para hacer que el botón optEste esté seleccionado desde que se ejecuta el programa copia el siguiente código en el método constructor (justo debajo de la línea de código: initComponents();):

        optEste.setSelected(true);

20.- El método setSelected nos permite activar o desactivar un botón de opción, con la línea de código anterior al colocar true como parámetro hemos activado el botón de opción optEste.

21.- Ejecuta el programa y observa como el botón de opción con el texto "Este" está activado desde el inicio.

22.- Para terminar con el programa nos falta escribir el código del botón btnAceptar para que cuando se haga click en este, nos muestre en la etiqueta etiPuntosCardinales el punto cardinal elegido. Entonces en el evento actionPerformed del botón btnAceptar programe el siguiente código:

        String mensaje = "Punto Cardinal seleccionado: ";

        

        if(optEste.isSelected()){

            mensaje = mensaje + "Este";

        }else if(optOeste.isSelected()){

            mensaje = mensaje + "Oeste";

        }else if(optNorte.isSelected()){

            mensaje = mensaje + "Norte";

        }else if(optSur.isSelected()){

            mensaje = mensaje + "Sur";

        }

        

        etiPuntosCardinales.setText(mensaje);

23.- Explicaré que realiza el código anterior:

• Se declara una variable tipo cadena llamada mensaje y se inicializa con el texto "Punto Cardinal seleccionado: ".

• Haciendo uso del método isSelected se comprueba si el botón de opción optEste esta activado o no, de estar activado se añade a la variable mensaje el texto "Este"; de no estar activado se sigue con la misma comprobación  de los siguientes botones de opción hasta detectar cual de ellos está activo y añadirle el texto correspondiente ya sea "Oeste", "Norte" o "Sur" a la variable mensaje.

• Al final se muestra el contenido de la variable mensaje en la etiqueta etiPuntosCardinales a través de su método setText.

23.- Ejecuta el programa y selecciona un punto cardinal y pulsa en Aceptar. Por ejemplo al seleccionar "Norte" se muestra el siguiente resultado en la ventana:

=====================================================================

=====================================================================

CONCLUSIÓN:

Los botones de opción o botones de radio (JRadioButton) se usan cuando se desea seleccionar solamente un elemento de un grupo de opciones disponibles.

Los botones de opción se deben colocar dentro de un panel con borde para visualizarlos mejor y diferenciarlos en el caso de que en una ventana se tenga varios grupos de botones de opción.

Para cada grupo de botones de opción se debe agregar obligatoriamente un objeto de tipo Button Group y asignar a dichos botones de opción al grupo cambiando su propiedad buttonGroup.

=====================================================================
=====================================================================