Unidad 7

JAVAFX
¿Qué es JAVAFX?
• JavaFX proporciona a los desarrolladores de Java una nueva plataforma
gráfica.
• JavaFX 2.0 se publicó en octubre del 2011 con la intención de reemplazar
a Swing en la creación de nuevos interfaces gráficos de usuario (GUI).
• JavaFX es un conjunto de paquetes gráficos que permite a los
desarrolladores diseñar, crear y probar aplicaciones gráficas ricas y
potentes para dispositivos de escritorio, web y móviles.
• JavaFX es un sucesor de la popular biblioteca SWING, utilizada
anteriormente para manejar gráficos.
Tutorial de JAVAFX
• Español:
• http://code.makery.ch/library/javafx-8-tutorial/es/
• Inglés:
• http://cs.brown.edu/courses/cs015/docs/JavaFXGuide.pdf
Graphical User Interface(GUIs)
• Proporcionan una forma controlada por el usuario (es decir, gráfica)
para enviar mensajes a un sistema de objetos (normalmente su
aplicación).
Rich Internet Applications
• Son aquellas aplicaciones web que ofrecen características y
experiencia similares a las de las aplicaciones de escritorio.
• Ofrecen una mejor experiencia visual en comparación con las
aplicaciones web normales a los usuarios.

• Estas aplicaciones se suministran como complementos de navegador

o como una máquina virtual y se utilizan para transformar
aplicaciones estáticas tradicionales en aplicaciones más potentes,
fluidas, animadas y atractivas.
Rich Internet Applications
• A diferencia de las aplicaciones de escritorio tradicionales, los RIAs no
requieren tener ningún software adicional para ejecutarse. Como
alternativa, debe instalar software como ActiveX, Java, Flash,
dependiendo de la Aplicación.

• En un RIA, la manipulación de datos se lleva a cabo en el lado del

servidor, mientras que la manipulación de objetos relacionados se
lleva a cabo en el lado del cliente.
Rich Internet Applications
• Tenemos tres tecnologías principales con las que podemos desarrollar
un RIA.
• Adobe Flash
• Microsoft Silverlight
• JavaFX
Creando GUIs con JAVAFX
• Para empezar a utilizar JAVAFX debe crear un proyecto del tipo:
JavaFX Application.

• Para utilizar JAVAFX debe

empezar implementando el
método start().
JavaFX: Stage and Scene
• Es como una obra de teatro.

• El Stage (escenario) es el contenedor principal, normalmente una

ventana con borde y los típicos botones para maximizar, minimizar o
cerrar la ventana.
• Dentro del Stage se puede añadir una Scene (escena), la cual puede
cambiarse dinámicamente por otra Scene.
• Dentro de un Scene se añaden los nodos JavaFX, tales como AnchorPane, TextBox,
Buttons, check boxes, etc.
JavaFX: Stage and Scene
• javaFX.stage.Stage es un
contenedor d ealto nivel. Todas
las app JavaFX tienen una.

• Para crear la escena debemos

agregar los controles al
javafx.scene.Scene.
Nodes and Scene Graphs
• Un solo elemento en un gráfico de escena se
denomina nodo.
• Un nodo con hijos es llamado parent node o branch
node.
• Nodos sin hijos son llamados nodos terminals u hojas.
• La colección de nodos en una escena son llamados
scene graph, lo que se comprende como tree.
• Existe un nodo especial en el scene graph llamado
nodo root (raiz).
• Cada nodo tiene una ID, una clase de estilo y un
volumen límite. Con la excepción del nodo raíz de
escena, cada nodo en un grafo.
Nodes and Scene Graphs
• Los nodos de un grafo de escena pueden tener efectos:
• opacidad,
• transformaciones,
• controladores de eventos,
• estados específicos de aplicación.
Layouts(distribución de
elementos)
• Los contenedores o paneles de diseño pueden utilizarse para permitir
arreglos flexibles y dinámicos de los controles de interfaz de usuario
dentro de un grafo de escena de una aplicación JavaFX.

• A medida que se cambia el tamaño de una ventana, el panel de

diseño cambia automáticamente el tamaño y redimensiona los nodos
que contiene.
Layouts(distribución de
elementos)
• Cada una de los
layouts mencionados
están representados
por una clase y todas
estas clases
pertenecen al
paquete javafx.layou
t
• La clase
denominada Panel e
s la clase base de
todos los diseños de
JavaFX.
Layouts
• BorderPane: establece sus nodos de contenido en la parte superior, inferior, derecha, izquierda o
región central.
• Hbox: organiza sus nodos horizontalmente en una sola fila.
• Vbox: organiza sus nodos verticalmente en una sola columna.
• StackPane coloca sus nodos en una única pila de un lado a otro.
• GridPane permite al desarrollador crear una cuadrícula flexible de filas y columnas en la que
diseñar nodos.
• FlowPane organiza sus nodos en un "flujo" horizontal o vertical, envolviéndose en los límites de
anchura especificada (para horizontal) o de altura (para vertical).
• TilePane coloca sus nodos en celdas o azulejos de diseño de tamaño uniforme
• AnchorPane permite a los desarrolladores crear nodos de anclaje en la parte superior, inferior,
izquierda o centro del diseño.
Ciclo de vida de una aplicación
JavaFX
• Extiende de la clase abstracta Application que se encuentra en javafx.application.
• Application define 3 métodos que forman parte del ciclo de vida de una palicación JavaFX

void init( ) abstract void start(Stage void stop( )

primaryStage)

• Invocado cuando • Llamado después del • Invocado cuando la

incia la aplicación. init(). aplicación finaliza.
• Utilizado para definir • Indica el inicio de la • Podemos
incializaciones. aplicación. sobreescribirlo para
(Sobreescribir en este • Utiilizado para finalizar procesos en
caso) construir la escena. caso de ser necesario
• No se puede utilizar • Recibe una referencia
para crear Stages o de Stage.
Scenes. • Método abstracto,
por lo tanto debe ser
sobreescrito.
La clase Application
• Es el punto de entrada a toda aplicación JavaFX. Una aplicación JavaFX extiende la
clase abstracta Application para proveer su propia implementación de los
métodos que gestionan su ciclo de vida, siendo el runtime de JavaFX el
responsable de llamar a los métodos en el orden correcto.

