1.

INTERFAZ GRAFICA

Desarrolla programas para interactuar con el usuario de una manera

Tópicos
amigable, utilizando GUI (Interfaz Gráfica de Usuario) manipuladas a través Avanzados de
de eventos. Programación
 1. INTERFAZ GRAFICA
1.1Creación de interfaz gráfica para usuarios. Desarrolla programas para interactuar
con el usuario de una manera amigable,
1.2 Tipos de eventos. utilizando GUI (Interfaz Gráfica de
Usuario) manipuladas a través de
1.3 Manejo de eventos. eventos.

1.4 Manejo de componentes gráficos de control.

1. E INTERFAZ GRAFICA : EVIDENCIAS A EVALUAR
EVIDENCIAS PONDERACIÓN Fecha
1. Examen Teórico 20%

2. Proyecto integrador 20%

3. Exposición de entorno de desarrollo
10%

4. Reporte de praticas: Interfaz gráfica 25%

5. Reporte de practicas: Eventos 25%

1. INTERFAZ GRAFICA
Interfaz gráfica de usuario (En inglés Graphic User Interface , también conocido con
su acrónimo GUI) es un método para facilitar la interacción del usuario con el
ordenador o la computadora a través de la utilización de un conjunto de imágenes y
objetos pictóricos (iconos, ventanas..) además de texto. Surge como evolución de la
línea de comandos de los primeros sistemas operativos y es pieza fundamental en un
entorno gráfico.
1. INTERFAZ GRAFICA
Principios para el diseño de interfaces gráficos. Existen principios relevantes para el
diseño e implementación de Interfaces de usuario (IU) ya sean para IU graficas como
para la web
Autonomía
La computadora, la IU y el entorno de trabajo deben estar a disposición del usuario. Se debe dar al
usuario el ambiente flexible para que pueda aprender rápidamente a usar la aplicación.

Percepción del Color

Aunque se utilicen convenciones de color en la IU, se deberían usar otros mecanismos secundarios para
proveer la información a aquellos usuarios con problemas en la visualización de colores.

