Interfaz Gráfica de Usuario Con Netbeans: 9 ABRIL, 2016 ACTUALIZADO 17 MAYO, 2017

Interfaz Gráfica de Usuario con
Netbeans
9 ABRIL, 2016 · ACTUALIZADO 17 MAYO, 2017
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, comoJInternalFrame 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 modoSource 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) {
1
// Recuperamos el contenido de la caja de texto y lo almacenamos en la
2
variable nombre
3
String nombre = cajaNombre.getText();
4
// El texto de la etiqueta será cambiado con el contenido de la variable
5 nombre
6 etiquetaNombre.setText(nombre);
7 // Establecemos que la etiqueta sea visible
8 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:
1 public VentanaPrincipal() {
2 initComponents();
3 etiquetaNombre.setVisible(false);
4 }
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
1
javax.swing.JFrame {
2
3
public VentanaPrincipal() {
4
initComponents();
5
etiquetaNombre.setVisible(false);
6
}
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étodoactionPerfomed de la instancia de VentanaPrincipal.
1 public static void main(String args[]){
2 java.awt.EventQueue.invokeLater(new Runnable() {
3 public void run() {
4 new VentanaPrincipal().setVisible(true);
5 }
6 });
7 }

Interfaz Gráfica de Usuario Con Netbeans: 9 ABRIL, 2016 ACTUALIZADO 17 MAYO, 2017

Cargado por

Copyright:

Formatos disponibles

Interfaz Gráfica de Usuario Con Netbeans: 9 ABRIL, 2016 ACTUALIZADO 17 MAYO, 2017

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Interfaz Gráfica de Usuario Con Netbeans: 9 ABRIL, 2016 ACTUALIZADO 17 MAYO, 2017

Cargado por

Copyright:

Formatos disponibles

Interfaz Gráfica de Usuario con

Pero comencemos desde el inicio.

En primer lugar, pensemos un poco en el pasado de la computación, en épocas

Elementos comunes de una Interfaz

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

Como lo indica la documentación oficial, Swing proporciona un conjunto de

Estructura de una aplicación GUI

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

Figura 4. Insertando un JFrame

Figura 5. Editor Gráfico de Netbeans

Para esta primera aplicación buscamos imprimir un mensaje. Para ello,

Usando JTextField y JButton

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

Figura 8: Modificando el nombre de un objeto

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

Figura 9. Vista Source

private void botonAceptarActionPerformed(java.awt.event.ActionEvent

7 // Establecemos que la etiqueta sea visible

Una cosa más: haremos que la etiquetaNombre no se muestre al inicio del

El JFrame creado, VentanaPrincipal es una clase hija de JFrame. Sin embargo,

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

1 public static void main(String args[]){

3 public void run() {

También podría gustarte