ITTuxtepec Tópicos Avanzados de programación

CAPÍTULO 1.
INTERFAZ GRÁFICA DE USUARIO
La GUI es una interfaz entre la persona y la máquina. El objetivo de esta interfaz gráfica es representar el
código del backend de un sistema de la forma más clara posible para el usuario para simplificarle las tareas
diarias. Para esto, son muy importantes los iconos y las imágenes, ya que solo estos permiten una
aplicación universal e independiente del texto. Por ejemplo, casi todo el mundo sabe cómo es un icono de
wifi, mientras que la palabra varía mucho en los distintos idiomas.

Una graphical user interface o GUI es una interfaz que se puede utilizar para controlar PC, tabletas y otros
dispositivos. Las GUI utilizan elementos gráficos como iconos, menús e imágenes para facilitar el manejo
del usuario humano. Tanto los sistemas operativos como las aplicaciones utilizan una interfaz gráfica de
usuario. De hecho, casi todos los programas para usuarios finales de hoy en día vienen con esta interfaz.

1.1 Creación de interfaz gráfica para usuarios.

La creación de una interfaz gráfica para usuarios es una tarea esencial en el diseño de software y
aplicaciones. Una interfaz bien diseñada puede marcar la diferencia en la experiencia del usuario y en la
eficacia de una aplicación. En mi opinión, es fundamental destacar la importancia de una interfaz intuitiva
y atractiva.

En este contexto, quiero resaltar la relevancia de tener en cuenta las necesidades y preferencias de los
usuarios durante el proceso de diseño. Una interfaz efectiva debe ser fácil de usar, con una navegación
lógica y botones y controles claramente identificables. Además, el diseño gráfico debe ser atractivo y
coherente con la identidad visual de la aplicación o el software.

La usabilidad es clave, y esto incluye la capacidad de adaptarse a diferentes dispositivos y tamaños de

pantalla. Una interfaz responsiva y adaptable garantiza que los usuarios tengan una experiencia
consistente en múltiples plataformas.

La creación de una interfaz gráfica para usuarios es un componente crucial en el desarrollo de software y
aplicaciones exitosas. Un diseño bien pensado y centrado en el usuario puede mejorar significativamente
la satisfacción del usuario y la eficacia de la aplicación.

Ejemplo: Proyecto con interfaz gráfica

Imaginemos que estamos diseñando la interfaz gráfica para una aplicación de redes sociales. ¿Cómo
abordarías el proyecto?

En este apartado se presenta un ejemplo de cómo abordaríamos este proyecto:

1. Investigación de Usuarios: Comenzaríamos por comprender las necesidades de nuestros usuarios.

Realizaríamos encuestas y entrevistas para entender qué características desean, qué tipo de
contenido comparten y cuáles son sus expectativas en cuanto a la interfaz.
2. Diseño de Wireframes: Crearíamos esquemas básicos (wireframes) de la aplicación. Estos
wireframes representarían las diferentes pantallas y cómo se interconectan. Por ejemplo,
 M.C. María Luisa Acosta Sanjuán 8
ITTuxtepec Tópicos Avanzados de programación

tendríamos un wireframe para el perfil del usuario, otro para la página de inicio y otro para
escribir un nuevo mensaje.
3. Prototipado: Utilizaríamos herramientas de diseño para crear prototipos interactivos de la
aplicación. Esto nos permitiría probar la navegación y obtener comentarios tempranos de los
usuarios.
4. Diseño Visual: Desarrollaríamos la estética de la interfaz. Elegiríamos colores, tipografía y
elementos gráficos que se alineen con la marca de la aplicación y sean visualmente atractivos. 5.
Desarrollo de la Interfaz: Tras la aprobación del diseño, el equipo de desarrollo convertiría los
diseños en código funcional. Esto implicaría escribir el código HTML, CSS y JavaScript necesario
para que la aplicación se vea y funcione como se diseñó.
6. Pruebas de Usabilidad: Llevaríamos a cabo pruebas de usabilidad con usuarios reales.
Observaríamos cómo interactúan con la interfaz y recopilaríamos sus comentarios para realizar
ajustes finales.
7. Optimización para Dispositivos Móviles: Aseguraríamos que la interfaz funcione de manera óptima
en dispositivos móviles, como smartphones y tablets, mediante un diseño responsivo. 8. Iteración y
Mejoras Continuas: El proceso de diseño de la interfaz es iterativo. Continuaríamos
recopilando comentarios de los usuarios y realizando mejoras en función de sus necesidades y
retroalimentación.

Este ejemplo ilustra el proceso general de creación de una interfaz gráfica para usuarios, destacando la
importancia de la investigación, el diseño visual, la usabilidad y la adaptabilidad a diferentes dispositivos.
Ejercicio:

Basándote en el ejemplo anterior, elabora una propuesta de un proyecto con interfaz gráfica

Plataformas de desarrollo visuales para el desarrollo de interfaces gráficas

Tabla 1) 10 plataformas visuales de desarrollo de software más populares (pueden cambiar con el tiempo)

Plataforma Enfoque Lenguajes Características Dificultad Plataform Precio

as
Compatibl
es

1. Desarrollo Variados Amplia gama Moderad Windows Versione

Micro general de de o s
sof t software herramientas gratuita
Visual y s y de
Studio extensiones. pago

2. Xcode Desarrollo Swift, Integración Moderad macOS Gratuito

para Objecti con entorno o
macOS e ve C. iOS/macOS.
iOS.
 3. Android Desarrollo Java, Emuladores, Moderad Multi Gratuito
Studio de Kotlin, diseño de o plataforma
aplicacione C++ interfaces,
s Android depuración.

4. Eclipse Desarrollo Variados Amplia Moderad Multi Gratuito

general de flexibilidad y o plataforma
software personalización

