3.Cuadros de listas (JList)

El procedimiento para agregar JList en nuestro ejercicio práctico es el siguiente:

1. Realiza un nuevo proyecto.

2. En la ventana principal debes añadir lo siguiente:

a. Un botón “Aceptar” llamado btnAceptar.
b. Una etiqueta con borde llamada etiResultado.

3. Añade un cuadro de lista. Los cuadros de listas son objetos JList.

JList en la paleta de Swing

4. Cámbiale el nombre al JList. Ten cuidado, ya que en los JList aparecen siempre dentro de otro objeto llamado jScrollPane. Si miras en el Inspector, verás que al pulsar en el botón + del jScrollPane aparecerá tu JList:

JList en el  Inspector

5. Aprovecha para cambiarle el nombre al JList. El nuevo nombre será lstColores.

6. Si te fijas en el JList, consiste en un cuadro que contiene una serie de Items. Estos elementos pueden ser cambiados a través de la propiedad Model del JList.

7. Busca la propiedad Model y haz clic en el botón de los tres puntos. Aparecerá un cuadro de diálogo parecido al siguiente. Solo tienes que seleccionar los elementos que quieras y pulsar el botón “Borrar” (Remove) para eliminarlos de la lista.

8. Puedes añadir elementos escribiéndolos en el cuadro Artículo y luego pulsando el botón “Añadir” (Add).

Añadir elementos al JList

9. Debes hacer que la lista sea la siguiente:

Rojo

Verde

Azul

10. Ahora programaremos el actionPerformed del botón Aceptar. Debes introducir el siguiente código:

String mensaje;
        
   mensaje="El color seleccionado es: "+lstColores.getSelectedValue().toString();
   etiResultado.setText(mensaje);

11. Observa el código:

a. Se crea una variable de cadena llamada mensaje.
b. Y dentro de esta variable se introduce una concatenación de cadenas.
c. Observa la parte: lstColores.getSelectedValue(), esta parte devuelve el valor seleccionado de la lista.
d. Hay que tener en cuenta que este valor no es una cadena, por eso hay que convertirla a cadena añadiendo .toString().
e. De esta manera puedes extraer el elemento seleccionado de un cuadro de lista.
f. Luego simplemente ponemos la cadena mensaje dentro de la etiqueta.

12. Ejecuta el programa y observa su funcionamiento. Por ejemplo, si seleccionas el color verde y pulsas aceptar el resultado será el siguiente:

Funcionamiento del JList

13. Vamos a mejorar el programa. Puede suceder que el usuario no seleccione ningún valor del cuadro de lista, y sería interesante en este caso que el programa avisara de ello. Cambie el código del botón Aceptar por este otro código:

String mensaje;
        
if (lstColores.getSelectedIndex()==-1) {
   mensaje="No hay un color seleccionado.";
} else {
   mensaje="El color seleccionado es: "+lstColores.getSelectedValue().toString();
}
etiResultado.setText(mensaje);


14. Observa el código:

a. El método getSelectedIndex me dice el índice del elemento que está seleccionado.
b. Por ejemplo, si está seleccionado el primero el índice es 0, si está seleccionado el segundo el índice es 1, etc.
c. Si este método devuelve -1, entonces es señal de que no hay ningún elemento seleccionado.
d. Aprovecho esto para mostrar un mensaje indicando lo sucedido.

15. Si ejecuta el programa y pulsa el botón Aceptar sin seleccionar nada el resultado debería ser el siguiente:

Final JList

16. Se podría haber prescindido del botón aceptar si el código anterior se hubiera puesto en el evento mouseClicked del cuadro de lista en vez de en el actionPerformed del botón Aceptar. En este caso, cada vez que se seleccionara un elemento de la lista, automáticamente aparecería el mensaje en la etiqueta.

Te invito a que realice esta modificación por tu cuenta.


CONCLUSIÓN

El objeto JList permite crear cuadros de lista. Estos objetos contienen una serie de elementos que pueden ser seleccionados.

A través del método getSelectedValue se puede obtener el elemento que está seleccionado. (Recuerda convertirlo a cadena con toString)