• Cualquier clase que extienda Application, debe implementar al menos el método

start(Stage), por lo que la estructura estática de una aplicación mínima en JavaFX,
incluyendo el método main(String...), suele ser la siguiente:
Launching a JavaFX Application
• Para iniciar la aplicación se debe llamar al método launch( ) definido por Application.
• Tiene dos definiciones:
public static void launch(String ... args)
• Donde, args son los argumentos ingresados por teclado (se puede enviar vacío).
• Cuando se llama a launch( ) se crea la aplicación, quien llama a init( ) y luego a
start( ).
• launch( ) no devuelve el control hasta que la aplicación haya finalizado.
• Esta version de launch( ) inicia la subclase de Application desde el cual es invocado.
• La segunda definición de launch( ) permite especificar otra clase que no es la que
inicia la aplicación.
Ciclo de vida de una aplicación
JavaFX
Cuando la clase SimpleApp es lanzada desde su
método main(String...) mediante la llamada
correspondiente a Application.launch(String...), el
runtime de JavaFX realiza las siguientes tareas:

1. Construye una instancia de la clase

SimpleApp.
2. Llama al método init() de SimpleApp para
proceder a su inicialización. Nuestra clase
puede sobreescribir este método en caso de
necesitar realizar tareas como cargar ficheros
de configuración, cachear recursos, etc.
3. Tras la inicialización, el runtime invoca el
método start(Stage) de SimpleApp para crear
y mostrar el interfaz de usuario. Cualquier
clase extendiendo Application está obligada a
proveer una implementación para el método
start(Stage).
Ciclo de vida de una aplicación
JavaFX
4. El runtime de JavaFX espera a que la
aplicación sea finalizada por el
usuario, u otra circunstancia.

5. Tras la finalización, el runtime llama

al método stop() de SimpleApp para
que libere cualquier recurso
reservado y realice tareas de
limpieza. La implementación del
método stop() es opcional.
Finalización
• Se considera que una aplicación JavaFX finaliza cuando se cumple una
de las siguientes condiciones:
1. Cuando se invoca explícitamente el método Platform.exit().
2. Cuando se cierra la última ventana de la aplicación y el atributo implicitExit
de la clase Platform es true.

• Al detectarse la finalización, el runtime de JavaFX invoca al método

stop() de nuestra aplicación para lanzar las tareas de limpieza
correspondientes.
¿Cómo
crear un
proyecto
JavaFX?
¿Cómo
crear un
proyecto
JavaFX?
Sobrescribiendo el método
Start()

Elementos en
la escena

root

Escena (Scene)

Escenario
(Stage)
Agregando elementos al root
• Un solo elemento
• root.getChildren().add(objNodo)

• Varios elementos al mismo tiempo

• root.getChildren().addAll(objNodo1, objNodo2,…., objNodoN)
 Construyendo el grafo de Scene
• root.getChildren() devuelve una lista de los hijos de
root. En lugar de almacenar esa lista devuelta en una
variable y llamar add (...) en esa variable, podemos
simplificar nuestro código llamando add (...)
directamente en la lista de regreso de los nodos hijos

/* Within App class */

@Override
public void start(Stage stage) {
//code for setting root, stage, scene elided

Button b1 = new Button();

Button b2 = new Button();
Button b3 = new Button();
root.getChildren().addAll(b1,b2,b3);
}
 Quitando elementos del grafo
de Scene
• También podemos remover un elemento quitándolo
del root con el mpetodo remove();
• Si se elimina un nodo que tiene nodos hijos, estos se
eliminarán también.

/* Within App class */

@Override
public void start(Stage stage) {
//code for setting root, stage, scene elided

Button b1 = new Button();

Button b2 = new Button();
Button b3 = new Button();
root.getChildren().addAll(b1,b2,b3);
root.getChildren().remove(b3);
}
 Layout dentro de Layout
• Puede agregar un panel de diseño como hijo del
nodo root y, a continuación, agregar más elementos
de la interfaz de usuario como nodos secundarios de
este panel.

/* Within App class */

@Override
public void start(Stage stage) {
//code for setting scene elided

Button b1 = new Button();

Button b2 = new Button();
root.getChildren().addAll(b1,b2);
VBox holder = new VBox();
root.getChildren().add(holder);

}
Scene
• Tiene varios constructores, por el momento veremos 2:

Scene(Parent • Crea una escena sin

rootnode) dimensiones.

Scene(Parent • Crea una escena con

rootnode, double
width, double height) dimensiones.
Stage

setTitle(String s) • Configurar el título de la ventana

setScene(Escene • Configurar la escena

escene)

show() • Mostrar la escena

 Controles-GUI
S.No El control y Descripción 7 TextField
Un objeto TextField es un componente de texto que permite la edición de una sola línea de texto.
1 Label
Un objeto etiqueta es un componente para colocar texto.
8 PasswordField
Un objeto passwordField es un componente de texto especializado para introducir la contraseña.
2 Button
Esta clase crea un botón etiquetado.

3 ColorPicker 9 Scrollbar
Un ColorPicker proporciona un panel de controles diseñados para Un control de barra de desplazamiento representa un componente barra de desplazamiento con
permitir a un usuario manipular y seleccionar un color. el fin de permitir al usuario seleccionar de la gama de valores.

4 CheckBox
A CheckBox es un componente gráfico que puede ser ya sea en 10 FileChooser
un on(true) o apagado (false) estado. Un control FileChooser representa una ventana de diálogo desde el que el usuario puede
seleccionar un archivo.