5. Visual Edición y Variados Liviano, Moderad Multi Gratuito

Studio desarrollo extensione o plataforma
Code de código s y soporte

M.C. María Luisa Acosta Sanjuán 9

ITTuxtepec Tópicos Avanzados de programación
multiplatafo
rm a

6. Unity Desarrollo C#, Motor Moderad Multi Gratuito

de Visual gráfico, o plataforma (con
videojuego Scriptin simulacione opciones
s g s, AR/VR. de pago)

7. Unreal Desarrollo C++, Motor Moderad Multi Gratuito

Engine de Blueprints gráfico o plataforma (con
videojuego avanzado, tarifas de
s entornos 3D regalías)

8. App Desarrollo Lenguaj Creación de Moderad macOS Gratuito

Inventor de es : MIT apps móviles o
aplicacione App básicas
s móviles Invento
simples. r

9. JetBrains Desarrollo Java, IDE centrado Moderad Multi Gratuito

IntelliJ General, Kotlin, en Java, con o plataforma
IDEA productiv otros soporte para
ida d varios lenguajes

10. Mendix Desarrollo Varios Permite la Facil Web, iOS, Tarifa de

de creación Android suscripció
aplicacione visual de n
s aplicaciones
empresaria en varios
le s de bajo lenguajes
código que

Debes tener en cuenta que la elección de la plataforma de desarrollo depende de las necesidades
específicas, el tipo de aplicación que se está construyendo y preferencias personales. Cada plataforma
tiene sus propias ventajas y limitaciones, por lo que es importante investigar más a fondo y probarlas para
determinar cuál se adapta mejor a tus requerimientos.

Recuerda que la dificultad puede variar según la experiencia del usuario, y esta tabla es un resumen.
Puede haber otras plataformas visuales de desarrollo de software relevantes no mencionadas aquí.

Apache Netbeans
Apache NetBeans es un entorno de desarrollo integrado de código abierto que admite múltiples lenguajes
de programación. Aunque no es una plataforma de desarrollo en el sentido tradicional, es una
herramienta muy versátil para desarrolladores que desean trabajar con varios lenguajes y tecnologías.
Aquí hay una lista de algunas de las principales tecnologías y lenguajes que puedes desarrollar utilizando
Apache NetBeans:

1. Java: Apache NetBeans es conocido por su soporte completo para Java. Puedes desarrollar
aplicaciones Java SE, Java EE y Java ME utilizando esta plataforma.
2. HTML, CSS y JavaScript: NetBeans proporciona funcionalidades para el desarrollo web, incluyendo
edición de HTML, CSS y JavaScript. También es compatible con la creación de aplicaciones web
usando frameworks como Angular, React y Vue.js.
3. PHP: NetBeans ofrece soporte para desarrollo PHP, lo que lo hace adecuado para proyectos web
basados en PHP. Viene con herramientas de depuración y autocompletado para PHP. 4. C/C++: Puedes
utilizar NetBeans para desarrollar aplicaciones en C y C++. Proporciona herramientas de edición y
depuración para estos lenguajes.

M.C. María Luisa Acosta Sanjuán 10

ITTuxtepec Tópicos Avanzados de programación

5. Groovy y Grails: NetBeans incluye soporte para Groovy, un lenguaje de programación dinámico
para la plataforma Java, y para el framework de aplicaciones web Grails.
6. Python: Aunque no es tan completo como algunos entornos de desarrollo específicos de Python,
NetBeans ofrece soporte para Python, lo que lo hace adecuado para proyectos que involucran
múltiples lenguajes.
7. Ruby: A través de un complemento, puedes habilitar el soporte para Ruby en NetBeans y
desarrollar aplicaciones Ruby on Rails.
8. Kotlin: Aunque no es nativo, puedes configurar NetBeans para trabajar con el lenguaje de
programación Kotlin mediante complementos.
9. Node.js: NetBeans también ofrece soporte para el desarrollo de aplicaciones Node.js, lo que facilita
la creación de aplicaciones JavaScript en el lado del servidor.
10. JavaFX: Si estás interesado en el desarrollo de aplicaciones de escritorio en Java, NetBeans es una
excelente elección para trabajar con la plataforma JavaFX.

Es importante destacar que NetBeans es una plataforma de desarrollo extensible, por lo que puedes
agregar complementos para ampliar su funcionalidad y personalizarlo según tus necesidades específicas.
Esto lo hace adecuado para una amplia variedad de proyectos y tecnologías.

Requerimientos que debe de cumplir una interfaz gráfica

Una interfaz gráfica de usuario (GUI) es la parte de un software o sistema que interactúa directamente
con los usuarios a través de elementos visuales como ventanas, botones, menús y formularios. Para que
una interfaz gráfica sea efectiva y satisfaga las necesidades de los usuarios, debe cumplir varios requisitos
y principios de diseño. A continuación, se presenta la descripción de algunos de los requisitos clave que
debe cumplir una interfaz gráfica:
 1. Usabilidad: La GUI debe ser fácil de aprender y usar. Los usuarios deben poder navegar
