INSTITUTO TECNOLÓGICO

SUPERIOR DE SAN ANDRES TUXTLA

CARRERA: INGENIERÍA EN
SISTEMAS COMPUTACIONALES

MATERIA: TOPICOS AVANZADOS DE PROGRAMACIÓN

CATEDRÁTICO: ANGELINA MARQUEZ JIMENEZ

TEMA: REPORTE DE INVESTIGACIÓN

INTEGRANTES:
KASSANDRA AMOR FACUNDO
ANGEL DE JESUS CARMONA COBAXIN
NATALIA DOMINGUEZ FISCAL
ALEJANDRA DEL CARMEN VICHI ORTIZ

GRUPO: 404-A

FEBRERO – JULIO 2021

 SAN ANDRÉS TUXTLA, VER.

ÍNDICE

INTRODUCCIÓN.............................................................................................................................3
ENTORNO GRÁFICO................................................................................................................4
INTERFAZ GRÁFICA DE USUARIO.......................................................................................5
ELEMENTOS INTEGRAN UNA GUI.......................................................................................7
WIDGET........................................................................................................................................8
EVENTO.....................................................................................................................................10
¿CÓMO INTERACTÚAN LOS EVENTOS EN UNA GUI?.....................................................10
LIBRERÍAS JAVA SE EMPLEAN PARA EL DESARROLLO DE GUI............................11
TIPOS DE EVENTOS EN JAVA.............................................................................................13
CONCLUSIÓN...............................................................................................................................15
BIBLIOGRAFIA.............................................................................................................................16

pág. 2
INTRODUCCIÓN

Hoy en día las interfaces de los programas son cada vez más sofisticadas y
atractivas para el usuario. Son intuitivas y cada vez más fáciles de usar: pantallas
táctiles, etc.

Sin embargo, no siempre ha sido así. No hace tantos años, antes de que surgieran
y se popularizaran las interfaces gráficas de usuario para que el usuario
interactuara con el sistema operativo con sistemas como Windows, etc., se
trabajaba en modo consola, o modo carácter, es decir, se le daban las ordenes
al ordenador con comandos por teclado, de hecho, por entonces no existía el
ratón.

Así que, con el tiempo, con la idea de simplificar el uso de los ordenadores para
extender su manejo a usuarios de todo tipo, se ha convertido en una práctica
habitual utilizar interfaces gráficas de usuario (IGU o GUI en inglés), para que el
usuario interactúe y establezca un contacto más fácil e intuitivo con el ordenador.

En ocasiones verás otras definiciones de interfaz. Aquí en este módulo, cuando

hablamos de interfaz, nos referimos a la cara visible de los programas tal y como
se presenta a los usuarios para que interactúen con la máquina. La interfaz gráfica
implica la presencia de un monitor de ordenador, en el que veremos la interfaz
constituida por una serie de menús e iconos que representan las opciones que
el usuario puede tomar dentro del sistema.

Las interfaces gráficas de usuario proporcionan al usuario ventanas, cuadros de

diálogo, barras de herramientas, botones, listas desplegables y muchos otros
elementos. Las aplicaciones son conducidas por eventos que se generan cuando
el usuario interactúa con la interfaz y se desarrollan haciendo uso de las clases
que para ello nos ofrece el API de Java.

Por ello, en esta UD nos centraremos en 2 aspectos principalmente:

pág. 3
  El diseño de la interfaz gráfica: los elementos que vamos a usar, su
disposición en la pantalla y la funcionalidad que van a tener.
 La gestión de los eventos que se producen cuando el usuario interactúa con
esa interfaz y el desarrollo del código que se debe ejecutar en cada
situación.

En 1981 aparecieron los primeros ordenadores personales, los llamados PC, pero
hasta 1993 no se generalizaron las interfaces gráficas de usuario. El escritorio del
sistema operativo Windows de Microsoft y su sistema de ventanas sobre la
pantalla se ha estandarizado y universalizado, pero fueron los ordenadores
Macintosh de la compañía Apple los pioneros en introducir las interfaces gráficas
de usuario.

