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.

1. JavaFX
Óliver Centeno Álvarez

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 Despliegue
10. Gráficos y Multimedia

3. JavaFX
1. ¿Qué es JavaFX?

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. 1. ¿Qué es JavaFX?
● Herramientas gráficas
● Basadas en escenas
● Multiplataforma
● RIA
● Runtime Específico
● Desarrollo tipo Swing

6. 1. ¿Qué es JavaFX?
● Instalación
○ JDK 1.7
○ JavaFX SDK 2.2
○ JavaFX SceneBuilder 1.0
○ NetBeans IDE 7.3

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. 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. 1. ¿Qué es JavaFX?
● Ejercicio 1
○ Crear múltiples textos
○ En posiciones aleatorias
○ Con colores aleatorios
○ Añadir rotación a los textos

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. 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. 1. ¿Qué es JavaFX?
● Ejercicio 2
○ Probar algunos efectos
○ Desenfocados
■ BoxBlur
■ GaussianBlur
■ MotionBlur
○ Con fuente de luz
■ Glow
■ Lighting
○ Otros

13. JavaFX
2. Creación de Formularios

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. 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. 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. 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. 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. 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. 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. 2. Creación de Formularios
● Jerarquía de Controles
Node
MediaView Canvas Parent Shape ImageView
Control Group Region
Chart Pane

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. 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. 2. Creación de Formularios
● Layouts

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. 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. 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. 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. 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. 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. 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. 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. 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. 2. Creación de Formularios
● Layouts
○ Accordion
■ Conjunto de TitledPanes
■ Diseñado para que sólo 1 esté desplegado
■ setExpandedPane()
■ Contiene paneles
■ getPanes()

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. 2. Creación de Formularios
● Layouts

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. JavaFX
3. SceneBuilder

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. 3. SceneBuilder

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. 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. 3. SceneBuilder

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. 3. SceneBuilder
● Ejercicio 6
○ Crear una escena tipo PONG
■ GroupBuilder
■ CircleBuilder
■ RectangleBuilder
■ ButtonBuilder
○ Rellenar la escena con un
LinearGradient

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. 3. SceneBuilder
● Propiedades
○ getBean()
○ getName()
○ get() y getValue()
○ bind() y unbind()
○ bindBidirectional()
○ Métodos específicos
■ not(), or(), and()
■ greaterThan(), lessThan(), isEqualTo()
■ concat()

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. 3. SceneBuilder
● Binding
○ Ejemplo: Área de un triángulo

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. 3. SceneBuilder
● Binding condicional
○ Ejemplo

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. JavaFX
4. Eventos, Manejadores y Filtros

54. 4. Eventos, Manejadores y
Filtros
● 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. 4. Eventos, Manejadores y
Filtros
● Eventos en JavaFX

56. 4. Eventos, Manejadores y
Filtros
● Algunas Interfaces

57. 4. Eventos, Manejadores y
Filtros
● 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. 4. Eventos, Manejadores y
Filtros
● 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. 4. Eventos, Manejadores y
Filtros
● 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. 4. Eventos, Manejadores y
Filtros
● Casos Particulares
○ Eventos Comunes
■ Mouse
■ Key
■ ContextMenu
■ Drag
○ Gestures
■ Scroll
■ Swipe
■ Touch
■ Rotate
■ Zoom

61. 4. Eventos, Manejadores y
Filtros
● Añadir eventos a una propiedad
○ addListener()
○ Tipo ChangeListener
○ Tipo InvalidationListener
○ removeListener()
● Añadir eventos a un nodo
○ addEventFilter()
○ addEventHandler()
○ Tipo EventHandler

62. 4. Eventos, Manejadores y
Filtros
● 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. 4. Eventos, Manejadores y
Filtros
● Controles de Datos
○ ListView
○ TableView
○ TreeView
○ ChoiceBox
○ ComboBox
○ MenuBar?