intuitivamente por la interfaz sin necesidad de una capacitación extensa.
2. Claridad y simplicidad: La interfaz debe ser clara y presentar la información de manera concisa.
Evita la sobrecarga de información y los elementos innecesarios.
3. Consistencia: Los elementos de la interfaz, como los botones y los menús, deben seguir un patrón
coherente en todo el sistema. Los colores, fuentes y estilos también deben mantenerse
consistentes.
4. Retroalimentación: La interfaz debe proporcionar retroalimentación visual o auditiva inmediata
cuando los usuarios realicen acciones. Por ejemplo, un botón debe mostrar un cambio visual
cuando se presione.
5. Eficiencia: La interfaz debe permitir a los usuarios completar sus tareas de manera eficiente. Los
accesos directos, atajos de teclado y búsquedas eficaces pueden mejorar la eficiencia. 6. Flexibilidad:
La GUI debe ser lo suficientemente flexible como para adaptarse a diferentes tamaños de pantalla y
dispositivos, como computadoras de escritorio, tabletas y teléfonos móviles. 7. Accesibilidad: Debe ser
accesible para todas las personas, incluidas aquellas con discapacidades visuales o motoras. Esto
implica proporcionar soporte para lectores de pantalla, teclado y otras tecnologías de asistencia.
8. Estética visual: La interfaz debe ser atractiva visualmente y utilizar un diseño limpio y agradable.
Los elementos visuales, como colores y tipografía, deben ser coherentes con la marca y agradables
para el usuario.
9. Feedback de estado: Los usuarios deben recibir información sobre el estado del sistema o la
aplicación, como la carga de datos o la finalización de una tarea. Esto ayuda a evitar la confusión y
la frustración.

M.C. María Luisa Acosta Sanjuán 11

ITTuxtepec Tópicos Avanzados de programación

10. Seguridad: Si la aplicación maneja datos sensibles, la interfaz debe incluir medidas de seguridad
adecuadas, como autenticación y cifrado de datos.
11. Escalabilidad: La interfaz debe ser escalable para permitir futuras expansiones y adiciones de
características sin alterar significativamente la experiencia del usuario.
12. Documentación y ayuda: Debe proporcionar acceso a la documentación y la ayuda en línea para
que los usuarios puedan resolver problemas y aprender a usar la aplicación de manera efectiva. 13.
Pruebas y retroalimentación de usuarios: La GUI debe ser sometida a pruebas exhaustivas con
usuarios reales para identificar problemas y áreas de mejora. La retroalimentación de los usuarios
es esencial para perfeccionar la interfaz con el tiempo.

Una interfaz gráfica de usuario efectiva debe ser intuitiva, eficiente, accesible, visualmente atractiva y
centrada en las necesidades y expectativas de los usuarios. El cumplimiento de estos requisitos contribuirá
a una experiencia de usuario satisfactoria y facilitará la interacción con el software o sistema.
Práctica 1. Instalación y ejecución de un programa en NetBeans.

Desarrollar esta práctica para que te familiarices con el desarrollo de aplicaciones en un entorno gráfico.
Elaborar su correspondiente reporte (Formato de práctica institucional)

Diseño de una interfaz gráfica (AVA 11: Los fundamentos del lenguaje Java)
El diseño de la interfaz gráfica de una aplicación se fundamenta ante todo en crear instancias de las clases
que representan los diferentes elementos necesarios, modificar las características de estas instancias de
clase, agruparlas y prever el código de gestión de los diferentes eventos que pueden intervenir durante el
funcionamiento de la aplicación. Así, una aplicación gráfica está compuesta por una multitud de elementos
superpuestos o anidados. Entre estos elementos, uno toma un papel preponderante en la aplicación. Se le
suele llamar contenedor de primer nivel. Es el encargado de interactuar con el sistema operativo y agrupar
a los demás elementos. Este contenedor de primer nivel no suele contener directamente los componentes
gráficos, sino otros contenedores en los cuales están ubicados los componentes gráficos. Para facilitar la
disposición de estos elementos entre sí, vamos a utilizar la ayuda de un renderizador. Esta superposición
de elementos podría asimilarse a un árbol, en su raíz principal tenemos el contenedor de primer nivel y sus
diferentes ramas están constituidas por los demás contenedores. Las hojas del árbol corresponden a los
componentes gráficos.

El lenguaje Java propone dos bibliotecas dedicadas al diseño de interfaces gráficas: la biblioteca AWT y la
biblioteca SWING. Los fundamentos de uso son casi idénticos en ambas bibliotecas. El uso simultáneo de
las dos bibliotecas en una misma aplicación puede provocar problemas de funcionamiento y por ello
debería evitarse. Hay una tercera biblioteca más reciente llamada Java FX. Sin embargo, ya no forma parte
de la plataforma estándar Java SE.

a. La biblioteca AWT
Esta biblioteca es la primera disponible para el desarrollo de interfaces gráficas. Contiene una multitud
de clases e interfaces que permiten la definición y la gestión de interfaces gráficas.

NOTA: Para que esta biblioteca sea compatible con todos los sistemas operativos, los componentes
que contiene están limitados a los más corrientes (botones, zonas de texto, listas…)

b. La biblioteca Swing

M.C. María Luisa Acosta Sanjuán 12

ITTuxtepec Tópicos Avanzados de programación

Esta biblioteca se diseñó para resolver las principales carencias de la biblioteca AWT. Se obtuvo esta
mejora al escribir completamente la biblioteca en Java sin apenas recurrir a los servicios del sistema
operativo.
La biblioteca Swing contiene por lo tanto una cantidad impresionante de clases que sirven para
redefinir los componentes gráficos. Sin embargo, no debemos pensar que la biblioteca Swing convierte
la biblioteca AWT en algo completamente obsoleto. De hecho, Swing recupera muchos de los
elementos de la biblioteca AWT

Cualquier aplicación gráfica se compone de, al menos, un contenedor de primer nivel. La biblioteca Swing
dispone de tres clases que permiten llevar a cabo este papel:

• JApplet: representa una ventana gráfica incluida en una página html para que un navegador se haga
cargo de ella. Esta clase ya no es útil en la plataforma Java 11 porque la tecnología de applets ha
sido abandonada.
• JWindow: representa la ventana gráfica más rudimentaria que pueda existir. No dispone de ninguna
barra de título, ningún menú de sistema, ningún borde: en realidad es un mero rectángulo. Esta
clase se utiliza rara vez, excepto para la visualización de una pantalla de inicio en el momento del
arranque de una aplicación (splash screen).
• JFrame: representa una ventana gráfica completa y plenamente funcional. Dispone de una barra de
título, de un menú de sistema y de un borde. Puede fácilmente contener un menú y, por supuesto,
es el elemento que vamos a emplear en la mayoría de los casos.
Elementos gráficos:

1. Ventanas. La clase JFrame es un elemento indispensable en cualquier aplicación gráfica. Como en el

caso de una clase normal, debemos crear una instancia, modificar eventualmente las propiedades
y utilizar los métodos. A continuación, se muestra el código de la primera aplicación gráfica.

M.C. María Luisa Acosta Sanjuán 13

ITTuxtepec Tópicos Avanzados de programación
 Resultado:

M.C. María Luisa Acosta Sanjuán 14

ITTuxtepec Tópicos Avanzados de programación

La clase JFrame se encuentra al final de una jerarquía de clases bastante importante e implementa
numerosas interfaces. Por este motivo, dispone de varios métodos y atributos.

Ahora que
somos capaces de visualizar una ventana, el grueso del trabajo va a consistir en añadirle un
contenido. Antes de poder añadir algo a una ventana, conviene entender bien su estructura, que
resulta relativamente compleja. Un objeto JFrame se compone de varios elementos superpuestos,
cada uno con un papel muy específico en la gestión de la ventana.

El elemento RootPane corresponde al contenedor de los otros tres elementos. El elemento

LayeredPane es el responsable de la gestión de la posición de los elementos tanto en los ejes X e Y

M.C. María Luisa Acosta Sanjuán 15

ITTuxtepec Tópicos Avanzados de programación
 como en el eje Z, lo que permite la superposición de diferentes elementos. El elemento
ContentPane es el contenedor básico de todos los elementos añadidos en la ventana.

Ejercicio: Agregando botones a la ventana