5 RadioButton 11 ProgressBar
La clase RadioButton es un componente gráfico, que puede ser ya Como la tarea progresa hacia su conclusión, la barra de progreso muestra el porcentaje de la tarea
sea en un EN (true) o OFF (false) estado en un grupo. de finalización.

12 Slider
6 ListView Un control deslizante permite al usuario gráficamente seleccionar un valor deslizando un botón
Un componente ListView presenta al usuario una lista desplegable dentro de un intervalo acotado.
de elementos de texto.
Label Control
• Pertenece al paquete javafx.scene.control
• Contiene únicamente texto los constructores.
• No recibe ningún valor, por lo tanto el texto a
Label() mostrar estará en blanco. Para configúralo usar
setText(String str)

Label(String str) • Donde str es el texto a mostrar

Button Control

• Crea un objeto Button sin

Button() etiqueta.

Button(String • Crea un objeto Button con una

str) etiqueta con el texto en str.
Radio Button
Group of Radio Buttons
Checkbox
Choice Box
Text Field
List View
Combo Box
JavaFX Collections
JavaFX Collections:
ObservableList
• Permiten controlar cambios en el contenido de la colección,
añadiendo “listeners”.

ObservableList<String> emptyList =FXCollections.emptyObservableList();

Manejo de
eventos
Manejo de eventos
• Para controlar un evento en JavaFX disponemos de los manejadores
de eventos y los filtros de eventos. Estos poseen propiedades como:

• Target: El nodo en donde se produjo el evento, un botón, la ventana,

etc..
• Source: Indica la fuente que genera el evento, el teclado, el ratón,
etc..
• Type: Se refiera el tipo de evento producido, presionar un botón del
mouse, presionar una tecla, mover el mouse, etc..
Event Filters y Event Handlers
• Cuando ocurre un evento se presentan distintos pasos para su
procesamiento:
El objetivo del evento es el nodo de
• Selección de objetivo de evento destino de un evento. Se basa en el tipo de
evento.

• Cosntrucción de la ruta del evento

Un evento viaja a través de los
despachadores de eventos en
una cadena de envío de
eventos.
• Ruta del evento trasversal
• Cada elemento en la ruta del evento puede:
• controlar el evento o consumirlo.
• Modificar las propiedades del evento
• Cambiar el evento por uno nuevo.
¿Cómo identificar el elemento
Event Target?
• Depende del tipo del evento y el elemento asociado a este.
• Ejemplo:

• Para los eventos del mouse, el objetivo del evento es el nodo en el cursor
del mouse. Múltiples nodos pueden estar disponibles en el cursor del
mouse. Si un círculo se coloca sobre un rectángulo. El nodo superior en el
cursor del mouse se selecciona como el destino del evento (Event Target)

• El objetivo del evento para eventos del teclado es el nodo que tiene el foco
Ruta del evento

El objeto Circle es el Event

Target.
Cosbtruye la ruta del
evento: Stage, Scene, HBox,
y Circle
Ruta del evento

Capture Phase
Ruta del evento

Capture Phase Bubbling Phase

Event Handlers an Event Filters
• La ruta de un evento consta de dos fases:
• Fase de captura
• Fase de propagación (bubbling phase)
Fase de captura
• Durante la fase de captura, un evento viaja desde la cabeza hasta la
cola de su dispatch chain(cadena de envío de eventos).
Las flechas indican el sentido
del recorrido del evento que
se produce cuando se clic en
un botón.

A medida que el evento pasa

a través de un nodo, se
ejecutan los filtros de eventos
registrados para ese nodo.

En la fase de captura de eventos se

ejecuta sólo los filtros de eventos, no los
controladores de eventos, para el nodo
actual.
Event Filters
• Los filtros de eventos permiten manejar un evento durante la fase de captura de
eventos del proceso de eventos.
• Un nodo puede tener uno o más filtros para manejar un evento.
• Se puede utilizar un solo filtro para más de un nodo y más de un tipo de evento.
• Los filtros de eventos permiten que el nodo padre proporcione procesamiento común
para sus nodos secundarios o intercepte un evento y evite que los nodos secundarios
actúen en el evento.
• Un filtro de eventos que se define para un tipo de evento también se puede utilizar
para cualquier subtipo de ese evento.
• Cuando ya no desea que un filtro de eventos procese eventos para un nodo o para un
tipo de evento, elimine el filtro utilizando el método removeEventFilter().
Fase de propagación de eventos
(Event Bubbling)
• Durante la fase de propagación, un evento viaja desde la cola hasta la
cabeza de su cadena de envío de eventos.
A medida que el evento pasa a través de
un nodo, los manejadores de eventos
registrados para el nodo se ejecutan.

En la fase de propagación de eventos ejecuta

Event handlers para el nodo actual, mientras
que la fase de captura de eventos ejecuta los
Event Filters.
Registrar Event Filters and
Handlers
• addEventFilter()
• addEventHandler()
• removeEventFilter()
• removeEventHandler()

• Puede registrar el mismo objetp EventHAndler como un filtro de eventos o como un

controlador al mismo tiempo.

• En esencia, manejar un evento significa escribir la lógica de la aplicación para objetos

EventHandler y registrarlos en nodos como filtros de eventos, manejadores o ambos.

• Ver ejemplo: CaptureBubblingOrder.java

Orden de ejecución
• Los filtros son siempre invocados antes que los controladores.
• Para el mismo nodo, los filtros y controladores de eventos para un tipo de
evento específico se invocan antes de los filtros y manejadores de eventos
genéricos. Ejemplo:

MouseEvent.MOUSE_CLICKED > MouseEvent.ANY

• Event handlers que se registran usando el método addEventHandler() se

ejecutan antes que event handlers registrados usando el método
setOnXXX(). Ver ejemplo: HandlersOrder.java
Ejemplo de Bubblig Phase

