Semana 4 Interfaces gráficas.pdf

Aplicación en JAVA con Interfaz
GUI

Aplicación en JAVA con Interfaz GUI

Creación de la clase denominada
VentanaFrame

Creación de la clase denominada VentanaFrame
En primer lugar, crearemos una clase que sirva como marco de trabajo, o ventana para alojar los demás
componentes como botones o cajas de texto. Estas clases que alojan componentes (o marcos de trabajo)
en su mayoría son instancias de la clase JFrame, o subclases de JFrame. JFrame es una clase de JAVA
que proporciona los atributos y comportamientos básicos de una ventana: botones para maximizar o
minimizar la ventana, un botón X para cerrar la ventana, un título en la barra superior, etc.

Por esta razón, necesitamos heredar o extender los atributos de JFrame, para poder crear una ventana
que aloje los demás componentes (botones, cajas de texto, etc). Para nuestro ejemplo, seguiremos
manteniendo la arquitectura mínima de programación orientada a objetos mediante dos clases: una
subclase de JFrame que nos ayude a alojar componentes, y una clase que posee el método main() que
cree y muestre la ventana que aloja los componentes. El diagrama de clases de la situación que vamos a
desarrollar se ilustra en la figura 1.

Figura 1. Diagrama de Clases de una Aplicación Sencilla con interface GUI

Como puede ver en la figura 1, el diagrama de clases es un poco más complejo que los diagramas
que hemos venido trabajando hasta el momento, pues utiliza otros tipos de relaciones entre clases
como la composición (donde la clase VentanaFrame declara clases privadas internas para manejar
los eventos de los botones y de las cajas de texto, ManejadorBoton y ManejadorCampoTexto
respectivamente, y estas clases privadas a su vez implementan interfaces de JAVA como la
interfaz ActionListener), o la relación de agregación (donde la clase VentanaFrame utiliza las
clases JLabel, JTextField, JPasswordField, y JButton para construir objetos de este tipo en su
interior y darle forma a la interfaz gráfica).

Por tanto, solamente nos concentraremos en la relación que conocemos, y es la de uso entre la clase que
posee el método main() denominada “PruebaVentana” y la clase que alojará los componentes de la
interfaz gráfica denominada “VentanaFrame”. Por esta razón decíamos en líneas anteriores que solamente
tocaremos ciertos aspectos de las interfaces gráficas, pues es una gran cantidad de conceptos y
elementos que no podríamos cubrir en estas líneas. Quizás observando el código de la clase
“VentanaFrame” pueda apreciar las relaciones de composición y agregación que se ilustran en la figura 1.

Código Fuente de la clase
“VentanaFrame”

Código Fuente de la clase “VentanaFrame”
En la figura 2 observamos el código fuente de
la clase “VentanaFrame” que servirá como
contenedor de componentes gráficos.
Figura 2. Código Fuente de la clase VentanaFrame

Como puede observar en la figura 2, es una gran cantidad de código, y hemos procurado escribir
comentarios en cada línea de código para explicar lo que hace cada línea. Recordemos que los
comentarios de una sola línea en JAVA se representan con la doble barra diagonal //. Los
comentarios no serán interpretados por el compilador, lo que permite documentar y explicar las líneas
de código cuando sea necesario. Además, hemos pintado ciertas secciones del código, para
identificar partes importantes del mismo.
Analicemos brevemente las secciones de código de la figura 2.

La primera parte hace referencia a las bibliotecas que serán importadas por la clase “VentanaFrame”, de
manera que pueda integrar componentes gráficos (botones, cajas de texto, labels, etc) y responder a
eventos. En la figura 3 se observa únicamente la sección de imports de la clase “VentanaFrame”
Figura 3 . Sección de imports de la clase “VentanaFrame”

Figura 4. Declaración de la clase VentanaFrame y sus atributos privados