2. El thread EDT ((Event Dispatching Thread). Cuando se ejecuta una aplicación Java sin una interfaz gráfica,
se ejecutan al menos dos threads:
a. El threads principal (el thread main), cuya función es ejecutar el método principal del
programa. Es el punto de entrada obligatorio para ejecutar una aplicación Java SE
estándar.
b. El thread recolector de basura (garbage collector) para limpiar la memoria cuando
está ocupada más allá de cierto umbral (Se tratará a detalle mas adelante)
Un thread es simplemente una unidad de ejecución para un programa. Un programa
puede estar compuesto por uno o más thread. La ventaja de tener múltiples threads es
que puede ejecutar múltiples tareas en paralelo.

En el ejemplo anterior, la interfaz gráfica se creó en el método main y, por lo tanto, en el thread main. Así,
es el thread main el «propietario» de los botones presentes en la interfaz gráfica. Si el usuario hace clic en
él, se le pide al thread EDT que reaccione a esta acción. Para hacer esto, el thread EDT a menudo necesita
acceder a los gráficos. En este caso, es necesaria una operación interthreads. Y aquí es donde pueden
surgir los problemas. De hecho, los componentes gráficos no son thread safe. Esto significa que acceder
desde otro thread posiblemente podría causar un problema.

Para evitar este tipo de situación, es necesario asegurarse de que solo el thread EDT manipule la interfaz
gráfica, ya sea para la creación de la interfaz o para la gestión de eventos. Por lo tanto, es necesario que,

M.C. María Luisa Acosta Sanjuán 16

 ITTuxtepec Tópicos Avanzados de programación

desde el thread principal que ejecuta el método main, se pueda pedir al thread EDT que construya la
interfaz gráfica de la aplicación. Esto es posible utilizando el método invokeLater de la clase SwingUtilities.
Este método espera en el parámetro un objeto de tipo Runnable que es una interfaz funcional que
contiene un único método abstracto cuya firma es la siguiente: void run(). Este objeto (o expresión
lambda) simplemente define lo que debe ser ejecutado por el thread EDT. El siguiente código realiza una
modificación esencial en el ejemplo anterior para garantizar el correcto funcionamiento de la aplicación en
todas las situaciones.
1 package edu.ittux.proyectotap;
2 import javax.swing.JButton;
3 import javax.swing.JFrame;
4 import javax.swing.JPanel;
5 import javax.swing.SwingUtilities;
6 public class Principal {
7 private final JFrame ventana;
8 //Constructor llamado por el thread EDT
9 Principal (String[] args) {
10 // Construcción del IHM
11 // creación de la ventana
12 this.ventana=new JFrame();
13 this.ventana.setTitle("Primera ventana en Java"); 14
this.ventana.setBounds(0,0,300,100);
15 this.ventana.setDefaultCloseOperation
16 (JFrame.EXIT_ON_CLOSE);
17 // creación de los tres botones
18 JButton b1,b2,b3;
19 b1=new JButton("Rojo");
20 b2=new JButton("Verde");
21 b3=new JButton("Azul");
22 // creación del contenedor intermedio
23 JPanel panel;
24 panel=new JPanel();
25 // agregar los botones en el contenedor intermedio 26
panel.add(b1);
27 panel.add(b2);
28 panel.add(b3);
29 // agregar el contenedor intermedio al ContentPane 30
this.ventana.getContentPane().add(panel);
31 }
32 //Método llamado por el thread EDT
33 public void show() {
34 // Mostrar el IHM
35 this.ventana.setVisible(true);
36 }
37 //Punto de entrada ejecutado por el thread main
38 public static void main(final String[] args) {
39
40 // Programa una tarea para el thread EDT:
41 // Creación y visualización de la interfaz gráfica 42
/*SwingUtilities.invokeLater(new Runnable() {
43 public void run() {
44 new Principale(args).mostrar();
45 }
46 });*/
47 SwingUtilities.invokeLater(()->
48 new Principal(args).show());
49 }
50 }
 M.C. María Luisa Acosta Sanjuán 17
ITTuxtepec Tópicos Avanzados de programación

Por supuesto, el resultado de la ejecución es el mismo.

1.2 Tipos de eventos.

Los eventos son acciones o sucesos que se generan en aplicaciones gráficas definidas en los componentes
y ocasionado por los usuarios, como presionar un botón, ingresar un texto, cambiar de color, etc.

• Los eventos le corresponden a las interacciones del usuario con los componentes •
Los componentes están asociados a distintos tipos de eventos
• Un evento será un objeto que representa un mensaje asíncrono que tiene otro objeto como
destinatario

La gestión de los eventos

Todos los sistemas operativos que emplean una interfaz gráfica deben vigilar permanentemente los
diferentes periféricos de introducción de datos para detectar las acciones del usuario y transmitirlas a las
diferentes aplicaciones. Para cada acción del usuario, se crea un evento. A continuación, se envían estos
eventos a cada aplicación, que determinará si le aplica el evento y determina lo que desea realizar como
respuesta. La manera de gestionar estos eventos difiere según los lenguajes. En algunos casos, cada
componente dispone de una sección de código predefinida asociada automáticamente a cada tipo de
evento. En este caso, el papel del desarrollador consiste en personalizar las diferentes secciones de código
asociadas a los eventos. En otros lenguajes, el sistema ubica los eventos en una fila y le corresponde al
desarrollador vigilar esta fila para determinar qué componente está afectado por el evento y provocar la
ejecución de la sección de código correspondiente. El planteamiento empleado por Java es una técnica
intermedia. Java se encarga de determinar qué evento acaba de producirse y sobre qué elemento. El
desarrollador es responsable de configurar la sección de código que va a tratar el evento. Desde un punto
de vista más técnico, el elemento origen del evento se denomina receptor de evento, y el elemento que
contiene la sección de código encargada de gestionar el evento se denomina receptor de evento. Las
fuentes de eventos gestionan, para cada evento que pueden activar, una lista que les permite saber qué
receptores deben ser avisados si el evento se produce. Por supuesto, las fuentes de eventos y los
receptores de eventos son objetos. Es necesario prever qué receptores van a gestionar los eventos que les
va a transmitir la fuente de eventos.

Para garantizar esto, a cada tipo de evento le corresponde una interfaz que debe implementar un objeto si
quiere ser candidato a gestionar dicho evento. Para evitar la proliferación de interfaces (ya muy
numerosas), los eventos se agrupan en categorías. El nombre de estas interfaces siempre respeta la
convención siguiente:

La primera parte del nombre representa la categoría de eventos que los objetos que implementan esta
interfaz pueden gestionar. El nombre siempre termina en Listener.

M.C. María Luisa Acosta Sanjuán 18

ITTuxtepec Tópicos Avanzados de programación

Por ejemplo, tenemos la interfaz MouseMotionListener, que corresponde a los eventos activados por los
movimientos del ratón, o la interfaz ActionListener, que corresponde a un clic en un botón. En cada una de
estas interfaces encontramos las firmas de los diferentes métodos asociados a cada evento.

public interface MouseMotionListener

extends EventListener
{
void mouseDragged(MouseEvent e)
void mouseMoved(MouseEvent e);
}

Cada uno de estos métodos recibe como argumento un objeto que representa el propio evento. Este
objeto se crea automáticamente en el momento de la activación del evento; a continuación, se pasa como
argumento al método encargado de gestionar el evento en el receptor de eventos. En general, contiene
información adicional relativa al evento y es específico para cada tipo de evento.

Es preciso crear clases que implementen estas interfaces. Desde este punto de vista, tenemos una
multitud de posibilidades:

• Crear una clase «normal» que implemente la interfaz. Implementar la interfaz en una clase ya
existente. Crear una clase interna que implemente la interfaz.
• Crear una clase interna anónima que implemente la interfaz.
• Crear eventualmente una expresión lambda si la interfaz es una interfaz funcional.

En algunos casos, quizá sea necesario no gestionar todos los eventos presentes en la interfaz. Sin embargo,
es obligatorio escribir todos los métodos exigidos por la interfaz incluso si varios de ellos no contienen
ningún código. Esto puede perjudicar la legibilidad del código. Para paliar este problema, Java proporciona
para casi cada interfaz XxxListener, una clase abstracta correspondiente que implementa la interfaz y que
contiene los métodos exigidos por esta. Estos métodos no contienen código alguno, ya que el tratamiento
de cada evento debe ser específico a cada aplicación. Estas clases emplean la misma nomenclatura que las
interfaces, excepto que se sustituye Listener por Adapter. Tenemos por ejemplo la clase
MouseMotionAdapter, que implementa la interfaz MouseMotionListener.

Ejemplo: Botones y ActionListener

Aplicación que permita cambiar el color del fondo de la pantalla

//Programa GUI que cambia el fondo de la pantalla de acuerdo al botón
seleccionado 1 package ventanita;
2 import java.awt.*;
3 import java.awt.event.*;
4 import javax.swing.*;
5
6 class EventFrame extends JFrame
7 {
8 public EventFrame()
9 {
10 setTitle("Demostración del uso de eventos...");
11 setSize(600,440);
12 addWindowListener(new MainWindowListener());
13
14 Container contenido = getContentPane();
15 contenido.add(new ButtonPanel());
16
17 }

M.C. María Luisa Acosta Sanjuán 19

ITTuxtepec Tópicos Avanzados de programación

18 }
19
20 class MainWindowListener extends WindowAdapter
21 {
22 @Override
23 public void windowClosing(WindowEvent e) 24
{
25 System.exit(0);
26 }
27 }
28
29 public class EventTest
30 {
31 public static void main(String [] args) 32
{
33 JFrame frame = new EventFrame(); 34
frame.setVisible(true);
35
36 }
37 }
38
39 class ButtonPanel extends JPanel
40 implements ActionListener
41 {
42 private final JButton redButton;
43 private final JButton greenButton; 44
private final JButton blueButton;
45
46 public ButtonPanel()
47 {
48 redButton = new JButton("Rojo"); 49
greenButton = new JButton("Verde"); 50
blueButton = new JButton("Azul"); 51
52 this.add(redButton);
53 this.add(greenButton);
54 this.add(blueButton);
55 ActionListener l;
56
57 redButton.addActionListener(this); 58
greenButton.addActionListener(this); 59
blueButton.addActionListener(this); 60
61
62 }
63
64 public void actionPerformed (ActionEvent event) 65
{
66 Object source = event.getSource(); 67
Color color = getBackground(); 68
69 if(source == redButton)
70 color = Color.RED;
71 else if(source == greenButton) 72
color = Color.GREEN;
73 else if(source == blueButton)
74 color = Color.BLUE;
75
76
77 setBackground(color);
78 repaint();

M.C. María Luisa Acosta Sanjuán 20

ITTuxtepec Tópicos Avanzados de programación

79 }
80 }

Resultado:

1.3 Manejo de eventos.

El manejo de eventos es una parte esencial de la programación en Java para crear aplicaciones interactivas
y receptivas al usuario.

El manejo de eventos en Java es un concepto fundamental para crear aplicaciones interactivas y responder
a las acciones del usuario o a cambios en el sistema. A continuación, se proporciona una descripción breve
del manejo de eventos en Java:

1. Evento: ¿Qué es un evento?

• Un evento en Java es una señal o notificación que indica que algo ha ocurrido en una aplicación. •
Los eventos pueden ser desencadenados por acciones del usuario, como hacer clic en un botón,
escribir en un campo de texto o presionar una tecla, o pueden ser generados por el sistema, como un
cambio en el estado de la red o una actualización de datos.
2. Componentes gráficos: Componentes que generan eventos
• En una aplicación Java, los eventos suelen estar asociados a componentes gráficos, como botones,
campos de texto, ventanas, etc.
• Cada componente tiene su propio conjunto de eventos asociados. Por ejemplo, un botón puede
generar eventos de clic, un campo de texto eventos de teclado, y una ventana eventos de cierre,
entre otros.
3. Listener (escuchador) de eventos: ¿Cómo se detectan los eventos?
• Para capturar y responder a un evento, se utiliza un "listener" o "escuchador" de eventos. Un
escuchador es una clase que implementa una interfaz específica de Java que define los métodos
para manejar un tipo particular de evento.
• Por ejemplo, para manejar eventos de clic de un botón, se implementa la interfaz ActionListener y
se sobrescribe el método actionPerformed(). Cuando se produce un clic en el botón, se llama
automáticamente a este método.
4. Registro de escuchadores: ¿Cómo se asocian los escuchadores a los componentes? • Una vez que se ha
creado un escuchador, debes registrarlo en el componente que generará el evento. Esto se hace
utilizando métodos como addActionListener() para un botón. • Cuando se produce el evento, el
componente notifica a todos sus escuchadores registrados, lo que desencadena la llamada a los
métodos correspondientes en los escuchadores.
5. Manejo de eventos: ¿Cómo se responde a un evento?
• Dentro de los métodos de los escuchadores, puedes escribir código para responder al evento. Por
ejemplo, al hacer clic en un botón, puedes abrir una nueva ventana, realizar cálculos o actualizar
la interfaz de usuario.

M.C. María Luisa Acosta Sanjuán 21

ITTuxtepec Tópicos Avanzados de programación

• El manejo de eventos permite que las aplicaciones Java sean interactivas y respondan
dinámicamente a las acciones del usuario.
Ejemplo sencillo para familiarizarse con el manejo de eventos:

Programa que presenta un botón en una ventana y al hacer clic envía un

mensaje por consola
1 package edu.ittux.ejerciciostap;
2 import java.awt.*;
3 import java.awt.event.*;
4
5 public class ManejoEventos extends Frame implements ActionListener {
6 Button boton;
7
8 public ManejoEventos() {
9 boton = new Button("Haz clic aquí");
10 boton.addActionListener(this); // Registra este objeto como el escuchador del botón 11
add(boton);
12 setSize(300, 200);
13 setVisible(true);
14 }
15
16 @Override
17 public void actionPerformed(ActionEvent e) {
18 System.out.println("¡Se ha hecho clic en el botón!"); 19 }
20
21 public static void main(String[] args) {
22 ManejoEventos = new ManejoEventos();
23 }
24 }
Resultado:

Lo anterior es un ejemplo básico de manejo de eventos en Java (como el “Hola mundo de todos los
lenguajes de programación), donde se crea una ventana con un botón que imprime un mensaje cuando se
hace clic en él. El ActionListener se implementa en la misma clase (en este caso, ManejoEventos), y se
registra para el botón mediante addActionListener(this).

Gestión de los eventos

Ejemplo: el ratón & Mouselistener.

M.C. María Luisa Acosta Sanjuán 22

ITTuxtepec Tópicos Avanzados de programación

Programa que realiza los siguientes eventos: a) Indica cuando el ratón entra a la ventana, b) Cuando sale
de la ventana, y c) cuando el usuario da un clic en algún lugar de la ventana.
1 package edu.ittux.ejerciciostap;
2
3 import java.awt.BorderLayout;
4 import java.awt.Container;
5 import java.awt.event.MouseAdapter;
6 import java.awt.event.MouseEvent;
7 import java.awt.event.MouseMotionAdapter;
8 import java.awt.event.WindowAdapter;
9 import java.awt.event.WindowEvent;
10 import javax.swing.JFrame;
11 import javax.swing.JLabel;
12
13
14 public class MouseTest {
15 public static void main(String[] args){
16 JFrame frame = new MouseFrame();
17 frame.setVisible(true);
18 }
19
20 }
21 class MouseFrame extends JFrame{
22 public JLabel info;
23 public MouseFrame(){
24 setTitle("Demostración del uso de eventos...");
25 setSize(600,440);
26 addWindowListener(new MainWindowListener());
27
28 info = new JLabel("Juegue con el ratón");
29 Container contenido = getContentPane();
30 contenido.add(info, BorderLayout.SOUTH);
31 this.addMouseListener(new MiMouseAdapter(this));
32 this.addMouseMotionListener(new MiMouseMotionAdapter(this)); 33 }
34 }
35 class MainWindowListener extends WindowAdapter{
36 @Override
37 public void windowClosing(WindowEvent e){
38 System.exit(0);
39 }
40 }
41 class MiMouseAdapter extends MouseAdapter{
42 private final MouseFrame frame;
43 public MiMouseAdapter(MouseFrame frame){
44 this.frame = frame;
45 }
//Instrucción clic del ratón en una posición X,Y de la ventana
46 @Override
47 public void mouseClicked(MouseEvent event){
48 frame.info.setText("Ratón pulsado en ("+ event.getX() + "," +
event.getY() + ")");
49 }
// Instrucción ratón entra a la ventana
50 @Override
51 public void mouseEntered(MouseEvent event){
52 frame.info.setText("El ratón entró en la ventana"); 53 }
//Instrucción mouse sale de la ventana
54 @Override

M.C. María Luisa Acosta Sanjuán 23

ITTuxtepec Tópicos Avanzados de programación

55 public void mouseExited(MouseEvent e){

56 frame.info.setText("El ratón salió de la ventana"); 57
58 }
59 }
// define una clase llamada MiMouseMotionAdapter
60 class MiMouseMotionAdapter extends MouseMotionAdapter{
61 private MouseFrame frame; // Declara una variable de instancia frame de tipo MouseFrame 62
public MiMouseMotionAdapter(MouseFrame frame){ constructor de la clase //
MiMouseMotionAdapter
63 this.frame = frame;
64 }
65
66 }