Legibilidad
Para que la IU favorezca la usabilidad del sistema de software, la información que se exhiba en ella
debe ser fácil de ubicar y leer. Es importante hacer clara la presentación visual (colocación /agrupación
de objetos, evitar la presentación de excesiva información.
1. INTERFAZ GRAFICA
Las interfaces graficas están cambiando.
Las interfaces de usuario son más sofisticadas que hace unos años.
Los clientes son omnipresentes
El concepto de un software en un computador ya fue.
Los navegadores se están volviendo plataformas.
El diseño de las aplicaciones ya no es exclusivo para programadores.
Intervienen diseñadores gráficos para conceptualizar las interfaces y los casos de
uso.
1. INTERFAZ GRAFICA
1. INTERFAZ GRAFICA
Aplicaciones Ricas de Internet (RIAs) han sido siempre sobre la experiencia del
usuario. RIA, son aplicaciones web que tienen la mayoría de las características de
las aplicaciones de escritorio, normalmente entregado a través de la web los
complementos del navegador o de forma independiente a través de cajas de arena
o máquinas virtuales.
El término RIA tiene muchas definiciones diferentes dentro de la comunidad de
desarrollo de Internet, pero todos los que definiciones se reducen a mejorar la
experiencia del usuario final de diferentes maneras. RIAs transfieren el
procesamiento necesario para la interfaz de usuario para el cliente web, pero
mantener la mayor parte de los datos (mantenimiento el estado del programa, sus
datos, y así sucesivamente) de vuelta en el servidor de aplicaciones, ofreciendo así
un mejor usuario experiencia con mucho más llamativa y empujando los límites de lo
que esperamos del navegador.
 1. INTERFAZ GRAFICA
Muchos de nosotros todavía recordamos los viejos tiempos cuando vimos sólo
estática, texto plano en el navegador. En los últimos tiempos, hemos recorrido
un largo camino, con contenido dinámico que juega un papel vital en la web
solicitud; esto sin duda ha empujado a la manera la experiencia del usuario
más allá de las páginas simples de edad.
Ahora La tecnología RIA está trayendo una revolución similar en el lado del
cliente de la informática que realmente hace el trabajo más fácil, más
accesible y divertido para todos. Uno puede ver a RIA como una
convergencia de interfaz de usuario paradigmas que existen para el
escritorio y la web y que facilitan la entrega de un usuario uniforme
experiencia en todas las plataformas, dispositivos y navegadores.
 1. INTERFAZ GRAFICA
Las características clave que se esperan de una plataforma RIA típicamente
incluyen los siguientes:
Comunicaciones avanzadas: Comunicaciones sofisticadas con el apoyo de los protocolos de red
optimizados a través de los servidores pueden mejorar considerablemente la experiencia del
usuario.
Minimizar Complejidad: Marcos RIA son muy útiles cuando se trata de las interfaces de usuario
complejas que normalmente son difíciles de diseñar, desarrollar, implementar y depurar al tiempo
que mejora la experiencia del usuario final.
Consistencia: La consistencia de la experiencia del usuario a través de múltiples sistemas
operativos, dispositivos y navegadores se ha convertido en mucho más importante en el paradigma
de interfaz de usuario con la más amplia conectividad a Internet.
 1. INTERFAZ GRAFICA
Instalación y mantenimiento: marcos más RIA operan dentro de un plug-in o una caja de arena, por
lo que la instalación y mantenimiento de estos plug-ins deben ser mucho más intuitivo y deben
trabajar sin que el usuario piense en las complejidades de cómo se hace.
Desconectado: Una plataforma RIA necesita la capacidad de dejar que el trabajo del usuario con la
aplicación sin conectarse a Internet y sincronizar de manera automática cuando el usuario se conecta.
Seguridad: RIA debe ser tan segura como cualquier otra aplicación web, y el marco debe imponer
limitaciones apropiadamente cuando el usuario no tiene los privilegios necesarios, especialmente
cuando se ejecuta en un entorno restringido, como una caja de arena.
Rendimiento percibido en términos de respuesta de la IU y transiciones visuales más suaves:
Desempeño y las animaciones son aspectos clave de cualquier RIA.
1. INTERFAZ GRAFICA
Riqueza: La riqueza puede ser definida en términos de la capacidad de respuesta, la
inmediatez, la conveniencia, la producción y facilidad de uso.
Normas: La adhesión a las normas es importante en entornos heterogéneos cuando múltiples
tecnologías hibridas se unen en la prestación de una mejor experiencia de usuario.
Facilidad de uso: Una plataforma RIA necesita la capacidad de ofrecer una mayor facilidad
de uso para los usuarios finales.
Rápido Desarrollo: Un Marco RIA debería facilitar el rápido desarrollo de un usuario, una
rica experiencia a través de sus interfaces, que sean fáciles de usar de manera que ayudan a
los desarrolladores y no asustarlos.
 1. INTERFAZ GRAFICA

Figure 1-3. www.miniusa.com

Figure 1-2. RIA from Indaba for mixing and

managing music online
(www.indabamusic.com)

Figure 1-4. www.worldwidetelescope.org

 ACTIVIDAD 1: EXPOSICIÓN EN EQUIPO
1. Exposición de entorno de desarrollo RIA INTRUCCION:
Paso 1: Elaborar una presentación de PowerPoint. Nombe
1. Microsoft Silverlight 1. JavaScript del archivo Exposición Ría – (nombre de la plataforma)
2. FLEX de Adobe 2. HTML5 Paso 2: Exponer.
3. Google Web Toolkit 3. AJAX Paso 4: Subir el archivo a Dropbox – Unidad 1
4. Framework ZK 4. PHP
5. OpenLaszlo 5. XML
6. Eclipse IDE 6. Java

FrameWork
1. Descripción del marco de desarrollo
2. Principales características
3. Plataformas que lo soportan
4. Plataformas de las aplicaciones
5. 2 ejemplos
Lenguaje
1. Descripción del lenguaje
2. Principales características
3. Principales usos o aplicaciones
4. 2 ejemplos en los que se utiliza
1.1CREACIÓN DE INTERFAZ GRÁFICA PARA USUARIOS.
Bibliotecas para programar interfaces gráficas de usuario (GUIs) en Java:
Abstract Windowing Toolkit (AWT), la primera que ofreció el lenguaje Java
Swing, muy popular y también integrada en Java
Standard Widget Toolkit (SWT), creada por IBM y usado en Eclipse
JavaFX, orientado a la web como Flash o Silverlight
XML User Interface Language (XLU)
 1.1CREACIÓN DE INTERFAZ GRÁFICA PARA USUARIOS.
JavaFX
Es una nueva familia de productos basados en la tecnología Java™
Presentado por Sun en Mayo del 2007 y lanzada oficialmente la versión 1.0 en Diciembre del
2008
Pensado para competir con Adobe Flex y Microsoft Silverlight en la arena de las Rich Internet
Applications
JavaFX Script y JavaFX Mobile en Febrero del 2009
1.1CREACIÓN DE INTERFAZ GRÁFICA PARA USUARIOS.
JavaFX se soporta -oficialmente- en los sistemas operativos Windows XP, Vista y Mac OS X *
En dispositivos móviles, JavaFX
. es capaz de ejecutarse en múltiples sistemas operativos, incluidos
Windows Mobile y Android, además de los propietarios.
 1.1CREACIÓN DE INTERFAZ GRÁFICA PARA
USUARIOS.
Ilustra el panorama general
de cómo la plataforma
JavaFX integra diferentes
elementos de plataforma, el
tiempo de ejecución,
herramientas y marcos para
suministrar aplicaciones,
contenidos y servicios a los
consumidores que utilizan
varios dispositivos.
 1.1CREACIÓN DE INTERFAZ GRÁFICA PARA
USUARIOS.
Introducción a cada uno de los elementos que se muestran en la figura:
Tiempo de ejecución de JavaFX (JavaFX Runtime:): Contiene entre plataformas y entornos de
ejecución específicas de la plataforma y librerías de soporte.
Elementos comunes (Common Elements:): Contiene las API y otros tiempos de ejecución que
trabajan consistentemente a través de plataformas.
Elementos de escritorio (Desktop Elements:): Contiene extensiones de API que son específicos
de la plataforma de escritorio.
Elementos móvil (Mobile Elements:): Contiene extensiones de API que son específicos de la
plataforma móvil.
TV Elementos (TV Elements:): Contiene extensiones de API que son específicos de la plataforma
de televisión.
1.1CREACIÓN DE INTERFAZ GRÁFICA PARA
USUARIOS.
Marco de aplicación (Application Framework: ):
forma la piedra angular para el desarrollo de
aplicaciones.

Herramientas de Diseñador (Designer Tool: ):

Permite diseñadores visuales y expertos gráficos
para crear activos gráficos usando las herramientas
de creación de contenidos populares como Adobe
Photoshop y Adobe Illustrator y traer esos activos en
la aplicación JavaFX utilizando los respectivos JavaFX
plug-ins proporcionados por Sun Microsystems..

Herramientas de desarrollo (Developer Tool:):

Ayuda a los desarrolladores a crear aplicaciones
JavaFX, servicios y contenido.
 1.1CREACIÓN DE INTERFAZ GRÁFICA PARA
USUARIOS.
¿ Qué puedo hacer con JavaFX ?
Efectos de visualización en 3D
• La función PerspectiveTransform
integrada en JavaFX se utiliza para
crear fácilmente efectos en 3D

Efectos fotográficos
• Posibilidad de modificar
el color, brillo, contraste y
saturación de una imagen
1.1CREACIÓN DE INTERFAZ GRÁFICA PARA
USUARIOS.
¿ Qué puedo hacer con JavaFX ?
Cliente Twitter
• Se puede programar un
cliente de Twitter en JavaFX

Reproducción de video
• Incorporar video a tu aplicación es tan
simple como crear una instancia de éste
componente, establecer unas poquitas
variabes e incluir un enlace al fichero
1.1CREACIÓN DE INTERFAZ GRÁFICA PARA USUARIOS.
Aplicaciones JavaFX
La biblioteca de JavaFX está escrita como una API de Java, las aplicaciones JavaFX puede hacer referencia a
APIs de código de cualquier biblioteca Java. Por ejemplo, las aplicaciones JavaFX pueden utilizar las
bibliotecas de API de Java para acceder a las capacidades del sistema nativas y conectarse a aplicaciones
de middleware basadas en servidor.

La apariencia de las aplicaciones JavaFX se pueden personalizar. Las

Hojas de Estilo en Cascada (CSS) separan la apariencia y estilo de la
logica de la aplicación para que los desarrolladores puedan concentrarse
en el código. Los diseñadores gráficos pueden personalizar fácilmente el
aspecto y el estilo de la aplicación a través de CSS.
 1.1CREACIÓN DE INTERFAZ GRÁFICA PARA USUARIOS.
Aplicaciones JavaFX

Si usted tiene un diseño de fondo de la web, o si usted desea separar la interfaz de usuario (UI) y la lógica de
servidor, entonces, usted puede desarrollar los aspectos de la presentación de la interfaz de usuario en el
lenguaje de scripting FXML y use el código de Java para la aplicación lógica. Si prefiere diseñar
interfaces de usuario sin necesidad de escribir código, entonces, utilice JavaFX Scene Builder. Al diseñar la
interfaz de usuario con javaFX Scene Builder el crea código de marcado FXML que pueden ser portado a un
entorno de desarrollo integrado (IDE) de forma que los desarrolladores pueden añadir la lógica de negocio.
 1.1CREACIÓN DE INTERFAZ GRÁFICA PARA
USUARIOS.
Características Importantes
APIs de Java. JavaFX es una biblioteca Java que consiste en clases e interfaces que están
escritas en código Java. Las APIs están diseñadas para ser una alternativa amigable con la
máquina virtual de Java (Java VM) como los lenguajes JRuby, y Scala.

FXML y Scene Builder. FXML es un lenguaje de marcado declarativo basado en XML para la
construcción de una interfaz de usuario de aplicaciones JavaFX. Un diseñador puede
codificar en FXML o utilizar JavaFX Scene Builder para diseñar de forma interactiva la
interfaz gráfica de usuario (GUI). Scene Builder genera marcado FXML que pueden ser
portado a un IDE para que un desarrollador pueda añadir la lógica de negocio.
 1.1CREACIÓN DE INTERFAZ GRÁFICA PARA
USUARIOS.
Características Importantes
Controles de interfaz de usuario(UI) incorporados(Builtin)
y CSS. JavaFX ofrece todos los principales controles UI que
se requieren para desarrollar una aplicación con todas las
características necesarias. Los componentes pueden ser decorados
con las tecnologías Web estándar como CSS.

Interoperabilidad Swing. Las aplicaciones Swing existentes pueden ser actualizadas con las características de
JavaFX, como gráficos multimedia enriquecidos de reproducción y el contenido web incorporado.

WebView. Un componente web que utiliza la tecnología WebKitHTML para hacer posible
incrustar(embeber), páginas web dentro de una aplicación JavaFX.
1.1CREACIÓN DE INTERFAZ GRÁFICA PARA
USUARIOS.
JavaFX es una plataforma que contiene: un ambiente de ejecución de plataforma
cruzada (Java SE, Java EE, ME) y una plataforma específica. Para aprovechar la
potencia de Java (TM) Platform Micro Edition (Java ME), JAVAFX soporta sus
librerías. Cuenta con su propio lenguaje declarativo denominado JavaFX Script, al
igual que un conjunto de herramientas de diseño y desarrollo, lo cual permite crear
contenido expresivo, creativo, dinámico, y funcional. Es ejecutable en diferentes
dispositivos como es la televisión, computadora o teléfono celular y otros equipos
consumidores.
1.1. CREACIÓN DE INTERFAZ GRAFICA PARA
USUARIOS
JavaFX contiene un conjunto de tecnologías y herramientas para el diseño, desarrollo y
despliegue de aplicaciones de contenido expresivo, para ser visualizado en navegadores de
Internet y equipos con pantalla. Ofrece alta fidelidad en audio y vídeo, textos enriquecidos,
gráficos vectoriales, animaciones y servicios Web para aplicaciones en teléfonos celulares y
computadoras.
 1.1. CREACIÓN DE INTERFAZ GRAFICA PARA
USUARIOS
Debido a que las aplicaciones JavaFX están escritos en el lenguaje Java, puede utilizar su
editor favorito o cualquier entorno de desarrollo integrado (IDE) que admita el lenguaje Java
(como NetBeans, Eclipse o IntelliJ IDEA) para crear aplicaciones JavaFX.

 Las clases de los controles GUI de FX, estan en la librería javafx.escene.control

 La mayoria de los controles son semejantes a los utilizados en Swing, y agrega algunos nuevos
como TitltedPane, ColorPicker and Pagination.
ENLACES ÚTILES
Enlaces útiles
Te podría interesar mantener los siguientes enlaces:
Java 8 API - Documentación (JavaDoc) de las clases estándar de Java
JavaFX 8 API - Documentación de las clases JavaFX
ControlsFX API - Documentación para el proyecto ControlsFX, el cual ofrece controles
JavaFX adicionales
Oracle's JavaFX Tutorials - Tutoriales oficiales de Oracle sobre JavaFX
 1.1. CREACIÓN DE INTERFAZ GRAFICA PARA
USUARIOS
JavaFX tiene su propio lenguaje de programación llamado JavaFX Script, fx es la extensión que presentan los
archivos fuente

Stage: Es el contenedor principal, en el que se desplegara la

aplicacion. Normalmente una ventana con borde y los típicos
botones para maximizar, minimizar o cerrar la ventana.
Scene: un contenedor de Nodos que componen una "página"
de su aplicación
Node: un elemento en la escena, con una apariencia visual y
un comportamiento interactivo. Los nodos pueden estar
anidados jerárquicamente
1.1. CREACIÓN DE INTERFAZ GRAFICA PARA USUARIOS
JavaFX tiene su propio lenguaje de programación llamado JavaFX Script, fx es la extensión que presentan los
archivos fuente
1.1. CREACIÓN DE INTERFAZ GRAFICA PARA USUARIOS
Niveles presentes en JavaFX.
HBox

StackPane VBox
Stage Scene
Group GridPane

Hbox
Hbox

Vbox Vbox
 1.1. CREACIÓN DE INTERFAZ GRAFICA PARA USUARIOS
Niveles presentes en JavaFX.

HBox

StackPane VBox
Stage Scene
Group GridPane
 1.1. CREACIÓN DE INTERFAZ GRAFICA PARA USUARIOS

Stage – Contenedor más alto de todos los componentes disponibles en el lenguaje

de JavaFX para la creación de aplicaciones.

Scene – Contenedor de todos los elementos gráficos a desplegarse a lo largo de la

ejecución de la aplicación, teniendo un orden de aparición y permanencia en escena
de acuerdo a lo indicado en el Script de cada elemento contenido.

CustomNode – Define los atributos y métodos de los elementos gráficos a ser

ejecutados en la aplicación, es una subclase de javafx.scene.Node,.

Group – Contiene una secuencia de n nodos hijos.

Node – Elemento de una escena grafica, javafx.scene.Node es una clase abstracta,

le permite al nodo ser un: texto, imagen, figura geométrica, efecto de sombra.
 1.1. CREACIÓN DE INTERFAZ GRAFICA PARA
USUARIOS
Layoults

Contenedores de diseño o paneles pueden ser utilizados para prever disposiciones flexibles y dinámicas de los
controles UI dentro de un escenario gráfico de una aplicación JavaFX. La API de JavaFX Layout incluye las
siguientes clases de contenedor(container) que automatizan los modelos disposición(layouts) frecuentes:

Layoults

HBox VBox GridPane StackPane Pane (abs)

 1.1. CREACIÓN DE INTERFAZ GRAFICA PARA USUARIOS
Layoults
Layoults
HBox VBox GridPane StackPane Pane (abs)

La clase HBox organiza sus nodos de contenido horizontalmente en una sola fila.

La clase VBox organiza sus nodos de contenido verticalmente en una sola columna.

La clase StackPane coloca sus nodos de contenido en una sola pila de atrás hacia delante.

La clase GridPane permite al desarrollador crear una cuadrícula flexible de filas y columnas en la que se
diseña nodos de contenido.
 LAYOULTS
StackPane
El StackPane panel de diseño coloca todos los nodos dentro de una única pila con cada nuevo nodo
agregado en la parte superior del nodo anterior. Este modelo de diseño proporciona una manera fácil
para superponer texto en una forma o imagen o solapar formas comunes para crear una forma
compleja.
 LAYOULTS

HBox
El HBox panel de diseño proporciona una manera fácil de
organizar una serie de nodos en una sola fila. Ejemplo

VBox
El VBox panel de distribución es similar a la HBox panel de
diseño, excepto que los nodos están dispuestos en una sola
columna. Ejemplo
 LAYOULTS
GridPane
El GridPane panel de diseño le permite crear una red flexible de las
filas y columnas en la que se diseña nodos. Los nodos pueden ser
colocados en cualquier celda de la rejilla y pueden abarcar las células,
según sea necesario. Un panel de cuadrícula es útil para crear formas o
cualquier diseño que se organiza en filas y columnas. La imagen muestra
un panel de cuadrícula que contiene un icono, título, subtítulo, texto y un
gráfico circular.
 LAYOULTS
GridPane
 LAYOULTS
BorderPane
El BorderPane panel de diseño proporciona cinco regiones en el que colocar nodos:. arriba, abajo, izquierda,
derecha y centro de la figura muestra el tipo de diseño que se puede crear con un panel de frontera. Las regiones
pueden ser de cualquier tamaño. Si su aplicación no necesita una de las regiones, que no es necesario definirlo y no
hay espacio asignado para ello.
ELEMENTOS DE CONTENIDOS
1. PRACTICAS INTERFAZ GRAFICA
Practicas INTRUCCION:
Paso 1: Crear una carpeta con el titulo P_InterfazGrf en el
Ejercicio 1 Ejemplo 1 que se incluirán todos los ejercicios.
Archivo: Ejemplo1 Paso 2: Realizar cada practica según las indicaciones.
Paso 3: Personalizar cada practica
Ejercicio 2 HBox o VBox ( cambio de colores de fondo, agregar mas elementos,
Archivo: Panel1 botones, imágenes etc).
Paso 4: Subir la carpeta a Dropbox – Unidad 1
Ejercicio 3 GridPane
Archivo: GridPanelform
Ejercicio 4 Ecene
Archivo: Ecena
 1.1. CREACIÓN DE INTERFAZ GRAFICA PARA USUARIOS.
Estructura
 PRACTICA 1: EJEMPLO 1

Estructura
4. Stage
1. HBox

2. StackPane
3. Scene

HBox

StackPane VBox
Stage Scene
Group GridPane
 PRACTICA 1: EJEMPLO 1
Paso 1 Crear una estación Stage

Paso 2 Agregar Componentes

Paso 3 Crear HBox o VBox

Agregar los componentes

Paso 4 Crear StackPane

Agregar los HBox o VBox

Paso 5 Crear Scene

Agregar los StackPane

Paso 6 : Agregar Scene

al Stage
 PRACTICA 1: EJEMPLO 1
Paso 1 Crear una estación Stage

Paso 2 Agregar Componentes

Paso 3 Crear HBox o VBox

Agregar los componentes

Paso 4 Crear StackPane

Agregar los HBox o VBox
HBox
Paso 5 Crear Scene
Agregar los StackPane
StackPane VBox
Paso 6 : Agregar Scene Stage Scene
al Stage Group GridPane
PRACTICA 1: EJEMPLO1
 PRACTICAS 2: HBOX O VBOX
HBox

La clase HBox organiza sus nodos de contenido

horizontalmente en una sola fila.
javafx.scene.layout.HBox
 PRACTICAS 2: HBOX O VBOX
VBox
La clase VBox organiza sus nodos de contenido
verticalmente en una sola columna.
javafx.scene.layout.VBox
PRACTICAS 2: HBOX O VBOX
 PRACTICA 2: HBOX O VBOX

Nombre del archivo: Panel1

PRACTICA 2: HBOX O VBOX
 PRACTICA 3: GRIDPANE
GridPane
La clase GridPane permite al desarrollador crear una cuadrícula flexible de filas y
columnas en la que se diseña nodos de contenido.
javafx.scene.layout.GridPane

(Columna, Fila)
 PRACTICA 3: GRIDPANE
Nombre del
archivo:
GridPanelform

gridpane.setHgap(5);

gridpane.setVgap(20);
PRACTICA 3: GRIDPANE
PRACTICA 3: GRIDPANE
PRACTICA 3: GRIDPANE
PRACTICA 4:SCENE
HBox

StackPane VBox
Stage Scene
Group GridPane

Hbox
Hbox

Vbox Vbox
 PRACTICA 4: ECENA
Nombre del
archivo: ecena
PRACTICA 4:SCENE
JAVA FX - EVENTOS
Un evento representa una ocurrencia de algo de interés para la aplicación, tal como un ratón que se mueve o
pulsación de una tecla. En JavaFX, un evento es una instancia de la clase javafx.event.Event o cualquier subclase
de eventos . JavaFX proporciona varios eventos, incluyendo DragEvent, KeyEvent, MouseEvent, ScrollEvent, y
otros
. Usted puede definir su propio evento mediante la ampliación del Evento clase.

Propiedades de eventos

Propiedad Descripción
Tipo de evento Tipo de evento que ocurrió.
Fuente Origen del evento, con respecto a la ubicación del evento en la cadena de distribución
de eventos. La fuente cambia como el evento se pasa a lo largo de la cadena.

Objetivo Nodo en el que ocurrió la acción y el nodo final en la cadena de distribución de

eventos. El objetivo no cambia, sin embargo, si un filtro de eventos consume el evento
durante la fase de captura de eventos, el objetivo no recibirá el evento.
JAVA FX - EVENTOS
Jerarquias
1.2 TIPOS DE EVENTOS
Por lo general, un usuario interactúa con la GUI de una aplicación para indicar las tareas que ésta debe
realizar. Por ejemplo, cuando usted escribe un mensaje en una aplicación de correo electrónico, al hacer
clic en el botón Enviar le indica a la aplicación que envíe el correo electrónico a las direcciones
especificadas. Las GUIs son controladas por eventos. Cuando el usuario interactúa con un componente de la
GUI, la interacción (conocida como un evento) controla el programa para que realice una tarea. Algunos
eventos (interacciones del usuario) comunes que podrían hacer que una aplicación realizara una tarea
incluyen el hacer clic en un botón, escribir en un campo de texto, seleccionar un elemento de un menú,
cerrar una ventana y mover el ratón. El código que realiza una tarea en respuesta a un evento se llama
manejador de eventos y al proceso en general de responder a los eventos se le conoce como manejo de
eventos.
1.2 TIPOS DE EVENTOS
La programación de eventos es una de las bases de Java y permite mecanismos de
diseño de programas orientados a las acciones del usuario.
Es decir, son las acciones del usuario las que desencadenan mensajes entre los
objetos (el flujo del código del programa se desvía en función del evento producido,
alterando la ejecución normal).
 1.2 TIPOS DE EVENTOS
¿Qué desencadena la acción? Objeto Evento

3
¿Quién desencadena la acción? Objeto Fuente
Factores

¿Quién recibe la acción? Objeto Listener

1.2 TIPOS DE EVENTOS
 1.2 TIPOS DE EVENTOS
Los eventos están organizados en jerarquías de clases de eventos:
Fuentes de Eventos (Source) Es un objeto que tiene la capacidad de detectar eventos y notificar a los receptores
de eventos que se han producido estos eventos
Receptor de Eventos (Listener) Es un objeto que está preparado para ser notificado de la ocurrencia de un evento.
Una vez que el objeto receptor está registrado para ser notificado de esos eventos, el suceso de un evento en esta
clase automática, invocará al método sobrescrito del objeto receptor.

Algunas clases de eventos, como los de ratón, involucran a un determinado

conjunto de eventos diferentes. Una clase receptora de eventos que implemente el
interfaz que recoja estos eventos debe sobrescribir todos los métodos declarados
en el interfaz.

Para prevenir esto, de forma que no sea tan tedioso y no hay que sobrescribir
métodos que no se van a utilizar, se han definido un conjunto de clases
intermedias, conocidas como Adaptadores (Adapter).
 1.2 TIPOS DE EVENTOS
Clases Adapter : Estas clases Adaptadores implementan los interfaces receptores y sobrescriben todos los métodos del
interfaz con métodos vacíos. Una clase receptor puede estar definida como clase que extienda de una clase Adapter,
en lugar que implemente el interfaz completo.

Un evento representa un cambio en un componente, este es generalmente producido por el usuario al realizar
alguna operación, por ejemplo, escribir en un campo de texto o hacer click sobre un botón.

El método que se sigue para atender un evento es el siguiente:

1) Se relaciona a un oyente (listener) con un componente para que el componente le notifique al listener cuando
ocurra un evento específico.
2) Cuando se produce el evento, el listener atiende el evento.