• Si hace clic en el rectángulo, se dará cuenta de que la salida muestra el mismo camino para el
evento a través de sus padres como lo hizo para el círculo. El evento aún pasa a través del
rectángulo, que es el destino del evento.
• Sin embargo, no ve ninguna salida, porque no ha registrado ningún filtro de eventos o
manejadores para que el rectángulo emita ningún mensaje. Puede hacer clic en cualquier punto
fuera del círculo y del rectángulo para ver el destino del evento y la ruta del evento.
Consumir Eventos
• Un evento se consume usando el método consume() en el método
handle() de filtros y controladores correspondientes.
• Si un evento se consume en un filtro de eventos de un nodo, el evento
no viaja a ningún nodo secundario.
• Si un evento se consume en un controlador de eventos de un nodo, el
evento no viaja a ningún nodo padre.
• Todos los filtros o manejadores de eventos para el nodo consumidor
se llaman, independientemente del filtro o controlador que consume
el evento.
Consumir Eventos
• Suponga que ha registrado tres controladores de eventos para un nodo
y el controlador de eventos, que se llama primero, consume el evento.
En este caso, los otros dos manejadores de eventos para el nodo siguen
siendo llamados.

• Si un nodo padre no desea que sus nodos hijos respondan a un evento,

puede consumir el evento en su filtro de eventos.

• Ver ejemplo: ConsumingEvents.java

Interface EventHandler
• EventHandler es la interface que implementa los eventos y está definida como:

• Ademàs define el método:

void handle(T eventObj)

• Recibe un objeto de tipo T que corresponde al objeto del evento generado

(KeyEvent, MouseEvent, etc.)
• Ver ejemplo: EventRegistration.java
Propiedades onXXX
• Las clases The Node, Scene, and Window contienen propiedades para almacenar
controladores de eventos:
• onKeyTyped
• onMouseClicked