ENTORNO GRÁFICO

El entorno gráfico de usuario (GUI) son los recursos visuales que presentan la
información y procesos que se pueden ejecutar en un programa o un sistema
operativo. El entorno de escritorio (en inglés, 'desktop environment') es el conjunto
de iconos, barras de herramientas, fondo de pantalla y habilidades específicas que
llamamos 'escritorio' en el sistema operativo. La información se manipula
directamente sobre las representaciones gráficas con ayuda del puntero y el ratón.

La historia de la interfaz (o entorno) gráfica para un sistema operativo, con iconos

y un curso dirigido por un ratón, comenzó con los diseños de Douglas Englebart
en 1968, pero la primera compañía en lanzarla al mercado fue Xerox en 1981 con
su Sistema de Información Estrella 8010 o 'Xerox Star'.

Ellos inventaron el lenguaje visual que utilizan la mayor parte de los ordenadores
personales: carpetas, ventanas, puntero, etc. Apple recogió dicha idea y
popularizó el sistema con 'Apple Lisa' en enero de 1983. Lisa introdujo conceptos
brillantes que todavía utilizamos hoy, como el modo de navegar por el sistema de

pág. 4
archivos de manera jerárquica y el 'drag&drop' (arrastrar y soltar) para mover
documentos o copiarlos de unas carpetas a otras.

El ordenador fue un desastre estrepitoso, debido principalmente a su precio, pero

el entorno gráfico no. Le siguió VisiOn, de VisiCorp, para ordenadores IBM a
mediados de 1983, Macintosh en 1984, la primera versión de Microsoft Windows
en 1985 y muchos otros. En 1987, Apple inició un pleito contra Microsoft y Hewlett-
Packard por infracción de propiedad intelectual sobre el concepto de entorno
gráfico, una guerra que perdió.

En los años 90, Windows se constituyó como el sistema operativo más popular del
planeta. En l998, el mundo del software libre (históricamente asociado a los
entornos de texto) aportó dos proyectos de entorno gráfico de usuario: Gnome y
KDE. Junto con Mac OSX, introducido en el 2002, éstas son las interfaces gráficas
alternativas a Windows más populares del mundo.

INTERFAZ GRÁFICA DE USUARIO

Con la idea de simplificar el uso de los ordenadores para usuarios de todo tipo y

no sólo para los expertos, se ha convertido en una práctica habitual utilizar
metáforas visuales por medio de la llamada interfaz gráfica de usuario (IGU o GUI
en inglés) para que el usuario interactúe y establezca un contacto más fácil e
intuitivo con el ordenador. Si, como afirma Neal Stephenson: "en el principio fue la
línea de comandos..." tal como los hackers siguen hoy reivindicando no sólo con
nostalgia, sino también como una forma de tener control real sobre las máquinas,

pág. 5
en la actualidad prima la cultura de la interfaz "amigable" y vistosa. En estos
casos, un simple clic de ratón sobre algún gráfico (imagen) que aparece en la
pantalla, sustituye a la tediosa tarea de escribir código fuente para que
el ordenador interprete que debe realizar alguna acción. En 1981 aparecieron los
primeros ordenadores personales, los llamados Pcs, pero hasta 1993 no se
generalizaron las interfaces gráficas de usuario. El escritorio del sistema operativo
Windows de Microsoft y su sistema de ventanas sobre la pantalla se ha
estandarizado y universalizado, pero fueron los ordenadores Macintosh de la
compañía Apple los primeros que introdujeron las interfaces gráficas de usuario.

Una interfaz es un dispositivo que permite comunicar dos sistemas que no hablan
el mismo lenguaje. Restringido a aspectos técnicos, se emplea el término interfaz
para definir el juego de conexiones y dispositivos que hacen posible la
comunicación entre dos sistemas.

En el caso del hipertexto, la interfaz hipertextual consistiría en el diseño

