JavaFX 2

JavaFX
Óliver Centeno Álvarez

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

● 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)


● Herramientas gráficas
● Basadas en escenas
● Multiplataforma
● RIA
● Runtime Específico
● Desarrollo tipo Swing

● Instalación
○ JDK 1.7
○ JavaFX SDK 2.2
○ JavaFX SceneBuilder 1.0
○ NetBeans IDE 7.3

● 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

● 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)

● Ejercicio 1

○ Crear múltiples textos
○ En posiciones aleatorias
○ Con colores aleatorios
○ Añadir rotación a los textos

● Efectos
○ Se pueden añadir sombras
■ DropShadow
■ InnerShadow
○ Brillos y Reflejos
■ Bloom
■ Glow
■ Reflection
○ Y otros efectos
■ javafx.scene.effect.*
■ setEffect()

● 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()

● Ejercicio 2
○ Probar algunos efectos
○ Desenfocados
■ BoxBlur
■ GaussianBlur
■ MotionBlur
○ Con fuente de luz
■ Glow
■ Lighting
○ Otros

JavaFX
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()

● 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()

● 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()

● 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

● 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)

● El Objeto javafx.scene.Group
○ Contiene otros controles ordenados
○ Propaga transformaciones, efectos y estados
○ SÍ posicionable, NO redimensionable
■ setLayoutX()
■ setAutoSizeChildren()
■ setRotation()
■ setStyle()
■ setScaleX()
■ setTranslateX()
■ ...

● 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)

● Jerarquía de Controles

Node

MediaView Canvas Parent Shape ImageView

Control Group Region

Chart Pane

● 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.*

● 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)

● Layouts

● 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()

● 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()

● Layouts
○ FlowPane
■ Componentes distribuidos en filas
■ O en columnas
■ setOrientation()
■ Según su tamaño
■ Permite alinear filas/cols
■ setColumnHalignment()
■ setRowValignment()

● 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

● 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()

● Layouts
○ StackPane
■ Panel de controles apilados
■ Orden Z
■ Permite alinear nodos
■ Permite poner márgenes
● setAlignment()
● setMargin()
● clearConstraints()

● 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()

● 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

● Layouts
○ TitledPane
■ Control etiquetado (Labeled)
■ Panel con un título
■ Colapsable o no
● setCollapsible()
● setExpanded()
■ Contiene 1 nodo
■ Se usa en conjunto
■ Acordeón

● Layouts
○ Accordion
■ Conjunto de TitledPanes
■ Diseñado para que sólo 1 esté desplegado
■ setExpandedPane()
■ Contiene paneles
■ getPanes()

● Layouts
○ HBox y VBox
■ Paneles horizontal y vertical respectivamente
■ Permite indicar el modo de redimensión
■ Permite añadir márgenes a los nodos
● setHgrow()
● setVgrow()
● setMargin()
■ No importa el alto (HBox)
■ O el ancho (VBox)

● Ejercicio 4

○ Crear una ventana BorderLayout
○ Con Layouts en cada extremo
■ Top
■ Bottom
■ Left
■ Right
■ Center
○ Distribuyendo componentes
○ Distintos en cada Layout

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

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"

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

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()

3. SceneBuilder
● Ejercicio 6

○ Crear una escena tipo PONG
■ GroupBuilder
■ CircleBuilder
■ RectangleBuilder
■ ButtonBuilder
○ Rellenar la escena con un
LinearGradient

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

3. SceneBuilder
● Propiedades
○ getBean()
○ getName()
○ get() y getValue()
○ bind() y unbind()
○ bindBidirectional()
○ Métodos específicos
■ not(), or(), and()
■ greaterThan(), lessThan(), isEqualTo()
■ concat()

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

3. SceneBuilder
● Binding
○ Ejemplo: Área de un triángulo

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()

3. SceneBuilder
● Binding condicional
○ Ejemplo

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

JavaFX
4. Eventos, Manejadores y Filtros

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()

Filtros
● Eventos en JavaFX

Filtros
● Algunas Interfaces

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()

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

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

Filtros
● Casos Particulares
○ Eventos Comunes
■ Mouse
■ Key
■ ContextMenu
■ Drag
○ Gestures
■ Scroll
■ Swipe
■ Touch
■ Rotate
■ Zoom

Filtros
● Añadir eventos a una propiedad
○ addListener()
○ Tipo ChangeListener
○ Tipo InvalidationListener
○ removeListener()

● Añadir eventos a un nodo
○ addEventFilter()
○ addEventHandler()
○ Tipo EventHandler

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

Filtros
● Controles de Datos

○ ListView
○ TableView
○ TreeView
○ ChoiceBox
○ ComboBox
○ MenuBar?