64. 4. Eventos, Manejadores y
Filtros
● ObservableList
○ Construible mediante FXCollections
○ Lista de Objetos con eventos
■ Tipo Change
○ Añadible a un control de datos

65. 4. Eventos, Manejadores y
Filtros
● ObservableMap
○ Equivalente a ObservableList
○ Evento Change específico

66. 4. Eventos, Manejadores y
Filtros
● 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. 4. Eventos, Manejadores y
Filtros
● 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. 4. Eventos, Manejadores y
Filtros
● ListView de objetos

69. 4. Eventos, Manejadores y
Filtros
● TableView de objetos
○ Hay que especificar cada columna
○ TableColumn<Objeto, String>
○ Y asociar la propiedad
○ setCellValueFactory(new PropertyValueFactory())

70. 4. Eventos, Manejadores y
Filtros
● TableView de objetos
○ Valores editables
■ setEditable()
■ setCellFactory()
■ setOnEditCommit()

71. 4. Eventos, Manejadores y
Filtros
● TableView de objetos
○ Valores editables NO TextField
■ setCellFactory()
■ Extender TableCell<Objeto, String>

72. 4. Eventos, Manejadores y
Filtros
● TableView de objetos
○ Clase TableCell<Objeto, String>
■ startEdit()
■ cancelEdit()
■ updateItem(String, boolean)
■ isEditing()
■ setText(String)
■ setGraphic(Node)

73. 4. Eventos, Manejadores y
Filtros
● 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. 4. Eventos, Manejadores y
Filtros
● 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. 4. Eventos, Manejadores y
Filtros
● Eventos de tiempo

76. 4. Eventos, Manejadores y
Filtros
● 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. JavaFX
5. Estilos CSS

78. 5. Estilos CSS
● JavaFX utiliza CSS para el aspecto de los
controles y escenas

79. 5. Estilos CSS
● ¿Qué es CSS?
○ Cascade StyleSheet
○ Clase (selector) y reglas de aspecto

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. 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. 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. 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. 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. 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. 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. 5. Estilos CSS
● CSS compilado
○ Formato binario BSS
○ Mejora el rendimiento
○ Para ficheros CSS grandes
○ Cargar el fichero BSS en lugar del CSS

88. JavaFX
6. Contenido HTML

89. 6. Contenido HTML
● JavaFX soporta HTML5
● El motor de renderizado HTML es Webkit
○ Chrome
○ Safari
● Controles de Navegador
○ WebView
○ WebEngine

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. 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. 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. 6. Contenido HTML
● Document
○ Modelo de representación de DOM
○ getDocument()
○ getElementById()
○ Element
○ EventTarget

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. 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. 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. JavaFX
7. Aplicaciones Multipantalla

98. 7. Aplicaciones
Multipantalla
● Tipos de multipantalla
○ Preloader
○ Diálogos
○ Popups
○ Ventanas Modales
○ Abrir/Cerrar
○ Interactivas

99. 7. Aplicaciones
Multipantalla
● 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. 7. Aplicaciones
Multipantalla
● Preloader

101. 7. Aplicaciones
Multipantalla
● Ventanas Emergentes
○ Popups
○ Clase específica que hereda Stage
○ Con la ventana principal como Owner

102. 7. Aplicaciones
Multipantalla
● 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. 7. Aplicaciones
Multipantalla
● Ejercicio 12
○ Crear una ventana emergente para ocultar la
escena
○ O volver a mostrarla

104. 7. Aplicaciones
Multipantalla
● 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. 7. Aplicaciones
Multipantalla
● 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. 7. Aplicaciones
Multipantalla
● 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. 7. Aplicaciones
Multipantalla
● 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. 7. Aplicaciones
Multipantalla
● 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. 7. Aplicaciones
Multipantalla
● Múltiples escenas en un Stage
○ Evento de fadeOut