navegacional y el conjunto de herramientas y utilidades que permiten al usuario-
lector interactuar con los contenidos. La interfaz proporcionará al usuario el
conjunto de posibilidades que podrá seguir durante todo el tiempo que se
relacione con el programa, detallando lo que verá y escuchará en cada momento,
y las acciones que puede realizar, así como las respuestas que puede ofrecer el
sistema. El usuario, además de entender el mensaje, ha de comprender la
mecánica operativa que se le ofrece (sintaxis, órdenes, códigos, abreviaturas,
iconos, etc.). Una buena interfaz requiere poco esfuerzo por parte del usuario,
simplicidad y funcionalidad.

Las características básicas de una buena interfaz podrían sintetizarse en:

 Facilidad de comprensión, aprendizaje y uso.

 Representación fija y permanente de un determinado contexto de acción
(fondo).
 El objeto de interés ha de ser de fácil identificación.

pág. 6
  Diseño ergonómico mediante el establecimiento de menús, barras de
acciones e iconos de fácil acceso.
 Las interacciones se basarán en acciones físicas sobre elementos de
código visual o auditivo (iconos, botones, imágenes, mensajes de texto o
sonoros, barras de desplazamiento y navegación...) y en selecciones de
tipo menú con sintaxis y órdenes.
 Las operaciones serán rápidas, incrementales y reversibles, con efectos
inmediatos.
 Existencia de herramientas de Ayuda y Consulta.
 Tratamiento del error bien cuidado y adecuado al nivel de usuario.

La tipografía y el tratamiento del color son dos elementos a los que hay que
prestar especial importancia a la hora de establecer una buena interfaz, poniendo
especial cuidado en el diseño de las formas y la coherencia interna entre ellas.

Al igual que cualquier otro tipo de documento textual o gráfico creado por un
programa de ordenador, la lectura o navegación de un hipertexto se realiza a
través de la pantalla, y, en el caso de un documento web, por medio de un
programa de lectura y visualización llamado navegador. El diseño del hipertexto se
realiza para que el usuario vea en pantalla toda la información necesaria y para
que opere e interactúe en ella a través del ratón, el teclado y las opciones del
menú. Así, se insertan códigos que no están visibles si así se prefiere, pero que
ofrecen la apariencia deseada para ser vistos en pantalla. Aquí la palabra clave es
WYSIWYG ("What you see is what you get"), es decir, lo que tu ves es lo que
obtienes.

ELEMENTOS INTEGRAN UNA GUI

Una GUI (generalmente pronunciada güi) es una interfaz de usuario gráfica (en
lugar de puramente textual) para una computadora. El término entró en existencia
porque las primeras interfaces de usuario interactivas a las computadoras no eran

pág. 7
gráficas; estaban orientadas a texto y teclado, y por lo general consistían en
comandos que tenía que recordar y las respuestas de la computadora que eran
infamemente breves. La interfaz de comandos del sistema operativo DOS (que
todavía se puede obtener desde su sistema operativo Windows) es un ejemplo de
la interfaz típica entre usuario y equipo antes de que llegaran las GUI. Un paso
intermedio en las interfaces de usuario entre la interfaz de línea de comandos y la
interfaz gráfica de usuario era la interfaz basada en menús no gráfica, que le
permitía interactuar utilizando un ratón en lugar de tener que escribir comandos
del teclado.

Componentes GUI (widgets)

 Objetos visuales del interfaz

 Un programa gráfico es un conjunto de componentes anidados: ventanas,
contenedores, menús, barras, botones, campos de texto, etc.

Disposición (layout): cómo se colocan los componentes para lograr un GUI

cómodo de utilizar.

 Layout managers: Gestionan la organización de los componentes gráficos

de la interfaz.

Eventos: interactividad, respuesta a la entrada del usuario.

 Desplazamiento del ratón, selección en un menú, botón pulsado, etc.

Creación de gráficos y texto - Clase Graphics

 Define fuentes, pinta textos,

 Para dibujo de líneas, figuras, coloreado.

WIDGET

Un widget es una pequeña aplicación o programa diseñada para facilitar el acceso