Filtros
● ObservableList
○ Construible mediante FXCollections
○ Lista de Objetos con eventos
■ Tipo Change
○ Añadible a un control de datos

Filtros
● ObservableMap
○ Equivalente a ObservableList
○ Evento Change específico

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>)
○ ...

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

Filtros
● ListView de objetos

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

Filtros
○ Valores editables
■ setEditable()
■ setCellFactory()
■ setOnEditCommit()

Filtros
○ Valores editables NO TextField
■ setCellFactory()
■ Extender TableCell<Objeto, String>

Filtros
○ Clase TableCell<Objeto, String>
■ startEdit()
■ cancelEdit()
■ updateItem(String, boolean)
■ isEditing()
■ setText(String)
■ setGraphic(Node)

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);

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)

Filtros
● Eventos de tiempo

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

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
■ label, button, toggle-button, radio, check-box,
hyperlink, menu, context-menu, choice-box,...
■ :disabled, :hover, :focused, :default, :armed, :
selected, :visited, :showing, :filled,...

5. Estilos CSS
○ 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,...

5. Estilos CSS
○ 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()

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())

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;")

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

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

5. Estilos CSS
● CSS compilado
○ Formato binario BSS
○ Mejora el rendimiento
○ Para ficheros CSS grandes
○ Cargar el fichero BSS en lugar del CSS

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

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

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

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

6. Contenido HTML
● Document
○ Modelo de representación de DOM
○ getDocument()
○ getElementById()
○ Element
○ EventTarget

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()

6. Contenido HTML
● javafx.scene.web.WebView
○ Nodo que gestiona un WebEngine
○ Y muestra su contenido
○ Gestiona el scroll
○ Gestiona eventos
■ Ratón
■ Teclado

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"

JavaFX
7. Aplicaciones Multipantalla

7. Aplicaciones
Multipantalla
● Tipos de multipantalla
○ Preloader
○ Diálogos
○ Popups
○ Ventanas Modales

○ Abrir/Cerrar
○ Interactivas

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

7. Aplicaciones
Multipantalla
● Preloader

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

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

7. Aplicaciones
Multipantalla
● Ejercicio 12

○ Crear una ventana emergente para ocultar la
escena
○ O volver a mostrarla

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

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

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

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

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

7. Aplicaciones
Multipantalla
○ Evento de fadeOut

7. Aplicaciones
Multipantalla
○ Cambio de escena y evento de fadeIn

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

7. Aplicaciones
Multipantalla
● Dispositivos móviles

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

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()

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

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

8. Threads
● Ejercicio 13

○ Crear una ventana que simule una tarea lenta
○ Actualizando un ProgressBar
○ Enlazando sus propiedades
○ Haciendo la tarea cancelable

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>

JavaFX
9. Empaquetado y Despliegue

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

9. Empaquetado y
Despliegue
● Proceso de empaquetado

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

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

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

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

9. Empaquetado y
Despliegue
● NetBeans

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"

9. Empaquetado y
Despliegue
● Ant
○ build.xml

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

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

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

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>

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

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>

9. Empaquetado y
Despliegue
● Plantilla HTML

JavaFX

● JavaFX integra controles para
○ Formas
○ Charts
○ Imágenes
○ Videos
○ Audio
● Se insertan como controles normales

● Formas
○ javafx.scene.shape.*
■ Líneas
● Arc, Line, Polyline, CubicCurve, QuadCurve, Path, MoveTo
■ Figuras geométricas
● Circle, Ellipse, Polygon, Rectangle
■ Otros
● SVGPath, Text

● Charts
○ javafx.scene.chart.*
○ 3 partes
■ Título
■ Leyenda
■ Contenido
○ Usan datos de tipo ObservableList<T>

● Charts
○ PieChart
■ ObservableList<PieChart.Data>
■ new PieChart.Data("etiqueta", valor%)

● Charts
○ ScatterChart y LineChart
■ ObservableList<XYChart.Series<X,Y>>
■ new Series<Integer, Double>()
■ new XYChart.Data(x, y)

● Imágenes
○ Control ImageView
○ Utiliza un objeto javafx.scene.image.Image
○ Construible con una URL

● 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

● Audio y video

● Audio
○ Soporta MP3, WAV, AIFF y AAC
○ Clase AudioClip
■ Para ficheros pequeños
■ < 100KB

● Audio
○ Utilizando el framework de multimedia
○ Admite metadatos del contenido

● Video
○ Formato de video nativo FXM
○ Similar a Flash Video FLV
○ Requiere un MediaView
■ Admite ViewPort

● Video
○ Se pueden poner Markers al Media
○ Y gestionarlos desde el MediaPayer

JavaFX 2

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a JavaFX 2

Similar a JavaFX 2 (20)

Más de Oliver Centeno

Más de Oliver Centeno (20)

Último

Último (20)

JavaFX 2