Como se puede observar en la figura 4, la clase VentanaFrame extiende o hereda de JFrame sus atributos
públicos. Como se dijo en líneas anteriores, JFrame es una clase que posee todos los comportamientos de
una ventana, y por tal razón queremos heredar todos esos comportamientos en la clase VentanaFrame.
Además, observe cómo se construyen objetos de la clase JLabel para etiquetas (objeto denominado etiqueta
de color verde), de la clase JTextField (objeto denominado campoTexto de color aguamarina) para campos de
texto, de la clase JPasswordField (objeto denominado campoContrasenia de color rosa) para campos de
contraseña que ocultan datos, y de la clase JButton (campo denominado botonSimple de color azul) para
botones. Más adelante veremos cómo se inicializan estos objetos y se agregan al marco de trabajo o ventana
JFrame.

A continuación encontramos el constructor de la clase VentanaFrame() cuya función será inicializar los
objetos de la clase JLabel, JTextField, JPasswordField, y JButton, y agregarlos a la ventana, y la
instrucción que determina cómo será el diseño o layout de los componentes dentro de la ventana. En
la figura 5 encontramos la sección de declaración del constructor de la clase VentanaFrame
Figura 5. Declaración del constructor y el flujo de diseño de la ventana

Como se puede observar en la figura 5, encontramos la instrucción que declara el constructor (un método
que tiene el mismo nombre que la clase, denominado VentanaFrame() ), y una instrucción
cuya finalidad es invocar al constructor de la clase padre -es decir, el constructor de JFrame-, para poder
asignar un título a la ventana. Luego encontramos la instrucción setLayout( new FlowLayout() ); que
le indica a JAVA la manera en la que los componentes se ubicarán dentro de la ventana.
A continuación, viene una instrucción bastante interesante, pues nos permitirá usar imágenes para
incrustarlas en nuestra ventana. Específicamente la imagen se incrustará en el label o etiqueta, que a su
vez será renderizado por la ventana. En la figura 6 se observa esta instrucción

Figura 6. Instrucción para incrustar imágenes en la interfaz gráfica
Observe con atención el código de la figura 6. Es importante que la imagen que usted quiera insertar
dentro de su interfaz gráfica se encuentre dentro de la carpeta bin, y posea el mismo nombre y formato
que solicitan las líneas de código. Para este caso particular, necesitamos tener una imagen con extensión
.gif denominada “insecto1” para que podamos mostrarla en pantalla. Si no contamos con una imagen
denominada “insecto1.gif” dentro de la carpeta bin, no podremos visualizar ninguna imagen en nuestra
interfaz gráfica.

Por simplicidad hemos descargado una imagen .gif de la siguiente ruta:
http://www.gifde.com/js_pics_aux/descarga.php?descarga=si&c=gif/otros/naturaleza/animales/insectos/mariqu
itas/&f=mariquita-031.gif , y la hemos guardado dentro de la carpeta bin con el nombre de insecto1.gif -no
olvide en número 1-, para poderla utilizar en nuestra interfaz gráfica. Realmente puede descargar la imagen
que usted desee, simplemente hemos proporcionado el enlace de donde descargamos nuestra imagen para
que usted pueda replicar exactamente la misma situación que estamos modelando. La imagen que hemos
usado se ilustra en la figura 7.
Figura 7. Imagen .gif utilizada

Recordemos que una imagen .gif es una imagen ligera con una pequeña animación o movimiento. Hemos
escogido una imagen pequeña (aproximadamente de 100x100 pixeles), de manera que se ajuste
perfectamente a la ventana que vamos a construir que es aproximadamente de 275x210 pixeles. Sin
embargo, puede elegir la imagen que desee. Lo importante es que la guarde en la carpeta .bin, y para este
caso particular, debe nombrarla como insecto1.gif.
Luego encontramos el código referente a la inicialización del objeto JLabel denominado “etiqueta”, y su
respectiva configuración para que posea una imagen, y que la imagen del label se ubique a la izquierda.
En la figura 2 pintamos dicho código de color verde, y lo replicamos nuevamente en la figura 8.

