Tecnológico Nacional de México

Instituto
Tecnológico de
Cancún
Integrantes del equipo:
Carlos Ivan Hernández Sánchez
Sergio Eleazar Barahona Chulim
Santiago Alfonso García Cornelio

Carrera:
Ingeniería en Sistemas Computacionales

Materia:
Tópicos Avanzados de Programación

Investigación U1:
Interfaz gráfica de usuario.

Profesor:
Prof. Luis Moreno Lailson

Fecha de Entrega:
10 de Febrero del 2020
INDICE

INTRODUCCION.................................................................................................................................................2
UNIDAD 1: INTERFAZ GRAFICA DE USUARIOS.........................................................................................4
CREACION DE INTERFAZ GRÁFICA DE USUARIO................................................................................4
TIPOS DE EVENTOS.....................................................................................................................................4
Eventos de bajo nivel:.................................................................................................................................5
Eventos de bajo semánticos:.....................................................................................................................5
MANEJO DE EVENTOS.................................................................................................................................6
MANEJO DE COMPONENTES GRÁFICOS DE CONTROL....................................................................8
CONCLUSIONES..............................................................................................................................................10
BIBLIOGRAFIA..................................................................................................................................................12
INTRODUCCION
En la presente investigación presentaremos los fundamentos básicos sobre el manejo de
interfaces graficas de usuarios en aplicaciones; especialmente en el manejo y desarrollo de
eventos.
Se expondrán de manera conceptual los diferentes tipos de eventos relacionados a la
operación de interfaces graficas de usuarios, así como las diferentes librerías con las que
estos operan utilizando el lenguaje de programación Java. Además, conoceremos los
diferentes componentes de control grafico más utilizados en aplicaciones con manejo de
interfaz gráficas, de esta manera tendremos la teoría completa para poder diseñar,
desarrollar y operar aplicaciones funcionales utilizando interfaz gráfica de usuario.
UNIDAD 1: INTERFAZ GRAFICA DE USUARIOS
CREACION DE INTERFAZ GRÁFICA DE USUARIO

La Interfaz gráfica de usuario, también conocida como GUI (Graphical User Interface), es un
programa que hace las veces de intermediario entre usuario y máquina. Un software que
muestra de forma visual todas las acciones posibles en una plataforma, así como la
información disponible, para que los usuarios puedan interactuar con mayor facilidad y sin
necesidad de disponer de profundos conocimientos de informática.

La Interfaz gráfica de usuario es algo que está totalmente presente en nuestro día a día.
Cuando visitamos una página web, cuando abrimos un programa en nuestro ordenador o
cuando arrancamos una app en nuestro smartphone, estamos interactuando constantemente
con una GUI. Ya estamos totalmente familiarizados con ellas.
Primero encontramos las GLI, Command line interface, o interfaz de línea de comandos. Son
las que encontramos en los juegos o en tareas de investigación. Mezclan 3D con 2D y la
interfaz de enfoque del usuario o ZUI, Zooming User Interface.
Después está la interfaz de usuario táctil. Es la que utilizamos a diario en nuestros teléfonos
móviles, tabletas, consolas de videojuegos o en domótica. En el mundo de la empresa la
usan los restaurantes o tiendas de autoservicio, cajeros automáticos, kioskos de información,
entre otros muchos. Son las GUI de uso específico y son las que, al tocar la pantalla con los
dedos, se ejecutan los comandos del ratón sobre el software,
Por último, encontramos la interfaz natural de usuario, o NUI, son las interfaces en las que se
interactúa con un sistema o aplicación. En la interacción con las NUI, no se usa ningún
dispositivo de entrada como el ratón o el teclado. Siempre se usan las manos o las yemas de
los dedos.

TIPOS DE EVENTOS

Cada vez que escribimos con nuestro teclado, que hacemos click en un botón o un link, que
cambiamos el tamaño de un objeto, estamos generando eventos. Los eventos son el medio
como interactúa una clase con otras o con el propio usuario, se encargan de avisar que algo
ha ocurrido y de manejarlo de una forma o de otra.
Todo objeto soporta varios tipos de eventos distintos incluyendo eventos del ratón, evento del
teclado y otros más. Cuando ocurre un evento este se envía solamente a los componentes
apropiados. El evento es cuando el usuario tiene una interacción (al oprimir un botón).
Tenemos la siguiente clasificación según el tipo de evento:
Eventos de bajo nivel:

Representan entradas o interacciones de bajo nivel con elementos del interfaz gráfico
(Cambio de tamaño, cambio del foco, operación con el ratón o con el teclado). Los eventos
de bajo nivel están relacionados con los aspectos físicos de la interacción con los elementos
de la interfaz. El resto de los eventos son de alto nivel.
Dentro de este tipo de eventos tenemos algunos ejemplos:

 ComponentEvent: Cambios en tamaño, posición o visibilidad de un componente

 FocusEvent: Cambios de foco (o sea, capacidad de un componente para recibir
entradas desde teclado)
 KeyEvent: Operación con el teclado
 MouseEvent: Operación con los botones del ratón o movimientos del ratón
 WindowEvent: Cambio de estado en una ventana
 AncestorEvent: Cambio en la composición, visibilidad o posición de un elemento