En este método la implementación de la interface de usuario donde se produce el evento y la implementación del
oyente están en clases separadas.
El manejo de eventos se puede implementar a través de las clases abstractas e interfaces que java proporciona en
el paquete java.awt.event.
1.2 TIPOS DE EVENTOS
Escuchadores de eventos (Listeners)
Un Escuchador (Listener) es un objeto que es notificado cuando un evento ocurre. Este tiene dos requerimientos:
1) Debió haber sido registrado con una o más fuentes que reciben notificaciones sobre tipos de eventos específicos.
2) Debe implementar métodos que reciban y procesen éstas notificaciones.

Los métodos que reciben y procesan estas notificaciones están definidos en un grupo de interfaces encontradas en
java.awt.event. Por ejemplo la clase MouseMotionListener define dos métodos que reciben notificaciones cuando el
ratón es arrastrado o movido. Algún objeto puede recibir y procesar uno o ambos de estos eventos si éste provee
una implementación de esta interface.
1.2. EVENTOS
Escuchadores de eventos (Listeners)
Para cada tipo de evento existe una interfase de escucha. Ejemplo:
 Para los eventos de tipo ActionEvent existe la interfase escucha ActionListener.
 Para los eventos de tipo MouseEvent existe la interfase escucha MouseListener.

Estas clases son interfaces. Para cada tipo de evento existe una clase de
escucha.
Cada clase de escucha contiene la declaración de un conjunto de métodos
(Abstractos), a los que se llamarán dependiendo del evento producido.
 1.2 TIPOS DE EVENTOS.