Resultado:
 M.C. María Luisa Acosta Sanjuán 24
ITTuxtepec Tópicos Avanzados de programación

1.4 Manejo de componentes gráficos de control.

El manejo de componentes gráficos de control en Java se refiere a la interacción con elementos visuales,
como botones, campos de texto, casillas de verificación y otros widgets, en una interfaz de usuario
gráfica. Esto implica la creación, configuración y manejo de eventos de estos componentes para que
respondan a las acciones del usuario de manera adecuada.

Cómo manejar componentes gráficos de control en Java:

1. Creación de componentes gráficos:

• Para crear componentes gráficos de control en Java, primero debes importar las clases necesarias
del paquete java.awt o javax.swing, según la biblioteca que estés utilizando (AWT o Swing,
respectivamente).
• Luego, instancias los componentes, como botones, casillas de verificación, campos de texto, etc.

2.
Configuración de componentes gráficos:

• Se puede personalizar la apariencia y el comportamiento de los componentes gráficos mediante

métodos y propiedades específicas.
• Por ejemplo, se puede cambiar el texto de un botón, establecer su tamaño, agregar iconos,
configurar colores, etc.
Ejemplo de configuración de un botón:
boton.setText("Nuevo texto");
boton.setSize(100, 50);

3. Manejo de eventos:
• Para que los componentes gráficos sean interactivos, deberá agregar listeners (escuchadores) de
eventos a los componentes relevantes. Los listeners son clases que implementan interfaces como
ActionListener, ItemListener, MouseListener, etc., dependiendo del tipo de evento que se desee
manejar.
• Luego, anulas los métodos correspondientes de la interfaz para definir cómo responder a los
eventos.

