UNIDAD 5

INTERFACES GRAFICAS
 OBJETIVO ESPECÍFICO
El alumno identificará la importancia del uso de interfaces gráficas dentro
de las aplicaciones desarrolladas mediante la programación orientada a
objetos.

120
 INTRODUCCIÓN
En la actualidad, la mayoría, si no es que todas las aplicaciones
desarrolladas, emplean una interfaz gráfica para comunicarse con los
usuarios. De esta manera se facilita enormemente la tarea de poder
realizar diversas actividades dentro de la aplicación.

El empleo de una interfaz gráfica hace más sencillo el empleo de las

funciones, consultas a bases de datos, realización de reportes y todas
aquellas tareas que generalmente son parte de las aplicaciones, y que, si
se continuaran realizando mediante la línea de comandos, los tiempos
empleados en el aprendizaje y uso serían más grandes que el tiempo
dedicado por parte de un usuario para aprender a usar las interfaces
gráficas que conocemos actualmente.

Al realizar un repaso histórico, las interfaces gráficas han evolucionado y

mejorado hasta convertirse en elementos complejos, pero que agilizan
enormemente la realización de tareas. Al principio, realmente eran
elementos muy sencillos que sólo permitían la realización de tareas
simples, pero con el transcurso del tiempo, se han vuelto elementos
indispensables en el desarrollo de aplicaciones tanto de escritorio como
web.

Es importante considerar, antes de implementar una interfaz gráfica,

algunos aspectos importantes, como:

El tipo de usuario final que empleará la aplicación.

121
 La sencillez y limpieza en el diseño de la interfaz.
La distribución de los elementos, para que sea ágil su uso.

En algunas ocasiones, estos aspectos son pasados por alto, resultando en

interfaces que no son sencillas de emplear, así puede suceder que el
usuario tenga que adaptarse a la interfaz y aprender un uso engorroso de
la misma.

122
 LO QUE SÉ

Proporciona un ejemplo de una interfaz gráfica que sea empleada en la

realización de tareas sencillas y que sea de uso cotidiano. Puede
emplearse alguna de las siguientes:

 Cajero del banco.

 Caja de supermercado.
 Máquina de tarjetas electrónicas del metrobús.

En seguida, menciona cuáles serían los elementos que caracterizan a esta

interfaz y qué la hacen distinta de otras interfaces gráficas. Por ejemplo, el
cajero del banco solicita indicar el monto de retiro de efectivo.

Realiza tu actividad en un procesador de textos, guárdala en tu

computadora y una vez concluida, presiona el botón Examinar. Localiza el
archivo, ya seleccionado, presiona Subir este archivo para guardarlo en
la plataforma

123
 TEMARIO DETALLADO
(20 horas)

5.1. Creación de ventanas

5.2. Eventos
5.3. Gráficos
5.4. Ejemplos prácticos de POO con interfaces gráficas

124
 5.1. Creación de ventajas
El principio de funcionamiento básico de una Interfaz Gráfica de Usuario
(GUI por sus siglas en inglés) consiste en la creación de ventanas. Una
ventana es una parte de la pantalla de una computadora, dentro de la cual
de despliegan ciertos elementos gráficos: botones, tablas, íconos, caja de
texto, entre otros.

La interacción entre la aplicación y el usuario se da dentro de una ventana

mediante el manejo de eventos: clic en un ícono, ingreso de información
en un campo, entre otros. Por lo que la programación orientada a la
implementación de una interfaz gráfica debe considerar dos aspectos
importantes:

1. Qué hacer con la información

2. Cómo presentarla

Una ventana también es considerada un objeto que ha sido instanciado de

una clase. Dentro del lenguaje de programación Java, para llevar a cabo la
creación de una ventana, se debe instanciar a la clase JFrame. La
ventana contará con un botón de “cerrar” el cual permite cerrar la ventana,
otro de “minimizar” y otro de “maximizar”, los cuales controlan el tamaño
de la ventana.

A su vez la clase JFrame es una subclase de la superclase Swing, así

como todos los elementos que pueden colocarse dentro.

125
A continuación se presenta la sintaxis para la creación de una ventana con
un elemento de tipo botón dentro, en lenguaje de programación Java.
Primero se crea una nueva ventana:

JFrame miFrame = new JFrame();

Luego se crea un botón que será colocado dentro de la ventana:

Button miBoton = new Jbutton(“clic aquí”);