110. 7. Aplicaciones
Multipantalla
● Múltiples escenas en un Stage
○ Cambio de escena y evento de fadeIn

111. 7. Aplicaciones
Multipantalla
● 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. 7. Aplicaciones
Multipantalla
● Dispositivos móviles

113. 7. Aplicaciones
Multipantalla
● 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. JavaFX
8. Threads

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. 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. 8. Threads
● Clase javafx.concurrent.Task<T>
○ Implementa la interfaz Worker
○ Pero es abstracta
○ Hay que definir el método call()

118. 8. Threads
● Ejercicio 13
○ Crear una ventana que simule una tarea lenta
○ Actualizando un ProgressBar
○ Enlazando sus propiedades
○ Haciendo la tarea cancelable

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. JavaFX
9. Empaquetado y Despliegue

121. 9. Empaquetado y
Despliegue
● 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. 9. Empaquetado y
Despliegue
● Proceso de empaquetado

123. 9. Empaquetado y
Despliegue
● 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. 9. Empaquetado y
Despliegue
● Ejemplo de paquete Web
○ JAR ejecutable con la aplicación
○ HTML con un JavaScript para lanzarla
○ Deployment Descriptor JNLP
○ Otros JAR y recursos

125. 9. Empaquetado y
Despliegue
● 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. 9. Empaquetado y
Despliegue
● ¿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. 9. Empaquetado y
Despliegue
● NetBeans

128. 9. Empaquetado y
Despliegue
● 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. 9. Empaquetado y
Despliegue
● Ant
○ build.xml

130. 9. Empaquetado y
Despliegue
● javafxpackager
○ -createbss
○ -createjar
○ -deploy (app standalone)
○ -deploy -native
○ -makeall (createjar + deploy)
○ -signJar
○ -outdir
○ -srcdir
○ ...

131. 9. Empaquetado y
Despliegue
● 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. 9. Empaquetado y
Despliegue
● 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. 9. Empaquetado y
Despliegue
● 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. 9. Empaquetado y
Despliegue
● 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. 9. Empaquetado y
Despliegue
● Plantilla HTML
○ #DT.SCRIPT.ULR#
○ #DT.EMBED.CODE.ONLOAD(idDeLaApp)#
○ ZZZ es el placeholder de dtjava
○ Configurable con Ant <fx:template>

136. 9. Empaquetado y
Despliegue
● Plantilla HTML

137. JavaFX
10. Gráficos y Multimedia

138. 10. Gráficos y Multimedia
● JavaFX integra controles para
○ Formas
○ Charts
○ Imágenes
○ Videos
○ Audio
● Se insertan como controles normales

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. 10. Gráficos y Multimedia
● Charts
○ javafx.scene.chart.*
○ 3 partes
■ Título
■ Leyenda
■ Contenido
○ Usan datos de tipo ObservableList<T>

141. 10. Gráficos y Multimedia
● Charts
○ PieChart
■ ObservableList<PieChart.Data>
■ new PieChart.Data("etiqueta", valor%)

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. 10. Gráficos y Multimedia
● Imágenes
○ Control ImageView
○ Utiliza un objeto javafx.scene.image.Image
○ Construible con una URL

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. 10. Gráficos y Multimedia
● Audio y video

146. 10. Gráficos y Multimedia
● Audio
○ Soporta MP3, WAV, AIFF y AAC
○ Clase AudioClip
■ Para ficheros pequeños
■ < 100KB

147. 10. Gráficos y Multimedia
● Audio
○ Utilizando el framework de multimedia
○ Admite metadatos del contenido

148. 10. Gráficos y Multimedia
● Video
○ Formato de video nativo FXM
○ Similar a Flash Video FLV
○ Requiere un MediaView
■ Admite ViewPort

149. 10. Gráficos y Multimedia
● Video
○ Se pueden poner Markers al Media
○ Y gestionarlos desde el MediaPayer

150. JavaFX
Muchas Gracias