Tipos de eventos comunes de la GUI
Pueden ocurrir muchos tipos distintos de eventos cuando el usuario interactúa con una
GUI. La información acerca de cualquier evento de GUI que ocurre se almacena en
un objeto de una clase que extiende a AWTEvent. La figura ilustra una jerarquía que
contiene muchas clases de eventos del paquete java.awt.event

Estos tipos de eventos se utilizan tanto con componentes de AWT como de Swing.
Los tipos de eventos adicionales que son específicos para los componentes de GUI
de Swing se declaran en el paquete javax.swing.event.
LIBRERÍA AWTEVENT.
1.2 TIPOS DE EVENTOS.

Jerarquía de eventos de Java.

 1.2 TIPOS DE EVENTOS.
ComponentEvent: Se producirá este tipo de evento
cuando el usuario mueva o redimensione un componente.

FocusEvent: Se producirá este tipo de evento cuando se

cambie el foco de un componente.

KeyEvent: se producirá cuando el usuario pulse una tecla.

MouseEvent: Se producirá cuando el usuario efectúe un

movimiento con el ratón o haga un click.

ContainerEvent: se producirá cuando se añadan o

eliminen componentes en el contenedor.
 1.2 TIPOS DE EVENTOS.
WindowEvent: se producirá cuando se realice algún tipo de
operación con la ventana como abrirla y cerrarla.