A través del método getSelectedIndex se puede saber la posición del elemento seleccionado. Si este índice es -1, entonces sabremos que no hay ningún elemento seleccionado.

2. Botones de opción (RadioButton)

Los botones de opción RadioButton se utilizan para seleccionar solo un elemento de un conjunto de elementos. La diferencia principal de un CheckBox y un RadioButton radica principalmente en ésta característica, ya que un conjunto de RadioButton solo puedes seleccionar un elemento, mientras que, en un conjunto de CheckBox puedes seleccionar uno, varios o todos los elementos.

Otra característica importante es que el RadioButton se identifica generalmente como listas con círculos como podrás ver a continuación. Para agregarlos a nuestro proyecto de ejemplo realizar los siguientes pasos:
1. Realiza un nuevo proyecto.

2. En la ventana principal debes añadir lo siguiente:

a. Un botón “Aceptar” llamado btnAceptar.
b. Una etiqueta con borde llamada etiResultado.

3. Añade un panel. Un panel es una zona rectangular que puede contener elementos (botones, etiquetas, etc) La forma de poner un panel es a través del objeto JPanel.

Seleccionar JPanel de la paleta de Swing

4. Una vez añadido el panel en el JFrame, le pondremos un borde para poder localizarlo fácilmente. Debes hacer lo siguiente:

a. Selecciona el panel que has añadido.
b. Activa la propiedad Border (botón con tres puntos)
c. Busca el tipo de borde llamado TitledBorder (borde con título) y pon el título colores.

Agregar propiedades al JPanel

5. Tu ventana debe quedar más o menos así:

Ventana con JPanel, botón y etiqueta

6. Ahora debes añadir tres botones de opción (botones de radio) dentro del panel. Estos botones son objetos del tipo JRadioButton.

JRadioButton en la paleta Swing

7. Añade tres JRadioButton y cambia el texto de ellos, de forma que aparezca “Rojo”, “Verde” y “Azul”.

8. Debe cambiar el nombre de cada uno de ellos. Se llamarán: optRojo, optVerde, optAzul.

9. La ventana tendrá el siguiente aspecto cuando termine:

Ventana con JPanel, 3 RadioButton, botón y etiqueta

10. Si ejecuta el programa, observará que pueden seleccionarse varios colores a la vez. Esto no es interesante, ya que los botones de opción se usan para activar solo una opción entre varias.


11. Hay que hacer que solo un botón de opción pueda estar seleccionado a la vez. Para ello, debe añadir un nuevo objeto. Realice los siguientes pasos:

a. Añada un objeto del tipo ButtonGroup al formulario. ¡Atención! Este objeto es invisible, y no se verá en el formulario, sin embargo, lo podréis ver en el Inspector, en la parte de “Otros Componentes”:

ButtonGroup

b. Tienes que darle un nombre al ButtonGroup. El nombre será “grupoColores”.
c. Ahora, hay que conseguir que los tres botones pertenezcan al mismo grupo. Es decir, que pertenezcan al grupo grupoColores.
d. Selecciona el botón de opción optRojo y cambia su propiedad buttonGroup, indicando que pertenece al grupo colores (observa la imagen):

e. Haz lo mismo con los botones optVerde y optAzul.


12. Acabas de asociar los tres botones de opción a un mismo grupo. Esto produce que solo una de las tres opciones pueda estar activada. Pruébelo ejecutando el programa.


13. Ahora interesa que la opción “Rojo” salga activada desde el principio. Una forma de hacer esto es programando en el “Constructor” lo siguiente:

optRojo.setSelected(true);

El método setSelected hace que se pueda activar o desactivar un botón de opción.

Prueba el programa. Observa como la opción Rojo está activada inicialmente.


14. El programa no está terminado aún. Interesa que cuando el usuario pulse el botón Aceptar, en la etiqueta aparezca el color elegido. Para ello, en el actionPerformed del botón Aceptar programe lo siguiente:

   String mensaje="Color elegido: ";
        
        if (optRojo.isSelected()) {
            mensaje=mensaje+"Rojo";
        } else if (optVerde.isSelected()) {
            mensaje=mensaje+"Verde";
        } else if (optAzul.isSelected()) {
            mensaje=mensaje+"Azul";
        }
        
        etiResultado.setText(mensaje);
   