superior (ancestro) en la jerarquía de la composición

Eventos de bajo semánticos:

Eventos de alto nivel que encapsulan la semántica del modelo de componentes del interfaz
de usuario (Hacer una acción, un cambio de estado en un elemento). No están relacionados
con una clase específica de componente, sino que pueden aplicarse a todos los
componentes que implementen un modelo semántico similar.
Dentro de este tipo de eventos tenemos algunos ejemplos:

 ActionEvent: Realización de la acción específica asociada al componente

 ChangeEvent: Cambio en el estado del componente
 ItemEvent: Elemento seleccionado o deseleccionado
 CareEvent: Cambio en la posición del cursor de inserción en un componente que
gestiona texto
 ListSelectionEvent: Cambio en la selección actual de una lista
MANEJO DE EVENTOS

Cuando ocurre una interacción con el usuario, se envía un mensaje al programa. La

información de los eventos de la GUI se almacena en un objeto de la clase que extiende a
AWTEvent.
Los Tipos de eventos del paquete java.awt.event se utilizan con componentes de AWT y de
Swing. Los tipos de eventos adicionales, específicos para SPNG, se declaran en el paquete
javax.swing.event.
El mecanismo de eventos consta de tres partes:

 El origen del evento

 El objeto del evento
 El componente de escucha del evento

 Origen del evento: Es el componente de la GUI especifico con el cual interactúa el

usuario.
 Objeto del evento: Es el encargado de encapsular la información acerca del evento
que ocurrió. Esta información incluye una referencia al origen del evento y cualquier
información específica del evento que pueda ser requerida por el objeto escucha.
 Objeto escucha: Es un objeto que recibe la notificación del origen del evento cuando
este ocurre; en efecto “escucha” a la espera de un evento y se ejecuta en respuesta a
ese evento.

El programador debe realizar dos tareas clave para procesar un evento de interfaz grafica de
usuario en un programa.

 Primero: debe registrar un componente de escucha del evento para el componente de

la GUI que se espera que genere ese evento.
 Segundo: debe implementar un manejador para ese evento.

Básicamente un componente de escucha para un evento GUI es un objeto de una clase que
implementa a una o más de las “interfaces de componentes” de escucha de eventos de los
paquetes java.awt.event yjavax.swing.event.
Cada interfaz de escucha de eventos especifica uno o más métodos manejadores de eventos
que deben declararse en la clase que lo implemente (que implemente dicha interfaz) esto es
porque la interfaz al ser abstracta y como toda clase abstracta debe implementar todos sus
métodos.
En el momento que ocurre un evento, el componente de la GUI con el que el usuario
interactuó notifica a sus componentes de escucha registrados, llamando al método
manejador de eventos apropiado de cada componente de escucha.

Las librerías Java para diseñar GUI:

AWT

 Primera librería gráfica

 Se usan llamadas a los sistemas de ventanas nativos (componentes “pesados”)"
Intento de un API común mediante el “mínimo común denominador” de todos los
sistemas de ventanas" Problemas: componentes escasos, aplicaciones dependientes
del entorno de ventanas.
Swing

 Evolución tras AWT

 Se usa código propio de Java que dibuja en una ventana proporcionada por el sistema
de ventanas (componentes “ligeros”)." Mayor cantidad de componentes y uniformidad
de las aplicaciones gráficas en todos los entornos de ventanas.
MANEJO DE COMPONENTES GRÁFICOS DE CONTROL

Los métodos son controlados mediante los métodos de control, esto es, un método puede
hacer o no hacer nada cuando se genera un evento.
En este caso tenemos diferentes tipos de componentes gráficos, los cuales son creados a
partir de diferentes clases. En el lenguaje de programación Java tenemos los siguientes
componentes gráficos de control de las GUI.

 Etiqueta: se crean con la clase JLabel, le pasamos como parámetro una cadena que
sera el contenido de la etiqueta.

 Campo de texto: se crean con la clase JTextField, nos permite que el usuario
introduzca un texto, que podemos utilizar para nuestra aplicación.

 Botón: se crea con la clase JButton, le pasamos una cadena como parámetro el
nombre que contendrá el botón.

 Botón radio: se crea con la clase JRadioButton, le pasamos una cadena para indicar
su nombre, también le podemos pasar un booleano, indicando si esta marcado por
defecto. NOTA: es importante agrupar estos botones para formen parte de uno, es
decir, que no podamos marcar más de dos, para ello creamos un objeto ButtonGroup
y con el metodo add vamos añadiendo botones.

 Botón checkbox: se crean con la clase JCheckBox, le pasamos como parámetro una
cadena para indicar su nombre, también un booleana indicando su estado inicial,
recuerda que pueden estar varios marcados.

 Texto de área: se crea con la clase JTextArea, le podemos pasar como parámetro
una cadena con el texto que aparecerá por defecto. Si queremos que se baje la
palabra al terminar la linea, usaremos el método setLineWrap(true); invocado desde el
objeto TextArea. Si queremos que cuando que cuando baje lo haga la palabra entera
en lugar de caracteres sueltos, usaremos el método setWrapStyleWord(true);.

 Campo de password: se crea con la clase JPasswordField, le podemos pasar una