Figura 8. Código para inicializar el objeto JLabel denominado “etiqueta”
Observe el código de la figura 8. Básicamente se inicializa el objeto etiqueta con la instrucción “etiqueta =
new JLabel( "Etiqueta con texto e icono", insecto, SwingConstants.LEFT );”, que le asigna a la
etiqueta el texto que se encuentra entre comillas, le asigna el objeto de tipo Icon denominado “insecto” que se
definió en la figura 6, y además utilizó una constante de la librería SWING para indicar que la imagen estará a
la izquierda (LEFT). Observe la instrucción “etiqueta.setToolTipText( "Esta es una etiqueta" );”,
que le indica a JAVA que la etiqueta tendrá un tooltip.

Un tooltip es una funcionalidad que se activa cuando se coloca el puntero del mouse encima de la etiqueta, y
lo que hará será mostrar el mensaje que se haya configurado para el tooltip, que para este caso es el mensaje
“Esta es una etiqueta”. Finalmente observe la instrucción extremadamente importante en interfaces gráficas
denominada “add”. En la línea “add( etiqueta );”, les estamos diciendo a JAVA que queremos “agregar” o
“añadir” el objeto denominado “etiqueta” a la VentanaJFrame. Decimos que esta instrucción es
extremadamente importante porque nosotros podemos crear todos los componentes gráficos que queramos,
pero si no los añadimos a la ventana, visualmente es como si nunca se hubieran creado porque no los
veríamos.

Luego encontramos el código referente a la inicialización del objeto JTextField denominado “campoTexto”, y su
respectiva configuración para que muestre un texto por defecto. En la figura 2 pintamos dicho código de color
aguamarina, y lo replicamos nuevamente en la figura 9
Figura 9. Código para inicializar el objeto JTextField denominado
“campoTexto”
Básicamente en la figura 9 encontramos el código para inicializar el objeto de tipo JTextField con un texto por
defecto, y volvemos a observar la instrucción extremadamente importante denominada “add”. De esa forma
estamos “añadiendo” o “agregando” el objeto de tipo JTextField denominado campoTexto a la
“VentanaJFrame”

Luego encontramos el código referente a la inicialización del objeto JPasswordField denominado
“campoContrasenia”, y su respectiva configuración para que muestre un texto por defecto. En la figura 2
pintamos dicho código de color rosa, y lo replicamos nuevamente en la figura 10
Figura 10. Código para inicializar el objeto JPasswordField denominado
“campoContrasenia”
Básicamente en la figura 10 encontramos el código para inicializar el objeto de tipo JPasswordField con un
texto por defecto, y volvemos a observar la instrucción extremadamente importante denominada “add”. De
esa forma estamos “añadiendo” o “agregando” el objeto de tipo JPasswordField denominado
campoContrasenia a la “VentanaJFrame”.

Luego encontramos el código referente a la inicialización del objeto JButton denominado “botonSimple”, y su
respectiva configuración para que muestre un texto por defecto en el botón. En la figura 2 pintamos dicho
código de color azul, y lo replicamos nuevamente en la figura 11
Figura 11. Código para inicializar el objeto JButton denominado
“botonSimple”
Básicamente en la figura 11 encontramos el código para inicializar el objeto de tipo JButton con un texto por
defecto, y volvemos a observar la instrucción extremadamente importante denominada “add”. De esa forma
estamos “añadiendo” o “agregando” el objeto de tipo JButton denominado botonSimple a la
“VentanaJFrame”.

Luego encontramos la sección referente al registro de los manejadores de eventos. Como se dijo en líneas
anteriores, un manejador de eventos es una porción de código que se ejecutará cuando un evento ocurra
sobre algún componente como un botón o una caja de texto. En la figura 2 pintamos dicho código de color
blanco, y lo replicamos nuevamente en la figura 12.
Figura 12. Registro de manejadores de eventos para los componentes