ActionEvent: Se producirá cuando se efectúe alguna acción

sobre un componente, como por ejemplo: la pulsación de un
botón.
AdjustmentEvent: Se ajusta algún valor de un componente.
ItemEvent: Se ha modificado el estado de algún elemento
que pertenece al componente.
TextEvent: El contenido de texto de algún componente ha
cambiado.
1.2 TIPOS DE EVENTOS.
Algunas interfaces comunes de
componentes de escucha de eventos
del paquete java.awt.event
LIBRERÍA AWTEVENT.
 1.2 TIPOS DE EVENTOS.
 MÉTODOS ASOCIADOS A LA CLASE MOUSEEVENT
getClickCount(): Devuelve el número de clicks asociados con el evento.
getX(): Devuelve la posición x del mouse cuando se genera un evento.
getY(): Devuelve la posición y del mouse cuando se genera un evento.

 MÉTODOS DE LA CLASE KEYEVENT

 getKeyChar(): Devuelve el carácter asociado con la tecla que produjo el evento.
 getKeyCode(): Devuelve el código de la tecla que produjo el evento.
 getKeyModifiersText(int): Devuelve una cadena que indica el modificador de la tecla, por ejemplo “Shift”.
 getKeyText(int): Devuelve una cadena que indica el tipo de tecla pulsada. Ejmp: F1, indicando que es una tecla