En seguida se coloca el botón dentro de la ventana (el cual, por el

momento no tiene dimensiones), sin embargo no se hace de forma directa
en la estructura. Hay que pensar en el frame como en el marco de una
ventana y donde se añaden cosas es en el cristal de la ventana:

miFrame.getContentPane.add(miBoton);

Finalmente, se despliega la ventana, para ello se le da la dimensión

deseada (largo y ancho) y se indica que sea visible:

frame.setSize(300,300);
frame.setVisible(true);

Es importante no olvidar el control para poder cerrar la ventana y que no

se quede en pantalla:

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE
);

El ejemplo completo queda de la siguiente forma:

126
 import javax.swing.*;
public class primeraVentana {
public static void main (String [] args){
JFrame miFrame = new JFrame();
JButton miBoton = new JButton(“clic aquí”);

miFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLO
SE);
miFrame.getContentPane().add(miBoton);
miFrame.setSize(300,300);
miFrame.setVisible(true);
}
}

La ventana creada varía dependiendo del sistema operativo en el que se

ejecute el programa (figura 5.1).

Figura 5.1. Ejemplo de ventana

127
A continuación se muestra una lista con algunos elementos que pueden
agregarse a una ventana:

 JButton.  jScroIIPane.
 JRadioButton.  JSlider.
 JCheckBox.  JTextArea.JTextField
 jLabel.  JTable.
 jList.

Una vez creada la ventana, junto con sus elementos internos, es

importante notar que, al dar clic en el botón que ha sido creado, éste no
realice ninguna operación.

Por lo anterior, es conveniente llevar a cabo el manejo de los “eventos”

que deseamos que se realicen; por ejemplo, al dar clic en el botón, que se
realice la acción de mostrar un mensaje que diga “haz dado clic en el
botón”.

5.2. Eventos
Una vez que se conoce el elemento básico de la interfaz gráfica de
usuario y algunos de los elementos que pueden colocarse, es conveniente
realizar el manejo de los eventos que pueden presentarse para la
interacción con los usuarios.

128
Para ello es necesario que, al dar clic en un botón, se realice alguna
acción. Cada que se realice algún evento, por ejemplo el clic del botón
principal del ratón, éste se puede controlar empleando un método que sea
llamado y realice alguna acción cada que se realice el clic.

En el lenguaje de programación Java, este control de acción-reacción es

conocido como manejo de eventos.

Para saber que un evento se ha realizado (como dar clic con el ratón), es
necesario “escuchar” los eventos (listener interface), así cuando se
efectúe esta acción, se desencadenará otra. De esta manera se plantea
una especie de puente entre el botón que está haciendo clic y la acción
que debe realizarse.

En el leguaje de programación Java, se implementa una interfaz para

escuchar los eventos realizados, algunos de ellos son:

 MouseEvent
 KeyEvent
 WindowEvent
 ActionEvent

A continuación, se tiene un ejemplo para escuchar un evento en el

lenguaje de programación Java. Se agrega el event listener adecuado
para el clic del botón del ejemplo anterior, así se tiene:

miBoton.addActionListener(this);

Posteriormente, se implementa el método de la acción que se realizará

una vez que el botón haya recibido un clic por parte del usuario:

129
 public void actionPerformed(ActionEvent event) {
button.setText("¡Se ha dado clic!");
}

Este método realiza lo siguiente: una vez que el botón ha recibido un clic
por parte del usuario, el texto en su interior cambia al mensaje “¡Se ha
dado clic!”.

A partir del ejemplo anterior, se puede comprender el funcionamiento

general del manejo de eventos durante la implementación de interfaces
gráficas. Este ejemplo ilustrativo es sencillo, pero puede extrapolarse, por
ejemplo para generar un informe en formato pdf, para imprimir un reporte,
entre otros.

5.3. Gráficos
De la misma forma en que se pueden colocar elementos como tablas,
botones y otros mecanismos en una ventana, también se pueden colocar
elementos de tipo gráfico o bien generarlos mediante el uso de librerías
gráficas en el lenguaje de programación orientado a objetos que se esté
empleando.

Para ello, existen diferentes formas de hacerlo: se pueden colocar

elementos gráficos 2D en la ventana, los cuales dan pie a la elaboración
de elementos más complejos como pueden ser gráficas, juegos,
simuladores, entre otros; la otra forma de hacerlo es colocando imágenes
(de formato jpeg, por ejemplo).