Si observa con atención el código de la figura 12 encontrará que se están creando objetos de un par de
clases denominadas “ManejadorCampoTexto”, y “ManejadorBoton”. Más adelante veremos que este par
de clases son clases privadas que se encuentran dentro del mismo archivo “VentanaFrame.java”, y su
función es definir la porción de código que se ejecutará cuando ocurra un evento sobre el componente
registrado.
La instrucción “ManejadorCampoTexto manejadorTxt = new ManejadorCampoTexto();” construirá un
objeto de la clase ManejadorCampoTexto denominado manejadorTxt. Luego la instrucción
“campoTexto.addActionListener( manejadorTxt );” asocia el objeto “campoTexto” con un
actionListener que recibe como argumento el objeto “manejadorTxt”. En otras palabras, estamos haciendo
que el componente “campoTexto” reaccione a un evento, o esté escuchando eventos mediante la
instrucción “addActionListener”, y cuando éstos ocurran, se ejecutará el código configurado en el objeto
“manejadorTxt”.

El mismo razonamiento podemos aplicar para el componente denominado botonSimple. La instrucción
“ManejadorBoton manejadorBtn = new ManejadorBoton();” construirá un objeto de la clase
ManejadorBoton denominado manejadorBtn. Luego la instrucción “botonSimple.addActionListener(
manejadorBtn );” asocia el objeto “botonSimple” con un actionListener que recibe como argumento el
objeto “manejadorBtn”. En otras palabras, estamos haciendo que el componente “botonSimple” reaccione a
un evento, o esté escuchando eventos mediante la instrucción “addActionListener”, y cuando éstos ocurran,
se ejecutará el código configurado en el objeto “manejadorBtn”.

Luego encontramos la clase interna que posee
el código que se ejecutará si ocurre un evento
sobre los objetos de campos de texto. En la
figura 2 pintamos dicho código de color amarillo,
y lo replicamos nuevamente en la figura 13.
Figura 13. Clase interna para el manejo de los eventos en las cajas de
texto

Observe con atención el código de la figura 13. Básicamente esta clase privada implementa la
interfaz de JAVA ActionListener, y proporciona un cuerpo para el método
actionPerformed(ActionEvent evento) que recibe como argumento un objeto del tipo ActionEvent. En
otras palabras, el método actionPerformed() de la clase privada ManejadorCampoTexto está
pendiente de la ocurrencia de eventos, y cuando estos se generen, el evento es pasado como
argumento de tipo ActionEvent al método actionPerformed() para ser procesado.

Por dentro del método actionPerformed() se procesa la fuente del evento con la instrucción “if (
evento.getSource() == campoTexto )” que está validando si la fuente del evento fue el objeto
denominado “campoTexto”. En caso afirmativo se ejecuta la instrucción “cadena = String.format(
"campoTexto: %s", evento.getActionCommand() );” , que básicamente asigna a la variable de tipo
String denominada “cadena” la información que luego se mostrará en pantalla mediante la instrucción
“JOptionPane.showMessageDialog( null, cadena );” . La instrucción
JOptionPane.showMessageDialog es una instrucción de JAVA para mostrar en pantalla mensajes en
forma de ventana.

Lo que significa que el manejador de eventos mostrará en una ventana un mensaje de acuerdo con la
ocurrencia de los eventos. En este caso, se nos mostrará en una ventana el texto que nosotros hayamos
escrito en la caja de texto después de presionar “Enter”. Observe que el método actionPerformed() tiene
dos validaciones dentro del if, porque en nuestra ventana tenemos dos campos de texto, uno de tipo
JTextField y otro de tipo JPasswordField, y cuando escribamos algo en estos campos de texto y
presionemos “enter” veremos una ventana con la información que hayamos digitado en los campos de
texto.

Luego encontramos la clase interna que posee el código que se ejecutará si ocurre un evento sobre
los objetos de botón. En la figura 2 pintamos dicho código de color purpura, y lo replicamos
nuevamente en la figura 14.
Figura 14. Clase interna para el manejo de los eventos en los botones