de función.
 1.2 TIPOS DE EVENTOS.
 MÉTODOS DE LA INTERFASE MOUSELISTENER
 mouseClicked(MouseEvent e): cuando se hace un click de ratón
 mouseEntered(MouseEvent e): cuando el ratón entra en la aplicación.
 mouseExited(MouseEvent e): cuando el ratón sale de la aplicación.
 mousePressed(MouseEvent e): se ha pulsado un botón del ratón.
 mouseReleased(MouseEvent e): se ha soltado un botón del ratón.

 MÉTODOS DE LA INTERFASE ACTIONLISTENER

 actionPerformed(ActionEvent): Es invocado cuando una acción ocurre, como presionar un
botón.
 1.2 TIPOS DE EVENTOS.
 MÉTODOS DE LA INTERFASE WINDOWLISTENER
 windowActivated(WindowEvent e): Es invocado cuando una ventana es seteada como la ventana activa.
 windowClosed(WindowEvent e): Es invocado cuando una ventana ha sido cerrada.
 windowClosing(WindowEvent e): Es invocado cuando el usuario intenta cerrar la ventana.
 windowDeactivated(WindowEvent e) : Es invocado cuando la ventana deja de ser la ventana activa.
 windowDeiconified(WindowEvent e) : Es invocado cuando una ventana pasa de estado minimizado a normal
 windowIconified(WindowEvent e): Es invocado cuando una ventana va estado normal a minimizada.
 windowOpened(WindowEvent e): : Es invocado la primera vez que la ventana se hace visible.
 1.2 TIPOS DE EVENTOS.
Adaptadores (Adapters)
Cuando se desea escuchar algún tipo de evento se deben implementar todos los
métodos de la Interfase de escucha (listener interfase), para que nuestra clase no
tenga que ser definida como abstracta. Para resolver este problema se hicieron los
adaptadores.

Muchos interfaces EventListener están diseñados para recibir múltiples clases de eventos, por ejemplo,
la interfaz MouseListener puede recibir eventos de pulsación de botón, al soltar el botón, a la
recepción del cursor, etc. El interfaz declara un método para cada uno de estos subtipos. Cuando se
implementa un interfaz, es necesario redefinir todos los métodos que se declaran en ese interfaz,
incluso aunque se haga con métodos vacíos. En la mayoría de las ocasiones, no es necesario redefinir
todos los métodos declarados en el interfaz porque no son útiles para la aplicación
1.1 TIPOS DE EVENTOS
Por ello, el AWT proporciona un conjunto de clases abstractas adaptadores (Adapter) que coinciden con
los interfaces. Cada clase adaptador implementa un interfaz y redefine todos los métodos
declarados por el interfaz con métodos vacíos, con lo cual se satisface ya el requerimiento de la
redefinición de todos los métodos.

java.awt.ComponentAdapter
java.awt.FocusAdapter
java.awt.KeyAdapter
java.awt.MouseAdapter
java.awt.MouseMotionAdapter
java.awt.WindowAdapter
 1.1 TIPOS DE EVENTOS
• De esta forma cuando creemos una clase que hereda de MouseAdapter sólo implementaremos los
métodos necesarios y que más nos interesen para gestionar los eventos.

class ControlTecla extends KeyAdapter {

// codigo
}
A continuación se ofrece
una tabla con datos
significativos acerca de
las interfaces, sus clases
Adapter, si las tienen, el
paquete al cual
pertenecen y los métodos
que contiene.
 1.3 MANEJO DE EVENTOS
