INTERFAZ GRÁFICA DE USUARIO CON NETBEANS

GUI

El acrónimo GUI proviene de “Graphic User Interface” o Interfaz Gráfica de Usuario. Es la abreviatura que define la
interfaz gráfica de cualquier aplicación, y considero que es lo que le ha permitido a la computadora permitir que
cualquier usuario pueda utilizar fácilmente un programa.

Si pensamos un poco en el pasado de la computación, en épocas donde se tenía una interfaz sólo texto para
ejecutar comandos, podemos pensar lo importante que es ofrecerle al usuario una forma fácil e intuitiva de navegar
y realizar el trabajo en la aplicación que programamos.

Elementos comunes de una GUI

En la figura 1 y 2 se pueden observar los elementos más populares de una Interfaz Gráfica de Usuario.

Figura 1. Elementos gráficos de una ventana típica (en Windows)

Considero que no debo adentrarme en explicar el funcionamiento de cada elemento, pues como se puede observar,
son objetos gráficos que usamos comúnmente en cualquier aplicación.

Figura 2. Objetos (controles) gráficos comunes de una GUI

javax.swing
El paquete que nos permite crear y manipular los elementos gráficos de una GUI se llaman Swing, que fue creado a
partir del paquete AWT o Abstract Window Toolkit

Como lo indica la documentación oficial, Swing proporciona un conjunto de componentes ligeros que trabajan de la
misma forma en todas las plataformas.

Los componentes Swing utilizan la infraestructura AWT, incluyendo el modelo de eventos AWT, el cual rige como un
componente reacciona a eventos tales como un clic, escribir en un componente, etc. Es por eso que la mayoría de
los programas Swing necesitan importar los paquetes java.awt.* y java.awt.event.*.

Estructura de una aplicación GUI

En la figura 3 se muestra la estructura lógica de una aplicación GUI.

Figura 3. Estructura de una aplicación GUI en Java

Como se indica en la figura, toda la acción de una aplicación GUI sucede al generarse un evento. Un evento es
cualquier cosa que un usuario le hace a un objeto gráfico, como por ejemplo, escribir en un cuadro de texto, hacer
clic sobre un elemento de menú o sobre un botón, entre otros.

Entonces lo “único” que debemos hacer es programar el método que se ejecutará cuando el evento suceda.

Contenedores

Cada aplicación Swing debe tener al menos un contenedor de alto nivel (Top-level Container), el cual podemos ver
como un tablero del cual se podrán colgar los objetos gráficos que queremos mostrar en la interfaz. Los
contenedores en Java son:

JWindow: representa un panel de ventana que no tiene bordes ni elementos visibles

JFrame: Es la clase que representa una ventana típica con bordes, botones de cerrar, etc. y es la que típicamente
usaremos para crear nuestras aplicaciones, entre otras cosas, porque a su vez permite que se le cuelguen otros
contenedores, como JInternalFrame o JPanel.

JPanel: Esta clase es utilizada como un contenedor genérico para agrupar componentes, sin que generalmente sea
visible (Algo así como la herramienta agrupar en MS Word)

JDialog: Esta clase permite crear un cuadro de diálogo común.

JApplet: Este contenedor permite agrupar componentes que serán mostrados en un navegador.
La primera aplicación GUI

Hola Mundo

Después de esta breve introducción, mostraré como desarrollar una aplicación GUI muy sencilla.

1. Ahora hacer click derecho sobre el paquete creado (o sobre Source Packages sino se creó un paquete) ir a New y
seleccionar JFrame Form… (ver Figura 4).

Figura 4. Insertando un JFrame

2. Continuar el proceso normal para crear un nuevo paquete (de preferencia, pero no obligatorio)

3. Iremos como de costumbre al menú File -> New Project, seleccionamos la categoría Java, presionamos el botón
Next y en la ventana New Java Application, escribimos el nombre del nuevo proyecto, pero nos aseguramos de NO
SELECCIONAR la casilla de Create Main Class. Clic en el botón Finish.

4. En el cuadro de diálogo que se abrirá, sólo se debe escribir el nombre de la clase que se creará. Para éste ejemplo
la he llamado VentanaPrincipal. Presionar Finish.

5. Ahora entramos al Editor gráfico de Netbeans. En la figura 5 se muestran las partes de este editor.

Figura 5. Editor Gráfico de Netbeans

