Unidad 10 Javafx 5lu2b

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 (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 Interface(GUIs) • Proporcionan una forma controlada por el (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 s. • 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 es de diseño pueden utilizarse para permitir arreglos flexibles y dinámicos de los controles de interfaz de dentro de un grafo de escena de una aplicación JavaFX. • A medida que se cambia el tamaño de una ventana, el 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 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( ) • Invocado cuando incia la aplicación. • Utilizado para definir incializaciones. (Sobreescribir en este caso) • No se puede utilizar para crear Stages o Scenes.

abstract void start(Stage primaryStage) • Llamado después del init(). • Indica el inicio de la aplicación. • Utiilizado para construir la escena. • Recibe una referencia de Stage. • Método abstracto, por lo tanto debe ser sobreescrito.

void stop( ) • Invocado cuando la aplicación finaliza. • Podemos sobreescribirlo para finalizar procesos en caso de ser necesario

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 SimpleApp.

instancia

de

la

clase

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 . 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 , 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 de diseño como hijo del nodo root y, a continuación, agregar más elementos de la interfaz de como nodos secundarios de este . /* 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 rootnode)

• Crea una escena sin dimensiones.

Scene(Parent rootnode, double width, double height)

• Crea una escena con dimensiones.

Stage setTitle(String s)

• Configurar el título de la ventana

setScene(Escene escene)

• Configurar la escena

show()

• Mostrar la escena

Controles-GUI S.No 1

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.

8

Field Un objeto Field es un componente de texto especializado para introducir la contraseña.

9

Scrollbar Un control de barra de desplazamiento representa un componente barra de desplazamiento con el fin de permitir al seleccionar de la gama de valores.

10

FileChooser Un control FileChooser representa una ventana de diálogo desde el que el puede seleccionar un archivo.

11

ProgressBar Como la tarea progresa hacia su conclusión, la barra de progreso muestra el porcentaje de la tarea de finalización.

12

Slider Un control deslizante permite al gráficamente seleccionar un valor deslizando un botón dentro de un intervalo acotado.

Label Un objeto etiqueta es un componente para colocar texto.

2

Button Esta clase crea un botón etiquetado.

3

ColorPicker Un ColorPicker proporciona un de controles diseñados para permitir a un manipular y seleccionar un color.

4

CheckBox A CheckBox es un componente gráfico que puede ser ya sea en un on(true) o apagado (false) estado.

5

RadioButton La clase RadioButton es un componente gráfico, que puede ser ya sea en un EN (true) o OFF (false) estado en un grupo.

6

ListView Un componente ListView presenta al una lista desplegable de elementos de texto.

Label Control • Pertenece al paquete javafx.scene.control • Contiene únicamente texto los constructores.

Label()

Label(String str)

• No recibe ningún valor, por lo tanto el texto a mostrar estará en blanco. Para configúralo usar setText(String str)

• Donde str es el texto a mostrar

Button Control Button()

• Crea un objeto Button sin etiqueta.

Button(String • Crea un objeto Button con una etiqueta con el texto en str. 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: • Selección de objetivo de evento

El objetivo del evento es el nodo de destino de un evento. Se basa en el tipo de evento.

• Cosntrucción de la ruta del evento

• Ruta del evento trasversal

Un evento viaja a través de los despachadores de eventos en una cadena de envío de eventos.

• 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 handler)

Control de eventos • Siempre que un interactúa con la aplicación (nodes) , se dice que ha sido producido un evento. • Foreground Events :requieren la interacción directa de un . 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 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 seleccionar una opción de una lista desplegable de opciones. • La lista desplegable aparece cuando el hace clic en el ComboBoxcontrol. • Cuando el número de opciones excede el tamaño de la ventana desplegable, el 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, onMouseEntered, onMouseExited, onMousePressed, onMoeleased.

onMouseDragged, onMouseMoved,

• 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 KEY_RELEASED

String getText()

KEY_PRESSED KEY_RELEASED

String getCharacter()

KEY_TYPED

El enum KeyCode contiene una 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. Devuelve una descripción String del KeyCode asociado con los eventos presionados por la tecla y liberados por las teclas. Devuelve un carácter o una secuencia de caracteres asociados a un evento con clave como un String.

¿Qué es un gesto Press-DragRelease • es la acción del 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 ite 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 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 de desplazamiento. Si acepta, puede convertirse en el objetivo de gesto real. El 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 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 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

Button

Pane (eg. Vbox)

Scene

Juntando todo… • En el grafo, Vbox está contenido dentro de Scene pero en la lógica (el código), el 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

TimeLine

Handler

Handler

KeyFrame

KeyFrame

KeyFrame KeyFrame

Duration

Duration

Duration

etc.

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:

Transition:

• 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.

• 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 vehículo en el Por ejemplo: 0 segundo o el un vehículo que se mueve de izquierda a derecha horizontalmente a lo largo de su eje x durante 20 segundos

key value tx=0 representa el primer keyframe.

En el segundo 5 el key value tx = 200 representa el segundo keyframe, y así sucesivamente

El key value asociado con el keyframe representa el cambio de posición o valor de traducción a lo largo del eje x

Los cuadros intermedios entre dos fotogramas clave consecutivos son generados por el interpolador para producir un movimiento más fino

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 Text

• KeyValue(WritableValue target, T endValue) • KeyValue(WritableValue target, T endValue, Interpolator interpolator)

Valor 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 ite 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.