130
Para el caso de colocar elementos gráficos, empleando para su creación
el lenguaje de programación Java, se cuenta con la clase JPanel, a partir
de la cual se puede instanciar un objeto y éste se coloca en la ventana
como un elemento de tipo botón, tabla o cualquier otro, pero que posee la
característica de poder contener elementos de tipo gráfico, los cuales
pueden modificarse en tamaño o color, por ejemplo.

Para mostrar el elemento que se desea dentro del panel, es necesario

emplear el método paintComponent() el cual mostrará en pantalla el
gráfico que se está implementando:

paintComponent(Graphics g) { }

El argumento de paintComponent es importante, ya que se está

declarando del tipo Graphics, lo que indica que es un elemento de esa
clase. Esto quiere decir que el objeto referenciado por g es una instancia
de la clase Graphics2D.

Los elementos contenidos dentro de un JPanel pueden emplear los

siguientes métodos:

- drawImage(). - drawOval().
- drawLine(). - fillRect().
- drawPolygon. - fillRoundRect().
- drawRect(). - setColor().

A continuación, un ejemplo en lenguaje de programación Java, para la

creación de un panel que contiene un elemento gráfico.

Primero se declara la clase MiPanel, la cual extiende de la superclase

JPanel y permitirá crear el contenedor de los elementos gráficos;

131
posteriormente se indica que se desea un elemento gráfico y que se debe
colocar en pantalla con paintComponent. Finalmente, se indica que el
color del componente será naranja y que el componente es una línea
recta.

class MiPanel extends JPanel {

public void paintComponent(Graphics g){
g.setColor(Color.orange);
g.fillRect(20,50,100,100);
}
}

El resultado del código anterior se puede ver en la figura 5.2

Figura 5.2. Panel con elemento gráfico

Para el caso en el que se desea mostrar un elemento gráfico externo, es

decir que no será creado empleando el lenguaje de programación, es
necesario indicar qué debe importarse, así como algunas de sus
características (largo y ancho, por ejemplo).

132
A continuación se proporciona un ejemplo de cómo implementar la
importación de un elemento gráfico externo, en este caso una imagen con
la extensión .jpeg, mediante el lenguaje de programación Java.

Para ello, es necesario indicar que el objeto será del tipo ImageIcon y
posteriormente posicionarlo en la ventana donde deseamos mostrarlo. La
ubicación en pantalla se mide en pixeles y a partir de la esquina superior
izquierda, en el ejemplo se consideran 3 pixeles a la derecha y 4 hacia
abajo.
public void paintComponent(Graphics g){
Image miImagen = new
ImageIcon().getImage();
g.drawImage(miImagen,3,4,this);
}

Una vez conociendo el principio básico para capturar eventos y dibujar

gráficos en pantalla, los eventos se pueden encadenar, de forma que un
evento dispare la creación de un elemento gráfico en pantalla.

De la misma manera, se pueden colocar diversos elementos gráficos

dentro de un mismo contenedor, mediante el uso de capas para su
despliegue.

133
 5.4. Ejemplos prácticos de poo
con interfaces graficas
A continuación se proporcionan dos ejemplos ilustrativos para el manejo
de interfaces gráficas en el lenguaje de programación Java.

El primero de ellos consiste en el manejo de eventos, para ello se coloca

una ventana con un botón. Al presionar el botón el mensaje en la ventana
cambia. De esta manera se puede ver un ejemplo funcional del manejo de
eventos, en este caso el clic del ratón. Sin embargo, como se mencionó
con anterioridad, el manejo puede realizarse también sobre otro tipo de
eventos (teclado, por ejemplo).

Veamos el código fuente completo de la aplicación:

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class DemoFrame extends JFrame implements