Un método del componente de escucha del evento recibe un objeto
evento cuando se notifica al componente de escucha acerca del evento.
Después, el componente de escucha del evento utiliza el objeto evento
para responder al evento. El modelo de manejo de eventos que se
describe aquí se conoce como modelo de eventos por delegación: el
procesamiento de un evento se delega a un objeto específico (el
componente de escucha de eventos) en la aplicación.
 1.3 MANEJO DE EVENTOS
Pasos requeridos para establecer el manejo de eventos para un componente de GUI
1. Crear una clase que represente al manejador de eventos.
2. Implementar una interfaz apropiada, conocida como interfaz de escucha de
eventos, en la clase del paso 1.
3. Indicar que se debe notificar a un objeto de la clase de los pasos 1 y 2 cuando
ocurra el evento. A esto se le conoce como registrar el manejador de eventos.
 1.3 MANEJO DE EVENTOS
El objeto fuente. Que es el objeto que lanza los eventos. Dependiendo del tipo de objeto que sea, puede lanzar
unos métodos u otros. Por ejemplo un objeto de tipo JLabel (etiqueta) puede lanzar eventos de ratón (MouseEvent)
pero no de teclado (KeyEvent). El hecho de que dispare esos eventos no significa que el programa tenga que,
necesariamente, realizar una acción. Sólo se ejecuta una acción si hay un objeto escuchando.

El objeto escuchador u oyente (listener). Se trata del objeto que recibe el evento producido. Es el objeto que
captura el evento y ejecuta el código correspondiente. Para ello debe implementar una interfaz relacionada con el
tipo de evento que captura. Esa interfaz obligará a implementar uno o más métodos cuyo código es el que se
ejecuta cuando se dispare el evento.

El objeto de evento. Se trata del objeto que es enviado desde el objeto fuente a el escuchador. Según el tipo de
evento que se haya producido se ejecutará uno u otro método en el escuchador.

o Evento (hacer clic en un botón, pulsar una tecla, etc.)

o Interfaz Listener (ActionListener, WindowListener, etc.)
o Objeto (botón, marco, campo de texto, etc.) que “escucha” el evento
 1.3 MANEJO DE EVENTOS
Registrar un gestor de eventos para el objeto
Para escuchar un evento, un objeto debe registrarse para ser el oyente de dicho evento. El siguiente código crea un JButton
y registra el ActionListener correspondiente.

Para implementar un gestor de eventos, debe seguir estos tres

pasos: JButton button = new JButton("¡Soy un botón Swing!");
1. Implementar una interfaz de escucha: button.addActionListener(this);
public class MyClass implements ActionListener 3 pasos para implementar un oyente de eventos

2. Agregar el oyente a un objeto:

button.addActionListener(this)

3. Definir los métodos de la interfaz de escucha:

public void actionPerformed(ActionEvent e){
...//código que reacciona ante la acción…
}
 1.3. MÉTODOS DE CONTROL DE EVENTOS
Escuchadores de eventos
Cada tipo de evento tiene asociado un interfaz para manejar el evento. A esos interfaces se les llama escuchadores
(Listeners) ya que proporcionan métodos que están a la espera de que el evento se produzca. Cuando el evento es
disparado por el objeto fuente al que se estaba escuchando, el método manejador del evento se dispara
automáticamente.

Por ejemplo, el método actionPerformed es el encargado de gestionar eventos del tipo ActionEvent (eventos de
acción, se producen, por ejemplo, al hacer clic en un botón). Este método está implementado en la interfaz
ActionListener (implementa escuchadores de eventos de acción).

Cualquier clase que desee escuchar eventos (los suyos o los de otros objetos) debe implementar la interfaz (o
interfaces) pensada para capturar los eventos del tipo deseado. Esta interfaz habilita a la clase para poder
implementar métodos de gestión de eventos.
1.3. MÉTODOS DE CONTROL DE EVENTOS

Proceso de gestión de eventos

 1.3. MÉTODOS DE CONTROL DE EVENTOS
Oyente de eventos: Cada evento puede desencadenar uno o más oyentes de dicho evento. Como ya dijimos
anteriormente, un oyente de eventos es una interfaz de Java que contiene una colección de declaraciones de
métodos. Las clases que implementan la interfaz deben definir estos métodos. A continuación se incluye una lista de
eventos, oyentes y métodos:
 1.3. MÉTODOS DE CONTROL DE EVENTOS
Los eventos de Java pueden ser de alto y bajo nivel. Los eventos de alto nivel se llaman
también eventos semánticos, porque la acción de la que derivan tiene un significado en sí
misma, en el contexto de las interfaces gráficas de usuario. Los eventos de bajo nivel son las
acciones elementales que hacen posible los eventos de alto nivel.

Son eventos de alto nivel los siguientes eventos: los cuatro que tienen que ver con clicar sobre
botones o elegir comandos en menús (ActionEvent), cambiar valores en barras de
desplazamiento (AdjustmentEvent), elegir valores (ItemEvents) y cambiar el texto (TextEvent).
1.3. MÉTODOS DE CONTROL DE EVENTOS
Los eventos de bajo nivel son los que se producen con las operaciones elementales con
el ratón, teclado, containers y windows.

Las seis clases de eventos de bajo nivel son los eventos relacionados con componentes
(ComponentEvent), con los containers (ContainerEvent), con pulsar teclas (KeyEvent),
con mover, arrastrar, pulsar y soltar con el ratón (MouseEvent), con obtener o perder
el focus (FocusEvent) y con las operaciones con ventanas (WindowEvent).
 1.3. MÉTODOS DE CONTROL DE EVENTOS
Relación entre Componentes y Eventos
La Tabla muestra los componentes del AWT y los eventos específicos de cada uno de ellos, así como una breve
explicación de en qué consiste cada tipo de evento.
 1.3. MÉTODOS DE CONTROL DE EVENTOS
Eventos que generan los
distintos componentes del
AWT.
 1.3. MÉTODOS DE CONTROL DE EVENTOS
Java proporciona ayudas para definir los métodos declarados en las interfaces Listener. Una de
estas ayudas son las clases Adapter, que existen para cada una de las interfaces Listener que
tienen más de un método. Su nombre se construye a partir del nombre de la interface,
sustituyendo la palabra “Listener” por “Adapter”. Hay 7 clases Adapter: ComponentAdapter,
ContainerAdapter, FocusAdapter, KeyAdapter, MouseAdapter, MouseMotionAdapter y
WindowAdapter.