Ejemplo de manejo de eventos de clic en un botón:

boton.addActionListener(new ActionListener() {

M.C. María Luisa Acosta Sanjuán 25

ITTuxtepec Tópicos Avanzados de programación

public void actionPerformed(ActionEvent e) {

// Código para manejar el evento de clic aquí
}
});

4. Interacción con datos:

• Los componentes gráficos de control a menudo se utilizan para recopilar datos del usuario o para
mostrar información.
• Se debe crear la lógica para procesar y almacenar los datos ingresados por el usuario a través de los
componentes, como campos de texto, cuadros de lista, etc.

5. Actualización de la interfaz de usuario:

• Los eventos generados por los componentes pueden requerir cambios en la interfaz de usuario,
como la actualización de etiquetas, la visibilidad de componentes adicionales, la
habilitación/deshabilitación de botones, etc.
• Se debe escribir código para reflejar estos cambios en respuesta a eventos específicos.
El manejo de componentes gráficos de control en Java implica la creación, configuración y manejo de
eventos de elementos visuales para crear interfaces de usuario interactivas y funcionales. La elección entre
AWT y Swing dependerá de tus necesidades y preferencias, pero los conceptos básicos de manejo de
componentes son similares en ambas bibliotecas.

Ejemplo de uso de otros componentes

A
continuación, se explica cómo funciona el algoritmo para realizar este programa en Java paso a paso:
1. El programa define una clase principal llamada ListComponentes, que extiende JFrame e implementa la
interfaz ActionListener. Esto significa que la clase puede responder a eventos de acción, como hacer
 clic en botones, por ejemplo.

2. En el constructor de ListComponentes:

a) Se configura el título de la ventana y su tamaño.

b) Se agrega un WindowListener para manejar el evento de cierre de la ventana.