15. Observa el código. En él se hace lo siguiente:

a. Se crea una variable de cadena llamada mensaje.
b. En esa variable se introduce el texto “Color elegido:  “
c. Luego se comprueba que opción está seleccionada, usando el método isSelected de los botones de opción. Este método te dice si un botón está seleccionado o no.
d. Según la opción que esté seleccionada, se añade un texto u otro a la cadena mensaje.
e. Finalmente se muestra la cadena mensaje en la etiqueta etiResultado.


16. Ejecute el programa. Seleccione por ejemplo la Verde. Al pulsar Aceptar el resultado debe ser el siguiente:

CONCLUSIÓN

Los botones de opción, también llamados botones de radio (JRadioButton) se usan cuando quieres que el usuario pueda elegir una opción de entre varias.

Es interesante que los botones de radio aparezcan dentro de un panel JPanel. Se recomienda colocar un borde al panel.

Es totalmente necesario añadir un objeto del tipo ButtonGroup, y hacer que los botones de radio pertenezcan a dicho grupo. En caso contrario, será posible activar varios botones de opción a la vez.

1. Cuadros de verificación (JCheckBox)

Hola a todos. Ésta es la primer entrada de una serie de ejercicios guiados que estoy seguro serán de gran ayuda para sus proyectos. Comenzaré con elementos sencillos de la paleta de Swing ya que son los más fáciles de implementar.
Los Cuadros de verificación o CheckBox son útiles para seleccionar uno o mas elementos de una lista, es similar a un CheckList en papel. El procedimiento para implementar CheckBox en nuestro proyecto es básicamente como se muestra a continuación:

1. Realiza un nuevo proyecto.

2. En la ventana principal debes añadir lo siguiente:

a. Un botón “Aceptar” llamado btnAceptar.
b. Una etiqueta con borde llamada etiResultado.

3. Añade también tres cuadros de verificación. Estos cuadros son objetos del tipo JCheckBox.

Paleta de Swing

4. Añade tres JCheckBox y cambia el texto de ellos, de forma que aparezca “Perro”, “Gato” y “Ratón”.

5. Debe cambiar el nombre de cada uno de ellos. Se llamarán: chkPerro, chkGato, chkRaton.

6. La ventana tendrá el siguiente aspecto cuando termine:

Ventana con 3 Cuadros de verificación o CheckBox, un botón y una etiqueta

7. El programa debe funcionar de la siguiente forma:

Cuando el usuario pulse aceptar, en la etiqueta aparecerá un mensaje indicando qué animales han sido “seleccionados”. Para ello hay que programar el evento actionPerformed del botón Aceptar. En ese evento añada el siguiente código:

         String mensaje="Animales elegidos: ";
        if (chkPerro.isSelected()) {
            mensaje=mensaje+"Perro ";
        } 
        
        if (chkGato.isSelected()) {
            mensaje=mensaje+"Gato ";
        }
        
        if (chkRaton.isSelected()) {
            mensaje=mensaje+"Raton ";
        }
        
        etiResultado.setText(mensaje);

8. Observa el código. En él se hace lo siguiente:

a. Se crea una variable de cadena llamada mensaje.
b. En esa variable se introduce el texto “Animales elegidos: “
c. Luego, compruebo si está seleccionada la casilla de verificación chkPerro. Si es así concateno a la cadena mensaje la palabra “Perro”.
d. Luego compruebo si está seleccionada la casilla de verificación chkGato y hago lo mismo.
e. Lo mismo con la casilla chkRaton.
f. Finalmente presento la cadena mensaje en la etiqueta etiResultado.

9. Observa el método isSelected() propio de las casillas de verificación, permiten saber si una casilla está activada o no.

10. Ejecute el programa. Seleccione por ejemplo las casillas Gato y Ratón. Al pulsar Aceptar el resultado debe ser el siguiente:

Resultado de implementar CheckBox

El procedimiento es similar en todos los proyectos, únicamente varía el número de elementos que agregarás en tu panel. CheckBox es recomendado si y solo si puedes elegir uno o mas elementos de la lista.