Observe con atención el código de la figura 14. Básicamente esta clase privada implementa la interfaz de
JAVA ActionListener, y proporciona un cuerpo para el método actionPerformed(ActionEvent evento) que recibe
como argumento un objeto del tipo ActionEvent. En otras palabras, el método actionPerformed() de la clase
privada ManejadorBoton está pendiente de la ocurrencia de eventos, y cuando estos se generen, el evento es
pasado como argumento de tipo ActionEvent al método actionPerformed() para ser procesado. Por dentro del
método actionPerformed() se ejecuta la instrucción “ JOptionPane.showMessageDialog(
VentanaFrame.this, String.format("Usted oprimio: %s", evento.getActionCommand() ) );” , que
básicamente muestra en pantalla el mensaje de que se oprimió el botón, y la fuente del botón con
evento.getActionCommand().

La instrucción JOptionPane.showMessageDialog es una instrucción de JAVA para mostrar en pantalla
mensajes en forma de ventana. Lo que significa que el manejador de eventos mostrará en una ventana
un mensaje de acuerdo con la ocurrencia de los eventos. En este caso, se nos mostrará en una ventana
el nombre del botón que se haya presionado cuando se haya hecho click sobre este.
En síntesis, los manejadores de eventos son clases privadas con el código que se debe ejecutar en caso
de ocurrir un evento.
Por último, nos falta analizar el código de la clase “PruebaVentana”, que es la clase que posee el método
main() y básicamente construye un objeto de la clase “VentanaFrame” para visualizar sus componentes.

Código Fuente de la clase
“PruebaVentana”

Código Fuente de la clase “PruebaVentana”
En la figura 15 observamos el código fuente de la clase “PruebaVentana” que instanciará un objeto de la
clase “VentanaFrame” para visualizar los componentes allí definidos.
Figura 15. Código Fuente de la clase PruebaVentana

Código Fuente de la clase “PruebaVentana”
Como puede observar en la figura 15, el código de la clase “PruebaVentana” es más corto que el de la
clase “VentanaFrame”. En las primeras líneas encontramos una instrucción para instanciar un objeto de
la clase “VentanaFrame” denominado marcoVentana. Luego este objeto marcoVentana establece las
operaciones para poder cerrar la ventana con el botón X, y de allí que sea necesario importar JFrame de
las librerías, pues esa operación de cerrar la ventana proviene de JFrame (la instrucción
JFrame.EXIT_ON_CLOSE ). Luego el objeto marcoVentana establece el tamaño de la ventana que se
creará (la instrucción marcoVentana.setSize( 275, 210 ); ) y finalmente establecerá que la ventana sea
visible con la instrucción “marcoVentana.setVisible( true ); ” . Después de haber analizado el código,
vuelva y revise el diagrama de clases de la figura 1. Es posible que pueda comprender un poco más la
organización y relación de todos los componentes involucrados en la solución después de la explicación
anterior.

Compilación y Ejecución de
código JAVA desde CMD

Compilación y Ejecución de código JAVA desde CMD
Recordemos que cada una de las clases que escribimos deben estar en su propio archivo .java, y que
estos archivos deben ser guardados dentro de la carpeta bin del JDK -Véase “Manual: Preparar el Entorno
de Desarrollo”-. Por tanto, el archivo PruebaVentana.java debe estar dentro de la carpeta bin, así como la
clase “VentanaFrame”. De igual manera, en el interior de la carpeta bin también deberá estar la imagen .gif
denominada “insecto1.gif” -no olvidar el número 1- para que todo funcione adecuadamente. En otras
palabras, el código de la figura 15 de la clase “PruebaVentana” lo transportamos a su respectivo archivo
.java, así como el código de la figura 2 de la clase “VentanaFrame”, de manera que ambos archivos, y la
imagen .gif, se encuentren dentro de la carpeta bin del JDK.

En la figura 16 se observa cómo el archivo PruebaVentana.java se encuentra dentro de la carpeta bin
del JDK.
Figura 16. Archivo PruebaVentana.java dentro de la carpeta bin

En la figura 17 se observa cómo el archivo VentanaFrame.java se encuentra dentro de la carpeta bin
del JDK.
Figura 17. Archivo VentanaFrame.java dentro de la carpeta bin