cadena con el texto por defecto. El texto que insertemos aparecerá puntos, muy
usados para contraseñas.
 Menú de selección: se crea con la clase JComboBox, esta es una clase
parametrizada por lo que es recomendable indicar el tipo de dato a almacenar. Para
añadir elementos, usaremos el método addItem(“elemento”); donde elemento será lo
que queremos introducir en el combobox.

 Interruptor: se crea con la clase JToggleButton, nos permite usarlo como si fuera un
interruptor, si esta pulsado es true y si no lo esta es false. Le podemos pasar una
cadena con el texto por defecto, también un booleano para indicar si esta pulsado o no
por defecto.

 Lista: se crea con la clase JList, es una clase parametrizada por lo que es
recomendable indicar el tipo de dato a almacenar. Hay varias formas de construir este
componente, pero lo mas sencillo, es pasandole un array de objetos, por ejemplo, un
array de String. También es posible añadirle un Scroll.
CONCLUSIONES

Después de analizar los diferentes puntos estudiados, es posible ver que la mayoría de las
aplicaciones desarrolladas para el uso ordinario de usuarios no sofisticados, están orientadas
al uso de interfaces graficas de usuario; esto con el fin de facilitar la operación de los
diferentes programas informáticos y convertirlos en aplicaciones sencillas de utilizar por el
usuario sin la necesidad de conocimientos avanzados.
Como desarrolladores, es importante conocer como surgen estas aplicaciones, y cómo es
posible desarrollarlas; debemos conocer los diferentes tipos de interfaces gráficas, así como
los diferentes tipos de eventos que realiza un usuario a través de ella. A demás es importante
conocer y aplicar estas prácticas en un lenguaje de programación, en nuestro caso orientado
a objetos utilizando Java, y poder aplicarlo para el desarrollo de otros componentes gráficos
complejos como lo es en el diseño de sistemas operativos. También es importante recordar
que la utilización de la interfaz gráfica de usuario fue provocada por la necesidad de
comercializar los programas informáticos, por lo cual es importante estar actualizados, y
recopilar toda la información posible para realizar mejores aplicaciones prácticas para el
usuario.
Hernández Sánchez Carlos Ivan

CONCLUSIONES

En los temas que podemos analizar en este caso es la interfaz gráfica de los usuarios por lo
que se entendió sirve para programa que hace las veces de intermediario entre usuario y
máquina, en redactando un poco sobre las interfaces uno se da cuenta que nos pueden
servir también en la materia de Gestión de base de datos o también para una base de datos,
también se habló de los tipos de eventos en el que se me hizo interesante ya que no sabía
este significado buen los tipos de evento en programación trata de que Cada vez que
escribimos con nuestro teclado, que hacemos clic en un botón o un link, que cambiamos el
tamaño de un objeto, estamos generando eventos. También por lo que entendí fueron que
hay varios tipos de ventos en la programación por ejemplo estos con los más importantes:
origen del evento, objeto del evento, y el objeto escucha, también se vieron los manejos de
componentes gráficos de control que son las etiquetas, los botones texto de área, etc. Esto
es resumen es casi todo lo que hacemos el día a día en las computadoras, celulares en los
que los usuarios interactúan.
Barahona Chulim Sergio Eleazar

CONCLUSIONES

De esta forma se puede concluir que la interfaz gráfica de usuario sirve como medio para la
comunicación con un sistema.

El diseñador cumple una función primordial como materializado y constructor de mensajes.

Todo proyecto de diseño implica un proceso pensado y consiente que puede tener
variaciones, todo depende de diversos factores entre ellos del cambio y evolución que tenga
el medio electrónico-digital para lograr que ésta sea eficaz, de fácil uso y memorización y que
incluso provoque emociones en el usuario, en beneficio directo del mismo.

García Cornelio Santiago Alfonso

BIBLIOGRAFIA

 Albornoz, M. C. (2014, October). Diseño de interfaz gráfica de usuario. In XVI

Workshop de Investigadores en Ciencias de la Computación.
Consultado el 05 de Febrero del 2020

 Albornoz, M. C., Berón, M., & Montejano, G. A. (2015, May). Evaluación de

interfaces gráfica de usuario. In XVII Workshop de Investigadores en Ciencias de la
Computación (Salta, 2015).
Consultado el 05 de Febrero del 2020

 EcuRed (2018) Interfaz gráfica de usuario (GUI).

Obtenido de: https://www.ecured.cu/Interfaz_gr%C3%A1fica_de_usuario_(GUI)
Consultado el 06 de Febrero del 2020

 Pantoja, E. B. (2004). El patrón de diseño Modelo-Vista-Controlador (MVC) y su

implementación en Java Swing. Acta Nova, 2(4), 493.
Consultado el 07 de Febrero del 2020

 Carrillo, M. G., & Herranz, M. D. S. M. (2005). Interfaces gráficas en Java. Editorial

Universitaria Ramon Areces.
Consultado el 07 de Febrero del 2020