Las clases Adapter derivan de Object, y son clases predefinidas que contienen definiciones vacías
para todos los métodos de la interface. Para crear un objeto que responda al evento, en vez de
crear una clase que implemente la interface Listener, basta crear una clase que derive de la
clase Adapter correspondiente, y redefina sólo los métodos de interés.
 1.4. CREACIÓN DE EVENTOS
Registrar un gestor de eventos para el objeto
Para implementar un gestor de eventos, debe seguir estos tres pasos:
1. Implementar una interfaz de escucha:
public class MyClass implements ActionListener

2. Agregar el oyente a un objeto:

button.addActionListener(this)

3. Definir los métodos de la interfaz de escucha:

public void actionPerformed(ActionEvent e){
...//código que reacciona ante la acción…
}
1.4. CREACIÓN DE EVENTOS
Registrar un gestor de eventos para el objeto
1.4. CREACIÓN DE EVENTOS
Practicas INTRUCCION:
Ejercicio 1 Introducción Paso 1: Crear una carpeta con el titulo P_Eventos en el
Archivo: CambiarTitulo que se incluirán todos los ejercicios.
Ejercicio 2 Interfaz ActionListener Paso 2: Realizar cada practica según las indicaciones.
Archivo: ActionComand Paso 3: Personalizar cada practica
Ejercicio 3 Interfaz FocusListener ( cambio de colores de fondo, agregar mas elementos,
Archivo: Calculadora botones, imágenes etc).
Ejercicio 4 Interfaz ItemListener Paso 4: Subir la carpeta a Dropbox – Unidad 1
Archivo: ElegirNavegador
Ejercicio 5 Interfaz KeyListener
Archivo: ComprobarTecla
Ejercicio 6 Eventos MouseMotionListener
Archivo: AtrapaMouse
 PRACTICA 1: ACTIONLISTENER
Nombre del archivo: CambiarTitulo
PRACTICAS 1: EVENTOS ACCIÓN (ACTIONLISTENER)
Es invocado cuando una acción ocurre, como presionar un botón etc.

Public void actionPerformed (ActionEvent event){

//..
}

Implementar interface
ActionListener
Añadir Listeners a componente
getActionCommand();
addActionListener (componente )
Implementar métodos interface setActionCommand(string);
actionPerformed (ActionEvent)
 PRACTICAS 1: EVENTOS ACCIÓN (ACTIONLISTENER)

Archivo: ActionComand
PRACTICAS 2: EVENTOS FOCO (FOCUSLISTENER)
Ocurre cuando cambia el foco de un componente que pueda recibir entradas

Public void focusGained (FocusEvent event){

//..
}
Jbutton aceptar = new
Implementar interface
Jbutton (‘aceptar’)
Aceptar.requestFocus();
FocusListener
Añadir Listeners a componente
getSource(focusGained);
addFofusListener ( )
Implementar métodos interface getSource(focusLost);
focusGained (FocusEvent event)
focusLost (FocusEvent event)
 PRACTICAS 2: EVENTOS FOCO (FOCUSLISTENER)
Archivo: Calculadora
 PRACTICAS: EVENTOS FOCO (FOCUSLISTENER)

Archivo: Calculadora
PRACTICAS 4: EVENTOS ITEM (ITEMLISTENER)
Ocurre cuando se cambia el estado de un control de tipo ítem

Public void ItemStateChanged (ItemEvent event){

//..
}

Implementar interface
ItemListener
Añadir Listeners a componente
getItem();
addItemListener(componente)
getStateChange();
Implementar métodos interface
ItemEventDESELECTED ItemEventSELECTED
ItemStateChanged (itemEvent event)
 PRACTICAS: EVENTOS ITEM (ITEMLISTENER)

Archivo: ElegirNavegador
 PRACTICAS: EVENTOS ITEM (ITEMLISTENER)

Archivo: ElegirNavegador
 PRACTICAS 5: EVENTOS KEY (KEYLISTENER)
Ocurre cuando se pulsa una tecla (y el componente posee el foco). Es un evento del tipo InputEvent

Public void ItemStateChanged (ItemEvent event){

//..
}

Implementar interface getKeyChar();

KeyListener
Añadir Listeners a componente KeyEventCHAR_UNDEFINED

addKeyListener ( componente )
Implementar métodos interface Container pane= getCotentPane();
Pane.setFocusable(true);
keyPressed (KeyEvent event)
keyReleased (KeyEvent event)
keyTyped (KeyEvent event)
 PRACTICA 5: EVENTOS KEY (KEYLISTENER)

Archivo: ComprobarTecla
 PRACTICA 5: EVENTOS KEY (KEYLISTENER)
Archivo: ComprobarTecla
 PRACTICA 6: EVENTOS MAUSEMOTION (MAUSEMOTION LISTENER)

Sirve para capturar objetos MouseEvent, solo que en este caso permite capturar eventos de arrastre y movimiento
del ratón..
Public void mouseDraggedd (MouseEvent event){
//..
}

Implementar interface
MouseMotionListener getClickCount(); Numero de pulsaciones

Añadir Listeners a componente getPonit(); Coordenada x, y del

puntero como objeto
addMouseListener ( componente ) point

Implementar métodos interface getX(); Posición x puntero

mouseDragged(MouseEvent event) getX(); Posición y puntero

mouseMoved(MouseEvent event)
 PRACTICA 6: EVENTOS MAUSEMOTION

Archivo: AtrapaMouse
 PRACTICA 6: EVENTOS MAUSEMOTION

Archivo: AtrapaMouse
 PRACTICA 6: EVENTOS MAUSEMOTION

Archivo: AtrapaMouse
 EVENTOS WINDOWS (WINDOWSLISTENER)

Captura eventos de ventana

Public void windowClosed (WindowsEvent event){
//..
}

Implementar interface
WindowsListener
Añadir Listeners a componente
addWindowsListener ( componente )
Implementar métodos interface

windowActivated (WindowsEvent event) ,

windowClosed, windowClosing
windowDeactivated , windowDeiconified
windowIconified, windowOpened