Ya con nuestros archivos listos dentro de la carpeta bin, lo que resta es abrir el CMD desde la carpeta bin
como se explicó en la lectura denominada “Manual: Preparar el Entorno de Desarrollo”, como se ilustra en la
figura 18. (Recuerde que teniendo abierta la carpeta bin desde el explorador de archivos, debemos ubicar la
barra de direcciones del explorador de archivos y debemos reemplazar el contenido de la barra de
direcciones de la carpeta bin, por la palabra “cmd”, y a continuación pulsar la tecla “Enter” para que podamos
abrir la herramienta CMD desde allí).
Figura 18. Herramienta cmd desde la ruta de la carpeta bin

En la herramienta CMD invocaremos los comandos de compilación de código JAVA, y ejecución de
código JAVA para visualizar el resultado final, como se ilustra en la figura 19.
Figura 19. Compilación y Ejecución de la clase PruebaVentana

Como se puede observar en la figura 19, aparecerá una ventana (el objeto marcoVentana instanciado de la
clase “VentanaFrame”) y en su interior encontramos los distintos objetos que fuimos agregando (add) a la
ventana. Vemos el label con una imagen .gif. Vemos un par de cajas de texto para digitar información (una de
tipo password y otra caja normal) y un botón. Lo interesante es que estos tres objetos tienen asociados
manejadores de eventos, por lo que algo sucederá si escribimos en las cajas de texto y luego presionamos la
tecla “enter”, o si pulsamos el botón con un click.
En la figura 20 se observa el resultado de digitar información en la caja de texto, y a continuación presionar la
tecla “Enter”. Veremos que se muestra una ventana -gracias a las instrucciones
JOptionPane.showMessageDialog-, con la información “campoTexto: Me llamo Elfar”. Eso quiere decir que el
manejador de eventos asociado al objeto “campoTexto” está reaccionando adecuadamente, y muestra en
pantalla el texto que se haya escrito en la caja gracias a la instrucción JOptionPane.

Figura 20. Mensaje de salida cuando se escribe algo en la caja de texto y
se presiona “Enter”

En la figura 21 se observa el resultado de digitar información en la caja de texto de tipo password -la caja
que oculta la información con unos puntos-. , y a continuación presionar la tecla “Enter”. Veremos que se
muestra una ventana -gracias a las instrucciones JOptionPane.showMessageDialog-, con la información
“campoContrasenia: Me gusta JAVA”. Eso quiere decir que el manejador de eventos asociado al objeto
“campoContrasenia” está reaccionando adecuadamente, y muestra en pantalla el texto que se haya escrito
en la caja de tipo password, gracias a la instrucción JOptionPane.

Figura 21. Mensaje de salida cuando se escribe algo en la caja de
password y se presiona “Enter”

Observe que las cajas de texto reaccionan al evento “Enter”, pues cuando se digita información en las
cajas de texto, es usual presionar enter para pasar al siguiente campo. Por tanto, estamos
“escuchando” los eventos que puedan ocurrir en las cajas de texto gracias a los manejadores de
eventos y los eventListener.
En la figura 22 se observa el resultado de presionar el botón. Nótese además que la imagen está
girando, pues hemos incrustado una imagen .gif que posee algo de animación.

Figura 22. Mensaje de salida cuando se pulsa el botón

Observe la figura 22. Observamos un mensaje que dice: “Usted oprimio: Un boton simple", lo que indica
que el manejador de eventos para el botón está funcionando adecuadamente, y muestra en pantalla el
mensaje correspondiente, gracias a la instrucción JOptionPane.
En conclusión, podemos utilizar interfaces gráficas en nuestras aplicaciones, pero eso implica un mayor
dominio sobre los conceptos fundamentales de la programación orientada a objetos, sobre los diagramas
UML, y sobre el funcionamiento sobre los eventos. Lo importante es entender que es necesario importar de
la biblioteca pública de JAVA los componentes y las funcionalidades que harán posible que tengamos una
interfaz gráfica funcional.

Semana 4 Interfaces gráficas.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a Semana 4 Interfaces gráficas.pdf

Similar a Semana 4 Interfaces gráficas.pdf (20)

Último

Último (20)

Semana 4 Interfaces gráficas.pdf