• Se pueden usar los métodos setOnXXX() para registrar controladores de eventos para
un nodo (Event Handlers), no filtros de eventos (en este caso usar el método
tradicional addEventFilter()

• Soportar solo un Event Handler para UN NODO. Si desea registrar más de un Event
Handler para un nodo, usar addEventHandler()
Propiedades onXXX
Estos métodos no tienen una forma exclusive de remover un Event
Handler. Por lo cual lo recomendado es :
Para registrar:

Para eliminar:
Propiedades onXXX
• También existen métodos getOnXXX() que retornan una referencia al
controlador de evento previamente registrado para un nodo en
particular. Devuelve NULL si no se ha registrado un Event Handler para
el nodo.

• Ver ejemplo: EventHandlerProperties.java

¿En que consiste el manejo de
eventos?
• En el método start();

• en el método handle:
¿En que consiste el manejo de
eventos?
• Por ejemplo para el evento de un botón: ActionEvent.
• Primero se debe registrar el handler (manejador) que hará de “escucha” (listener).

• Cuando el botón es pulsado, se le pasa como referencia this. Pasamos la referencia del botón al
listener.

• Cuando el listener detecta que ha ocurrido un evento en el botón, envía un objeto tipo
ActionEvent al método handle, el cual se encargará de realizar las acciones que le hayamos
especificado.

• En caso de tener varios botones, la clase EventObject, de la cual hereda ActionEvent, contiene el
método getSource(), el cual devuelve el origen del evento, es decir, quién ocasionó el evento.
Button Control : Events
• Permite implementar el comportamiento o las acciones que debe
realizar el botón.

final void setOnAction(EventHandler<ActionEvent> handler)

Control de eventos
• Siempre que un usuario interactúa con la aplicación (nodes) , se dice
que ha sido producido un evento.
• Foreground Events :requieren la interacción directa de un usuario.
Por ejemplo: al hacer clic en un botón, mover el ratón, seleccionando
un elemento de la lista, etc.

• Background Events: requieren la interacción del usuario final son

conocidos como eventos de fondo. Por ejemplo: El fallo de
interrupciones del sistema operativo, hardware o software, expiración
del temporizador, finalizar la operación
Eventos
Básicos(javafx.event.Event)
• Los eventos están representados por clases que herendan de javafx.event.Event. Algunas
de ellas son: ActionEvent

• MouseEvent: Representa los eventos producidos por la interacción del ratón, por
ejemplo, hacer clic, mover el cursor, girar la rueda, etc.

• KeyEvent: Esta clase es para los eventos producidos por el teclado, puede ser, presionar o
liberar un tecla.

• WindowEvent: Aquí tenemos los eventos producidos por la ventana, por ejemplo, el
mostrar u ocultar la ventana.
• Los manejadores de eventos son implementados a través de clases
anónimas o lambda expressions.

• Es importante conocer la Fuente que generó el evento para ello Podemos

utilizar:
Object getSource( )
• Los eventos en JavaFX, son procesados a través del event dispatch chain. Es
decir los eventos se envían al root y del root se envían al destino y de igual
forma al retornar (event bubbling).
• Es possible para un nodo de la cadena consumir el evento.
Clase anónima
• Una anonymous inner class es una clase que no tiene nombre definido.
• La definición la clase y la creación se hacen en un solo paso
• Facilitan la escritura de eventos.
• Utilizadas para clases con muy poco código, de las que sólo hace falta un objeto. No pueden tener
constructores, pero sí inicializadores static o de objeto.
• No definen constructor pero sí bloques estáticos.
• Formas de definición:
• Uso de palabra reservada new seguida de la clase {…}
• Uso de palabra reservada new clase de la que hereda seguida de la clase interna {….}
• Uso de palabra reservada new seguida de la interfaz que implementa y la definición de la clase anónima {….}.
• El compilado genera un archive de la forma ClaseExterna$1.class
• Una clase anónima siempre debe ser una subclase de otra clase existente o bien de implementar
alguna interfaz.
Anonymous inner class Inicio de
una inner
class

finde una
inner class

Inicio de
una inner
class

finde una
inner class
Introducción
• Un lambda expression es un método Anónimo (sin nombre). Sin embargo este
método no se ejecuta por sí mismo.
• Un lambda expression se utiliza para implementar un método definido en una
interface functional (clase anónima).
• Una interface functional es aquella que define solamente un método
abstracto.(Indica el propósito de la interface) (SAM – Single Abstract Method)
• Por ejemplo:
• Interfaz Runnable define el método run()
• Una intefaz functional define el tipo del lambda expression.functional interface
defines the target type of a lambda.
Sintaxis de las Expresiones
Lambda
• permiten mejorar el uso de las clases anónimas internas convirtiendo
cinco líneas de código en una simple sentencia.
• Esta sentencia soluciona el problema de tener un método con varias
líneas al utilizar una clase interna.
• Una expresión Lambda está compuesta de tres partes:
Lambda Expression
Fundamentals
• Operador lambda es -> (becomes or goes to)
• Divide la expresión en 2:
• Lado Izquierdo: Parámetros requeridos por la expression. (Si no se
requieren parámetros, se utiliza una lista de parámetros vacía)
• Lado Derecho: Define las acciones de la expression Lambda
• Java define dos estructuras para el lambda.
• Una expresión simple.
• Bloque de código. () -> 123.45
Ejemplos
• Para responder a un evento requerimos un objeto que implemente la
interface EventHandler.

Utilizando inner class

Utilizando lambda
expressions
Otra manera de registrar
eventos
• Para agregar estos manejadores de eventos usaremos los métodos
addEventHandler() o addEventFilter()
• removemos o quitamos un manejador usando las funciones,
removeEventFilter() o removeEventHandler().
Esta GUI corresponde a un Button que se
encuentra dentro de un StackPane, al
primero le agregamos un manejador de
eventos, y al segundo un filtro de
eventos, si ejecutamos y hacemos clic
sobre el botón veremos que primero se
llama al handler2 y luego al handler1,
podemos ver la consola de salida con los
correspondientes mensajes
ComboBox
• La clase ComboBox crea un control que permite al usuario seleccionar
una opción de una lista desplegable de opciones.
• La lista desplegable aparece cuando el usuario hace clic en el
ComboBoxcontrol.

• Cuando el número de opciones excede el tamaño de la ventana

desplegable, el usuario puede desplazarse hacia abajo para obtener
más opciones.
ComboBox
• Declaración de importación
• javafx.scene.control.ComboBox
• Constructores
ComboBox: Métodos
•
Input Events
• Javafx.scene.input package
Input Events
• Key event handlers: onKeyPressed, onKeyReleased, onKeyTyped.

• Mouse event handlers: onMouseClicked, onMouseDragged,

onMouseEntered, onMouseExited, onMouseMoved,
onMousePressed, onMouseReleased.

• Drag and drop handlers: onDragDetected, onDragDone,

onDragDropped, onDragEntered, onDragExited, onDragOver.
 Mouse Events
• Clase MouseEvent
• Representa un evento del mouse
Evento Descripción
ANY El supertipo de todos los eventos del mouse.
MOUSE_PRESSED: Evento que se genera al presionar un botón del mouse
MOUSE_RELEASED: Evento que se genera cuando se libera un botón del mouse
MOUSE_CLICKED: Se genera cuando se clickea un botón del mouse en un nodo
MOUSE_MOVED: Se genera al mover el mouse
MOUSE_DRAGGED: Se genera cuando se mueve el mouse con un botón presionado. Este evento se entrega al
mismo nodo en que el botón del mouse fue presionado, independientemente de la ubicación
del puntero del ratón durante el arrastre.
Obteniendo la ubicación del
mouse
• MouseEvent contiene métodos para obtener la ubicación del ratón
cuando se produce un evento de mouse. Se obtiene en forma de
coordenadas.
• Los métodos getX() y getY() dan las coordenadas (x, y) del ratón en
relación con el nodo de origen de eventos.
• Los métodos getSceneX() y getSceneY() proporcionan las coordenadas
(x, y) del ratón relativas a la escena a la que se agrega el nodo.
• Los métodos getScreenX() y getScreenY() proporcionan las
coordenadas (x, y) del ratón relativas a la pantalla a la que se agrega
el nodo. Ver ejemplo: MouseLocation.java
Representando los botones del
mouse
• Normalmente, un ratón tiene tres botones.
• El enum de MouseButton en el paquete javafx.scene.input contiene
constantes para representar el botón del ratón.

NONE No representa ningún botón

PRIMARY Botón izquierdo
MIDDLE Botón central
SECONDARY Botón derecho
Estados de los botones
MouseButton getButton()
int getClickCount()
boolean isPrimaryButtonDown()
boolean isMiddleButtonDown()
boolean isSecondaryButtonDown()
Devuelve el botón del ratón responsable del evento
del mouse.
Devuelve el número de clics del ratón asociados con el
evento mouse.
Devuelve true si se presiona el botón principal. De
otra manera, Devuelve falso
Devuelve true si el botón del medio está presionado.
De otra manera, Devuelve false.
Devuelve true si se pulsa el botón secundario. De lo
contrario, devuelve false.
Selección de eventos de ratón
en los límites
• La clase Node tiene una propiedad pickOnBounds para controlar la forma en que los
eventos del mouse son seleccionados (o generados) para un nodo.
• Un nodo puede tener cualquier forma geométrica, mientras que sus límites siempre
definen un área rectangular.
• Si la propiedad se establece en true, los eventos del mouse se generan para el nodo si
el mouse está en el perímetro o dentro de sus límites.
• Si la propiedad se establece en false, que es el valor predeterminado, eventos de
mouse se generan para el nodo si el mouse está en el perímetro o dentro de su forma
geométrica.
• Algunos nodos, como el nodo Texto, tienen el valor predeterminado para la
propiedad pickOnBounds definida como true.
• Si la propiedad pickOnBounds para el círculo es falsa, el evento del mouse no se
generará para el círculo si el mouse está en una de las cuatro áreas en las esquinas
que se encuentran entre el perímetro de la forma geométrica y los límites.

• Ver ejemplo: PickOnBounds.java

Key Events
• Un Key event es un tipo de evento de entrada que denota la aparición
de una pulsación de tecla.
• Se entrega al nodo que tiene el foco.
• Una instancia de la clase KeyEvent, que se declara en el paquete
javafx.scene.input, representa un evento clave.
• Key pressed, key released, and key typed son tres tipos de eventos
clave.
Tipos de Key Events

ANY El supertipo de todos los eventos del teclado.

KEY_PRESSED Ocurre cuando una tecla es presionada
KEY_RELEASED Ocurre cuando una tecla es liberada
KEY_TYPED Ocurre cuando se introduce un carácter Unicode.
Métodos de la clase KeyEvent

KeyCode getCode() KEY_PRESSED El enum KeyCode contiene una

KEY_RELEASED constante que representa todas las
teclas del teclado. Este método
devuelve la constante de
enumeración de KeyCode que está
asociada con la tecla que se
presiona o libera.
String getText() KEY_PRESSED Devuelve una descripción String del
KEY_RELEASED KeyCode asociado con los eventos
presionados por la tecla y liberados
por las teclas.
String getCharacter() KEY_TYPED Devuelve un carácter o una
secuencia de caracteres asociados a
un evento con clave como un
String.
¿Qué es un gesto Press-Drag-
Release
• es la acción del usuario de presionar un botón del ratón, arrastrando
el ratón con la tecla presionada y soltar el botón.
• El gesto se puede iniciar en una escena o un nodo.
• Varios nodos y escenas pueden participar en un solo gesto.
• El gesto es capaz de generar diferentes tipos de eventos y entregar
esos eventos a diferentes nodos.
Drag-and-Drop
• JavaFX admite tres tipos de gestos de arrastre:
• simple press-drag-release gesture: Se utiliza cuando el gesto de arrastre implica sólo un nodo, el
nodo en el que se inició el gesto.

• full press-drag-release gesture: Se utiliza cuando el gesto de arrastre va de un nodo origen a un nodo
destino.

• drag-and-drop gesture: es una acción del usuario que combina el movimiento del ratón con un botón
del ratón presionado. Se utiliza para transferir datos de la fuente del gesto a un objetivo del gesto.
• Un nodo a otro nodo
• Un nodo a una escena
• Una escena a otra escena
• Una escena a un nodo
Drag-and-Drop
• Un nodo puede arrastrarse para diferentes propósitos:
• Es posible que desee cambiar la forma de un nodo arrastrando sus límites o
moviéndolo arrastrándolo a una nueva ubicación. En este caso, el gesto implica
sólo un nodo: el nodo en el que se inició el gesto.
• Es posible que desee arrastrar un nodo y colocarlo en otro nodo para conectarlos
de alguna manera, por ejemplo, conectando dos nodos con un símbolo en un
diagrama de flujo. En este caso, el gesto de arrastre implica varios nodos. Cuando
se abandona el nodo de origen al nodo objetivo, se produce una acción.
• Puede arrastrar un nodo y colocarlo en otro nodo para transferir datos desde el
nodo origen al nodo objetivo. En este caso, el gesto de arrastre implica varios
nodos. Una transferencia de datos se produce cuando el nodo de origen se suelta.
Proceso drag-and-drop
• Varios pasos están implicados en realizar un gesto de arrastrar y soltar:
• Se presiona un botón del ratón en un nodo.
• El ratón se arrastra con el botón pulsado.
• El nodo recibe un evento detectado por arrastre.
• Se inicia un gesto de drag-and-drop en el nodo llamando al método startDragAndDrop(), convirtiendo al nodo en el
origen del gesto. Los datos del nodo fuente se colocan en una tabla de desplazamiento.
• Una vez que el sistema cambia a un gesto drag-and-drop, deja de entregar MousEvents y comienza a entregar
DragEvents.
• La fuente del gesto se arrastra hacia el objetivo de gesto potencial. El objetivo del gesto potencial comprueba si
acepta los datos colocados en el panel de desplazamiento. Si acepta, puede convertirse en el objetivo de gesto real.
• El usuario suelta el botón presionado en el objetivo de gesto, enviándolo a un evento de arrastrar y soltar.
• El objetivo gestual utiliza los datos.
• Se envía un evento de drag-done a la fuente de gestos indicando que el gesto de arrastrar y soltar se ha
completado.
VBox layout pane
• Crea una manera fácil de organizar una serie de nodos hijos en una sola columna
vertical.
• Podemos personalizar el espaciado vertical entre los nodos hijos utilizando el
método setSpacing (double) de Vbox.
• Cuanto mayor es el double pasado como argumento, más espacio se produce entre los
elementos secundarios de la GUI.
• El posicionamiento por defecto para la columna vertical está en TOP_LEFT de VBox
(Top Vertically, Left Horizontally)
• Se puede cambiar el posicionamiento vertical/horizontal de una columna usando
el método: setAlignment(Pos position) y enviando como argumento una
constante javafx.geometry.Pos
Ejemplo

VBox root = new VBox();

Button b1 = new Button(“Top”);

Button b2 = new Button(“Middle”);
Button b3 = new Button(“Bottom”);
root.getChildren().addAll(b1,b2,b3);

wh
Scene scene = new Scene(root, 200, 200);
stage.setTitle("Sample VBox");
stage.setScene(scene);
stage.show();
Ejemplo
• Agregando espacios entre los nodos:

VBox root = new VBox();

Button b1 = new Button(“Top”);

Button b2 = new Button(“Middle”);
Button b3 = new Button(“Bottom”);
root.getChildren().addAll(b1,b2,b3);

root.setSpacing(8);

//code for setting the Scene elided

Ejemplo
• Ubicando la columna en la posición TOP CENTER:

VBox root = new VBox();

Button b1 = new Button(“Top”);

Button b2 = new Button(“Middle”);
Button b3 = new Button(“Bottom”);
root.getChildren().addAll(b1,b2,b3);

root.setSpacing(8);
root.setAlignment(Pos.TOP_CENTER);

//code for setting the Scene elided

La clase PaneOrganizer
• Consiste en una clase donde se mantendrá toda la
lógica de la aplicación gráfica.
• Esta clase instaciará el panel root y proveerá un
método público getRoot() que retorna ese root.
• Por lo tanto la clase de la aplicación podrá acceder
al panel root a través del método y pasar el root al
constructor de Scene.
La clase PaneOrganizer
ColorChanger
Stage

• Una aplicación que cambie el color del texto

Cuando se presione el botón
(revisar ejemplo en netbeans) Label

Pane (eg. Scene

Button Vbox)
Juntando todo…
• En el grafo, Vbox está
contenido dentro de
Scene pero en la lógica (el
código), el panel Vbox
está dentro de la clase
PaneOrganizer.
• Lo mismo ocurre con los
nodos Label y Button. La contención lógica se basa en la instancia de los
objetos, mientras que la gráfica se basa en
elementos JavaFX que se agregan a otros elementos
de JavaFX mediante el método getChildren.add (...)
Shapes
• Se puede crear líneas, rectángulos,
círculos y arcos en JavaFX. Puede
modificar fácilmente los tamaños,
esquinas y otros atributos de las
formas.

• Los cuales tiene como padre por

defecto a la clase
javafx.scene.shape.Shape
• Line
• Rectangle
• Rounded Rectangle
• Circle
• Ellipse
• Polygon
CREAR LÍNEAS EN JAVAFX
• El tipo más básico de forma es una línea, creada con
la clase Line . Para crear una línea, se especifica el X y Y coordenadas
de inicio y al final de la línea, como en este ejemplo:
CREAR RECTÁNGULOS EN
JAVAFX
• Un rectángulo requiere un punto de inicio (x, y) , un ancho y una
altura. Aquí está el código que crea un rectángulo:

• Puede crear un rectángulo con esquinas redondeadas llamando a

los métodos setArcWidth y setArcheight .
CREAR CÍRCULOS EN JAVAFX
• Para crear un círculo, utilice la clase Circle , especificando las
coordenadas xey del centro del círculo y del radio.

• Una elipse es similar a un círculo, pero tiene dos radios: uno en el eje
xy el otro en el eje y.
Dialog Boxes
• Ventanas emergentes.

• Se puede configurar una ventana Dialog para agregar botones,

agregar contenido, establecer la modalidad y definir la naturaleza de
bloqueo (y no bloqueo) del diálogo. Se puede acceder y configurar
varias propiedades usando la API del diálogo: título, texto del
encabezado, texto del contenido, ubicación, ancho / alto, tamaño
ajustable y el gráfico en el encabezado o contenido.
JavaFX Alert
Eventos
• DIALOG_CLOSE_REQUEST,
• DIALOG_HIDDEN,
• DIALOG_HIDING,
• DIALOG_SHOWING,
• DIALOG_SHOWN.
• Por ejemplo:
Alert DIalog
• Los cuadros de diálogo de alerta se crean utilizando tipos de alerta
preconstruidos para rellenar previamente varias propiedades. Los
tipos de alerta se definen como enum AlertType. Los valores
constantes enum son: ONFIRMATION, ERROR, INFORMATION, NONE
and WARNING.
Regiones
Regiones
En el contenido se
pueden añadir
también otros nodos.
Animaciones
Animación - Cambiando con el
tiempo
• Supongamos que tenemos una forma alienígena que nos gustaría
animar (por ejemplo, hacer que se mueva a través de la pantalla).

• Al igual que en una película y animación de vídeo, podemos crear

movimientos aparentes con muchos pequeños cambios en la
posición.
• Si nos movemos lo suficientemente rápido y los incrementos son lo
suficientemente pequeños, obtendremos un movimiento suave.
• Lo mismo ocurre con el tamaño, orientación, cambio de forma, etc ...
Animación - Cambiando con el
tiempo
• ¿Cómo orquestar una secuencia de
cambios incrementales?
Coordinándolos con una línea de tiempo
donde el cambio ocurre en instantes
definidos

00:07
0
1
2
3
4
5
6
 Introducción de cronogramas

Handler Handler Handler

TimeLine

KeyFrame KeyFrame KeyFrame KeyFrame

etc.

Duration Duration Duration

KeyFrame representa un conjunto de valores (típicamente relacionados con los gráficos)

que está sujeto a un cambio (incremental) cuando el tiempo del KeyFrame es mayor
(especificado por duración) - EventHandler realiza los cambios apropiados
•
En general, la animación de un objeto implica la creación de la ilusión
de su movimiento por una visualización rápida.
• En JavaFX, un nodo puede ser animado cambiando su propiedad con
el tiempo.
• JavaFX proporciona un paquete denominado javafx.animation .
• Este paquete contiene las clases que se utilizan para animar a los
nodos. La animación es la clase base de todas estas clases.
Arquitectura de la API
Timeline animation:
• En la animación de la línea de tiempo, creamos
el efecto añadiendo keyframes a una línea de
tiempo. Los cuadros intermedios son generados
por JavaFX con la ayuda de un
interpolador. Aunque la animación de la línea
de tiempo requiere más esfuerzo por parte de
un programador, proporciona más control para
manipular el efecto de animación también. A lo
largo de la progresión del tiempo en una línea
de tiempo, podemos actualizar los valores de
propiedades de objetos animados, como
cambiar el tamaño, la ubicación del color, etc.
Transition:
• La animación de transición es la más adecuada
para una animación planificada en el sentido de
que incorpora animación en una línea de tiempo
interna. Existen varias clases concretas de
transición con las que podemos componer
múltiples animaciones que se pueden ejecutar
en paralelo o secuencialmente. Por ejemplo,
la clase RotateTransition implementa un efecto
rotatorio cambiando el grado de rotación de un
nodo en el tiempo. Esta es una técnica
comparativamente simplificada y más fácil de
usar que la animación de la línea de tiempo.
Conceptos clave
• La animaciòn incluye conceptos claves como timeline, key values, key frames e
interpolación.
• Timeline representa la duración del tiempo de una progresión de animación.
• Key frame denota el estado del objeto animado (nodo) en un instante específico
de tiempo en la línea de tiempo.
• Cada Key frame tiene un key value asociado que es modificado por el
interpolador.
• Un key value representa el valor de una propiedad de un nodo.
• El interpolador es responsable de generar tramas intermedias para producir
movimientos suaves.
 El key value

Por ejemplo:
El vehículo en el
0 segundo o el
asociado con el
keyframe
key value representa el
un vehículo que tx=0 representa cambio de Los cuadros
En el segundo 5 intermedios entre
se mueve de el primer posición o valor
el key value tx = dos fotogramas clave
izquierda a keyframe. de traducción a consecutivos son
200 representa
derecha lo largo del eje x generados por el
el segundo
horizontalmente interpolador para
keyframe, y así producir un
a lo largo de su
sucesivamente movimiento más fino
eje x durante 20
segundos
Duration Class
• Pertenece al paquete javafx.útil.
• Representa una duración de tiempo en milisegundos, segundos,
minutos y horas.
• Es una clase inmutable.
• Representa la cantidad de tiempo para cada ciclo de una animación.
• Puede representar una duración positiva o negativa.
Duration Class
• Puede crear un objeto Duration .
• Uso del constructor
• El constructor toma la cantidad de tiempo en milisegundos.

• Uso de métodos predefinidos

• Uso del método valueOf() desde una duración en formato String.

 KeyValue Class
• Encapsula tres cosas:
• Un objetivo (target)
• Un valor final para el target
• Un interpolador (por defecto: Interpolator.LINEAR)

• Constructores:
Nodo • KeyValue(WritableValue target, T endValue) Valor
Text • KeyValue(WritableValue target, T endValue, Interpolator interpolator) final

Interpolador
default
KeyFrame Class
• Define el estado final de un nodo en instante de tiempo específico. El
estado final es determinado por los Key values asociados.
• Encapsula:
• Un instante en la línea de tiempo(timeline)
• Un conjunto de KeyValues
• Un nombre
• Un controlador ActionEvent
KeyFrame Class
• El instante de Timeline con el cual es asociado un keyframe se define por
un objeto Duration
• El conjunto de KeyValues define el valor final del Target para el keyframe.
• Un objeto KeyFrame puede tener un nombre, para usarlo como punto de
referencia para saltar al instante definido en este keyframe durante una
animación.
• Con el método getCuePoints() se obtiene el mapa de puntos de
referencias.
• Opcionalmente se puede adjuntar un controlador ActionEvent
KeyFrame Class
• Constructores:
Timeline
• Constructores
Pasos para construir
Animaciones de Timeline
• Crear los KeyValues
• Construir keyframes asociando los keyValues
• Crear un objeto Timeline con keyframes
• Setear las propiedades de animación
• Usar el método play() para corer la animación.
Controlando una animación
• La clase Animation contiene métodos para controlar el Timeline:
• play() reproduce una animación desde su posición actual.
• jumpTo(Duration time) y jumpTo(String cuePoint) para establecer la posición actual de la
animación a una duración específica o un punto de referencia antes de llamar al método play().
• Es asíncrono. Es posible que la animación no comience inmediatamente.
• Llamar al método mientras se ejecuta la animación no tiene ningún efecto.
• playFrom() reproduce una animación a partir de la duración especificada o del punto de
referencia especificado.
• playFromStart() reproduce la animación desde el principio (duración = 0)
• stop() detiene una animación en ejecución.
• pause() método para pausar una animación.
Puntos de referencia
• Puede configurar puntos de referencia en un archivo Timeline. Los puntos de referencia
se denominan instantes en el Timeline. Una animación puede saltar a un punto de
referencia utilizando el jumpTo(String cuePoint)método. Una animación mantiene un
ObservableMap de puntos de referencia. La clave del mapa es el nombre de los puntos
de referencia y los valores son la duración correspondiente en la línea de tiempo. Utilice
el getCuePoints()método para obtener la referencia del mapa de puntos de referencia.
• Hay dos formas de agregar puntos de referencia a Timeline.
• Dar un nombre al KeyFrame que agregue a una línea de tiempo que añade un punto de
cue en el mapa de puntos de cue
• Adición de parejas nombre-duración al mapa devuelto por el método getCuePoints () de
la clase Animation
Timeline Animation
• Una animación es conducida por sus propiedades asociadas, tales como tamaño,
ubicación y color, etc.
• Timeline proporciona la capacidad de actualizar los valores de la propiedad a lo largo
de la progresión del tiempo.
• JavaFX admite la animación de keyframes.
• En la animación de keyframes, las transiciones de estado animado de la escena gráfica
son declaradas por instantáneas de inicio y de fin (keyframes) del estado de la escena
en determinados momentos.
• El sistema puede realizar automáticamente la animación.
• Puede detener, pausar, reanudar, invertir o repetir el movimiento cuando se solicite.
Transiciones
• Se pueden aplicar animaciones (transitions) como
• Fade Transition ,
• Fill Transition ,
• Rotate Transition ,
• Scale Transition ,
• Stroke Transition ,
• Translate Transition ,
• Path Transition ,
• Sequential Transition ,
• Pause Transition ,
• Parallel Transition .
• Fade Transition
• Cambia la opacidad de un nodo en un tiempo dado.
• Fill Transition
• Representa una transición de relleno para una Forma mediante la transición gradual del relleno de la
forma entre el rango especificado y la duración.
• Path Transition
• Una transición de trayectoria mueve un nodo a lo largo de una trayectoria de un extremo a otro
durante un tiempo dado.
• Parallel Transition
• Una transición paralela ejecuta varias transiciones simultáneamente.
• Sequential Transition
• Una transición secuencial ejecuta varias transiciones una tras otra.