JavaFXÓliver Centeno Álvarez
Contenidos 1.   ¿Qué es JavaFX? 2.   Construcción de Formularios 3.   SceneBuilder 4.   Eventos, Controladores y Filtros 5...
JavaFX1. ¿Qué es JavaFX?
1. ¿Qué es JavaFX?●   Chris Oliver @ SeeBeyond●   F3 (Form Follows Function)●   Comprada por Sun en 2007●   1.0 JavaFX Scr...
1. ¿Qué es JavaFX?●   Herramientas gráficas●   Basadas en escenas●   Multiplataforma●   RIA●   Runtime Específico●   Desar...
1. ¿Qué es JavaFX?● Instalación  ○   JDK 1.7  ○   JavaFX SDK 2.2  ○   JavaFX SceneBuilder 1.0  ○   NetBeans IDE 7.3
1. ¿Qué es JavaFX?● Primer JavaFX  1.   Abrir NetBeans  2.   New Project  3.   JavaFX Application  4.   Configurar JavaFX ...
1. ¿Qué es JavaFX?● Un ejemplo más complejo  1.   Crear un objeto Text  2.   Cambiar el color con setFill()  3.   Cambiar ...
1. ¿Qué es JavaFX?● Ejercicio 1  ○   Crear múltiples textos  ○   En posiciones aleatorias  ○   Con colores aleatorios  ○  ...
1. ¿Qué es JavaFX?● Efectos  ○ Se pueden añadir sombras    ■ DropShadow    ■ InnerShadow  ○ Brillos y Reflejos    ■ Bloom ...
1. ¿Qué es JavaFX?● Caso Particular  ○ Animaciones (javafx.animation)  ○ Translate    ■ Desplaza el texto        ●   setNo...
1. ¿Qué es JavaFX?● Ejercicio 2  ○ Probar algunos efectos  ○ Desenfocados    ■ BoxBlur    ■ GaussianBlur    ■ MotionBlur  ...
JavaFX2. Creación de Formularios
2. Creación de Formularios● El Objeto javafx.stage.Stage  ○ Interfaz de una aplicación JavaFX  ○ Independiente de disposit...
2. Creación de Formularios● El Objeto javafx.stage.Stage  ○ Owner    ■ Ventana que contiene el stage    ■ initOwner()  ○ M...
2. Creación de Formularios● El Objeto javafx.stage.Screen  ○ Pantalla sobre la que se proyecta el Stage  ○ Admite entornos...
2. Creación de Formularios● El Objeto javafx.scene.Scene  ○ Elementos gráficos mostrados en el Stage  ○ Permite indicar   ...
2. Creación de Formularios● El Objeto javafx.scene.Scene  ○ Modelo de árbol  ○ Admite como raíz cualquier objeto javafx.sc...
2. Creación de Formularios● El Objeto javafx.scene.Group  ○ Contiene otros controles ordenados  ○ Propaga transformaciones...
2. Creación de Formularios● Ejercicio 3  ○   Probar los estilos de un Stage  ○   Crear una ventana transparente  ○   Centr...
2. Creación de Formularios● Jerarquía de Controles                          Node    MediaView   Canvas    Parent          ...
2. Creación de Formularios● Controles  ○ Controles básicos     ■ javafx.scene.control.*     ■ javafx.scene.text.*     ■ ja...
2. Creación de Formularios● El Objeto javafx.scene.layout.Region  ○   Área de la pantalla que contiene otros nodos  ○   Se...
2. Creación de Formularios● Layouts
2. Creación de Formularios● Layouts  ○ GridPane    ■ Rejilla de celdas variables    ■ add(), addRow() y addColumn()    ■ s...
2. Creación de Formularios● Layouts  ○ BorderPane    ■ Rejilla de 5 casillas (N, S, W, E, C)    ■ N, S y C totalmente dime...
2. Creación de Formularios● Layouts  ○ FlowPane    ■ Componentes distribuidos en filas    ■ O en columnas    ■ setOrientat...
2. Creación de Formularios● Layouts  ○ AnchorPane    ■ Panel de controles posicionables    ■ Desplazamiento respecto de lo...
2. Creación de Formularios● Layouts  ○ TilePane    ■ Rejilla de "tiles" de la misma dimensión    ■ Horizontal o vertical  ...
2. Creación de Formularios● Layouts  ○ StackPane    ■ Panel de controles apilados    ■ Orden Z    ■ Permite alinear nodos ...
2. Creación de Formularios● Layouts  ○ SplitPane    ■ Control con divisiones (divider)    ■ Horizontales o verticales    ■...
2. Creación de Formularios● Layouts  ○ TabPane    ■ Control con pestañas posicionables a los 4 lados    ■ Contiene Objetos...
2. Creación de Formularios● Layouts  ○ TitledPane    ■ Control etiquetado (Labeled)    ■ Panel con un título    ■ Colapsab...
2. Creación de Formularios● Layouts  ○ Accordion    ■ Conjunto de TitledPanes    ■ Diseñado para que sólo 1 esté desplegad...
2. Creación de Formularios● Layouts  ○ HBox y VBox    ■ Paneles horizontal y vertical respectivamente    ■ Permite indicar...
2. Creación de Formularios● Layouts
2. Creación de Formularios● Ejercicio 4  ○ Crear una ventana BorderLayout  ○ Con Layouts en cada extremo    ■ Top    ■ Bot...
JavaFX3. SceneBuilder
3. SceneBuilder● ¿Qué es SceneBuilder?  1. Aplicación de Diseño de Formularios     ■ Drag & Drop     ■ AnchorPane     ■ Pr...
3. SceneBuilder
3. SceneBuilder● Patrón MVC  ○ FXML es un fichero de Vista  ○ Admite una Clase Controller  ○ Con métodos tipo evento    ■ ...
3. SceneBuilder● Ejercicio 5  ○   Diseñar la ventana del ejercicio 4  ○   Con SceneBuilder  ○   Abrir el fichero FXML  ○  ...
3. SceneBuilder
3. SceneBuilder● Objetos Builder  ○   GroupBuilder.create().build()  ○   TextBuilder.create().build()  ○   CheckBoxBuilder...
3. SceneBuilder● Ejercicio 6  ○ Crear una escena tipo PONG    ■ GroupBuilder    ■ CircleBuilder    ■ RectangleBuilder    ■...
3. SceneBuilder● Propiedades y Binding  ○ Todos los controles tienen propiedades     ■ getter y setter (Java Bean)     ■ P...
3. SceneBuilder● Propiedades  ○   getBean()  ○   getName()  ○   get() y getValue()  ○   bind() y unbind()  ○   bindBidirec...
3. SceneBuilder● Binding  ○ Enlace de valores de un control  ○ Normalmente a través de propiedades  ○ javafx.beans.binding...
3. SceneBuilder● Binding  ○ Ejemplo: Área de un triángulo
3. SceneBuilder● Binding condicional  ○ javafx.beans,bindings.When  ○ Patrón Builder para condiciones     ■ NumberConditio...
3. SceneBuilder● Binding condicional  ○ Ejemplo
3. SceneBuilder● Ejercicio 7  ○ Crear un Stage  ○ Con Text, CheckBox, TextField  ○ Enlazados a las propiedades    ■ x, y  ...
JavaFX4. Eventos, Manejadores y Filtros
4. Eventos, Manejadores yFiltros● Eventos en JavaFX  ○ Clasificados por tipo  ○ Tienen un origen y un destinatario    ■ No...
4. Eventos, Manejadores yFiltros● Eventos en JavaFX
4. Eventos, Manejadores yFiltros● Algunas Interfaces
4. Eventos, Manejadores yFiltros● Observable  ○ Permite registrar InvalidationListener  ○ Disparado al cambiar el valor de...
4. Eventos, Manejadores yFiltros● Filtros de Eventos  ○ Disparados durante la captura  ○ Registrables y eliminables de cua...
4. Eventos, Manejadores yFiltros● Manejadores de Eventos  ○ Disparados durante el bubbling  ○ Registrables y eliminables d...
4. Eventos, Manejadores yFiltros● Casos Particulares  ○ Eventos Comunes    ■ Mouse    ■ Key    ■ ContextMenu    ■ Drag  ○ ...
4. Eventos, Manejadores yFiltros● Añadir eventos a una propiedad  ○   addListener()  ○   Tipo ChangeListener  ○   Tipo Inv...
4. Eventos, Manejadores yFiltros● Ejercicio 8  ○ Añadir eventos a los ejercicios 6 y 7  ○ A través de propiedades    ■ Che...
4. Eventos, Manejadores yFiltros● Controles de Datos  ○   ListView  ○   TableView  ○   TreeView  ○   ChoiceBox  ○   ComboB...
4. Eventos, Manejadores yFiltros● ObservableList  ○ Construible mediante FXCollections  ○ Lista de Objetos con eventos    ...
4. Eventos, Manejadores yFiltros● ObservableMap  ○ Equivalente a ObservableList  ○ Evento Change específico
4. Eventos, Manejadores yFiltros● FXCollections  ○   observableList(List<T>)  ○   observableArrayList(T...)  ○   concat(Ob...
4. Eventos, Manejadores yFiltros● ListView de objetos  ○ Hay que componer cada item  ○ setCellFactory(Callback)  ○ Clase a...
4. Eventos, Manejadores yFiltros● ListView de objetos
4. Eventos, Manejadores yFiltros● TableView de objetos  ○   Hay que especificar cada columna  ○   TableColumn<Objeto, Stri...
4. Eventos, Manejadores yFiltros● TableView de objetos  ○ Valores editables    ■ setEditable()    ■ setCellFactory()    ■ ...
4. Eventos, Manejadores yFiltros● TableView de objetos  ○ Valores editables NO TextField    ■ setCellFactory()    ■ Extend...
4. Eventos, Manejadores yFiltros● TableView de objetos  ○ Clase TableCell<Objeto, String>    ■ startEdit()    ■ cancelEdit...
4. Eventos, Manejadores yFiltros● Binding de Colecciones  ○ Bindings.bindContentBidirectional(       ObservableList<T>, Ob...
4. Eventos, Manejadores yFiltros● Ejercicio 9  ○ Crear las clases Cliente, Pedido, Producto  ○ Crear un formulario de dato...
4. Eventos, Manejadores yFiltros● Eventos de tiempo
4. Eventos, Manejadores yFiltros● Atajos de teclado  ○ Aceleradores    ■ Combinaciones de teclas    ■ KeyCombination      ...
JavaFX5. Estilos CSS
5. Estilos CSS● JavaFX utiliza CSS para el aspecto de los  controles y escenas
5. Estilos CSS● ¿Qué es CSS?  ○ Cascade StyleSheet  ○ Clase (selector) y reglas de aspecto
5. Estilos CSS● Estilos por defecto  ○ caspian.css  ○ com/sun/javafx/scene/control/skin/caspian  ○ Selectores    ■ root   ...
5. Estilos CSS● Estilos por defecto  ○ caspian.css  ○ com/sun/javafx/scene/control/skin/caspian  ○ Reglas de aspecto    ■ ...
5. Estilos CSS● Estilos por defecto  ○ Funciones sobre estilos    ■ derive() hace un estilo más claro/oscuro    ■ ladder()...
5. Estilos CSS● Estilos personalizados  ○ Añadir el CSS a la escena    a. scene.getStylesheets().add("miCSS.css");    b. S...
5. Estilos CSS● Estilos personalizados  ○ Formatos del CSS    a. .button{}    b. .miClaseBoton{}    c. #miSelectorBoton{} ...
5. Estilos CSS● Limitaciones  ○ NO se admiten relaciones XPath    ■ :fist-child,:after, :before, :lang, :active, :focus, ....
5. Estilos CSS● Ejercicio 10  ○ Aplicar un estilo "hardcoded" a un control  ○ Crear un CSS de estilos sobrecargados  ○ Cre...
5. Estilos CSS● CSS compilado  ○   Formato binario BSS  ○   Mejora el rendimiento  ○   Para ficheros CSS grandes  ○   Carg...
JavaFX6. Contenido HTML
6. Contenido HTML● JavaFX soporta HTML5● El motor de renderizado HTML es Webkit  ○ Chrome  ○ Safari● Controles de Navegado...
6. Contenido HTML● javafx.scene.web.WebEngine  ○ Motor HTML  ○ NO visual  ○ Carga páginas en background  ○ Genera y ejecut...
6. Contenido HTML● Callbacks  ○ Eventos asociados a JavaScript            JavaScript         WebEngine            window.a...
6. Contenido HTML● Callbacks  ○ Ejecución de Scripts    ■ executeScript()  ○ Ejecución "desde" Scripts    ■ Un JS invoca a...
6. Contenido HTML● Document  ○   Modelo de representación de DOM  ○   getDocument()  ○   getElementById()  ○   Element  ○ ...
6. Contenido HTML● Mapeo de Objetos  ○ JS a Java    ■ netscape.javascript.JSObject    ■ JSObject jdoc = (JSObject) webEngi...
6. Contenido HTML● javafx.scene.web.WebView  ○   Nodo que gestiona un WebEngine  ○   Y muestra su contenido  ○   Gestiona ...
6. Contenido HTML● Ejercicio 11  ○ Conectar con Google  ○ Añadir un Text que muestre la búsqueda    ■ A mi escena  ○ Ocult...
JavaFX7. Aplicaciones Multipantalla
7. AplicacionesMultipantalla● Tipos de multipantalla  ○   Preloader  ○   Diálogos  ○   Popups  ○   Ventanas Modales  ○ Abr...
7. AplicacionesMultipantalla● Preloader  ○   Ventana de carga  ○   Con una barra de progreso  ○   Asociada a un Stage en c...
7. AplicacionesMultipantalla● Preloader
7. AplicacionesMultipantalla● Ventanas Emergentes  ○ Popups  ○ Clase específica que hereda Stage  ○ Con la ventana princip...
7. AplicacionesMultipantalla● Dialogos  ○   Ventanas emergentes modales  ○   Respuesta opcional (YES/NO/CANCEL)  ○   No ha...
7. AplicacionesMultipantalla● Ejercicio 12  ○ Crear una ventana emergente para ocultar la    escena  ○ O volver a mostrarla
7. AplicacionesMultipantalla● Ventanas Interactivas  ○   Son objetos de Java  ○   Utilizamos propiedades  ○   O campos est...
7. AplicacionesMultipantalla● Múltiples escenas en un Stage  ○ Opción 1: StackPane    ■ Pros        ●   Fácil de diseñar  ...
7. AplicacionesMultipantalla● Múltiples escenas en un Stage  ○ Opción 2: Cambiar el árbol de nodos    ■ Pros        ●   Co...
7. AplicacionesMultipantalla● Múltiples escenas en un Stage  ○ Solución de compromiso    ■ Usar StackPane como soporte    ...
7. AplicacionesMultipantalla● Múltiples escenas en un Stage  ○ Solución de compromiso    1. Extender StackPane    2. Almac...
7. AplicacionesMultipantalla● Múltiples escenas en un Stage  ○ Evento de fadeOut
7. AplicacionesMultipantalla● Múltiples escenas en un Stage  ○ Cambio de escena y evento de fadeIn
7. AplicacionesMultipantalla● Dispositivos móviles  ○   Tamaño reducido  ○   Memoria y procesador reducidos  ○   TouchScre...
7. AplicacionesMultipantalla● Dispositivos móviles
7. AplicacionesMultipantalla● Consideraciones de rendimiento  ○   Es importante un Scene pequeño  ○   Es importante que la...
JavaFX8. Threads
8. Threads● Clase javafx.application.Application  ○   Gestiona el hilo de ejecución de JavaFX  ○   launch(Application, arg...
8. Threads● Worker  ○ Interfaz javafx.concurrent.Worker  ○ Hilo que ejecuta un JavaFX Application  ○ No bloquea la platafo...
8. Threads● Clase javafx.concurrent.Task<T>  ○ Implementa la interfaz Worker  ○ Pero es abstracta  ○ Hay que definir el mé...
8. Threads● Ejercicio 13  ○   Crear una ventana que simule una tarea lenta  ○   Actualizando un ProgressBar  ○   Enlazando...
8. Threads● Clase javafx.concurrent.Service<T>  ○ Implementación reutilizable de Worker  ○ Permite resetear el estado de u...
JavaFX9. Empaquetado y Despliegue
9. Empaquetado yDespliegue● El empaquetado es esencial  ○ Para que la app sea ejecutable  ○ En distintos entornos (Escrito...
9. Empaquetado yDespliegue● Proceso de empaquetado
9. Empaquetado yDespliegue● Formatos de empaquetado  ○ Standalone    ■ Generado por defecto    ■ Ejecutado desde JVM  ○ Au...
9. Empaquetado yDespliegue● Ejemplo de paquete Web  ○   JAR ejecutable con la aplicación  ○   HTML con un JavaScript para ...
9. Empaquetado yDespliegue● Opciones de empaquetado  ○ Codificar las CSS    ■ Mejora el rendimiento    ■ Para ficheros CSS...
9. Empaquetado yDespliegue● ¿Cómo Empaquetar?  ○ NetBeans     ■ Muchas configuraciones automáticas     ■ En las propiedade...
9. Empaquetado yDespliegue● NetBeans
9. Empaquetado yDespliegue● Ant  ○ JDK 7  ○ ant-javafx.jar  ○ Tareas proporcionadas    ■ Crear JARs ejecutables    ■ Crear...
9. Empaquetado yDespliegue● Ant  ○ build.xml
9. Empaquetado yDespliegue● javafxpackager  ○   -createbss  ○   -createjar  ○   -deploy (app standalone)  ○   -deploy -nat...
9. Empaquetado yDespliegue● Aplicación autocontenida  ○ Sólo JDK 7u6  ○ Pros    ■ Se controla la JVM (no es necesario tene...
9. Empaquetado yDespliegue● Aplicación autocontenida  ○ Configuración por Ant  ○ nativeBundles en <fx:deploy>    ■ image  ...
9. Empaquetado yDespliegue● Despliegue en Navegador  ○   Libería Deployment Toolkit  ○   http://java.com/js/dtjava.js  ○  ...
9. Empaquetado yDespliegue● Despliegue en Navegador  ○ Admite eventos    ■ onGetSplash    ■ onDeployError    ■ ...  ○ Admi...
9. Empaquetado yDespliegue● Plantilla HTML  ○   #DT.SCRIPT.ULR#  ○   #DT.EMBED.CODE.ONLOAD(idDeLaApp)#  ○   ZZZ es el plac...
9. Empaquetado yDespliegue● Plantilla HTML
JavaFX10. Gráficos y Multimedia
10. Gráficos y Multimedia● JavaFX integra controles para  ○   Formas  ○   Charts  ○   Imágenes  ○   Videos  ○   Audio● Se ...
10. Gráficos y Multimedia● Formas  ○ javafx.scene.shape.*     ■ Líneas        ●   Arc, Line, Polyline, CubicCurve, QuadCur...
10. Gráficos y Multimedia● Charts  ○ javafx.scene.chart.*  ○ 3 partes     ■ Título     ■ Leyenda     ■ Contenido  ○ Usan d...
10. Gráficos y Multimedia● Charts  ○ PieChart    ■ ObservableList<PieChart.Data>    ■ new PieChart.Data("etiqueta", valor%)
10. Gráficos y Multimedia● Charts  ○ ScatterChart y LineChart    ■ ObservableList<XYChart.Series<X,Y>>    ■ new Series<Int...
10. Gráficos y Multimedia● Imágenes  ○ Control ImageView  ○ Utiliza un objeto javafx.scene.image.Image  ○ Construible con ...
10. Gráficos y Multimedia● Audio y video  ○ Framework de reproducción multimedia  ○ javafx.scene.media.*  ○ Clase Media   ...
10. Gráficos y Multimedia● Audio y video
10. Gráficos y Multimedia● Audio  ○ Soporta MP3, WAV, AIFF y AAC  ○ Clase AudioClip    ■ Para ficheros pequeños    ■ < 100KB
10. Gráficos y Multimedia● Audio  ○ Utilizando el framework de multimedia  ○ Admite metadatos del contenido
10. Gráficos y Multimedia● Video  ○ Formato de video nativo FXM  ○ Similar a Flash Video FLV  ○ Requiere un MediaView    ■...
10. Gráficos y Multimedia● Video  ○ Se pueden poner Markers al Media  ○ Y gestionarlos desde el MediaPayer
JavaFXMuchas Gracias
Upcoming SlideShare
Loading in...5
×

JavaFX 2

4,716

Published on

JavaFX es una tecnología que pretende facilitar la manera en que se construyen interfaces gráficas con Java.
La versión 2.x de este framework está totalmente construida como API de Java y mejora considerablemente respecto a su versión de scripting.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,716
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

JavaFX 2

  1. 1. JavaFXÓliver Centeno Álvarez
  2. 2. Contenidos 1. ¿Qué es JavaFX? 2. Construcción de Formularios 3. SceneBuilder 4. Eventos, Controladores y Filtros 5. Estilos CSS 6. Contenido HTML 7. Aplicaciones Multipantalla 8. Threads 9. Empaquetado y Despliegue10. Gráficos y Multimedia
  3. 3. JavaFX1. ¿Qué es JavaFX?
  4. 4. 1. ¿Qué es JavaFX?● Chris Oliver @ SeeBeyond● F3 (Form Follows Function)● Comprada por Sun en 2007● 1.0 JavaFX Script ○ Interpretado ○ Compilado (Elefante atravesando una puerta)● 1.3 Oracle JavaFX (2010)● 2.0 JavaFX API● 2.2.7 Versión actual (2013)
  5. 5. 1. ¿Qué es JavaFX?● Herramientas gráficas● Basadas en escenas● Multiplataforma● RIA● Runtime Específico● Desarrollo tipo Swing
  6. 6. 1. ¿Qué es JavaFX?● Instalación ○ JDK 1.7 ○ JavaFX SDK 2.2 ○ JavaFX SceneBuilder 1.0 ○ NetBeans IDE 7.3
  7. 7. 1. ¿Qué es JavaFX?● Primer JavaFX 1. Abrir NetBeans 2. New Project 3. JavaFX Application 4. Configurar JavaFX SDK 5. Indicar un nombre de proyecto 6. Indicar un nombre de clase 7. Ejecutar el proyecto
  8. 8. 1. ¿Qué es JavaFX?● Un ejemplo más complejo 1. Crear un objeto Text 2. Cambiar el color con setFill() 3. Cambiar la fuente con setFont() 4. Añadirlo a la ventana (root) 5. Ejecutar el proyecto 6. Arreglar el aspecto (Group)
  9. 9. 1. ¿Qué es JavaFX?● Ejercicio 1 ○ Crear múltiples textos ○ En posiciones aleatorias ○ Con colores aleatorios ○ Añadir rotación a los textos
  10. 10. 1. ¿Qué es JavaFX?● Efectos ○ Se pueden añadir sombras ■ DropShadow ■ InnerShadow ○ Brillos y Reflejos ■ Bloom ■ Glow ■ Reflection ○ Y otros efectos ■ javafx.scene.effect.* ■ setEffect()
  11. 11. 1. ¿Qué es JavaFX?● Caso Particular ○ Animaciones (javafx.animation) ○ Translate ■ Desplaza el texto ● setNode() ● setFromX(), setToX(), setByX() ■ Un periodo de tiempo ● setDuration() ■ Con una aceleración ● setInterpolator() ■ De manera cíclica ● setCycleCount() ● play()
  12. 12. 1. ¿Qué es JavaFX?● Ejercicio 2 ○ Probar algunos efectos ○ Desenfocados ■ BoxBlur ■ GaussianBlur ■ MotionBlur ○ Con fuente de luz ■ Glow ■ Lighting ○ Otros
  13. 13. JavaFX2. Creación de Formularios
  14. 14. 2. Creación de Formularios● El Objeto javafx.stage.Stage ○ Interfaz de una aplicación JavaFX ○ Independiente de dispositivo ○ Equivale a JFrame ■ setTitle() ■ show() ■ close() ■ centerOnScreen() ■ toBack() ■ toFront()
  15. 15. 2. Creación de Formularios● El Objeto javafx.stage.Stage ○ Owner ■ Ventana que contiene el stage ■ initOwner() ○ Modality ■ Especifica que la ventana sea modal ■ initModality() ○ StageStyle ■ Especifica el estilo de fondo de la ventana ■ initStyle()
  16. 16. 2. Creación de Formularios● El Objeto javafx.stage.Screen ○ Pantalla sobre la que se proyecta el Stage ○ Admite entornos multipantalla ■ getScreens() ■ getPrimary() ○ Permite consultar el tamaño ■ getBounds() ■ getVisualBounds() ○ Permite consultar la resolución ■ getDpi()
  17. 17. 2. Creación de Formularios● El Objeto javafx.scene.Scene ○ Elementos gráficos mostrados en el Stage ○ Permite indicar ■ Eventos ■ Cursor ■ Cámara ■ Mnemónicos ■ Css ■ etc ○ Permite capturar imágenes ○ Permite drag & drop
  18. 18. 2. Creación de Formularios● El Objeto javafx.scene.Scene ○ Modelo de árbol ○ Admite como raíz cualquier objeto javafx.scene. Node ■ Tipo Parent ● Group ● Region ■ Tipo Control ● Tipo Contenedor ● Tipo Componente ○ Caso particular: layouts (Paneles)
  19. 19. 2. Creación de Formularios● El Objeto javafx.scene.Group ○ Contiene otros controles ordenados ○ Propaga transformaciones, efectos y estados ○ SÍ posicionable, NO redimensionable ■ setLayoutX() ■ setAutoSizeChildren() ■ setRotation() ■ setStyle() ■ setScaleX() ■ setTranslateX() ■ ...
  20. 20. 2. Creación de Formularios● Ejercicio 3 ○ Probar los estilos de un Stage ○ Crear una ventana transparente ○ Centrada en la pantalla ○ Comprobar los límites de la pantalla ○ Crear un grupo de controles ○ Aplicarle rotaciones, escalas y transformaciones (desde el grupo, claro)
  21. 21. 2. Creación de Formularios● Jerarquía de Controles Node MediaView Canvas Parent Shape ImageView Control Group Region Chart Pane
  22. 22. 2. Creación de Formularios● Controles ○ Controles básicos ■ javafx.scene.control.* ■ javafx.scene.text.* ■ javafx.scene.web.* ○ Imágenes y formas ■ javafx.scene.image.* ■ javafx.scene.shape.* ■ javafx.scene.chart.* ■ javafx.scene.canvas.* ■ javafx.scene.paint.*
  23. 23. 2. Creación de Formularios● El Objeto javafx.scene.layout.Region ○ Área de la pantalla que contiene otros nodos ○ Se le puede dar forma ○ Admite CSS3 ○ Es redimensionable a la prefSize de los nodos ■ Region.USE_PREF_SIZE ○ Calcula el alto y ancho de los nodos ■ Region.USE_COMPUTED_SIZE ■ Teniendo en cuenta el max y el min ○ Permite recortar la escena (clip) ○ Permite cambiar el cursor de ratón ○ Permite especificar cómo se renderiza (blend)
  24. 24. 2. Creación de Formularios● Layouts
  25. 25. 2. Creación de Formularios● Layouts ○ GridPane ■ Rejilla de celdas variables ■ add(), addRow() y addColumn() ■ setHgap() y setVgap() ■ Parámetros ● row y column ● rowSpan y columnSpan ■ ColumnConstraints ● setPercentWidth() ● setHgrow() ● setHalignment() ● setFillWidth()
  26. 26. 2. Creación de Formularios● Layouts ○ BorderPane ■ Rejilla de 5 casillas (N, S, W, E, C) ■ N, S y C totalmente dimensionados ■ W y E ajustados ■ Habitual como raíz ■ Métodos ● setTop() ● setBottom() ● setLeft() ● setRight() ● setCenter()
  27. 27. 2. Creación de Formularios● Layouts ○ FlowPane ■ Componentes distribuidos en filas ■ O en columnas ■ setOrientation() ■ Según su tamaño ■ Permite alinear filas/cols ■ setColumnHalignment() ■ setRowValignment()
  28. 28. 2. Creación de Formularios● Layouts ○ AnchorPane ■ Panel de controles posicionables ■ Desplazamiento respecto de los bordes ■ Métodos estáticos ● setTopAnchor() ● setBottomAnchor() ● setLeftAnchor() ● setRightAnchor() ■ Redimensiona los nodos ■ Para cumplir restricciones
  29. 29. 2. Creación de Formularios● Layouts ○ TilePane ■ Rejilla de "tiles" de la misma dimensión ■ Horizontal o vertical ■ setOrientation() ■ Calcula su prefSize con ● setPrefColumns() ● setPrefRows() ■ Permite alinear los nodos ● setAlignment() ● setTileAlignment()
  30. 30. 2. Creación de Formularios● Layouts ○ StackPane ■ Panel de controles apilados ■ Orden Z ■ Permite alinear nodos ■ Permite poner márgenes ■ Métodos estáticos ● setAlignment() ● setMargin() ● clearConstraints()
  31. 31. 2. Creación de Formularios● Layouts ○ SplitPane ■ Control con divisiones (divider) ■ Horizontales o verticales ■ No hereda de Group ■ Los controles no se salen ■ Divisiones no superpuestas ■ Contiene items, no children ■ Redimensiona sus nodos ■ Pero es deshabilitable ● setResizableWithParent()
  32. 32. 2. Creación de Formularios● Layouts ○ TabPane ■ Control con pestañas posicionables a los 4 lados ■ Contiene Objetos tipo Tab ■ Cerrables o no ● setTabClosingPolicy() ■ Cada Tab contiene 1 nodo ● setContent() ■ Admite estilos CSS ■ Y ContextMenu
  33. 33. 2. Creación de Formularios● Layouts ○ TitledPane ■ Control etiquetado (Labeled) ■ Panel con un título ■ Colapsable o no ● setCollapsible() ● setExpanded() ■ Contiene 1 nodo ■ Se usa en conjunto ■ Acordeón
  34. 34. 2. Creación de Formularios● Layouts ○ Accordion ■ Conjunto de TitledPanes ■ Diseñado para que sólo 1 esté desplegado ■ setExpandedPane() ■ Contiene paneles ■ getPanes()
  35. 35. 2. Creación de Formularios● Layouts ○ HBox y VBox ■ Paneles horizontal y vertical respectivamente ■ Permite indicar el modo de redimensión ■ Permite añadir márgenes a los nodos ■ Métodos estáticos ● setHgrow() ● setVgrow() ● setMargin() ■ No importa el alto (HBox) ■ O el ancho (VBox)
  36. 36. 2. Creación de Formularios● Layouts
  37. 37. 2. Creación de Formularios● Ejercicio 4 ○ Crear una ventana BorderLayout ○ Con Layouts en cada extremo ■ Top ■ Bottom ■ Left ■ Right ■ Center ○ Distribuyendo componentes ○ Distintos en cada Layout
  38. 38. JavaFX3. SceneBuilder
  39. 39. 3. SceneBuilder● ¿Qué es SceneBuilder? 1. Aplicación de Diseño de Formularios ■ Drag & Drop ■ AnchorPane ■ Propiedades, Layout y Eventos ■ FXML 2. Paquete para construir Componentes ■ Clases Estáticas ■ Patrón Chaining ■ Patrón Builder ■ Patrón MVC ■ Formato árbol
  40. 40. 3. SceneBuilder
  41. 41. 3. SceneBuilder● Patrón MVC ○ FXML es un fichero de Vista ○ Admite una Clase Controller ○ Con métodos tipo evento ■ void evento(ActionEvent) ○ Para responder a las acciones de los controles● FXML ○ Namespace fx="http://javafx.com/fxml" ○ fx:controller="curso.ejemplos.MiControlador" ○ Atributos on ■ onAction="#evento"
  42. 42. 3. SceneBuilder● Ejercicio 5 ○ Diseñar la ventana del ejercicio 4 ○ Con SceneBuilder ○ Abrir el fichero FXML ○ Desde NetBeans ○ Probar el asistente de código
  43. 43. 3. SceneBuilder
  44. 44. 3. SceneBuilder● Objetos Builder ○ GroupBuilder.create().build() ○ TextBuilder.create().build() ○ CheckBoxBuilder.create().build() ○ ButtonBuilder.create().build() ○ TextFieldBuilder.create().build() ○ VBoxBuilder.create().build() ○ RectangleBuilder.create().build() ○ ImageViewBuilder.create().build() ○ ... ○ applyTo()
  45. 45. 3. SceneBuilder● Ejercicio 6 ○ Crear una escena tipo PONG ■ GroupBuilder ■ CircleBuilder ■ RectangleBuilder ■ ButtonBuilder ○ Rellenar la escena con un LinearGradient
  46. 46. 3. SceneBuilder● Propiedades y Binding ○ Todos los controles tienen propiedades ■ getter y setter (Java Bean) ■ Property (JavaFX Bean) ○ javafx.beans.property ■ StringProperty, SimpleStringProperty ■ BooleanProperty, SimpleBooleanProperty ■ ListProperty, SimpleListProperty ■ ... ○ Permiten enlazar valores de controles ○ Más sencillo que los Scripts de JavaFX 1.x
  47. 47. 3. SceneBuilder● Propiedades ○ getBean() ○ getName() ○ get() y getValue() ○ bind() y unbind() ○ bindBidirectional() ○ Métodos específicos ■ not(), or(), and() ■ greaterThan(), lessThan(), isEqualTo() ■ concat()
  48. 48. 3. SceneBuilder● Binding ○ Enlace de valores de un control ○ Normalmente a través de propiedades ○ javafx.beans.binding.Bindings ■ Permite capturar la modificación de valores ■ Y operar con ellos ■ add(), subtract(), multiply(), divide(),... ■ getValue() ■ format() ■ Implementa el Patrón Chaining
  49. 49. 3. SceneBuilder● Binding ○ Ejemplo: Área de un triángulo
  50. 50. 3. SceneBuilder● Binding condicional ○ javafx.beans,bindings.When ○ Patrón Builder para condiciones ■ NumberConditionBuilder ■ BooleanConditionBuilder ■ StringConditionBuilder ■ ObjectConditionBuilder ○ Aplicado sobre un binding ○ Admite Patrón Chaining ■ new When().then().otherwise()
  51. 51. 3. SceneBuilder● Binding condicional ○ Ejemplo
  52. 52. 3. SceneBuilder● Ejercicio 7 ○ Crear un Stage ○ Con Text, CheckBox, TextField ○ Enlazados a las propiedades ■ x, y ■ width, height, área del Stage ■ focus ■ resizable ■ title ○ Centrar los controles mediante binding
  53. 53. JavaFX4. Eventos, Manejadores y Filtros
  54. 54. 4. Eventos, Manejadores yFiltros● Eventos en JavaFX ○ Clasificados por tipo ○ Tienen un origen y un destinatario ■ Nodo seleccionado o en la posición marcada ○ Que puede recoger o no el evento ■ Fase de captura ■ Fase de Bubbling ○ Manejadores (Handlers) ○ Filtros (Filter) ○ Se puede consumir el evento ■ consume()
  55. 55. 4. Eventos, Manejadores yFiltros● Eventos en JavaFX
  56. 56. 4. Eventos, Manejadores yFiltros● Algunas Interfaces
  57. 57. 4. Eventos, Manejadores yFiltros● Observable ○ Permite registrar InvalidationListener ○ Disparado al cambiar el valor de una propiedad ○ O desde un objeto de binding● ObservableValue ○ Permite registrar ChangeListener ○ Disparado al cambiar el valor de una propiedad ○ Lazy binding● ReadOnlyProperty ○ Proporciona el getBean() y el getName()
  58. 58. 4. Eventos, Manejadores yFiltros● Filtros de Eventos ○ Disparados durante la captura ○ Registrables y eliminables de cualquier nodo ○ Se debe indicar el tipo de evento ■ Clase controladora EventHandler ■ Clase de evento EventType
  59. 59. 4. Eventos, Manejadores yFiltros● Manejadores de Eventos ○ Disparados durante el bubbling ○ Registrables y eliminables de cualquier nodo ○ Se debe indicar el tipo de evento ■ Clase controladora EventHandler ■ Clase de evento EventType
  60. 60. 4. Eventos, Manejadores yFiltros● Casos Particulares ○ Eventos Comunes ■ Mouse ■ Key ■ ContextMenu ■ Drag ○ Gestures ■ Scroll ■ Swipe ■ Touch ■ Rotate ■ Zoom
  61. 61. 4. Eventos, Manejadores yFiltros● Añadir eventos a una propiedad ○ addListener() ○ Tipo ChangeListener ○ Tipo InvalidationListener ○ removeListener()● Añadir eventos a un nodo ○ addEventFilter() ○ addEventHandler() ○ Tipo EventHandler
  62. 62. 4. Eventos, Manejadores yFiltros● Ejercicio 8 ○ Añadir eventos a los ejercicios 6 y 7 ○ A través de propiedades ■ CheckBox de fullScreen ○ A través de EventHandler ■ Botones de cierre y toBack() ■ Eventos de ratón ■ Eventos de teclado
  63. 63. 4. Eventos, Manejadores yFiltros● Controles de Datos ○ ListView ○ TableView ○ TreeView ○ ChoiceBox ○ ComboBox ○ MenuBar?
  64. 64. 4. Eventos, Manejadores yFiltros● ObservableList ○ Construible mediante FXCollections ○ Lista de Objetos con eventos ■ Tipo Change ○ Añadible a un control de datos
  65. 65. 4. Eventos, Manejadores yFiltros● ObservableMap ○ Equivalente a ObservableList ○ Evento Change específico
  66. 66. 4. Eventos, Manejadores yFiltros● FXCollections ○ observableList(List<T>) ○ observableArrayList(T...) ○ concat(ObservableList<T>...) ○ synchronizedObservableList(ObservableList<T>) ○ observableMap(Map<K,V>) ○ observableHashMap() ○ sort(ObservableList<T>) ○ reverse(ObservableList<T>) ○ rotate(ObservableList<T>,int) ○ shuffle(ObservableList<T>) ○ ...
  67. 67. 4. Eventos, Manejadores yFiltros● ListView de objetos ○ Hay que componer cada item ○ setCellFactory(Callback) ○ Clase abstracta a implementar ■ Método call() que devuelve una casilla ■ ListCell<Persona> ● Clase abstracta a implementar ● Método updateItem() para mostrar valores ● Control de tipo Labeled ● Admite etiqueta y Tooltip
  68. 68. 4. Eventos, Manejadores yFiltros● ListView de objetos
  69. 69. 4. Eventos, Manejadores yFiltros● TableView de objetos ○ Hay que especificar cada columna ○ TableColumn<Objeto, String> ○ Y asociar la propiedad ○ setCellValueFactory(new PropertyValueFactory())
  70. 70. 4. Eventos, Manejadores yFiltros● TableView de objetos ○ Valores editables ■ setEditable() ■ setCellFactory() ■ setOnEditCommit()
  71. 71. 4. Eventos, Manejadores yFiltros● TableView de objetos ○ Valores editables NO TextField ■ setCellFactory() ■ Extender TableCell<Objeto, String>
  72. 72. 4. Eventos, Manejadores yFiltros● TableView de objetos ○ Clase TableCell<Objeto, String> ■ startEdit() ■ cancelEdit() ■ updateItem(String, boolean) ■ isEditing() ■ setText(String) ■ setGraphic(Node)
  73. 73. 4. Eventos, Manejadores yFiltros● Binding de Colecciones ○ Bindings.bindContentBidirectional( ObservableList<T>, ObservableList<T>); ○ Enlaza la lista ○ Responde a cambios en la lista ○ No en los items ○ Resetear el item modificado en su posición ■ listaObservable.set( tableView.getTablePosition().getRow(), item);
  74. 74. 4. Eventos, Manejadores yFiltros● Ejercicio 9 ○ Crear las clases Cliente, Pedido, Producto ○ Crear un formulario de datos ○ Enlazar las propiedades de un cliente ○ Crear eventos de compra de producto ■ ListView de Productos ○ Enlazar el precio final del pedido ■ Según el tipo de cliente (normal/vip)
  75. 75. 4. Eventos, Manejadores yFiltros● Eventos de tiempo
  76. 76. 4. Eventos, Manejadores yFiltros● Atajos de teclado ○ Aceleradores ■ Combinaciones de teclas ■ KeyCombination ● KeyCodeCombination, KeyCharacterCombination ■ Disparan el evento onAction ○ Mnemonicos ■ Alt+Tecla ■ Poner un underscore _ ■ setMnemonicParsing(true) ■ Acceden al nodo
  77. 77. JavaFX5. Estilos CSS
  78. 78. 5. Estilos CSS● JavaFX utiliza CSS para el aspecto de los controles y escenas
  79. 79. 5. Estilos CSS● ¿Qué es CSS? ○ Cascade StyleSheet ○ Clase (selector) y reglas de aspecto
  80. 80. 5. Estilos CSS● Estilos por defecto ○ caspian.css ○ com/sun/javafx/scene/control/skin/caspian ○ Selectores ■ root ■ label, button, toggle-button, radio, check-box, hyperlink, menu, context-menu, choice-box,... ■ :disabled, :hover, :focused, :default, :armed, : selected, :visited, :showing, :filled,...
  81. 81. 5. Estilos CSS● Estilos por defecto ○ caspian.css ○ com/sun/javafx/scene/control/skin/caspian ○ Reglas de aspecto ■ -fx-* ■ background, color, disabled-color, dark-text-color, stroke, disabled-opacity, padding, font, effect,...
  82. 82. 5. Estilos CSS● Estilos por defecto ○ Funciones sobre estilos ■ derive() hace un estilo más claro/oscuro ■ ladder() hace una escala de colores ■ linear-gradient() ■ radial-gradient() ■ rgba() ○ Funciones de efectos ■ dropshadow() ■ innershadow()
  83. 83. 5. Estilos CSS● Estilos personalizados ○ Añadir el CSS a la escena a. scene.getStylesheets().add("miCSS.css"); b. SceneBuilder.create() .stylesheets(Ventana.class .getResource("miCSS.css") .toExternalForm())
  84. 84. 5. Estilos CSS● Estilos personalizados ○ Formatos del CSS a. .button{} b. .miClaseBoton{} c. #miSelectorBoton{} ○ ¿Cómo se aplica? a. Por defecto b. getStyleClass().add("miClaseBoton") c. setId("miSelectoBoton") d. setStyle("-fx-background-color: #373737;")
  85. 85. 5. Estilos CSS● Limitaciones ○ NO se admiten relaciones XPath ■ :fist-child,:after, :before, :lang, :active, :focus, ... ○ NO se admiten varios Font ■ Arial, Verdana, Courier; ○ Cada control sólo admite una clase CSS ■ Suplanta a la anterior ■ Usar selectores por ID
  86. 86. 5. Estilos CSS● Ejercicio 10 ○ Aplicar un estilo "hardcoded" a un control ○ Crear un CSS de estilos sobrecargados ○ Crear un CSS de estilos personalizados ■ Modo clase ■ Modo selector
  87. 87. 5. Estilos CSS● CSS compilado ○ Formato binario BSS ○ Mejora el rendimiento ○ Para ficheros CSS grandes ○ Cargar el fichero BSS en lugar del CSS
  88. 88. JavaFX6. Contenido HTML
  89. 89. 6. Contenido HTML● JavaFX soporta HTML5● El motor de renderizado HTML es Webkit ○ Chrome ○ Safari● Controles de Navegador ○ WebView ○ WebEngine
  90. 90. 6. Contenido HTML● javafx.scene.web.WebEngine ○ Motor HTML ○ NO visual ○ Carga páginas en background ○ Genera y ejecuta su ■ DOM ■ CSS ■ JavaScript ○ Permite interactuar con su contenido ■ Callbacks ■ Document ■ Mapeo de Objetos
  91. 91. 6. Contenido HTML● Callbacks ○ Eventos asociados a JavaScript JavaScript WebEngine window.alert() onAlert window.confirm() confirmHandler window.open() createPopupHandler window.open() onVisibilityChanged window.close() window.prompt() promptHandler
  92. 92. 6. Contenido HTML● Callbacks ○ Ejecución de Scripts ■ executeScript() ○ Ejecución "desde" Scripts ■ Un JS invoca a un método (público) de Java ■ JSObject
  93. 93. 6. Contenido HTML● Document ○ Modelo de representación de DOM ○ getDocument() ○ getElementById() ○ Element ○ EventTarget
  94. 94. 6. Contenido HTML● Mapeo de Objetos ○ JS a Java ■ netscape.javascript.JSObject ■ JSObject jdoc = (JSObject) webEngine.getDocument(); ■ JSObject window = (JSObject) webEngine.executeScript ("window"); ○ Java a JS ■ call() ■ eval() ■ getMember() ■ setMember()
  95. 95. 6. Contenido HTML● javafx.scene.web.WebView ○ Nodo que gestiona un WebEngine ○ Y muestra su contenido ○ Gestiona el scroll ○ Gestiona eventos ■ Ratón ■ Teclado
  96. 96. 6. Contenido HTML● Ejercicio 11 ○ Conectar con Google ○ Añadir un Text que muestre la búsqueda ■ A mi escena ○ Ocultar el botón "Buscar con Google"
  97. 97. JavaFX7. Aplicaciones Multipantalla
  98. 98. 7. AplicacionesMultipantalla● Tipos de multipantalla ○ Preloader ○ Diálogos ○ Popups ○ Ventanas Modales ○ Abrir/Cerrar ○ Interactivas
  99. 99. 7. AplicacionesMultipantalla● Preloader ○ Ventana de carga ○ Con una barra de progreso ○ Asociada a un Stage en construcción ○ Extender javafx.application.Preloader ○ Se ejecuta con un Application ○ notifyPreloader() ○ Proceso de background ■ javafx.concurrency.Task
  100. 100. 7. AplicacionesMultipantalla● Preloader
  101. 101. 7. AplicacionesMultipantalla● Ventanas Emergentes ○ Popups ○ Clase específica que hereda Stage ○ Con la ventana principal como Owner
  102. 102. 7. AplicacionesMultipantalla● Dialogos ○ Ventanas emergentes modales ○ Respuesta opcional (YES/NO/CANCEL) ○ No hay clases diálogo específicas ○ Opción ■ Librería https://github.com/hecklerm/DialogFX ■ Anton Smirnov ■ DialogFX ■ showDialog() ■ Type ● QUESTION, ACCEPT, INFO, ERROR
  103. 103. 7. AplicacionesMultipantalla● Ejercicio 12 ○ Crear una ventana emergente para ocultar la escena ○ O volver a mostrarla
  104. 104. 7. AplicacionesMultipantalla● Ventanas Interactivas ○ Son objetos de Java ○ Utilizamos propiedades ○ O campos estáticos ○ Se puede hacer binding ○ PERO ■ No perder de vista QUIÉN es la ventana PADRE
  105. 105. 7. AplicacionesMultipantalla● Múltiples escenas en un Stage ○ Opción 1: StackPane ■ Pros ● Fácil de diseñar ● Fácil de ejecutar ● Cambiar el panel que está encima ■ Contras ● Consume recursos ● La escena es grande ● La mayoría de controles no se utilizan
  106. 106. 7. AplicacionesMultipantalla● Múltiples escenas en un Stage ○ Opción 2: Cambiar el árbol de nodos ■ Pros ● Consume los recursos necesarios ● Puedo mantener escenas simples ● Como FXML separados ■ Contras ● Requiere más programación ● Se nota el cambio de nodos ● Hay que cargar cada FXML
  107. 107. 7. AplicacionesMultipantalla● Múltiples escenas en un Stage ○ Solución de compromiso ■ Usar StackPane como soporte ■ Cambiar el árbol de nodos ■ Con efectos de transición ● fade ● translate ● ... ■ Los eventos disparan el cambio de escena
  108. 108. 7. AplicacionesMultipantalla● Múltiples escenas en un Stage ○ Solución de compromiso 1. Extender StackPane 2. Almacenar los distintos árboles de nodos 3. Implementar el cambio de pantalla ● Timeline 4. Implementar la eliminación de la escena ● EventHandler<ActionEvent>
  109. 109. 7. AplicacionesMultipantalla● Múltiples escenas en un Stage ○ Evento de fadeOut
  110. 110. 7. AplicacionesMultipantalla● Múltiples escenas en un Stage ○ Cambio de escena y evento de fadeIn
  111. 111. 7. AplicacionesMultipantalla● Dispositivos móviles ○ Tamaño reducido ○ Memoria y procesador reducidos ○ TouchScreen ○ DESLIZAR ○ Truco ■ Usar una imagen de fondo ■ Suficientemente grande ■ Y desplazar el clip() o un panel...
  112. 112. 7. AplicacionesMultipantalla● Dispositivos móviles
  113. 113. 7. AplicacionesMultipantalla● Consideraciones de rendimiento ○ Es importante un Scene pequeño ○ Es importante que la navegación sea fácil ○ Es importante que cada ventana tenga sus eventos ○ Se puede usar StackPane ○ Pero con cuidado
  114. 114. JavaFX8. Threads
  115. 115. 8. Threads● Clase javafx.application.Application ○ Gestiona el hilo de ejecución de JavaFX ○ launch(Application, args) ○ init() ○ start(Stage) ○ stop() ○ getParameters()● Clase javafx.application.Platform ○ Gestiona la ejecución de hilos JavaFX ○ exit() ○ setImplicitExit() ○ runLater()
  116. 116. 8. Threads● Worker ○ Interfaz javafx.concurrent.Worker ○ Hilo que ejecuta un JavaFX Application ○ No bloquea la plataforma ○ Gestiona eventos de ejecución ■ runLater() ○ Es cancelable ○ Almacena ■ Estado de la tarea ■ Cantidad de trabajo realizada ■ Resultado de la tarea ■ Información descriptiva
  117. 117. 8. Threads● Clase javafx.concurrent.Task<T> ○ Implementa la interfaz Worker ○ Pero es abstracta ○ Hay que definir el método call()
  118. 118. 8. Threads● Ejercicio 13 ○ Crear una ventana que simule una tarea lenta ○ Actualizando un ProgressBar ○ Enlazando sus propiedades ○ Haciendo la tarea cancelable
  119. 119. 8. Threads● Clase javafx.concurrent.Service<T> ○ Implementación reutilizable de Worker ○ Permite resetear el estado de un Worker ■ reset() ■ restart() ○ También es abstracta ○ Hay que implementar el método createTast() ○ Que devuelve un Task<T>
  120. 120. JavaFX9. Empaquetado y Despliegue
  121. 121. 9. Empaquetado yDespliegue● El empaquetado es esencial ○ Para que la app sea ejecutable ○ En distintos entornos (Escritorio, Web, Movil)● Empaquetar a mano es complicado● Herramienta JavaFX Packaging Tools ○ Garantiza que contiene las librerías de FX ○ Permite descargar dependencias ○ Ofrece al usuario información visual ○ Instalador o app autocontenida ○ javafxpackager
  122. 122. 9. Empaquetado yDespliegue● Proceso de empaquetado
  123. 123. 9. Empaquetado yDespliegue● Formatos de empaquetado ○ Standalone ■ Generado por defecto ■ Ejecutado desde JVM ○ Autocontenido ■ Con una JVM embebida ■ Opción de instalador específico ○ Aplicación WebStart ○ Aplicación embebida en Web ■ Ejecutada como Applet ■ Configurada mediante JavaScript ■ Plantilla HTML
  124. 124. 9. Empaquetado yDespliegue● Ejemplo de paquete Web ○ JAR ejecutable con la aplicación ○ HTML con un JavaScript para lanzarla ○ Deployment Descriptor JNLP ○ Otros JAR y recursos
  125. 125. 9. Empaquetado yDespliegue● Opciones de empaquetado ○ Codificar las CSS ■ Mejora el rendimiento ■ Para ficheros CSS grandes ■ BSS ○ Firmar el empaquetado ○ Configurar el Deployment Descriptor ■ Tamaño preferido del Stage ■ Requisitos de plataforma y opciones JVM ■ Permisos requeridos ■ ... ○ Plantilla HTML
  126. 126. 9. Empaquetado yDespliegue● ¿Cómo Empaquetar? ○ NetBeans ■ Muchas configuraciones automáticas ■ En las propiedades del proyecto ○ Ant ■ Tareas específicas ■ <fx:*> ○ javafxpackager ■ Comando de consola ■ Modificadores de configuración
  127. 127. 9. Empaquetado yDespliegue● NetBeans
  128. 128. 9. Empaquetado yDespliegue● Ant ○ JDK 7 ○ ant-javafx.jar ○ Tareas proporcionadas ■ Crear JARs ejecutables ■ Crear HTML y JNLP para Web y WebStart ■ Firmar JARs ■ Compilar CSS ■ Empaquetar aplicaciones autocontenidas ● nativeBundles="image" ● nativeBundles="installer" ● nativeBundles="all"
  129. 129. 9. Empaquetado yDespliegue● Ant ○ build.xml
  130. 130. 9. Empaquetado yDespliegue● javafxpackager ○ -createbss ○ -createjar ○ -deploy (app standalone) ○ -deploy -native ○ -makeall (createjar + deploy) ○ -signJar ○ -outdir ○ -srcdir ○ ...
  131. 131. 9. Empaquetado yDespliegue● Aplicación autocontenida ○ Sólo JDK 7u6 ○ Pros ■ Se controla la JVM (no es necesario tenerla) ■ Se muestra un instalador ■ No se requieren privilegios de administrador ○ Contras ■ Exige descargar partes de la app ■ Versiones distintas para cada entorno ■ Hay que gestionar las actualizaciones
  132. 132. 9. Empaquetado yDespliegue● Aplicación autocontenida ○ Configuración por Ant ○ nativeBundles en <fx:deploy> ■ image ■ exe ■ msi ■ dmg ■ rpm ■ deb ○ Requieren herramientas de terceros ■ InnoSetup, WiX, RPM Builder,...
  133. 133. 9. Empaquetado yDespliegue● Despliegue en Navegador ○ Libería Deployment Toolkit ○ http://java.com/js/dtjava.js ○ Genera JavaScript ○ Detecta el runtime ○ Descarga dependencias ○ Informa al usuario ○ Ant <fx:deploy>
  134. 134. 9. Empaquetado yDespliegue● Despliegue en Navegador ○ Admite eventos ■ onGetSplash ■ onDeployError ■ ... ○ Admite paso de parámetros ○ Permite acceder a código JavaFX ■ Configurar un id al crear la dtjava.App ■ document.getElementById(id) ■ Ejecutar un método público
  135. 135. 9. Empaquetado yDespliegue● Plantilla HTML ○ #DT.SCRIPT.ULR# ○ #DT.EMBED.CODE.ONLOAD(idDeLaApp)# ○ ZZZ es el placeholder de dtjava ○ Configurable con Ant <fx:template>
  136. 136. 9. Empaquetado yDespliegue● Plantilla HTML
  137. 137. JavaFX10. Gráficos y Multimedia
  138. 138. 10. Gráficos y Multimedia● JavaFX integra controles para ○ Formas ○ Charts ○ Imágenes ○ Videos ○ Audio● Se insertan como controles normales
  139. 139. 10. Gráficos y Multimedia● Formas ○ javafx.scene.shape.* ■ Líneas ● Arc, Line, Polyline, CubicCurve, QuadCurve, Path, MoveTo ■ Figuras geométricas ● Circle, Ellipse, Polygon, Rectangle ■ Otros ● SVGPath, Text
  140. 140. 10. Gráficos y Multimedia● Charts ○ javafx.scene.chart.* ○ 3 partes ■ Título ■ Leyenda ■ Contenido ○ Usan datos de tipo ObservableList<T>
  141. 141. 10. Gráficos y Multimedia● Charts ○ PieChart ■ ObservableList<PieChart.Data> ■ new PieChart.Data("etiqueta", valor%)
  142. 142. 10. Gráficos y Multimedia● Charts ○ ScatterChart y LineChart ■ ObservableList<XYChart.Series<X,Y>> ■ new Series<Integer, Double>() ■ new XYChart.Data(x, y)
  143. 143. 10. Gráficos y Multimedia● Imágenes ○ Control ImageView ○ Utiliza un objeto javafx.scene.image.Image ○ Construible con una URL
  144. 144. 10. Gráficos y Multimedia● Audio y video ○ Framework de reproducción multimedia ○ javafx.scene.media.* ○ Clase Media ■ Construye un objeto multimedia ■ A partir de un recurso cargado por path ○ Clase MediaPlayer ■ Reproduce objetos Media ■ play(), pause(), stop(), seek(),... ○ Clase MediaView ■ Nodo que muestra un Media reproducido por un MediaPlayer
  145. 145. 10. Gráficos y Multimedia● Audio y video
  146. 146. 10. Gráficos y Multimedia● Audio ○ Soporta MP3, WAV, AIFF y AAC ○ Clase AudioClip ■ Para ficheros pequeños ■ < 100KB
  147. 147. 10. Gráficos y Multimedia● Audio ○ Utilizando el framework de multimedia ○ Admite metadatos del contenido
  148. 148. 10. Gráficos y Multimedia● Video ○ Formato de video nativo FXM ○ Similar a Flash Video FLV ○ Requiere un MediaView ■ Admite ViewPort
  149. 149. 10. Gráficos y Multimedia● Video ○ Se pueden poner Markers al Media ○ Y gestionarlos desde el MediaPayer
  150. 150. JavaFXMuchas Gracias

×