Esta es la primera entrada de una serie de publicaciones sobre el manejo de los objetos del paquete javax.swing para crear la Interfaz Gráfica de Usuario usando el IDE Netbeans y por supuesto el lenguaje de programación Java.

Pero comencemos desde el inicio.

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 permite que cualquier usuario pueda utilizar fácilmente un programa.

En primer lugar, pensemos un poco en el pasado de la computación, en épocas donde se tenía una interfaz sólo texto para ejecutar comandos. En consecuencia,   podemos reconocer lo importante que es ofrecerle al usuario una forma fácil e intuitiva de navegar y realizar el trabajo en la aplicación que vamos a crear.

Elementos comunes de una Interfaz Gráfica de Usuario

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. Controles gráficos comunes de una Interfaz Gráfica de Usuario

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 click, escribir en un componente, etc. Es por eso que la mayoria 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 aplicción GUI.

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

Como puedes apreciar, 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 click 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 cuál 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. 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. Finalmente haz click 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

Para esta primera aplicación buscamos imprimir un mensaje. Para ello, selecciona un objeto Label desde la paleta, en la categoría Swing Controls, y lo colocaremos en el espacio del JFrame.

Como puedes ver, cada vez que se selecciona un objeto gráfico, el panel de Propiedades automáticamente  despliega los atributos modificables en tiempo de edición del objeto. Por lo tanto basta con seleccionar el objeto etiqueta, insertado en el JFrame, para modificar la propiedad text escribiendo el saludo que nos interesa desplegar.

La primera parte del programa está completada, por lo que no nos queda más que guardar y ejecuar 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

A continuación, para la segunda parte de la aplicación, agregaremos los siguientes objetos:

• JSeparator
• JLabel
• JTextField
• JButton
• JLabel

Como resultado de agregar estos componentes, el JFrame quedará como se muestra en la figura 7.

Figura 7. Los componentes de la aplicación de ejemplo

Puedes conservar los nombres de los objetos que Netbeans les asigna o los puedes modificar. Sin embargo, 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. Sin embargo, 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 en Window -> 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.

Edición del método que responde al evento.

Para continuar crearemos el método que responderá al evento click del botón Aceptar. Para ello, sólo es necesario hacer doble click 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.

A continuación, 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, modificaremos 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.

A continuación revisaremos más a detalle el código que Netbeans generó:

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, observa una diferencia importante en el constructor: no inicia con el llamado al super constructor (super()).  Esto es debido a que, 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. De esta forma, ahora el constructor es encargado, además de construir el objeto, de inicializar los componentes que se mostrarán en pantalla.

Te recomiendo no modificar directamente el código contenido en el método initComponents, pues se encuentra vinculado 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

Como ya lo mencioné con anterioridad, 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).

Ten en cuenta que 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  clase VentanaPrincipal y mostrarla (poniéndo su propiedad visible a true).  De aquí 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 de la instancia de VentanaPrincipal.

   public static void main(String args[]){         
      java.awt.EventQueue.invokeLater(new Runnable() {             
              public void run() {                 
                  new VentanaPrincipal().setVisible(true);             
              }
      }); 
   }

De esta forma concluyo con esta introducción sobre el uso de Java Swing, espera las siguientes entradas en las que te mostraré el uso de otros controles básicos. ¡hasta el siguiente post!

Guardar

Guardar

Guardar