c) Se crea un panel de herramientas (tools) que contendrá componentes como etiquetas, listas
desplegables (comboboxes) y casillas de verificación (checkboxes).

3. Se agregan componentes a la barra de herramientas:

a) Se crea una lista desplegable (JComboBox) llamada font para seleccionar la fuente. b) Se

crea otra lista desplegable llamada fontSize para seleccionar el tamaño de la fuente.

M.C. María Luisa Acosta Sanjuán 26

ITTuxtepec Tópicos Avanzados de programación

c) Se crean casillas de verificación para seleccionar negrita (bold) y cursiva (italic).

4. Todos estos componentes se agregan al panel de herramientas (tools), que se coloca en la parte inferior
de la ventana (South).

5. Se crea un objeto de la clase FontPanel llamado panel, que se utilizará para mostrar el texto con la
fuente y el estilo seleccionados.

6. En el método actionPerformed, se maneja el evento cuando se realiza una acción en uno de los
componentes de la barra de herramientas (cambiar la fuente, el tamaño o las opciones de estilo). Se
obtienen los valores seleccionados de la fuente, el tamaño y el estilo, y se actualiza la fuente en el
FontPanel (panel) con estos valores. Luego, se llama a repaint() para redibujar el panel con la nueva
configuración.

7. El programa también define una clase interna MainWindowListener que extiende WindowAdapter para
manejar el evento de cierre de la ventana. Cuando se cierra la ventana, el programa se detiene llamando a
System.exit(0). Nota: Este punto es muy importante porque lo pueden retomar para programas
anteriores que no tienen forzado el cierre de ventana y se queda el proceso abierto.

8. Se define otra clase llamada FontPanel, que es un panel personalizado que muestra texto con la fuente
y el estilo seleccionados. Tiene un método setFont para configurar la fuente y un método
paintComponent para dibujar el texto en el panel.

9. La clase principal JListaTexto contiene el método main, que crea una instancia de ListComponentes y la
muestra en la pantalla.

Aquí el código. Es importante que identifiques en qué parte del código se está aplicando cada paso del
algoritmo.
 1 package edu.ittux.listcomponentes;
2
3 import java.awt.*;
4 import java.awt.event.*;
5 import javax.swing.*;
6
7 /**
8 *
9 * @author Aqui van los datos del alumno
10 */
11 class ListComponentes extends JFrame implements ActionListener
{ 12 JPanel tools;
13 JComboBox font;
14 JComboBox fontSize;
15 JCheckBox bold;
16 JCheckBox italic;
17 FontPanel panel;
18
19 public ListComponentes(){
20 setTitle("Demostración del uso de eventos...");
21 setSize(600,150);
22 addWindowListener(new MainWindowListener());
23
24 //Barra de herramientas
25
26 tools = new JPanel();
27
28 tools.add(new JLabel("Fuente "));

M.C. María Luisa Acosta Sanjuán 27

ITTuxtepec Tópicos Avanzados de programación

29
30 font = new JComboBox();
31 font.setEditable(false);
32 font.addItem("Serif");
33 font.addItem("SansSerif");
34 font.addItem("Monospaced");
35 font.addActionListener(this);
36 tools.add(font);
37
38 tools.add(new JLabel("Tamaño "));
39
40 fontSize = new JComboBox();
41 fontSize.setEditable(true);
42 fontSize.addItem("12");
43 fontSize.addItem("16");
44 fontSize.addItem("24");
45 fontSize.addActionListener(this);
46 tools.add(fontSize);
47
48 bold = new JCheckBox("Negrita");
49 bold.addActionListener(this);
50 tools.add(bold);
51
52 italic = new JCheckBox("Cursiva");
53 italic.addActionListener(this);
54 tools.add(italic);
55
 56 getContentPane().add(tools,"South");
57
58 panel = new FontPanel();
59 getContentPane().add(panel, "Center");
60 }
61
62
63 public void actionPerformed(ActionEvent event){ 64 String tipo =
(String)font.getSelectedItem(); 65 String str =
(String)fontSize.getSelectedItem(); 66 int dim =
Integer.valueOf(str).intValue(); 67 int estilo =
(bold.isSelected()? Font.BOLD:0) 68 + (italic.isSelected()?
Font.ITALIC:0); 69
70 panel.setFont(tipo, estilo, dim);
71 repaint();
72 }
73 }
74 class MainWindowListener extends WindowAdapter{
75 public void windowClosing (WindowEvent e){
76 System.exit(0);
77 }
78 }
79
80 class FontPanel extends JPanel{
81 private Font font;
82 public void setFont(String font, int style, int size){ 83
this.font =new Font(font, style,size);
84 }
85 public void paintComponent (Graphics g){
86 if(font!=null)
87 g.setFont(font);
88 g.drawString("Texto del panel", 50,50); 89 }

M.C. María Luisa Acosta Sanjuán 28

ITTuxtepec Tópicos Avanzados de programación
90 }
91
92 public class JListaTexto{
93 public static void main(String[] args){
94 JFrame frame = new ListComponentes();
95 frame.setVisible(true);
96 }
97 }

El código anterior crea una ventana de interfaz gráfica de usuario (GUI) utilizando Swing. Esta ventana
permite al usuario seleccionar una fuente, un tamaño de fuente y opciones de estilo (negrita y cursiva)
para un panel de texto y ver los cambios en tiempo real en ese panel.

Como se acaba de mencionar, este programa crea una ventana con una barra de herramientas que
permite al usuario personalizar la fuente, el tamaño y el estilo del texto que se muestra en un panel
central. ¿Podrías agregarle una fuente más, otro tamaño de fuente, etc.? Manos a la obra, demuestra tu
habilidad presentando un programa con las modificaciones.
M.C. María Luisa Acosta Sanjuán 29