ActionListener{
JLabel respuesta=new JLabel("");
JPanel elPanel=new JPanel();
JButton clicAqui=new JButton("Clic aquí");

134
 DemoFrame(){
super("Demostración de manejo de eventos");
setBounds(100,100,300,200);

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container contenedor=this.getContentPane();
contenedor.add(elPanel);
clicAqui.setMnemonic('P');
clicAqui.addActionListener(this);
elPanel.add(respuesta);
elPanel.add(clicAqui);
clicAqui.requestFocus();
setVisible(true);
}
public void actionPerformed(ActionEvent event){
Object fuente=event.getSource();
if (fuente==clicAqui){
respuesta.setText("¡Haz dado clic!");

JOptionPane.showMessageDialog(null,"¡Escucho el
evento!",
"Message
Dialog",JOptionPane.PLAIN_MESSAGE);
setVisible(true);
}
}
public static void main(String args[]) {
new DemoFrame();
}
}

El segundo de ellos consiste en la implementación del dibujo de diferentes

arcos como elementos gráficos:

135
import java.awt.*;
import javax.swing.*;

public class DibujarArcos extends JFrame {

public DibujarArcos(){
super("Dibujo de arcos");
setSize(300,170);
setVisible(true);
}

public void paint(Graphics g){

super.paint(g);
g.setColor(Color.YELLOW);
g.drawRect(15,35,80,80);
g.setColor(Color.RED);
g.drawArc(15,35,80,80,0,360);

g.setColor(Color.YELLOW);
g.drawRect(100,35,80,80);
g.setColor(Color.RED);
g.drawArc(100,35,80,80,0,110);

g.setColor(Color.YELLOW);
g.drawRect(185,35,80,80);
g.setColor(Color.RED);
g.drawArc(185,35,80,80,0,-270);

g.fillArc(15,120,80,40,0,360);
g.fillArc(100,120,80,40,270,-90);
g.fillArc(185,120,80,40,0,-270);
}

public static void main(String args[]){

DibujarArcos aplicacion = new

136
 DibujarArcos();

Aplicacion.setDefaultCloseOperation(JFrame.EXIT_ON_
CLOSE);
}
}

Ahora prueba los ejemplos en tu máquina y observa el funcionamiento de

cada uno de ellos.

137
 RESUMEN

Vimos la importancia de contar con una interfaz gráfica de usuario (GUI)

para llevar a cabo la interacción entre la aplicación y el usuario.

Cuando se encuentra estructurada de una manera sencilla, el uso de la

interfaz permite a los usuarios realizar tareas dentro de la aplicación de
forma sencilla, ya que las agiliza. Para llevar a cabo esta tarea, es
conveniente el empleo de elementos como listas, tablas, botones, entre
otros.

Es importante tener en cuenta que el manejo de eventos permite

establecer un seguimiento entre la acción realizada por el usuario y la
respuesta que debe proporcionar la aplicación por medio de la interfaz.

De la misma forma, dentro de la interfaz de usuario se puede hacer uso de

elementos más complejos que botones, tablas y otros, como lo son
elementos gráficos más elaborados, por ejemplo: fotografías, audio, vídeo
e incluso gráficos generados con el mismo lenguaje de programación.

Finalmente, a partir de elementos sencillos, se pueden realizar

implementaciones elaboradas, dependiendo de las necesidades que la
aplicación deba cubrir, así como la sencillez y facilidad de uso con las que
debe contar y los usuarios a los que va encaminada la aplicación.

138
 GLOSARIO

Evento
Acción realizada por el usuario dentro de una ventana.

Interfaz gráfica
Ventana visual que proporciona una salida.

Manejo de eventos
Consiste en atender la realización de un evento, lo cual sirve para detonar
una acción dentro de la aplicación.

139
 ACTIVIDADES DE APRENDIZAJE

ACTIVIDAD 1
Desarrolla un ejemplo de las operaciones que se pueden realizar mediante
el uso de una interfaz gráfica en un cajero automático.

Realiza tu actividad en un bloc de notas, guárdalo en tu computadora con

el nombre interfaz.txt y súbelo a la plataforma. Para ello, presiona el botón
Examinar, localiza el archivo en tu computadora y presiona Subir este
archivo

ACTIVIDAD 2

A partir de las operaciones realizadas en la Actividad 1, escribe en

pseudocódigo las clases correspondientes al manejo interno de las
operaciones realizadas por el cajero automático.

Genera un archivo de texto cuyo nombre sea interfaz2.txt. Una vez que lo
concluyas, envía tu información; presiona el botón Examinar para localizar
el archivo en tu computadora y por último presiona Subir este archivo.

140
ACTIVIDAD 3

Con base en la actividad del cajero automático (Actividad 1), realiza la

propuesta sencilla de la pantalla principal de la interfaz gráfica que se
implementará. Guarda la imagen en un archivo que se llame interfaz3
(puede ser en formato gif o jpg). De la misma forma, genera el código
fuente en lenguaje de programación Java, para el manejo principal de
ventanas correspondientes y guárdalo en un archivo de código fuente que
se llame interfaz4.java. Comprime tus archivos (.zip).

Realiza tu actividad en un procesador de textos, guárdala en tu

computadora y una vez concluida, presiona el botón Examinar. Localiza el
archivo, ya seleccionado, presiona Subir este archivo para guardarlo en
la plataforma.

141
 CUESTIONARIO DE
REFORZAMIENTO

Responde las siguientes preguntas.

1. ¿Qué es una interfaz gráfica?

2. ¿Cuál es el objetivo de contar con una interfaz gráfica?
3. Proporciona un ejemplo de una interfaz gráfica empleada de forma
común.
4. ¿Existe alguna desventaja al implementar interfaces gráficas?
5. En la implementación de interfaces gráficas, ¿se puede llevar a cabo el
manejo de excepciones?
6. ¿Cuál es el elemento principal para el desarrollo de interfaces gráficas?
7. Proporciona algunos ejemplos de elementos que pueden posicionarse
dentro de una ventana.
8. ¿Qué es el manejo de eventos?
9. Proporciona algunos ejemplos de eventos que pueden ser controlados
para la interacción con la interfaz gráfica.
10. ¿Qué tipo de elementos gráficos adicionales se pueden manipular
mediante el uso de una interfaz gráfica?

Realiza tu actividad en un procesador de textos, guárdala en tu

computadora y una vez concluida, presiona el botón Examinar. Localiza el

142
archivo, ya seleccionado, presiona Subir este archivo para guardarlo en
la plataforma.

143
 LO QUE APRENDÍ

Plantea la interfaz gráfica que se puede emplear, así como el código

fuente en lenguaje de programación Java para su posterior
implementación:

Se requiere la realización de una interfaz gráfica que permita visualizar el

número total de hombres y mujeres que han contestado una encuesta.

El resultado debe ser sencillo a la vista por lo que se sugiere que se

empleen los colores azul y rosa, los cuales representarán a hombres y
mujeres, respectivamente. El resultado debe ser colocado en una sola
ventana, la cual debe contar con un botón que contenga la leyenda:
“Imprimir resultado” y que al dar clic muestre en pantalla la gráfica.

Se sugiere que las figuras para representarlo sean círculos, cuyo radio es
el total de hombres y mujeres que respondieron.

Realiza tu actividad en un procesador de textos, guárdala en tu

computadora y una vez concluida, presiona el botón Examinar. Localiza el
archivo, ya seleccionado, presiona Subir este archivo para guardarlo en
la plataforma.

144
EXAMEN DE AUTOEVALUACIÓN
Indica si las siguientes aseveraciones son Verdaderas o Falsas:
Verdadera Falsa
1. Una interfaz gráfica sólo tiene que ver con la ( ) ( )
presentación de la información en pantalla para los
usuarios.
2. El uso de interfaces gráficas debe ser sencillo y ( ) ( )
amigable con los usuarios.
3. La implementación de una interfaz gráfica es ( ) ( )
totalmente obligatorio en una aplicación.
4. La interfaz gráfica no tiene asociación con el ( ) ( )
manejo de eventos.
5. El principio básico de una interfaz gráfica es una ( ) ( )
ventana.
6. Los elementos se colocan en el marco de la ( ) ( )
ventana.
7. Se debe emplear un elemento para escuchar los ( ) ( )
eventos realizados en la ventana.
8. Una vez que se ha realizado un evento, se realiza ( ) ( )
una acción como consecuencia de éste.
9. En una ventana no se pueden colocar elementos ( ) ( )
gráficos como fotografías.
10. Se pueden generar elementos gráficos propios ( ) ( )
para colocarlos en una ventana.

145
 MESOGRAFÍA

Bibliografía sugerida

Autor Capítulo Páginas

Sierra & Bates (2005) 12 353-398

Bibliografía Básica

Sierra, Kathy & Bates, Bert. (2005). Head First Java. (2nd ed.) O’Reilly:
Sebastopol, CA. [Vista previa]

Bibliografía Complementaria

Eckel, Bruce. (2006). Thinking in Java. (4th ed.) Prentice Hall: Nueva York,
NY. [Vista previa]

146
 Sitios de Internet

Sitio
http://olgacarreras.blogspot.com/sea
rch/label/usabilidad%20general
http://www.javabeginner.com/java-
swing/java-swing-tutorial
http://docs.oracle.com/javase/7/docs/
api/
http://casidiablo.net/codigo-java-
graficos-2d/
Descripción
Usabilidad en aplicaciones
Ejemplo de GUI en Java
Documentación de Java
Ejemplos de gráficos 2D en
Java

147