a las funciones más usadas de un dispositivo. Su principal característica es que se
pág. 8
integran en el escritorio del ordenador o el teléfono móvil y nos ofrecen
información visual sin necesidad de ejecutar nada más. Los widgets son gratuitos
y se pueden conseguir a través de Internet.

En programación, el término hace referencia a la parte de una GUI (interfaz gráfica

de usuario) que permite al usuario interconectar con la aplicación y el sistema
operativo. Los widgets muestran información e invitan al usuario a actuar de varias
maneras. Los widgets típicos incluyen botones, cuadros de diálogo, ventanas
emergentes, menús desplegables, iconos, barras de desplazamiento, bordes de
ventana redimensionarles, indicadores de progreso, cuadros de selección,
ventanas, menús de corte, barras de menús, conmutadores y formularios.

Estos Widget se encuentran no solo a nivel web, sino que es posible encontrarlos
en sistemas operativos como Android, iPhone, Windows, etc. Gracias a esto,
podemos añadir nuevas funcionalidades que nos permiten sacar más partido de
las diferentes herramientas.

Tipos de widgets

Aunque hay varios tipos de widgets, estos son los más conocidos y utilizados.

 Widgets de escritorio. Son herramientas interactivas que se descargan en

el escritorio del ordenador. Es el caso de los buscadores, las aplicaciones
del tiempo, relojes, etc.
 Widgets para móviles. Igual que los anteriores, pero adaptados a la
tecnología Mobile. La forma más sencilla de instalarlos es mantener
pulsado el dedo en una zona de la pantalla en la que no haya iconos y nos
saldrá un desplegable con la opción de los distintos widgets.
 Web widgets. Las partes de código que se traducen en funcionalidad o
contenidos y que se programan desde JavaScript, Flash, Silverlight y
Windows Media Player.
 Widgets físicos. Son mecanismos compactos que integran funciones
típicas de los widgets, como alarmas, el tiempo, etc.

pág. 9
En su mayoría no son gratuitos y no producen ingresos. Sin embargo, son
herramientas muy valiosas para las empresas en la medida en la que se pueden
usar para generar tráfico a la página web o simplemente para crear imagen de
marca (branding).

EVENTO

Los Eventos son las acciones sobre el programa, como, por ejemplo:

 Clic sobre un botón

 Doble clic sobre el nombre de un fichero para abrirlo
 Arrastrar un icono
 Pulsar una tecla o una combinación de teclas
 Elegir una opción de un menú
 Escribir en una caja de texto
 simplemente mover el ratón

Cuando se produce o dispara un evento en programación permite al usuario

realizar una serie de acciones lógicas para un determinado programa. sobre un
determinado componente elemento que presta un servicio de comunicación
cuando se diseñan interfaces., se da inicio a un conjunto de acciones
programadas por el usuario para ese evento concreto.

¿CÓMO INTERACTÚAN LOS EVENTOS EN UNA GUI?

Modelo de gestión de eventos.

Hoy en día, la mayoría de sistemas operativos utilizan interfaces gráficas de

usuario. Este tipo de sistemas operativos están continuamente monitorizando el
entorno para capturar y tratar los eventos que se producen.

pág. 10
El sistema operativo informa de estos eventos a los programas que se están
ejecutando y entonces cada programa decide, según lo que se haya programado,
qué hace para dar respuesta a esos eventos.

Cada vez que el usuario realiza una determinada acción sobre una aplicación que
estamos programando en Java, un clic sobre el ratón, presionar una tecla, etc., se
produce un evento que el sistema operativo transmite a Java.

Java crea un objeto de una determinada clase de evento, y este evento se

transmite a un determinado método para que lo gestione.

El modelo de eventos de Java está basado en delegación, es decir, la

responsabilidad de gestionar un evento que ocurre en un objeto fuente la tiene
otro objeto oyente.

Las fuentes de eventos (event sources) son objetos que detectan eventos y

notifican a los receptores que se han producido dichos eventos. Ejemplos de
fuentes:

 Botón sobre el que se pulsa o pincha con el ratón.

 Campo de texto que pierde el foco.

 Campo de texto sobre el que se presiona una tecla.

 Ventana que se cierra.