6. Para esta primera aplicación, en la primera parte se logrará lo mismo que cualquier primer programa: imprimir un
mensaje. Para ello, selecciona un elemento Label desde la paleta, en la categoría Swing Controls, y lo colocaremos
en el espacio del JFrame.

7. Cada vez que se selecciona un objeto gráfico, automáticamente el panel de Propiedades despliega los atributos
modificables en tiempo de edición del objeto. Por ello, seleccionando el objeto etiqueta, insertado en el JFrame,
modificaremos la propiedad text escribiendo el saludo que nos interesa desplegar.

8. La primera parte del programa está completada, por lo que no nos queda más que guardar y ejecutar el
programa, el cuál debería de mostrarse como se aprecia en la figura 6.

Figura 6. Ejemplo de la ejecución de la primera aplicación

Usando JTextField y JButton

Ahora para la segunda parte de la aplicación, agregaremos los siguientes elementos:

 JSeparator
 JLabel
 JTextField
 JButton
 JLabel
En la figura 7 se aprecia su disposición en el JFrame.

Se puede conservar los nombres de los objetos que Netbeans les asigna o se pueden modificar. Yo recomiendo que
únicamente se modifiquen los nombres de los objetos interactivos o que programaremos. Por ejemplo, las etiquetas
de los mensajes “Hola Mundo Gráfico” y “Escribe tu nombre” son sólo informativas, por lo que no considero tan
importante que se modifiquen los nombres. En cambio, la última etiqueta se modificará en tiempo de ejecución y su
contenido cambiará conteniendo lo que el usuario escriba en la caja de texto.
Por ello a esta etiqueta le modificaremos el nombre usando el panel Navigator. Para cambiar el nombre de un
objeto gráfico:
1. Selecciona el objeto
2. Despliega el panel Navigator si es que no se está mostrando por default, haciendo click enWindow -
> Navigator o presionando las teclas Ctrl + 7.
3. En el panel Navigator, hacer click derecho sobre el objeto gráfico y luego seleccionar Change Variable
Name… tal y como se muestra en la figura 8. En la ventana que se abrirá, escribe el nombre del objeto
gráfico, recordando que se trata del nombre de un objeto, por lo que todas las reglas para construir
identificadores están vigentes y no se deben usar espacios en blanco o caracteres especiales.

Figura 8: Modificando el nombre de un objeto

Este proceso se debe repetir para la caja de texto y el botón.

Ahora crearemos el método que responderá al evento clic del botón Aceptar. Para ello, sólo es necesario hacer
doble clic sobre el botón. Esto abrirá el modo Source de Netbeans y nos encontramos con el ya clásico editor de
código, como se observa en la figura 9.

Figura 9. Vista Source

Netbeans ya ha generado el encabezado del método necesario, éste método se llama con el nombre del objeto
gráfico más las palabras ActionPerformed que indica que será el método ejecutado el manejador de eventos.

Ahora sólo será cuestión de escribir un poco de código.