Lo que tenemos que incluir en nuestros programas para poder reaccionar a estos
eventos son los oyentes. Estos son objetos que notifican cuándo a ocurrido un
evento y ejecutan el código para responder a ese evento.

pág. 11
Título Carácter

Recomendad
Spring Security
a

Recomendad
Bouncy Castle
a

Recomendad
JavaMail
a

HttpComponent Recomendad
s a
LIBRERÍAS JAVA SE EMPLEAN
PARA EL DESARROLLO DE
Recomendad
OpensLayers GUI
a

Recomendad
GeoTools El presente catálogo ha sido
a
desarrollado teniendo en cuenta cuáles

Recomendad son las librerías más reconocidas

Smack
a dentro de la comunidad de desarrollo, y
tiene como objetivo cubrir
Apache
funcionalidades que suelen presentarse
Commons Obligatoria
Logging y Log4J al desarrollar software. Las librerías que
se aquí se incluyen pertenecen a
Recomendad
JasperReports alguna de las siguientes categorías:
a
Seguridad, Comunicaciones,
Recomendad Logging, Informes, Pruebas.
JFreeChart
a

Recomendad
POI
a

Recomendad
iText
a

JUnit Obligatoria
TIPOS DE EVENTOS EN JAVA
Recomendad
JSFUnit
a
pág. 12
Recomendad
DBUnit
a
Los eventos son el medio cómo interactúan 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. 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. Es por ello que, cuando programamos, debemos tener en cuenta la
posibilidad (no siempre necesaria, pero lo será a medida que generemos clases
cada vez más complejas), tanto de manejar eventos que sólo implican a nuestra
clase como de generar nuestros propios eventos, de modo que los usuarios de
nuestras clases (en principio nosotros mismos) puedan decidir cómo reaccionará
su código ante ellos.

 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).

 Eventos 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, etc.). 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.

pág. 13
 Eventos de Foco: Hay muchas razones por las que pasa el foco de un
Componente a otro, y cuando esto sucede, se genera un evento focusLost
() en el Componente que pierde el foco y el que recibe el foco, genera un
evento focusGained (). Es base a esta pequeña explicación, es fácil
comprender que haya muchos tipos de Componentes que pueden generar
este tipo de eventos, ya que cualquier Componente que pueda ganar el
foco también podrá perderlo y generará esos eventos.

 Evento de teclado: Un objeto KeyListener es instanciado y registrado para

recibir los eventos del teclado keyPressed () sobre los objetos Frame,
Label, Button y TextField. Cuando se pulsa una tecla, el objeto que tenga el
foco en ese momento generará un evento keyPressed(), e incluso la
Etiqueta responde al teclado (en este caso).

pág. 14
CONCLUSIÓN

En este reporte de investigación, se concluye que las interfaces graficas son muy
importantes para cualquier tipo de usuario y más para el menos experimentado, ya
que sin ellas no sería posible manipular programas con tal facilidad y comodidad.

Sin embargo, cuando aquí hablamos de interfaz nos referimos a la cara visible de
los programas tal y como se presenta a los usuarios para que interactúen con el
programa. La interfaz gráfica implica la presencia de un monitor  de ordenador
o pantalla constituida por una serie de menús e iconos que representan las
opciones que el usuario puede tomar dentro del sistema.

Por ejemplo; en la base de datos de una biblioteca es muy necesario tener una
interfaz sencilla y fácil de usar, ya que sin esta los usuarios no serían capaces de
encontrar algún libro.

pág. 15
BIBLIOGRAFIA

[1] Aguilar, L. J. (2010). Programación en c/c++ java y UML. México: McGraw Hill.

[2] Ceballos, F. J. (2010). JAVA 2: Curso de programación. Madrid: RA-MA.

[3] Dean, J. (2009). Introducción a la programación con Java. México: McGraw Hill.

[4] Deitel, D. y. (2010). Java Cómo Programar. México: Prentice Hall.

pág. 16