private void botonAceptarActionPerformed(java.awt.event.ActionEvent evt) {

// Recuperamos el contenido de la caja de texto y lo almacenamos en la variable nombre

String nombre = cajaNombre.getText();

// El texto de la etiqueta será cambiado con el contenido de la variable nombre

etiquetaNombre.setText(nombre);

// Establecemos que la etiqueta sea visible

etiquetaNombre.setVisible(true);

Una cosa más: haremos que la etiquetaNombre no se muestre al inicio del programa. Para ello, se modificará el
método constructor del JFrame:

public VentanaPrincipal() {

initComponents();

etiquetaNombre.setVisible(false);

Sólo queda guardar y ejecutar el programa.

Un vistazo al código.
Ahora revisaremos más a detalle el código que Netbeans generó. Como se puede apreciar:

public class VentanaPrincipal extends javax.swing.JFrame {

public VentanaPrincipal() {
initComponents();
etiquetaNombre.setVisible(false);
}

El JFrame creado, VentanaPrincipal es una clase hija de JFrame. Sin embargo, a pesar de esto, podemos observar
una diferencia importante en el constructor: no inicia con el llamado al super constructor (super()). En el caso de los
objetos gráficos, el constructor inicia con una llamada al método initComponents(), el cual inicializa todos los
componentes swing de la interfaz creada usando el Constructor GUI de Netbeans.

Ahora el constructor es encargado, además de construir el objeto, inicializar los componentes que se mostrarán en
pantalla. Se recomienda no modificar directamente el código contenido en el método initComponents, pues se
encuentra vinculado de un modo muy complejo con el Editor GUI de Netbeans. La modificación de cualquiera de los
componentes gráficos (como nombre de objeto, apariencia, etc.) debe realizarse de cualquiera de estas dos formas:

1. En tiempo de edición, a través de la ventana Design o a través del panel Propiedades.

2. En tiempo de ejecución, a través del uso de los métodos setters adecuados para el atributo que se busca
modificar.
Método main

Una vez más, el método main es el primer método que se ejecuta al correr la aplicación. En el caso de nuestro
programa, se crea lo que se conoce como la instancia de un hilo, a través de la creación de un objeto tipo Runnable.
Un hilo permite que una tarea pueda ser ejecutada al mismo tiempo con otra tarea, lo que en realidad es lo que
sucede cuando trabajamos en sistemas operativos multitareas: al abrir una aplicación se crea un hilo o thread que a
la vez que nos permite trabajar con esa aplicación, nos permite trabajar con otras (como tener MS Word abierto y el
Reproductor de música tocando).

Runnable es una interfaz a la que se le debe implementar el método run. Como se observa en el código, lo único que
el método run hará será crear una instancia de la VentanaPrincipal y mostrarla (poniendo su propiedad visible a
true). En adelante el control de la aplicación la tiene el usuario al generar un evento que dispare la ejecución del
método actionPerfomed del objeto.

public static void main(String args[]) {

java.awt.EventQueue.invokeLater(new Runnable() {
public void run() {
new VentanaPrincipal().setVisible(true);
}
});
}
Un control para cada entrada.

El control gráfico más básico, y también uno de los más útiles es el JTextField o caja de texto. Sin embargo, debemos
utilizar los controles más convenientes que nos permitan cerrar el conjunto de datos que el usuario pueda
proporcionar.
Por ejemplo, considera que dentro de la aplicación se requiere conocer la localidad donde vive un usuario. Si dejas
que el usuario introduzca esta información en una caja de texto, podría suceder lo siguiente:

1. Que el usuario escriba cualquier texto que no corresponda con el nombre de una localidad
2. Que el usuario escriba con faltas de ortografía el nombre de su localidad
3. Que el usuario no se equivoque y escriba correctamente el nombre de su localidad.
Ahora piensa que de la localidad ingresada, realizarás una búsqueda en una base de datos. Obviamente los
escenarios 1 y 2 arrojarán errores en la búsqueda, pues no se encontrarán esas “localidades” dentro de la base de
datos.

Por ello es mejor cerrarle al usuario las posibilidades de equivocarse. Con el uso de un JComboBox, por ejemplo,
podrías haberlo obligado a seleccionar una localidad de la lista, la cual contendrá los nombres correctos de las
localidades, lo que después para realizar una búsqueda en alguna base de datos evitaría los problemas.
Entonces, aunque genere un poco más de esfuerzo para el programador, lo ideal será diseñar nuestra GUI con los
controles gráficos más adecuados que ayuden a que el usuario se equivoque menos al introducir datos.

JCheckbox (Casillas de verificación) La clase JCheckbox proporciona los atributos y métodos para implementar una
casilla de verifiación que es básicamente un botón de dos estados. En la siguiente tabla se muestran los métodos
más comunes de esta clase.

Nombre del método Función

boolean isSelected() Devuelve true si el componente está seleccionado, en caso contrario devuelve false

boolean isEnabled() Devuelve true si el componente está activo, en caso contrario, devuelve false

Habilita (true) o deshabilita (false) el objeto, en cuyo caso no puede ser

void setEnabled(boolean)
seleccionado

En la figura 1 se muestra un ejemplo de 3 objetos tipo JCkeckBox

 Figura 1. Ejemplo de JCheckBox

En este caso, el método que nos permite tener acceso al valor seleccionado es isSelected(), el cual es el que nos
regresa true si el objeto está seleccionado por el usuario o false si no lo está.

El comportamiento que caracteriza a este control y que es reconocido por los usuarios es la posibilidad de poder
seleccionar varios objetos de este tipo, sin que sean excluyentes, por lo que al diseñar la GUI de nuestra aplicación
debemos respetar las convenciones de uso ya establecidas universalmente y reconocidas por los usuarios.

A continuación te muestro el código correspondiente al botón Aceptar de la interfaz mostrada en la Figura 1.

private void botonAceptarActionPerformed(java.awt.event.ActionEvent evt)

{
// Revisar si las casillas están seleccionadas.
boolean r1, r2, r3;
// Recuperamos el valor de las casillas de verificación
r1 = requisito1.isSelected(); //requisito1 es un JCheckBox
r2 = requisito2.isSelected();
r3 = requisito3.isSelected();
if ( r1 || r2 || r3 ) //Si cualquiera de las casillas está seleccionada
JOptionPane.showMessageDialog(this, "¡Felicidades! Tienes derecho a beca");
else
JOptionPane.showMessageDialog(this, "No cumples con los requisitos para recibir beca");
}

JRadioButton (Botones de opción)

La clase JRadioButton proporciona los atributos y métodos para implementar un botón de opción el cual es un
botón de dos estados mutuamente excluyentes. En la figura 2 se muestra un ejemplo de objetos de esta clase.

Figura 2. Ejemplo de objetos de la clase JRadioButton

Cómo se mencionó, la principal característica de este control es ser mutuamente excluyente, esto quiere decir que,
considerando el ejemplo de la figura 2, el usuario sólo puede seleccionar una de las dos alternativas, ya sea “Tengo
18 años o más” o “Tengo menos de 18 años”. Al momento de seleccionar alguna de las dos, la que estaba
seleccionada pasa a no seleccionada y viceversa.

Mi recomendación es utilizar este tipo de botones para preguntas excluyentes, donde el usuario deba seleccionar
una y sólo una opción de n opciones. Alguos ejemplos de estas preguntas se muestran a continuación:

 Sexo ( femenino / masculino)

 Pertenecer o no a un rango de edad (como en el ejemplo de la figura 2)
 Practicar o no algún deporte entre tantas otras que obliguen a seleccionar sólo una alternativa.

Para lograr este comportamiento, no basta con agregar el control JRadioButton, sino que además es necesario
agrupar los controles de este tipo en un ButtonGroup. La clase ButtonGroup se encuentra en la paleta de controles,
en la categoría Swing Controls, tal y como se muestra en la figura 3.

Figura 3. El control Button Group en la categoría Swing Controls de la paleta.

ButtonGroup no es un control visible, por lo que no se mostrará en el JFrame.De hecho, en el panel Navigator
tampoco se muestra como un control anclado al JFrame, sino que está categorizado como Otros Componentes
(Other Components). Esto se aprecia en la figura 4.

Figura 4. Dos grupos de JRadioButton agrupados en dos ButtonGroup diferentes

Una vez creado el ButtonGroup, lo único que falta es agregar los JRadioButon al grupo de botones. Para esto,
selecciona uno de los JRadioButton y usa la paleta Properties (Propiedades). Ahí se encuentra la propiedad
buttonGroup, y dado que ya fué creado el grupo, al presionar la flecha de la lista se desplegará el nombre del grupo.
Este proceso se observa en la figura 5.
 Figura 5. Configurando la propiedad buttonGroup de un JRadioButton.

Si no se añaden los controles JRadioButton a un grupo, cada control será independiente, y tendremos el
comportamiento no deseado (ni esperado por el usuario) de poder seleccionar los n botones de opción que se
muestren en la interfaz.

Los métodos relacionados con este control son los siguientes:

Nombre del método Función

Devuelve true si el componente está seleccionado, en caso contrario

boolean isSelected()
devuelve false

Devuelve true si el componente está activo, en caso contrario,

boolean isEnabled()
devuelve false

Habilita (true) o deshabilita (false) el objeto, en cuyo caso no puede

void setEnabled(boolean)
ser seleccionado

Como verás, los métodos son los mismos que se presentan en un control JCheckBox.

Para la interfaz que se muestra en la Figura 4, el siguiente es el código asociado al botón Continuar, en el cual se
ejemplifica el uso de botones de opción:

private void botonContinuarActionPerformed(java.awt.event.ActionEvent evt) {

// Pregunta si el aspirante tiene 18 años
boolean mayorDeEdad = false;
if ( edad1.isSelected()) // edad1 es un JRadioButton
mayorDeEdad = true;
else
if (edad2.isSelected()) // edad2 es un JRadioButton
mayorDeEdad = false;
if (mayorDeEdad){
// Habilita la segunda parte del cuestionario
java1.setEnabled(true);
java2.setEnabled(true);
botonAceptar.setEnabled(true);
jLabel3.setEnabled(true);
}
else
JOptionPane.showMessageDialog(this, "Gracias por participar");
}