Tabla de contenido:

Titulo y Informacin de derechos de autor

Prefacio
Novedades
Parte 1 Que es JavaFX?
Parte 2 Primeros pasos con JavaFX Aplicaciones de ejemplo
Nota : Es una simple y sencilla traduccin del tutorial
que se encuentra en la pgina oficial de oracle sobre los
primeros pasos en JavaFX.

Fecha de traduccin 1-Abril-2014.

No me hago responsable del mal uso de este documento, todas

las marcas, herramientas y empresas mencionadas quedan
fuera de mi responsabilidad.

Norman Carcamo.
Prefacio

En este prlogo se da una visin general de este tutorial y tambin

describe las caractersticas de accesibilidad de documentos y
convenciones utilizadas en este tutorial - Conceptos bsicos del
JavaFX

Acerca de este tutorial

Este tutorial es una recopilacin de tres documentos que fueron

entregados previamente con el conjunto de la documentacin 2.x JavaFX:
JavaFX informacin general(Overview), Arquitectura de JavaFX
(Understanding the JavaFX Architecture) y Primeros pasos con JavaFX
(Getting Started with JavaFX). El contenido combinado se ha mejorado
con informacin actualizada sobre las nuevas caractersticas de JavaFX
incluido con el lanzamiento de Java SE 8. Este documento contiene las
siguientes partes:

Que es JavaFX?
Primeros pasos con JavaFX Aplicaciones de ejemplo

Cada parte contiene los captulos que introducen a la tecnologa

JavaFX, y le ayudar a comenzar a aprender cmo usarlo para su
desarrollo de aplicaciones.

Audiencia

Este documento est dirigido a los desarrolladores de JavaFX.

Accesibilidad Documentacin

Para obtener informacin sobre el compromiso de Oracle con la

accesibilidad, visite el sitio web del Programa de Accesibilidad de
Oracle en http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc.

Acceso a Soporte Oracle

Los clientes de Oracle tienen acceso a soporte electrnico a travs de

My Oracle Support. Para obtener ms informacin, visite
http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info o visite
http://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs si con problemas
de audicin.

Documentos relacionados

Para obtener ms informacin, consulte el resto de la documentacin

JavaFX puesta en http://docs.oracle.com/javase/javase-
clienttechnologies.htm.
Convenciones

Las siguientes convenciones de texto se utilizan en este documento:

Convencin Significado

boldface La negrita indica elementos de la interfaz grfica de

usuario asociado a una accin, o trminos definidos en el
texto o en el glosario.

italic El texto en cursiva indica ttulos de libros, nfasis, o

variables de marcador de posicin para la cual usted
provee valores particulares.

monospace El monoespaciado indica mandatos dentro de un prrafo, las

direcciones URL, el cdigo en los ejemplos, el texto que
aparece en la pantalla, o el texto que introduzca.
Novedades

Este captulo resume las nuevas caractersticas y cambios importantes

realizados en los componentes de productos de JavaFX y de la
liberacin de Java SE 8.

El nuevo tema de Mdena es ahora el tema por defecto para las

aplicaciones JavaFX. Vea la seccin del tema Modena en
caractersticas clave.

Se ha aadido soporte para las funciones adicionales de HTML5.

Consulte Cmo agregar contenido HTML para aplicaciones JavaFX
para ms informacin.

La nueva clase SwingNode mejora la funcin de interoperabilidad

Swing. Consulte Incorporacin de contenido Swing en aplicaciones
JavaFX.

Nuevos controles integrados de Interfaz de usuario, DatePicker y

TableView ya estn disponibles. Consulte el documento Uso de
Controles de interfaz de usuario JavaFX para ms informacin.

La biblioteca 3D de grficos ha sido mejorada con varias clases

de API nuevas. Ver Grficos 3D con la seccin de Caractersticas
principales , y Introduccin a JavaFX Grficos 3D para ms
informacin.

El paquete javafx.print ya est disponible y proporciona las

APIs JavaFX publicas de impresin.

Se ha aadido soporte de texto enriquecido.

Compatibilidad con pantallas de alta DPI se han puesto a

disposicin.

Clases styleables CSS se convirtieron en API pblicas.

Clase de servicio programado(Scheduled) se ha introducido.

Que es JavaFX?

Parte 1 contiene los siguientes capitulos:

JavaFX Informacin General(JavaFX Overview)

Entendiendo la Arquitectura JavaFX (Understanding the JavaFX

Architecture)
JavaFX Informacin General

Este captulo proporciona una visin general de los tipos de

aplicaciones que se pueden construir utilizando las API de JavaFX,
dnde descargar las libreras de JavaFX, y una informacin de alto
nivel acerca de JavaFX y las caractersticas principales que est
entregando.

JavaFX es un conjunto de grficos y paquetes de comunicacin que

permite a los desarrolladores para disear, crear, probar, depurar y
desplegar aplicaciones cliente enriquecidas que operan constantemente
a travs de diversas plataformas.

Aplicaciones JavaFX

disponibilidad

Caractersticas principales

Qu puedo construir con JavaFX?

Cmo se ejecuta una la aplicacin de ejemplo?

Cmo se ejecuta una muestra en un IDE?

Cmo se crea una aplicacin JavaFX?

Recursos

Consulte Entendiendo la Arquitectura JavaFX acerca de la arquitectura

de la plataforma JavaFX y para obtener una breve descripcin de las
API de JavaFX para streaming, renderizado web y la estilizacin de
interfaz de usuario con CSS.

Aplicaciones JavaFX

La biblioteca de JavaFX est escrita como una API de Java, las

aplicaciones JavaFX puede hacer referencia a APIs de cdigo de
cualquier biblioteca Java. Por ejemplo, las aplicaciones JavaFX pueden
utilizar las bibliotecas de API de Java para acceder a las capacidades
del sistema nativas y conectarse a aplicaciones de middleware basadas
en servidor.

La apariencia de las aplicaciones JavaFX se pueden personalizar. Las

Hojas de Estilo en Cascada (CSS) separan la apariencia y estilo de la
logica de la aplicacin para que los desarrolladores puedan
concentrarse en el cdigo. Los diseadores grficos pueden
personalizar fcilmente el aspecto y el estilo de la aplicacin a
travs de CSS. Si usted tiene un diseo de fondo de la web, o si usted
desea separar la interfaz de usuario (UI) y la lgica de servidor,
entonces, usted puede desarrollar los aspectos de la presentacin de
la interfaz de usuario en el lenguaje de scripting FXML y use el
cdigo de Java para la aplicacin lgica. Si prefiere disear
interfaces de usuario sin necesidad de escribir cdigo, entonces,
utilice JavaFX Scene Builder. Al disear la interfaz de usuario con
javaFX Scene Builder el crea cdigo de marcado FXML que pueden ser
portado a un entorno de desarrollo integrado (IDE) de forma que los
desarrolladores pueden aadir la lgica de negocio.

Disponibilidad

Las API de JavaFX estn disponibles como una caracterstica totalmente

integrada del Java SE Runtime Environment (JRE) , y Java Development
Kit (JDK). Debido a que el JDK se encuentra disponible para todas las
principales plataformas de escritorio (Windows, Mac OS X y Linux),
aplicaciones JavaFX compiladas en el JDK 7 y posteriormente se
ejecutan tambin en todas las principales plataformas de escritorio.
Soporte para plataformas ARM tambin ha sido puesto a disposicin del
publico con JavaFX 8. JDK para ARM Incluye la base de grficos y
controles componentes de JavaFX.

La compatibilidad entre plataformas permite una experiencia de

ejecucin consistente para los desarrolladores de aplicaciones JavaFX
y usuarios. Oracle asegura versiones sincronizadas y actualizaciones
en todas las plataformas y ofrece un amplio programa de apoyo a las
empresas que ejecutan aplicaciones de misin crtica.

En la pgina de descarga de JDK, puede obtener un archivo zip de

ejemplos de aplicaciones JavaFX. Las aplicaciones de ejemplo ofrecen
muchos ejemplos de cdigo y los fragmentos que muestran por ejemplo la
forma de escribir aplicaciones JavaFX. Consulte "Cmo puedo ejecutar
una aplicacin de ejemplo?" para ms informacin.

Caracteristicas Claves

Las siguientes caractersticas se incluyen en JavaFX 8 y versiones

posteriores. Los elementos que se introdujeron en el lanzamiento
JavaFX 8 se indican a continuacin:

APIs de Java. JavaFX es una biblioteca Java que consiste en

clases e interfaces que estn escritas en cdigo Java. Las APIs
estn diseadas para ser una alternativa amigable con la mquina
virtual de Java (Java VM) como los lenguajes JRuby, y Scala.

FXML y Scene Builder. FXML es un lenguaje de marcado

declarativo basado en XML para la construccin de una interfaz
de usuario de aplicaciones JavaFX. Un diseador puede codificar
en FXML o utilizar JavaFX Scene Builder para disear de forma
interactiva la interfaz grfica de usuario (GUI). Scene Builder
 genera marcado FXML que pueden ser portado a un IDE para que un
desarrollador pueda aadir la lgica de negocio.

WebView. Un componente web que utiliza la tecnologa WebKitHTML

para hacer posible incrustar(embeber), pginas web dentro de una
aplicacin JavaFX. JavaScript se ejecuta dentro de un WebView y
se puede llamar a las APIs de Java y las APIs de Java pueden
llamar a JavaScript que se ejecuta dentro de un WebView.
Compatibilidad con caractersticas adicionales de HTML5,
incluyendo Web Sockets, Web Workers y fuentes Web, y capacidades
de impresin se han aadido en JavaFX 8. Consulte Cmo agregar
contenido HTML en aplicaciones JavaFX.

Interoperabilidad Swing. Las aplicaciones Swing existentes

pueden ser actualizadas con las caractersticas de JavaFX, como
grficos multimedia enriquecidos de reproduccin y el contenido
web incorporado. La clase SwingNode, que le permite incluir
contenido dentro de aplicaciones JavaFX se ha aadido en JavaFX
8. Consulte el Javadoc API de SwingNode e Incrustacin de
contenido Swing en aplicaciones JavaFX para ms informacin.

Controles de interfaz de usuario(UI) incorporados(Built-

in) y CSS. JavaFX ofrece todos los principales controles UI que
se requieren para desarrollar una aplicacin con todas las
caracteristicas necesarias. Los componentes pueden ser decorados
con las tecnologas Web estndar como CSS. Los controles
DatePicker y TreeTableView UI estn ahora disponibles con el
lanzamiento de JavaFX 8. Consulte Uso de controles UI en JavaFX
para ms informacin. Adems las clases CSS Styleables* se han
convertido en APIs pblicas, permitiendo que los objetos sean de
estilo de CSS.

Tema de Mdena. El tema Modena reemplaza el tema Caspio como

valor predeterminado para aplicaciones JavaFX 8. El tema del
Caspio est disponible para su uso an mediante la adicin de la
lnea setUserAgentStylesheet(STYLESHEET_CASPIAN) en su mtodo
start() de la aplicacin. Para obtener ms informacin, consulte
el blog Modena en fxexperience.com

Caractersticas de Grficos 3D. Las nuevas clases de la API

para Shape3D (Box, Cylinder, MeshView y subclases de Sphere),
SubScene, Material, PickResult, LightBase (AmbientLight , y
subclases de PointLight) y SceneAntialiasing se han aadido a la
biblioteca de grficos 3D en JavaFX 8. La API de la clase Camera
tambin se ha actualizada en esta versin. Para obtener ms
informacin, consulte el documento Gua de inicio JavaFX
grficos 3D, y el javadoc API correspondiente para
javafx.scene.shape.Shape3D, javafx.scene.SubScene,
javafx.scene.paint.Material, javafx.scene.input.PickResult y
javafx.scene.SceneAntialiasing.
 API Canvas. La API de Canvas permite dibujar directamente
dentro de un rea de la scene JavaFX que consta de un elemento
grfico (nodo).

API de impresin. El paquete javafx.print se ha aadido en el

lanzamiento Java SE 8 y proporciona clases pblicas para la
impresin con JavaFX.

Soporte de texto enriquecido. JavaFX 8 trae soporte mejorado

de texto para JavaFX, incluyendo texto bidireccional, y scripts
de texto complejos, como el tailands e hind en los controles y
de varias lneas, texto multi-estilo en los nodos de texto.

Soporte multitouch. JavaFX proporciona apoyo a las operaciones

multitouch, con base en las capacidades de la plataforma
subyacente.

Soporte Hi-DPI. JavaFX 8 es ahora compatible con pantallas de

alta DPI.

Aceleracin por hardware con canalizacin de grficos.

Los grficos JavaFX se basan en el canal de renderizado de
grficos (el hilo Prism). JavaFX ofrece grficos suaves(smooth)
que hacen que rpidamente a travs el hilo Prism cuando se
utiliza con una tarjeta de grficos compatible o unidad de
procesamiento de grficos (GPU). Si un sistema no dispone de una
de las GPUs recomendadas soportados por JavaFX, recibe el valor
predeterminado el hilo Prism a la pila de software de
renderizacin.

Motor de medios de alto rendimiento. El oleoducto

multimedia es compatible con la reproduccin de contenido
multimedia en la Web. Proporciona un marco multimedia estable,
de baja latencia que se basa en el framework multimedia
GStreamer.

Modelo de implementacin de aplicaciones independiente

del S.O. Paquetes de aplicaciones autnomas tienen todos los
recursos de la aplicacin, y una copia privada de los tiempos de
ejecucin de Java y JavaFX. Se distribuyen en forma de paquetes
instalables nativos como por ejemplo .dmg, .deb .exe .etc. y
proporcionan la misma instalacin y la experiencia puesta en
marcha como aplicaciones nativas para ese sistema operativo.

Qu puedo construir una aplicacin con JavaFX?

Con JavaFX puedes construir muchos tipos de aplicaciones. Por lo

general, son las aplicaciones de red y estas que se implementan a
travs de mltiples plataformas y mostrar informacin en una interfaz
de usuario moderna de alto rendimiento que cuenta con audio, vdeo,
grficos y animacin.
Tabla 1-1 muestra las imgenes de algunas de las aplicaciones de
ejemplo de JavaFX que se incluyeron con la versin 8.n de JavaFX.
Aplicacin de Ejemplo Descripcin

JavaFX Ensemble8

Ensemble8 es una galera de aplicaciones

de ejemplo que muestran una gran variedad
de funciones de JavaFX, incluyendo la
animacin, grficos, y los controles.
Usted puede ver e interactuar con cada
muestra que se ejecuta en todas las
plataformas, y leer sus descripciones. En
las plataformas de escritorio, puede
Descripcin de la copiar el cdigo fuente de cada muestra,
ilustracin ensemble- ajustar las propiedades de los
small.gif componentes de la muestra se utilizan en
varias muestras, y siga los enlaces a la
documentacin de la API relevante cuando
se est conectado a la Internet.
Ensemble8 tambin corre con JavaFX para
ARM.

Modena

Mdena es una aplicacin de ejemplo que

muestra la apariencia de los componentes
UI utilizando el tema de Mdena. Te da la
opcin de contrastar los temas Mdena y
Caspio, y explorar diversos aspectos de
estos temas.

Descripcin de la
ilustracin modena-
sample.gif
Aplicacin de Ejemplo Descripcin

3D Viewer

Es una aplicacin de ejemplo que le

permite navegar y examinar una escena 3D
con un ratn o un trackpad. 3D Viewer
tiene importadores para un subconjunto de
las funciones de archivos OBJ y maya.
Tambin se prev la posibilidad de
importar archivos de animacin maya.
(Tenga en cuenta que en el caso de los
Description of the archivos de Maya, el historial de la
illustration sample- construccin debera suprimirse en todos
3dviewer.gif los objetos cuando se guarda como un
archivo de Maya.)

3dviewer tambin tiene la capacidad de

exportar el contenido de la escena como
archivos Java o FXML.

Cmo se ejecuta una la aplicacin de ejemplo?

Los pasos de esta seccin se explica cmo descargar y ejecutar las

aplicaciones de muestra que estn disponibles como descarga
independiente en la Plataforma Java (JDK 8).

Nota: Antes de poder ejecutar una aplicacin JavaFX de muestra, es

necesario tener las bibliotecas de tiempo de ejecucin de JavaFX en su
mquina. Antes de continuar con estos pasos, instale la ltima versin
del JDK 8 o la ltima versin del JRE.

Para descargar y ejecutar las aplicaciones de ejemplo:

1. Ir a la pgina de Java SE Descargas en

http://www.oracle.com/technetwork/java/javase/downloads/index.ht
ml

2. Desplcese hacia abajo y localice la seccin Muestras JDK 8 y

JavaFX Demos.

3. Haga clic en los Ejemplos y demostraciones para ir a la pgina

de descargas.

4. En la pgina de Java SE Development Kit 8 Descargas, desplcese

hacia abajo para JavaFX Demos y Muestras en la seccin de
Descargas.
 5. Descargue el archivo zip para el sistema operativo correcto y
extraer los archivos.

Se crea el directorio de JavaFX-muestras-8.x , y contiene los

archivos para las muestras disponibles. Los proyectos de
NetBeans para las muestras estn en el directorio \ src JavaFX-
muestras-8.x.

6. Haga doble clic en el archivo ejecutable para una muestra.

Por ejemplo, para ejecutar la aplicacin de ejemplo pre-

construidos Ensemble 8, haga doble clic en el archivo 8.jar
Ensemble.

Cmo se ejecuta una muestra en un IDE?

Puede utilizar varios IDEs de desarrollo Java para desarrollar

aplicaciones JavaFX. Los siguientes pasos explican cmo ver y ejecutar
el cdigo fuente en el IDE NetBeans.

Para ver y ejecutar el cdigo fuente de ejemplo en el IDE

NetBeans:

1. Descargar las muestras como se describe anteriormente y extraer

los archivos.

2. Desde el NetBeans 7.4 o posterior IDE, cargue el proyecto para

el ejemplo que desea ver.

a. En el men Archivo, seleccione Abrir proyecto.

b. En el cuadro de dilogo Abrir proyecto, vaya al

directorio que enumera las muestras. La ruta de navegacin
se ve algo como esto:

..\javafx_samples-8.x-<platform>\javafx-samples-8.x\src

c. Seleccione la muestra que desea ver.

d. Haga clic en el botn Abrir proyecto.

e. En la ventana Proyectos, haga clic derecho en el proyecto

que acaba de abrir y seleccione Ejecutar.

3. Observe la ventana de resultados se actualiza y el proyecto de

ejemplo se ejecuta , y despliega.
Cmo se crea una aplicacin JavaFX?

Debido a que las aplicaciones JavaFX estn escritos en el lenguaje

Java, puede utilizar su editor favorito o cualquier entorno de
desarrollo integrado (IDE) que admita el lenguaje Java (como NetBeans,
Eclipse o IntelliJ IDEA) para crear aplicaciones JavaFX.

Para crear aplicaciones JavaFX:

1. Ir a la pgina de Java SE Descargas en

http://www.oracle.com/technetwork/java/javase/downloads/index.ht
ml para descargar el JDK de Oracle 8 con soporte 8.n JavaFX.
Enlaces a las configuraciones de sistemas certificados y notas
de la versin tambin estn disponibles en esa pgina

2. Utilice Primeros pasos con JavaFX Aplicaciones de ejemplo

para crear aplicaciones simples que muestra cmo trabajar con
presentaciones, hojas de estilo y los efectos visuales.

3. Utilice JavaFX Scene Builder para disear la interfaz de

usuario para su aplicacin JavaFX sin necesidad de programacin.
Puede arrastrar y soltar los componentes UI a un rea de
trabajo, modificar sus propiedades, solicitar las hojas de
estilo, e integrar el cdigo resultante con la lgica de la
aplicacin.
a. Descargue JavaFX Scene Builder desde la pgina de
Descargas de JavaFX
http://www.oracle.com/technetwork/java/javase/downloads/in
dex.html
b. Siga la Gua tutorial de introduccin a JavaFX Scene
Builder para aprender ms.
Recursos

Utilice los siguientes recursos para aprender ms acerca de la

tecnologa JavaFX.

Descargue la ltima liberacin del JDK 8 y las muestras de JavaFX

desde la pgina de descargas de Java SE en:
http://www.oracle.com/technetwork/java/javase/downloads/index.html

Leer Entender la arquitectura del JavaFX.

Examine tutoriales y artculos JavaFX para desarrolladores.

 Entendiendo la Arquitectura JavaFX

Figura 2-1 ilustra los componentes de la arquitectura de la plataforma

JavaFX. Las secciones siguientes describen el diagrama de cada
componente y cmo la interconexin de las partes. Por debajo de las
APIs pblicas JavaFX se encuentra el motor que funciona su cdigo
JavaFX. Se compone de subcomponentes que incluyen un motor de JavaFX
grficos de alto rendimiento, llamado Prism; un sistema de ventanas
pequeo y eficiente, llamado Glass; un motor de multimedia, y un motor
web. Aunque estos componentes no estn expuestos pblicamente, sus
descripciones pueden ayudar a entender mejor lo que se ejecuta una
aplicacin JavaFX.

Scene Graph

Java Public APIs for JavaFX Features

Graphics System

Glass Windowing Toolkit

Media and Images

Web Component

CSS

UI Controls

Layout

2-D and 3-D Transformations

Visual Effects

Figure 2-1 JavaFX Architecture Diagram

El grfico de la escena(Scene Graph) JavaFX, que se muestra como parte
de la capa superior de la figura 2-1, es el punto de partida para la
construccin de una aplicacin JavaFX. Es un rbol jerrquico de nodos
que representa todos los elementos visuales de la interfaz de usuario
de la aplicacin. Puede controlar la entrada y puede ser entregado.

Un solo elemento en un escenario grfico(Scene Graph) se denomina

nodo. Cada nodo tiene un ID, clase de estilo, y el volumen de
delimitacin. Con la excepcin del nodo raz de un grfico de la
escena, cada nodo en un grfico de la escena tiene un solo padre y
cero o ms hijos. Tambin puede tener los siguientes:

Efectos, como desenfoques(blurs) y sombras(shadows)

opacidad (Opacity)

Transformaciones (Transforms)

Los controladores de eventos (como el ratn, llave y mtodo de

entrada)
(Event handlers (such as mouse, key and input method))

Un estado de aplicacin especfica(An application-specific

state)

A diferencia de Swing y Abstract Window Toolkit (AWT), el grfico de

la escena JavaFX incluye tambin las primitivas grficas, como
rectngulos(Rectangles) y texto(Text), adems de tener
controles(Controls), contenedores de diseo (Layout Containers),
imgenes(Images) y multimedia(Media).

Para la mayora de usos, el escenario grfico(Scene Graph) simplifica

el trabajo con las interfaces de usuario, especialmente cuando se
utilizan interfaces de usuario ricas. Animacin de varios grficos en
el escenario grfico se puede lograr rpidamente utilizando las API
javafx.animation y mtodos declarativos, tales como doc XML, tambin
funcionan bien.

La API javafx.scene permite la creacin y especificacin de varios

tipos de contenido, tales como:

Nodos(Nodes): formas(Shapes) (2-D y 3-D), imgenes(Images),

medios(Media), navegador web incorporado(embedded web browser), el
texto(Text), los controles de interfaz de usuario(Controls UI),
grficos(Charts), grupos(Groups) y contenedores(containers).

Estado(State): Transformaciones(Transforms) (posicionamiento y

orientacin de los nodos), efectos visuales, y otro estado visual del
contenido
Efectos(effects): objetos simples que cambian la apariencia de de
nodos de grficos de escena(Scene Graph), como los desenfoques(blurs),
sombras(shadows) y ajuste de color(color adjustment).

Para obtener ms informacin, consulte el Trabajo con JavaFX Scene

Graph.

APIs Java pblicas para caracteristicas JavaFX

La capa superior de la arquitectura de JavaFX se muestra en la Figura

2-1 proporciona un conjunto completo de API pblicas de Java que
apoyan aplicaciones de cliente enriquecido. Estas API proporcionan
libertad y flexibilidad para construir aplicaciones de cliente
enriquecido sin precedentes. La plataforma JavaFX combina las mejores
capacidades de la plataforma Java con funcionalidad multimedia
completa e inmersiva en un entorno de desarrollo de una ventanilla
intuitiva y completa. Estos APIS de Java para las funciones JavaFX:

Permitir el uso de potentes caractersticas de Java, como los

genricos(Generics), anotaciones(Annotations), multithreading y
expresiones Lamda(Lambda expression, introducidas en Java SE 8).

Que sea ms fcil para los desarrolladores web para utilizar

JavaFX de otros lenguajes dinmicos basados en JVM, como Groovy
y JavaScript.

Permitir a los desarrolladores de Java utilizar otros lenguajes

del sistema, como Groovy, para escribir aplicaciones JavaFX
grandes y complejas.

Permitir el uso de bindings(vinculantes) que incluye el apoyo a

las expresiones perezosas vinculantes(lazy binding) de alto
rendimiento, las expresiones de secuencia encuadernadas(bound
sequence expressions), y reevaluacin parcial(bind partial).
Lenguajes alternativos (como Groovy) pueden usar esta biblioteca
de enlace(binding) para introducir la sintaxis de unin(binding)
similar a la de JavaFX Script.

Extender las colecciones de la biblioteca de Java para incluir

listas y mapas observables, que permiten a las aplicaciones las
interfaces de usuario los cables a los modelos de datos,
observar los cambios en esos modelos de datos, y actualizar el
control de la interfaz de usuario correspondiente en
consecuencia.

Las API de JavaFX y el modelo de programacin son una continuacin de

la lnea de productos 1.x JavaFX. La mayora de las API de JavaFX se
han portado directamente a Java. Algunas API, tales como Diseo y
Media junto con muchos otros detalles, se han mejorado y simplificado,
basado en los comentarios recibidos de los usuarios de la versin 1.x
de JavaFX. JavaFX se basa ms en los estndares web, como CSS para los
controles de estilo y ARIA para las especificaciones de accesibilidad.
El uso de estndares web adicionales tambin est bajo revisin.

Grficos del Sistema(Graphics System)

El sistema de grficos JavaFX, que se muestra en azul en la Figura 2-

1, es un detalle de implementacin debajo de la capa grfica escena
JavaFX. Es compatible tanto con 2-D y escenarios grficos en 3-D.
Proporciona la representacin del software cuando el hardware de
grficos en un sistema es insuficiente para apoyar renderizado
acelerado por hardware.

Dos ductos de aceleracin de grficos se implementan en la plataforma

JavaFX:

Los procesos de Prism. Puede funcionar en dos renderizadores de

hardware y software, incluyendo 3-D. Es responsable de la
rasterizacin y renderizado de escenas de JavaFX. A continuacin
mltiples caminos son posibles en funcin del dispositivo que se
utiliza:
o DirectX 9 en Windows XP y Windows Vista

o DirectX 11 en Windows 7

o OpenGL en Mac, Linux, Embedded

o Software de representacin cuando la aceleracin de

hardware no es posible

o El hardware da va de acceso completamente acelerado se

utiliza siempre que sea posible, pero cuando no est
disponible, el software se utiliza path porque el software
ya se distribuye en todos los entornos de ejecucin Java
(JRE). Esto es particularmente importante cuando manejan
escenas 3-D. Sin embargo, el rendimiento es mejor cuando
el hardware se utilizan estos path.

Quantum Toolkit une Prism y Glass Windowing Toolkit juntos y los

pone a disposicin de la capa de JavaFX por encima de ellos en
la pila. Tambin gestiona las normas vinculadas a la prestacin
de enhebrado contra el control de eventos.

Kit de herramientas de ventanas Glass (Glass Windowing

Toolkit)

El kit de herramientas de ventanas Glass, que se muestra en color

beige en la parte central de la figura 2-1, es el nivel ms bajo de la
pila de grficos JavaFX. Su responsabilidad principal es proporcionar
servicios operativos nativos, tales como el manejo de las ventanas,
temporizadores y superficies. Adems, es la capa depende de la
plataforma que conecta la plataforma JavaFX para el sistema operativo
nativo.
El kit de herramientas Glass es tambin responsable de la gestin de
la cola de eventos. A diferencia de Abstract Window Toolkit (AWT), que
gestiona su propia cola de eventos, el kit de herramientas Glass
utiliza la funcionalidad de cola de eventos del sistema operativo
nativo para programar el uso de hilo. Tambin a diferencia de AWT, el
kit de herramientas Glass se ejecuta en el mismo subproceso que la
aplicacin JavaFX. En AWT, el medio natural de AWT se ejecuta en un
hilo y el nivel de Java se ejecuta en otro hilo. Esto introduce una
gran cantidad de temas, muchos de los cuales se resuelven en JavaFX
utilizando el enfoque de subproceso de la aplicacin nica JavaFX.

Hilos(Threads)

El sistema ejecuta dos o ms de los siguientes hilos en un momento

dado:

JavaFX application thread: Este es el hilo principal

utilizado por los desarrolladores de aplicaciones JavaFX.
Cualquier scene "en vivo", que es una escena que es parte de una
ventana, se debe acceder desde este hilo. Un escenario grfico
se puede crear y manipular en un subproceso en segundo plano,
pero cuando su nodo raz se adjunta a cualquier objeto en vivo
en la escena, ese escenario grfico debe acceder desde el
subproceso de la aplicacin JavaFX. Esto permite a los
desarrolladores crear grficos de escenas complejas en un
subproceso en segundo plano mientras se mantiene animaciones en
escenas 'en vivo' suave y rpido. El subproceso de la aplicacin
JavaFX es un hilo diferente al Swing y AWT Distribuidor de
Eventos Thread (EDT), por lo que se debe tener cuidado al
incrustar cdigo JavaFX en aplicaciones Swing.

Prism render thread: Este thread se encarga de la

representacin por separado del distribuidor de eventos(EDT).
Permite la trama(frame) N se represente mientras que la trama N
+1 se est procesando. Esta capacidad de llevar a cabo el
procesamiento simultneo es una gran ventaja, especialmente en
los sistemas modernos que tienen varios procesadores. El hilo
Prism tambin puede tener mltiples hilos de rasterizacin que
ayudan el trabajo fuera de la carga que hay que hacer en la
representacin.

Media thread: Este se ejecuta en segundo plano y sincroniza los

ltimos frames a travs del escenario grfico utilizando el
subproceso de la aplicacin JavaFX.
Pulse(Pulsaciones)

Un pulso es un evento que indica al escenario grfico JavaFX que es

hora de sincronizar el estado de los elementos en el escenario grfico
con el hilo Prism. Un pulso es regulado a 60 frames por segundo (fps)
como mximo y se dispara cada vez que las animaciones se ejecutan en
el escenario grfico. Incluso cuando la animacin no se est
ejecutando, el pulso se programa cuando se cambia algo en el escenario
grfico. Por ejemplo, si se cambia la posicin de un botn, se
programa un pulso.

Cuando se dispara un pulso, el estado de los elementos en el grfico

de la escena se sincroniza hacia abajo a la capa de renderizado. Un
pulso permite a los desarrolladores de aplicaciones una forma de
manejar los eventos de forma asincrnica. Esta importante funcin
permite al sistema de proceso por lotes(batch) y ejecutar eventos en
el pulso.

Maquetacin y CSS tambin estn ligados a eventos de pulso. Numerosos

cambios en el escenario grfico podran llevar a mltiples
maquetaciones o actualizaciones de CSS que podran degradar seriamente
el funcionamiento. El sistema efecta automticamente un CSS y fase de
diseo una vez por pulso para evitar la degradacin del rendimiento.
Los desarrolladores de aplicaciones tambin pueden desencadenar de
forma manual el diseo , segn sea necesario para tomar medidas antes
de un pulso.

El Windowing Toolkit Glass es responsable de ejecutar los eventos de

pulso. Utiliza los temporizadores nativos de alta resolucin para
realizar la ejecucin.

Imgenes y Multimedia(Media and Images)

JavaFX funcionalidad multimedia se encuentra disponible a travs de

las APIs javafx.scene.media. JavaFX es compatible con ambos medios
visuales y de audio. Se proporciona soporte para MP3, AIFF, y WAV
archivos de audio y archivos de vdeo FLV. JavaFX funcionalidad
multimedia se proporciona como tres componentes separados: el objeto
Media representa un archivo multimedia, el MediaPlayer reproduce un
archivo multimedia, y una MediaView es un nodo que muestra los medios
de comunicacin.

El componente del motor de Media, que se muestra en verde en la figura

2-1, se ha diseado con el rendimiento y la estabilidad en mente y
proporciona un comportamiento coherente en todas las plataformas. Para
obtener ms informacin, lea la incorporacin de los Media Assets.

Componente Web(Web Component)

El componente Web es un control de JavaFX UI basado en Webkit, que

proporciona un visualizador Web y la funcionalidad completa de
navegacin a travs de su API. Este componente del motor Web, que se
muestra en color naranja en la Figura 2-1, se basa en WebKit, que es
un motor de cdigo abierto navegador web que soporte HTML5, CSS,
JavaScript, DOM, y SVG. Permite a los desarrolladores a implementar
las siguientes caractersticas en sus aplicaciones Java:

Renderizar contenido HTML de URL local o remoto

Apoyar la historia y ofrecer Atrs y Adelante de navegacin

Actualizar el contenido

Aplicar efectos al componente web

Editar el contenido HTML

Ejecutar comandos de JavaScript

Manejar eventos

Este componente del navegador integrado se compone de las siguientes

clases:

WebEngine proporciona capacidades bsicas de la pgina web de

navegacin.

WebView encapsula un objeto WebEngine, incorpora el contenido HTML en

la scene de una aplicacin, y proporciona campos y mtodos para
aplicar efectos y transformaciones. Es una extensin de una clase
Node.

Adems, las llamadas de Java pueden ser controlados a travs de

JavaScript y viceversa para permitir a los desarrolladores hacer lo
mejor de ambos entornos. Para informacin general ms detallada del
navegador integrado JavaFX, consulte la Adicin de contenido HTML para
JavaFX documento Aplicaciones.

Hojas de estilo en cascada CSS

Ofrece la posibilidad de aplicar un estilo personalizado a la interfaz

de usuario de una aplicacin JavaFX sin cambiar ningn de cdigo
fuente de la aplicacin. CSS se puede aplicar a cualquier nodo en el
grfico de la escena JavaFX y se aplica a los nodos de forma
asincrnica. Estilos CSS JavaFX tambin pueden ser fcilmente
asignados a la escena en tiempo de ejecucin, lo que permite la
aparicin de una aplicacin para cambiar dinmicamente.
La figura 2-2 muestra la aplicacin de dos estilos CSS diferentes para
el mismo conjunto de controles de interfaz de usuario.

JavaFX CSS se basa en el W3C CSS versin 2.1 especificaciones, con

algunas adiciones de trabajo actual de la versin 3. El soporte y las
extensiones en JavaFX CSS se han diseado para permitir que las hojas
de estilo CSS para JavaFX pueden analizarse limpiamente por cualquier
analizador sintctico CSS, incluso uno que no admite extensiones de
JavaFX. Esto permite que la mezcla de estilos CSS para JavaFX y para
otros fines (por ejemplo, para las pginas HTML) en una nica hoja de
estilo. Todos los nombres de propiedades JavaFX estn prefijados con
una extensin de proveedor de "-fx-", incluidas las que pudieran
parece compatible con el CSS HTML estndar, debido a que algunos
valores de JavaFX tienen una semntica ligeramente diferente.

Para obtener informacin ms detallada acerca de JavaFX CSS, vea

Maquillando aplicaciones JavaFX con CSS.

Controles de intefaz de usuario(UI Controls)

Los controles de interfaz de usuario JavaFX estn disponibles a travs

de la API de JavaFX, se construyen mediante el uso de nodos en el
escenario grfico(Scene Graph). Ellos pueden sacar el mximo provecho
de las caractersticas de gran riqueza visual de la plataforma JavaFX
y son porttiles a travs de diferentes plataformas. JavaFX CSS
permite una tematizacin y el maquillado de los controles de interfaz
de usuario.

La Figura 2-3 muestra algunos de los controles de interfaz de

usuario(UI) que se admiten actualmente. Estos controles se encuentran
en el paquete javafx.scene.control.
Figure 2-3 JavaFX UI Controls Sample

Para obtener informacin ms detallada acerca de todos los controles

disponibles de JavaFX UI, consulte el documento Uso de controles de
interfaz de usuario JavaFX y la documentacin de la API para el
paquete javafx.scene.control.

(Diseadores, Esquematizadores, Gestores,

Distribuidores)Layout

Contenedores de diseo o paneles pueden ser utilizados para prever

disposiciones flexibles y dinmicas de los controles UI dentro de un
escenario grfico de una aplicacin JavaFX. La API de JavaFX Layout
incluye las siguientes clases de contenedor(container) que automatizan
los modelos disposicin(layouts) frecuentes:

La clase BorderPane expone sus nodos de contenido en la parte

superior, inferior, derecha, izquierda, centro o regin.

La clase HBox organiza sus nodos de contenido horizontalmente en

una sola fila.

La clase VBox organiza sus nodos de contenido verticalmente en

una sola columna.
 La clase StackPane coloca sus nodos de contenido en una sola
pila de atras hacia delante.

La clase GridPane permite al desarrollador crear una cuadrcula

flexible de filas y columnas en la que se disea nodos de
contenido.

La clase FlowPane organiza sus nodos de contenido, ya sea en

horizontal o vertical "flujo", envolviendo en el ancho
especificado (para horizontal) o altura (vertical) de los
lmites.

La clase TilePane coloca sus nodos de contenido en las celdas de

diseo de tamao uniforme o tejas

La clase AnchorPane permite a los desarrolladores crear nodos de

ancla en la parte superior, inferior, izquierda o centro del
diseo.

Para lograr una estructura de disposicin deseada, distintos

contenedores pueden anidarse dentro de una aplicacin JavaFX.

Para obtener ms informacin sobre cmo trabajar con los layouts, vea
el articulo Trabajo con layouts JavaFX. Para obtener ms informacin
sobre la API Layout JavaFX, consulte la documentacin de la API para
el paquete javafx.scene.layout.

Transformaciones 2-D y 3-D

Cada nodo del scene graph JavaFX se puede transformar en coordenadas

el x-y utilizando las siguientes clases javafx.scene.transform:

translate - Mover un nodo de un lugar a otro a lo largo de la x,

y, z planos relativos a su posicin inicial.

scale - Cambiar el tamao de un nodo que aparezca ya sea grande

o ms pequeo en las x, y, z planos, dependiendo del factor de
escala.

shear - Girar un eje de manera que el eje x , y eje y ya no

estn perpendiculares. Las coordenadas del nodo se desplazan por
los multiplicadores especificados.

rotate - Girar un nodo alrededor de un punto de pivote

especificado de la escena.

affine - Realizar un mapeo lineal de 2-D/3-D coordina a otras

coordenadas 2-D/3-D conservando las propiedades y 'rectas'
paralelas de las lneas. Esta clase se debe utilizar con
Translate, Scale, Rotate o Shear transformar las clases en
lugar de ser utilizado directamente.
Para obtener ms informacin acerca de cmo trabajar con las
transformaciones, vea Aplicando transaformaciones en JavaFX. Para
obtener ms informacin acerca de las clases de la API
javafx.scene.transform, consulte la documentacin de la API.

Efectos Visuales

El desarrollo de interfaces de cliente enriquecidas(rich intefaces) en

el escenario grfico(Scene Graph) JavaFX implica el uso de efectos
visuales o de efectos para mejorar el aspecto de las aplicaciones
JavaFX en tiempo real. Los efectos JavaFX son principalmente de
imgenes de pxeles-based y, por lo tanto, ellos toman el conjunto de
nodos que se encuentran en el escenario grfico(Scene Graph), hacen
que sea como una imagen, y aplicar los efectos establecidos para ella.

Algunos de los efectos visuales disponibles en JavaFX incluyen el uso

de las siguientes clases:

Drop Shadow - Renderiza una sombra de un contenido dado detrs

del contenido al que se aplica el efecto.

Reflection - Renderiza una versin reflejada del contenido a

continuacin el contenido real.

Lighting - Simula una fuente de luz que brilla en un contenido

dado y puede dar un objeto plano un aspecto ms realista,
tridimensional.

Para ver ejemplos de cmo utilizar algunos de los efectos visuales

disponibles, consulte el documento Creacin de Efectos Visuales. Para
obtener ms informacin acerca de todas las clases de efectos visuales
disponibles, consulte la documentacin de la API para el paquete
javafx.scene.effect.
Primeros pasos con JavaFX Aplicaciones de ejemplo

Esta coleccin de aplicaciones de ejemplo est diseado para ayudarle

a empezar con las tareas de JavaFX comunes, incluyendo el trabajo con
layouts, controles, hojas de estilo, FXML y efectos visuales.

Hello World, Estilo JavaFX

Diseo de formularios en JavaFX
Diseo de lujo con CSS
Diseo de interfaz de usuario con FXML
Formas animados y efectos visuales
Hola Mundo al estilo JavaFX
La mejor manera de ensearle lo que es crear y construir una aplicacin JavaFX es con
una aplicacin "Hola Mundo". Un beneficio adicional de este tutorial es que le permite
probar que su tecnologa JavaFX se ha instalado correctamente.

La herramienta utilizada en este tutorial es NetBeans IDE 8. Antes de empezar, asegrese

de que la versin de NetBeans IDE que est usando admite JavaFX 8. Consulte la seccin
Sistemas, Configuracin y Certificaciones de la pgina de Java SE 8 descargas para ms
detalles.

Construya la aplicacin

1. En el men Archivo, seleccione Nuevo proyecto.

2. En la categora de aplicaciones JavaFX, elija Aplicacin JavaFX. Haga clic en

Siguiente.

3. Asigne un nombre al proyecto HolaMundo y haga clic en Finalizar.

NetBeans abre el archivo HolaMundo.java y la rellena con el cdigo de una

aplicacin bsica de Hola Mundo, como se muestra en el ejemplo 3-1.

package holamundo;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class HolaMundo extends Application {

@Override
public void start(Stage stage) {
Button boton = new Button();
boton.setText("Di 'Hola Mundo'");
boton.setOnAction(new EventHandler<ActionEvent>() {

@Override
public void handle(ActionEvent event) {
System.out.println("Hola Mundo!");
}
});

StackPane layout = new StackPane();

layout.getChildren().add(boton);

Scene escena = new Scene(layout, 300, 250);

stage.setTitle("Hola Mundo!");
stage.setScene(escena);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}

Estas son las cosas importantes que debe saber acerca de la estructura bsica de una
aplicacin JavaFX:
 La clase principal para una aplicacin JavaFX ampla(extends) la clase
javafx.application.Application. El mtodo start() es el principal punto de
entrada para todas las aplicaciones JavaFX.

Una aplicacin JavaFX define el contenedor(container) de interfaz de usuario(UI)

por medio de una etapa(Stage) y una escena(Scene). La clase de JavaFX Stage es
el contenedor JavaFX de nivel superior. La clase de JavaFX Scene es el
contenedor de todo el contenido. Ejemplo 3-1 crea el escenario(Stage) y la
escena(Scene) y hace que la escena se visualize en un tamao de pxel dado.

En JavaFX, el contenido de la escena se representa como un grfico de la escena

jerrquica de nodos. En este ejemplo, el nodo raz es un objeto StackPane, que es
un nodo de diseo(layout) de tamao variable. Esto significa que el tamao del
nodo de la raz escucha el tamao de la escena y cambia cuando se cambia el
tamao de la etapa por un usuario.

El nodo raz contiene un nodo hijo, un control de botn con texto, adems de un
controlador de eventos para imprimir un mensaje cuando se pulsa el botn.

El mtodo main() no es necesario para las aplicaciones JavaFX cuando se crea el

archivo JAR para la aplicacin con la herramienta de JavaFX Packager que incrusta
el Lanzador JavaFX(JavaFX Launcher) en el archivo JAR. Sin embargo, es til
incluir el mtodo main() para que pueda ejecutar archivos JAR que se crearon sin
el Lanzador JavaFX (JavaFX Launcher), como cuando se utiliza un IDE en el que las
herramientas de JavaFX no estn totalmente integradas. Adems, las aplicaciones
Swing que incrustan cdigo JavaFX requieren el mtodo main().

La Figura 3-1 muestra el escenario grfico(Scene Graph) para la aplicacin Hello World.
Para obtener ms informacin sobre los escenarios grficos consulte Uso de Scene Graph
de JavaFX.

Figure 3-1 Hello World Scene Graph

Ejecutar la aplicacin

En la ventana Proyectos, haga clic en el nodo del proyecto HolaMundo y seleccione

Ejecutar.

Haga clic en el botn D Hola Mundo.

Compruebe que el texto "Hola Mundo!" Se imprime en la ventana de salida de NetBeans.

La figura 3-2 muestra la aplicacin Hola Mundo, al estilo JavaFX.

Figura 3-2 Hola Mundo, al estilo de JavaFX.

Donde ir a continuacin:

Esto concluye el tutorial bsico Hello World, pero sigue leyendo para ms lecciones
sobre el desarrollo de aplicaciones JavaFX:

Crear un formulario en JavaFX, ensea los fundamentos de diseo de la pantalla,

cmo agregar controles a un diseo, y cmo crear eventos de entrada.

Formas de lujo(Fancy forms) con JavaFX y CSS proporciona trucos de estilo simple
para la mejora de su aplicacin, como agregar una imagen de fondo y los botones
de estilo y texto.

Usando FXML para crear una interfaz de usuario muestra un mtodo alternativo para
crear la interfaz de usuario de inicio de sesin. FXML es un lenguaje basado en
XML que proporciona la estructura para la construccin de una interfaz de usuario
independiente de la lgica de la aplicacin de su cdigo.

Animacin y Efectos Visuales en JavaFX muestra cmo llevar a cabo una aplicacin
a la vida mediante la adicin de animacin, lnea de tiempo y efectos de mezcla.
Creando un formulario en javaFX

La creacin de un formulario es una actividad comn en el desarrollo

de una aplicacin. Este tutorial te ensea los fundamentos de los
gestores de diseo(layout) en la pantalla, cmo agregar controles a un
panel de diseo(layout), y cmo crear eventos de entrada.

En este tutorial, utilizar JavaFX para construir el formulario de

acceso se muestra en la Figura 4-1.

Figura 4-1 Formulario de acceso

La herramienta utilizada en este tutorial de introduccin es NetBeans

IDE. Antes de empezar, asegrese de que la versin de NetBeans IDE que
est usando admite JavaFX 8. Vea la pgina de Descargas y
Configuraciones del sistema, de la pgina de Java SE Descargas para
ms detalles.

Creando el Proyecto

Tu primer tarea es crear un proyecto en NetBeans IDE y llamarlo Login:

1. En el menu Archivo, seleccione Nuevo Proyecto.

2. En la categora de aplicaciones javaFX, elija Aplicacin

JavaFX. Haga clic en siguiente.

3. El nombre del proyecto ser: Login y haga clic en Finalizar.

 Al crear un proyecto JavaFX NetBeans IDE proporciona una
aplicacin Hola Mundo como un punto de partida, que ya ha visto
si ha seguido el tutorial Hola Mundo.

4. Retire el mtodo start() que NetBeans IDE genera y reemplacelo

con el cdigo en el ejemplo 4-1.

Ejemplo 4-1 Etapa de Aplicacin

@Override
public void start(Stage primaryStage)
{
primaryStage.setTitle("JavaFX Welcome");
primaryStage.show();
}

Consejo: Despus de agregar el cdigo de ejemplo en un proyecto de NetBeans, pulse Ctrl

(o Cmd) + Shift + I para importar los paquetes necesarios. Cuando hay una seleccin de
declaraciones de importacin, elija el que comienza con JavaFX.

Crear un GridPane Layout

Para el formulario de acceso que vamos a crear, utilizaremos un

diseo(layout) GridPane porque te permite crear una cuadrcula
flexible de filas y columnas en la que se pueden colocar controles.
Usted puede colocar los controles en cualquier celda de la cuadrcula,
y usted puede hacer que los controles abarquen las celdas que segn
sean necesarias.

El cdigo para crear el diseo(layout) es GridPane en el ejemplo 4-2.

Agregue el cdigo delante de la lnea primaryStage.show();

Ejemplo 4-2 GridPane con (huecos)Gap y propiedades de relleno(padding)

GridPane grid = new GridPane();

grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));

Scene scene = new Scene(grid, 300, 275);

primaryStage.setScene(scene);

Ejemplo 4-2 crea un objeto GridPane y lo asigna a la variable llamada

grid. La propiedad de alineacin(.setAlignment()) cambia la posicin
por defecto de la rejilla(grid) de la parte superior izquierda de la
escena haca el centro. Las propiedades Gap gestionan el espaciado
entre las filas y las columnas, mientras que la propiedad de
relleno(padding) gestiona el espacio alrededor de los bordes del panel
Cuadrcula(grid pane). Las inserciones estn en el orden de arriba,
derecha, abajo e izquierda. En este ejemplo, hay 25 pxeles de
relleno(padding) en cada lado.

La escena se crea con el panel de rejilla(grid) como el nodo raz(root),

que es una prctica comn cuando se trabaja con contenedores(containers)
de diseo(layout).
Por lo tanto, ya que la ventana cambia de tamao, los nodos dentro del
panel de cuadrcula cambian de tamao en funcin de sus
limitaciones(constraints) de diseo(layout). En este ejemplo, el panel de
rejilla(grid) permanece en el centro cuando se hace grande o bien
cuando reduce la ventana. Las propiedades de relleno(padding) asegrese
de que no es un relleno alrededor del panel de cuadrcula al hacer la
ventana ms pequea.

Este cdigo establece el ancho y la altura de la escena al 300px por

275px. Si no ajusta las dimensiones de la escena, los valores
predeterminados de la escena tomarn el mnimo necesario para mostrar
su contenido.

Aadir texto( Text ), etiquetas( Label ) y campos de texto( TextField )

En cuanto a la Figura 4-1, se puede ver que el formulario requiere el

ttulo de "Bienvenido" y los campos de texto(TextField) y campo de
contrasea(PasswordField) para obtener la informacin por parte del
usuario. El cdigo para la creacin de estos controles esta en el
Ejemplo 4-3. Agregue este cdigo despus de la lnea que establece la
propiedad de relleno(padding) de cuadrcula(grid).

Text scenetitle = new Text("Welcome");

scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);

Label userName = new Label("User Name:");

grid.add(userName, 0, 1);

TextField userTextField = new TextField();

grid.add(userTextField, 1, 1);

Label pw = new Label("Password:");

grid.add(pw, 0, 2);

PasswordField pwBox = new PasswordField();

grid.add(pwBox, 1, 2);

La primera lnea crea un objeto de texto(Text) que no se puede editar,

establece el texto de Bienvenida, y lo asigna a una variable llamada
scenetitle. En la siguiente lnea se utiliza el mtodo setFont()
para establecer la familia de fuentes(FontFamily), el peso(weight) y el
tamao(size) de la variable scenetitle. Usando un estilo en lnea es
apropiado cuando el estilo se une a una variable, pero una mejor
tcnica para estilizar los elementos de su interfaz de usuario(UI) es
mediante el uso de una hoja de estilo(CSS). En el siguiente tutorial,
Formulario con JavaFX y CSS, reemplazar el estilo en lnea con una
hoja de estilos(Cascading Style Sheet).

El mtodo grid.add(), aade la variable scenetitle a la

cuadricula(grid) de distribucin(layout). La numeracin de las columnas
y las filas de la cuadrcula comienza en cero, y scenetitle se aade
en la columna 0 y en la fila 0. Los dos ltimos argumentos del mtodo
grid.add() establecen el espacio(span) de la columna a 2 y el
lapso(span) de la fila 1.
Las lneas siguientes crean un objeto Label con el texto Nombre de
Usuario(User Name:) en la columna 0 y en la fila 1, y un objeto de campo
de texto(TextField) que se puede editar. El campo de texto se aade al
panel de cuadrcula(GridPane) en la columna 1, fila 1. Un campo de
contrasea(PasswordField) y las demas etiquetas se crean y se aaden al
panel de caudricula(GridPane) de una manera similar.

Cuando se trabaja con un panel de cuadrcula(GridPane), puede mostrar

las lneas de cuadrcula, que es til para propsitos de depuracin.
En este caso, puede agregar grid.setGridLinesVisible(true) despus de la
lnea que agrega el campo de contrasea. Entonces, cuando se ejecuta
la aplicacin, ver las lneas de las columnas y filas de la
cuadrcula, as como las propiedades de la brecha(gap), como se muestra
en la Figura 4-2.

Figura 4-2 Formulario de Login en modo cuadricula

Agregar un botn y texto

Los dos ltimos controles necesarios para la aplicacin son un control

Botn(Button) para la presentacin de los datos y un control de
texto(Text) para mostrar un mensaje cuando el usuario pulsa el botn.

Primero, cree el botn y colquelo en la parte inferior derecha, que

es una posicin comn para los botones que realizan una accin que
afecta a todo el formulario. Ejemplo 4-4. Agregue este cdigo antes
del cdigo para la escena(Scene).

Ejemplo 4-4 Botn(Button)

Button btn = new Button("Sign in");

HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);

La primera lnea crea un botn llamado btn con la etiqueta

Entrar(Sign in ), y la segunda lnea crea un panel de diseo(layout )
HBox llamado hbBtn con una separacin de 10 pxeles para los lados.
El panel de HBox establece una alineacin para el botn que es
diferente de la alineacin se aplica a los otros controles en el panel
de rejilla(GridPane ). La propiedad de alineacin(.setAlignment()) tiene un
valor de Pos.BOTTOM_RIGHT , que posiciona a un nodo en la parte inferior
del espacio verticalmente y en el borde derecho del espacio
horizontal. Se aade el botn como un hijo(Child ) del panel HBox y el
panel HBox se aade a la red(grid ) en la columna 1, fila 4.

Ahora, agregue un control de texto(Text) para mostrar el mensaje, como

se muestra en el ejemplo 4-5. Agregue este cdigo antes del cdigo
para la escena(Scene).

Ejemplo 4-5 Text

final Text actiontarget = new Text();

grid.add(actiontarget, 1, 6);

Figura 4-3 muestra el formulario ahora. Usted no ver el mensaje de

texto hasta que lo trabaje a travs de la siguiente seccin del
tutorial, Agregue cdigo para controlar un evento.

Figura 4-3 Formulario Login con Botn

Agregue cdigo para controlar un evento

Por ltimo, para hacer que el botn de visualic el mensaje de texto

cuando el usuario lo presiona tendremos que aadir el cdigo en el
Ejemplo 4-6 antes que el cdigo de la escena(Scene).

Ejemplo 4-6 Eventos del botn

btn.setOnAction(new EventHandler<ActionEvent>()
{
@Override
public void handle(ActionEvent e)
{
actiontarget.setFill(Color.FIREBRICK);
actiontarget.setText("Sign in button pressed");
}
});

El mtodo setOnAction() se utiliza para registrar un controlador de

eventos(EventHandler) que establece el objeto actiontarget entrar(Sign in) en
el botn presionado cuando el usuario pulsa el botn. El color del
objeto actiontarget(actiontarget se refiere al objeto objetivo, es decir en este caso
ser el Texto de aviso) se establece en Firebrick rojo.

Ejecutando la aplicacin

Haga clic derecho en el archivo Login.java del proyecto en la ventana

Proyectos, seleccione Ejecutar y a continuacin haga clic en el botn
Entrar(Sign in). La Figura 4-4 muestra los resultados. Si se encuentra
con problemas, a continuacin ech un vistazo a el cdigo en el
archivo Login.java que se incluye en el archivo Login.zip descargable.

Ejemplo 4-4 Formulario Login final

Donde ir ahora?

Con esto concluye el tutorial bsico del Formulario, pero puede seguir
leyendo los siguientes tutoriales sobre el desarrollo de aplicaciones
JavaFX.

El Formulario de lujo con JavaFX y CSS proporciona consejos

acerca de cmo agregar una imagen de fondo y cambiar
radicalmente el estilo del texto, la etiqueta y el botn en el
formulario de acceso.

Usando FXML para crear una interfaz de usuario muestra un mtodo

alternativo para crear la interfaz de usuario de inicio de
sesin. FXML es un lenguaje basado en XML que proporciona la
estructura para la construccin de una interfaz de usuario
independientemente de la lgica de la aplicacin de su cdigo.

Trabajar con layouts de JavaFX explica los paneles de JavaFX

incorporados(Built-in), consejos y trucos para el uso de ellos.

Tambin probar los ejemplos de JavaFX, que se puede descargar desde la

seccin de la pgina de Descargas Demos y Muestras de Java SE JDK en
http://www.oracle.com/technetwork/java/javase/downloads/. El ejemplo
Ensemble contiene ejemplos de los diseos(Layouts) y su cdigo fuente.
Formulario con CSS en javaFX

Este tutorial es acerca de hacer su aplicacin JavaFX ms atractiva,

aadiendo una hoja de estilos en cascada(Cascading Style Sheet). Desarrolla
un diseo, crea un archivo css, y aplique los nuevos estilos.

En este tutorial, tomaremos el formulario de acceso que utiliza

estilos por defecto para las etiquetas, los botones, y el color de
fondo, con algunas modificaciones de estilo CSS simples, la convertir
en una aplicacin estilizada, como se muestra en la Figura 5-1.

Figura 5-1 Formulario Login sin Css y con Css

La herramienta utilizada en este tutorial de introduccin es NetBeans

IDE. Antes de empezar asegrese de que la versin de NetBeans IDE que
est usando admite JavaFX 8. Vea la pgina de Configuraciones del
sistema en la pgina de Java SE Descargas para ms detalles.

Creando el Proyecto

Si has seguido la gua Primeros pasos con JavaFX Aplicaciones, entonces

usted ya ha creado el proyecto necesario para ingresar a este
tutorial. Si no, descargue el proyecto Login haciendo clic derecho en
Login.zip y guardelo en su sistema de archivos. Extraiga los archivos
del archivo zip y luego abra el proyecto en NetBeans IDE.

Creand el archivo CSS

Su primera tarea es crear un nuevo archivo CSS y gurdalo en el mismo

directorio que la clase principal de la aplicacin. Despus de eso,
usted debe hacer que la aplicacin JavaFX tome de la hoja de estilos
en cascada que acaba de agregar.

1. En la ventana de NetBeans IDE Proyectos, expanda el nodo del

Proyecto Login y luego el nodo de directorio de paquetes(source
packages) fuente.
 2. Haga clic derecho debajo de directorio de paquetes(source
packages) y en el paquete actual de trabajo, seleccione Nuevo y
a continuacin Otros

3. En el cuadro de dilogo Nuevo archivo, seleccione Otro , de

Cascading Style Sheet , y haga clic en Siguiente .

4. Coloque el nombre de Login para el campo de texto en Nombre de

archivo y asegurese de que el valor del campo de texto de la
carpeta este en el mismo lugar que el del cdigo fuente.

5. Clic en Finalizar .

6. En el archivo Login.java, se inicializa la variable de hojas de

estilo de la clase escena(Scene) para que apunte a la hoja de
estilos en cascada mediante la inclusin de la lnea de cdigo
que se muestra a continuacin en negrita para que aparezca como
se muestra en el ejemplo 5-1.

Ejemplo 5-1 Inizializacin de la variable

Scene scene = new Scene(grid, 300, 275);

primaryStage.setScene(scene);
scene.getStylesheets().add(
Login.class.getResource("Login.css").toExternalForm();
primaryStage.show();

Este cdigo busca la hoja de estilos en el directorio de src\login en el proyecto

de NetBeans.

Agregando una imgen de fondo

Una imgen de fondo ayuda a que su formulario sea ms atractivo. Para

este tutorial, agregar un fondo gris con una textura similar al lino.

En primer lugar, descargue la imgen de fondo, haciendo clic derecho

en la imagen background.jpg y guardelo en la carpeta src\login en el
proyecto Login dentro de NetBeans.

Ahora, agregue el siguiente cdigo, la propiedad: background-image en

el archivo CSS. Recuerde que la la ruta(path) es relativa a la hoja de
estilos. As que en el cdigo del ejemplo 5-2, la imagen
background.jpg est en el mismo directorio que el archivo Login.css.

Ejemplo 5-2 Fondo gris con textura similar a lino.

Aplicando estilo a las etiquetas( Labels)

Los siguientes controles para mejorar son las etiquetas. Usars .label
un estilo de clase, Estilo de etiqueta(Label), que significa que los
estilos afectarn a todas las etiquetas en el formulario. El cdigo es
en el ejemplo 5-3.

Figura 5-3 Etiquetas con mayor grosor y efecto de sobre

Estilo de Textos(Text)

Ahora, crear algunos efectos especiales en los dos objetos de texto en

el formulario: scenetitle, que incluye el texto de bienvenida, y
actiontarget, que es el texto que se devuelve cuando el usuario
pulsa el botn Entrar(Sign in). Puede aplicar diferentes estilos a los
objetos de texto utilizados en este tipo de maneras diversas.

1. En el archivo Login.java, elimine las siguientes lneas de

cdigo que definen los estilos en lnea(inline styles) actualmente
establecidos para los objetos de texto:

scenetitle.setFont(Font.font(Tahoma, FontWeight.NORMAL, 20));

actiontarget.setFill(Color.FIREBRICK);

Al cambiar a CSS sobre los estilos en lnea, se separa el diseo

del contenido. Este enfoque hace que sea ms fcil para un
diseador para tener un control sobre el estilo sin tener que
modificar contenido.

2. Crea un identificador(ID) para cada nodo de texto utilizando el

mtodo setId() de la clase Node : Agregue las siguientes lneas en
negrita para que aparezcan como se muestra en el ejemplo 5-4.
 Ejemplo 5-4 Crea un ID para los nodos de Texto
..
Text scenetitle = new Text("Welcome");
scenetitle.setId("welcome-text");
..
..
grid.add(actiontarget, 1, 6);
actiontarget.setId("actiontarget");
..

3. En el archivo Login.css, define las propiedades de estilo para

los IDs welcome-text y actiontarget. Para poder usar los estilos
por nombre de ID, se utiliza el simbolo numeral # como se
muestra en la en el Ejemplo 5-5.

Ejemplo 5-5 Efectos en Texto

#welcome-text
{
-fx-font-size: 32px;
-fx-font-family: "Arial Black";
-fx-fill: #818181;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
#actiontarget
{
-fx-fill: FIREBRICK;
-fx-font-weight: bold;
-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

4. El tamao del texto de Welcome se aumenta a 32 puntos y la

fuente se cambia a Arial Negro. El color de relleno(fill) de
texto se establece en un color gris oscuro (#818181) y se aplica
un efecto de sombra interior, creando un efecto de relieve.
Puede aplicar una sombra interior en cualquier color, cambiando
el color de relleno(fill) de texto para hacer una versin ms
oscura del fondo. Vea la seccin sobre los efectos en la Gua de
referencia CSS JavaFX para obtener detalles sobre los parmetros
de la propiedad sombra interior(inner shadow property).

La definicin de estilo para actiontarget es similar a lo que has

visto hace poco.

La Figura 5-4 muestra los cambios de fuente y efectos de sombra

en los dos objetos de texto.

Figura 5-4 Texto con efectos de sombra

Aplicando estilo al Botn

El siguiente paso es el estilo del botn, por lo que es el cambio de

estilo cuando el usuario pasa el ratn sobre l. Este cambio dar a
los usuarios una indicacin de que el botn es interactivo, una
prctica estndar de diseo.

En primer lugar, crear el estilo para el estado inicial del botn con
el cdigo en el ejemplo 5-6. Este cdigo utiliza el selector de clase
estilo de botn .button , de manera que si se agrega un botn al
formulario en una fecha posterior, a continuacin, el nuevo botn
tambin utilizar este estilo.

Ejemplo 5-6 efecto Drop Shadow para el Botn(Button)

.button
{
-fx-text-fill: white;
-fx-font-family: "Arial Narrow";
-fx-font-weight: bold;
-fx-background-color: linear-gradient(#61a2b1, #2A5058);
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

Ahora, creareamos un aspecto ligeramente diferente para cuando el

usuario pasa el ratn por encima del botn. Esto se hace con la
pseudo-clase hover . Una pseudo-clase incluye el selector para la
clase y el nombre para el estado separado por dos puntos (:), como se
muestra en el ejemplo 5-7.

Ejemplo 5-7 Botn con estilos Hover

.button:hover
{
-fx-background-color: linear-gradient(#2A5058, #61a2b1);
}

La figura 5-5 muestra el estado inicial y hover del botn con su nuevo
fondo azul-gris y blanco negrita.

Figura 5-5 Estado incial y Hover del botn

Figura 5-6 muestra la aplicacin final

Figura 5-6 Aplicacin con estilos finalizada

Donde ir ahora?

Aqui estan algunas cosas que deberas intentar acontinuacin:

Vea lo que puede crear usando CSS. Algunos documentos que le pueden
ayudar a que usted son Decorando aplicaciones JavaFX con CSS, Styling
Grficos con CSS y la Gua de referencia CSS JavaFX. El Skinning con
CSS y la seccin Analizador CSS de la Gua del usuario de JavaFX Scene
Builder tambin proporciona informacin sobre cmo se puede utilizar
la herramienta de escena JavaFX Builder para la carcasa de su diseo
JavaFX FXML.

Vea Estilos en Botones FX con CSS para ver ejemplos de cmo crear
estilos comunes del botn usando CSS.
Usando FXML para crear Interfaces de Usuario

Este tutorial muestra los beneficios del uso de JavaFX FXML, que es un
lenguaje basado en XML que proporciona la estructura para la
construccin de una interfaz de usuario independiente de la lgica de
la aplicacin de su cdigo.

Si usted comenz este documento desde el principio, entonces usted ha

visto cmo crear una aplicacin de inicio de sesin utilizando slo
JavaFX. Aqu, se utiliza FXML para crear la misma interfaz de usuario
de inicio de sesin, que separa el diseo de la aplicacin de la
lgica de la aplicacin, con lo que el cdigo sea ms fcil de
mantener. La interfaz de usuario de inicio de sesin se genera en este
tutorial se muestra en la Figura 6-1.

Figura 6-1 Interfaz de usuario de Login

Este tutorial utiliza NetBeans IDE. Asegrese de que la versin de

NetBeans IDE que est usando admite JavaFX 8. Consulte la seccin de
Descargas en la pgina de Java SE Descargas para ms detalles.

Configurando el proyecto

Tu primer tarea ser configurar un Proyecto Aplicacin JavaFX FXML

en el IDE NetBeans:

1. En el menu Archivo, elija Nuevo Proyecto

2. En la categria de aplicacin JavaFX, elija Aplicacin JavaFX

FXML. Luego clic en Siguiente.

3. Coloque el nombre al proyecto FXMLExample y clic en Finalizar.

FXMLExample.java. Este archivo se encarga del cdigo Java

estndar requerido para una aplicacin FXML.
 FXMLDocument.fxml. Este es el archivo de origen FXML en el
que se define la interfaz de usuario.

FXMLDocumentController.java. Este es el archivo de

controlador para manejar la entrada del ratn y el
teclado.

4. Renombre el archivo FXMLDocumentController.java a

FXMLExampleController.java para que el nombre sea mas
significativo para esta aplicacin.

a. En la ventana Proyectos, haga clic con el botn

FXMLDocumentController.java y seleccione Refactor luego
Cambiar nombre.

b. Introduzca FXMLExampleController, y haga clic en

Refactorizar.
5. Renombre FXMLDocument.fxml a fxml_example.fxml.

a. Haga clic derecho y seleccione Cambiar nombre

FXMLDocument.fxml.

b. Introduzca fxml_example y haga clic en Aceptar.

Cargue el archivo de origen FXML

El primer archivo a editar es el archivo FXMLExample.java. Este

archivo incluye el cdigo para la creacin de la clase principal de la
aplicacin y para definir el escenario y escena. Ms especfico FXML,
el archivo utiliza la clase FXMLLoader, que es responsable de cargar
el archivo de origen FXML y devolver el grfico de objetos resultante.

Realice los cambios que aparecen en negrita en el ejemplo 6-1.

Ejemplo 6-1 FXMLExample.java

@Override
public void start(Stage stage) throws Exception
{
Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml"));
Scene scene = new Scene(root, 300, 275);
stage.setTitle("FXML Welcome");
stage.setScene(scene);
stage.show();
}

Una buena prctica consiste en establecer la altura y la anchura de la

escena cuando la crea, en este caso 300 por 275, de lo contrario los
valores predeterminados de escena al mnimo necesario para mostrar su
contenido.
Modificar las Declaraciones de Importacin

A continuacin, edite el archivo fxml_example.fxml. Este archivo

especifica la interfaz de usuario que se muestra cuando se inicia la
aplicacin. La primera tarea consiste en modificar las declaraciones
de importacin por lo que su cdigo es el Ejemplo 6-2.

Declaraciones Declaracin XML Ejemplo 6-2 e Importar

<?xml version="1.0" encoding="UTF-8"?>

<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

Al igual que en Java, nombres de clases pueden ser completo

(incluyendo el nombre del paquete), o pueden ser importadas mediante
la sentencia import, como se muestra en el ejemplo 6-2. Si lo
prefiere, puede utilizar las declaraciones de importacin especficas
que se refieren a clases.

Crear un GridPane Layout

La aplicacin Hello World generado por NetBeans utiliza un diseo

AnchorPane. Para el formulario de acceso, se utilizar un diseo
GridPane porque te permite crear una cuadrcula flexible de filas y
columnas en la que se distribuyen controles.

Retire la disposicin AnchorPane y sus hijos y reemplacelo con el

layout GridPane en el Ejemplo 6-3.

Ejemplo 6-3 GridPane Layout

<GridPane fx:controller="fxmlexample.FXMLExampleController"
xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
<padding>
<Insets top="25" right="25" bottom="10" left="25"/>
</padding>

</GridPane>

En esta aplicacin, el diseo GridPane es el elemento raz del

documento FXML y como tal tiene dos atributos. La fx:controller Se
requiere atributo controlador cuando especifique manejadores de
eventos basados en controladores en su margen de beneficio. Los
atributo xmlns:fx siempre se requiere y especifica el espacio de
nombres fx.

El resto del cdigo controla la alineacin y el espacio del panel de

rejilla. La propiedad de alineacin cambia la posicin por defecto de
la rejilla de la parte superior izquierda de la escena al centro. Las
propiedades Gap gestionar el espaciado entre las filas y las columnas,
mientras que la propiedad de relleno gestiona el espacio alrededor de
los bordes del panel Cuadrcula.

Como se cambia el tamao de la ventana, los nodos dentro del panel de

cuadrcula cambian de tamao en funcin de sus limitaciones de diseo.
En este ejemplo, la red permanece en el centro cuando se hace grande o
reduce la ventana. Las propiedades de relleno(padding) asegrese de que
no es un relleno alrededor de la red cuando usted hace la ventana ms
pequea.

Agregar campos de texto y Contrasea

Mirando hacia atrs en la Figura 6-1, se puede ver que la forma de

inicio de sesin requiere el ttulo de "Welcome" y los campos de texto
y la contrasea para la captura de informacin por parte del usuario.
El cdigo en el Ejemplo 6-4 es parte del layout GridPane y debe ser
colocado antes de la instruccin </GridPane>.

Controles Ejemplo 6-4 de texto, etiquetas, campos TextField y contrasea.

<Text text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0"

GridPane.columnSpan="2"/>

<Label text="User Name:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>

<TextField GridPane.columnIndex="1" GridPane.rowIndex="1"/>

<Label text="Password:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>

<PasswordField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="2"/>

La primera lnea crea un objeto de texto y establece el valor de texto

Welcome. Los atributos GridPane.columnIndex y GridPane.rowIndex
corresponden a la colocacin del control de texto en la cuadrcula. La
numeracin de filas y columnas de la cuadrcula comienza en cero y la
ubicacin del control de texto se establece en (0,0), lo que significa
que est en la primera columna de la primera fila. El atributo
GridPane.columnSpan se establece en 2, por lo que la duracin del
ttulo Welcome toma dos columnas de la cuadrcula. Usted necesitar
esta anchura adicional ms adelante en el tutorial al agregar una hoja
de estilo para aumentar el tamao de fuente del texto a 32 puntos.

Las lneas siguientes crean un objeto Label con texto User Name: en la
columna 0, fila 1 y un objeto TextField a la derecha del mismo, en la
columna 1, fila 1 . Otra etiqueta y el objeto campo Password: se crean
y se aaden a la red de una manera similar.

Cuando se trabaja con un diseo de cuadrcula(GridPane), puede mostrar

las lneas de cuadrcula, que es til para propsitos de depuracin.
En este caso, establezca la propiedad gridLinesVisible como true
mediante la adicin de la declaracin
<gridLinesVisible>true</gridLinesVisible> justo despus del la
declaracin <padding></padding>. Entonces, cuando se ejecuta la
aplicacin, ver las lneas de las columnas y filas de la cuadrcula,
as como las propiedades de la brecha(gap), como se muestra en la
Figura 6-2.

Figura 6-2 Formulario Login con GridPane

Agregar un botn y texto

Los dos ltimos controles necesarios para la aplicacin son un control

Button para la presentacin de los datos y un control de texto para
mostrar un mensaje cuando el usuario pulsa el botn. El cdigo es en
el Ejemplo 6-5. Aadir este cdigo antes de </GridPane>.

Ejemplo 6-5 HBox, Button, y texto

<HBox
spacing="10" alignment="bottom_right" GridPane.columnIndex="1" GridPane.rowIndex="4" >
<Button text="Sign In onAction="#handleSubmitButtonAction"/>
</HBox>

<Text fx:id="actiontarget" GridPane.columnIndex="0" GridPane.columnSpan="2"

GridPane.halignment="RIGHT" GridPane.rowIndex="6"/>

Se necesita un panel de HBox para establecer una alineacin para el

botn que es diferente de la alineacin predeterminada aplicada a los
otros controles en el diseo GridPane. La propiedad de alineacin se
establece en BOTTOM_RIGHT, que posiciona a un nodo en la parte
inferior del espacio verticalmente y en el borde derecho del espacio
horizontal. El panel HBox se aade a la red en la columna 1, fila 4.

El panel HBox tiene un hijo, un botn con la propiedad de texto se

establece en Sign in y una propiedad de conjunto onAction a
handleSubmitButtonAction(). Mientras FXML es una manera conveniente para
definir la estructura de la interfaz de usuario de una aplicacin que
no proporciona una manera de implementar el comportamiento de una
aplicacin. Implementa el comportamiento del mtodo
handleSubmitButtonAction() en el cdigo de Java en la siguiente seccin de
este tutorial, agregue cdigo para controlar un evento.
Asignacin de un fx:id el valor de un elemento, como se muestra en el
cdigo para el Control del texto, se crea una variable en el espacio
de nombres del documento, que se puede hacer referencia a partir en
otra parte del cdigo. Aunque no es necesario, la definicin de un
campo de control ayuda a aclarar cmo se relacionan el controlador y
el marcado.

Agregar cdigo para controlar un evento

Ahora haga el control de texto mostrar un mensaje cuando el usuario

pulsa el botn. Esto se hace en el archivo FXMLExampleController.java.
Elimine el cdigo que NetBeans IDE genera y reemplazarlo con el cdigo
en el ejemplo 6-6.

Ejemplo 6-6 FXMLExampleController.java

package fxmlexample;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.text.Text;

public class FXMLExampleController

{
@FXML
private Text actiontarget;

@FXML
protected void handleSubmitButtonAction(ActionEvent event)
{
actiontarget.setText("Sign in button pressed");
}
}

La anotacin @FXML se utiliza para etiquetar campos miembros del

controlador no pblicos y los mtodos de controlador para el uso de
FXML. El mtodo handleSubmtButtonAction() establece la variable actiontarget
Sign in el botn presionado cuando el usuario pulsa el botn.

Puede ejecutar la aplicacin ahora para ver la interfaz de usuario

completa. La Figura 6-3 muestra los resultados cuando se escribe texto
en los dos campos y haga clic en el botn Sign in. Si usted tiene algn
problema, entonces usted puede comparar el cdigo con el ejemplo
FXMLLogin.

Figura 6-3 FXML Login Window

Use un lenguaje de Script para gestionar eventos

Como una alternativa al uso de cdigo Java para crear un controlador

de eventos, puede crear el controlador con cualquier lenguaje que
proporciona un motor de scripting compatible con JSR 223. Algunos
lenguajes incluidos son: JavaScript, Groovy, Jython, y Clojure.

Opcionalmente, puede probar a usar JavaScript ahora.

1. En el archivo fxml_example.fxml, agregue la declaracin de

JavaScript despus de la declaracin doctype XML.

<?language javascript?>

2. En el marckup del botn, cambie el nombre de la funcin por el

siguiente:

onAction="handleSubmitButtonAction(event);"

3. Retire el atributo fx:controller marckup de GridPane y agregue

la funcin de JavaScript en una etiqueta <script> directamente
debajo de ella, como se muestra en el ejemplo 6-7.

Ejemplo 6-7 JavaScript en FXML

<GridPane
xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">

<fx:script>
function handleSubmitButtonAction()
{
actiontarget.setText("Calling the JavaScript");
}
</fx:script>

Alternativamente, usted puede poner las funciones de JavaScript en un archivo

externo (como por ejemplo: fxml_example.js) e incluir el script como el
siguiente:

<fx:script source="fxml_example.js"/>

El resultado es en la Figura 6-4.

Figura 6-4 Inicio de sesin de aplicacin mediante JavaScript

Si usted est considerando el uso de un lenguaje de script con FXML,
tenga en cuenta que un IDE puede no ser compatible al recorrer el
cdigo del script durante la depuracin.

Aplicando estilo a la aplicacin con CSS

La ltima tarea es hacer que la aplciacin de Login sea atractiva,

aadiendo una hoja de estilos en cascada (CSS).

1. Cree una hoja de estilos

a) En la ventana del proyecto, haga clic derecho en la

carpeta fxmlexample debajo de Source Packages y seleccione
Nuevo y, a continuacin Otros.

b) En el cuadro de dilogo Nuevo archivo, seleccione Otro

y, a continuacin Cascading Style Sheet y haga clic en
Siguiente.

c) Llamelo Login y haga clic en Finalizar.

d) Copie los contenidos del archivo Login.css en su nuevo

archivo de CSS. El archivo Login.css est incluido en el
archivo LoginCSS.zip descargable. Para una descripcin de
las clases en el archivo CSS, consulte Formularios con
JavaFX CSS.

2. Descargue la imagen gris, similar al lino para el fondo haciendo

clic derecho en el archivo background.jpg y guardarlo en la
carpeta fxmlexample.

3. Abra el archivo fxml_example.fxml y aada un elemento de estilo

antes de que finalice el marckup en el layout GridPane como se
muestra en el ejemplo 6-8.

Hoja de estilo Ejemplo 6-8

<stylesheets>
<URL value="@Login.css"/>
</stylesheets>

</GridPane>

El smbolo @ antes del nombre de la hoja de estilo en la direccin

indica que la hoja de estilo se encuentra en el mismo directorio que el
archivo FXML.

4. Para utilizar el estilo de raz(root) para el panel de

cuadrcula(GridPane), agregue una clase de estilo para el marckup
del layout GridPane como se muestra en el ejemplo 6-9.
 Ejemplo 6-9 Estilo del GridPane

<GridPane
fx:controller="fxmlexample.FXMLExampleController"
xmlns:fx=http://javafx.com/fxml
alignment="center"
hgap="10"
vgap="10"
styleClass="root"
>

5. Crear un ID para el objeto de texto Welcome por lo que utiliza

el estilo #welcome-texto definido en el archivo CSS, como se
muestra en el ejemplo 6-10.

Ejemplo 6-10 Texto ID

<Text
id="welcome-text"
text="Welcome"
GridPane.columnIndex="0"
GridPane.rowIndex="0"
GridPane.columnSpan="2"
/>

6. Ejecute la aplicacin. La figura 6-5 muestra la aplicacin

estilizada. Si se encuentra con problemas, a continuacin, eche
un vistazo a el cdigo que se incluye en el archivo descargable
FXMLExample.zip.

Figura 6-5 Login estilizado

A donde ir ahora?

Ahora que usted est familiarizado con FXML, mire Introduccin a FXML,
que proporciona ms informacin sobre los elementos que componen el
lenguaje FXML. El documento est incluido en el paquete javafx.fxml en
la documentacin de la API.

Tambin puede probar la herramienta JavaFX Scene Builder abriendo el

archivo fxml_example.fxml en Scene Builder y hacer modificaciones.
Esta herramienta proporciona un entorno de diseo visual para el
diseo de la interfaz de usuario para las aplicaciones JavaFX y genera
automticamente el cdigo FXML para el diseo. Tenga en cuenta que el
archivo FXML podra volver a formatear cuando se guardan. Vase la
Gua de introduccin a JavaFX Scene Builder para obtener ms
informacin sobre esta herramienta. El Skinning con CSS y la seccin
CSS Analizador de la Gua del usuario de escena JavaFX Builder tambin
le brinda informacin sobre cmo puede la carcasa de su diseo FXML.
Animacion y Efectos Visuales en JavaFX

Usted puede utilizar JavaFX para desarrollar rpidamente aplicaciones

con experiencias de usuario ricas. En este Getting Started tutorial,
usted aprender a crear objetos animados y lograr efectos complejos
con muy poca codificacin.

La figura 7-1 muestra la aplicacin que se crear.

Figura 7-1 Colorful Circles Aplicacin

Figura 7-2 muestra el grfico de la escena(Scene Graph) para la

aplicacin ColorfulCircles. Los Node que raman son instancias de la
clase de Group, y los nodos no enramados tambin conocidos como nodos
hoja, son instancias de la clase Rectangle y Circle.

Figura 7-2 Crculos Coloridos Escena Grfica(Scene Graph)

La herramienta utilizada en este tutorial de introduccin es NetBeans
IDE. Antes de empezar, asegrese de que la versin de NetBeans IDE que
est usando admite JavaFX 8. Consulte la seccin Configuracin de
sistemas certificados de la pgina de Java SE Descargas para ms
detalles.

Configurando nuestra Aplicacin

Configure su proyecto JavaFX en NetBeans IDE como sigue acontinuacin:

1. En el men Archivo, seleccione Nuevo proyecto.

2. En la categora de aplicaciones JavaFX, elija Aplicacin

JavaFX. Haga clic en Siguiente.

3. Nombre a el proyecto: ColorfulCircles y haga clic en

Finalizar.

4. Elimine las declaraciones de importacin que NetBeans IDE

genera.

Puede generar las declaraciones de importacin como usted

trabaja a su manera a travs de la gua de aprendizaje mediante
el uso de cualquiera de la funcin de autocompletado de cdigo o
el comando Importaciones Fix en el men Fuente en NetBeans IDE.
Cuando hay una seleccin de declaraciones de importacin, elija
el que comienza con JavaFX.

Configurando el Proyecto

Elimine el contenido de la clase ColorfulCircles desde el archivo de

origen que NetBeans IDE genera y reemplazarlo con el cdigo en el
ejemplo 7-1.

Ejemplo 7-1 Aplicacin Bsica

public class ColorfulCircles extends Application

{

@Override
public void start(Stage primaryStage)
{
Group root = new Group();
Scene scene = new Scene(root, 800, 600, Color.BLACK);
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args)

{
launch(args);
}
}
Para la aplicacin ColorfulCircles , es conveniente utilizar un nodo de
grupo como el nodo raz(root) para la escena. El tamao del grupo es
dictado por el tamao de los nodos dentro de ella. Para la mayora de
aplicaciones, sin embargo, desea que los nodos para realizar el
seguimiento del tamao de la escena y cambiar cuando se cambia el
tamao del escenario. En ese caso, se utiliza un nodo de layout de
tamao variable como la raz(root), como se describe en Creacin de un
formulario en JavaFX.

Puede compilar y ejecutar la aplicacin ColorfulCircles ahora, y en

cada paso del tutorial, para ver los resultados intermedios. Si se
encuentra con problemas, a continuacin, eche un vistazo a el cdigo
en el archivo ColorfulCircles.java, que se incluye en el archivo
ColorfulCircles.zip descargable. En este punto, la aplicacin es una
simple ventana en negro.

Agregando Graficos

A continuacin, cree 30 crculos con el cdigo en el ejemplo 7-2 antes

de la lnea primaryStage.show().

Ejemplo 7-2 30 Crculos

Group circles = new Group();

for (int i = 0; i < 30; i++)
{
Circle circle = new Circle(150, Color.web("white", 0.05));
circle.setStrokeType(StrokeType.OUTSIDE);
circle.setStroke(Color.web("white", 0.16));
circle.setStrokeWidth(4);
circles.getChildren().add(circle);
}
root.getChildren().add(circles);

Este cdigo crea un grupo llamado circles, luego utiliza un bucle for
para aadir 30 crculos a el grupo. Cada crculo tiene un radio de
150px, color de relleno de blanco, y el nivel de opacidad de un 0.5%,
lo que significa que es casi transparente.

Para crear un borde alrededor de los crculos, el cdigo incluye la

clase StrokeType. Un tipo de trazo de FUERA (OUTSIDE) significa el
lmite del crculo se extiende fuera del interior por el valor
strokeWidth, que es 4. El color del stroke es de color blanco, y el nivel
de opacidad es 0.16%, lo que es ms brillante que el color de los
crculos.

La lnea final agrega el grupo de crculos para el nodo raz(root).

Esta es una estructura temporal. Ms tarde, modificar este escenario
grfico(Scene Graph) para que coincida con la que se muestra en la Figura
7-2.

La figura 7-3 muestra la aplicacin. Debido a que el cdigo no ha

especificado todava un lugar nico para cada crculo, los crculos se
dibujan en la parte superior de uno al otro, con la esquina superior
izquierda de la ventana, como el punto central para los crculos. La
opacidad de los crculos superpuestos interacta con el fondo negro,
produciendo el color gris de los crculos .

Figura 7-3 Circles

Agregando un efecto Visual

Continuamos aplicando un efecto de desenfoque de cuadro (box blur effect)

a los crculos de modo que aparezcan ligeramente fuera de foco. El
cdigo es en el Ejemplo 7-3. Agregue este cdigo antes de la lnea
primaryStage.show().

Ejemplo 7-3 Box Blur Effect

circles.setEffect(new BoxBlur(10, 10, 3));

Este cdigo establece el radio de desenfoque a 10 pxeles de ancho por

10 pxeles de alto, y la iteracin de desenfoque a 3, por lo que es la
aproximacin de un desenfoque gaussiano(Gaussian blur). Esta tcnica
desenfoque produce un efecto de suavizado en el borde de los crculos,
como se muestra en la Figura 7-4.

Figura 7-4 Cuadro de la falta de definicin en los crculos

Crear un degradado de fondo

Ahora, cree un rectngulo y lo rellenamos con un gradiente lineal,

como se muestra en el ejemplo 7-4.

Agregue el cdigo antes de que los root.getChildren().add(circles) de la

lnea para que el rectngulo degradado aparece detrs de los crculos.

Ejemplo 7-4 Linear Gradient

Rectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(),

new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE, new
Stop[]{
new Stop(0, Color.web("#f8bd55")),
new Stop(0.14, Color.web("#c0fe56")),
new Stop(0.28, Color.web("#5dfbc1")),
new Stop(0.43, Color.web("#64c2f8")),
new Stop(0.57, Color.web("#be4af7")),
new Stop(0.71, Color.web("#ed5fc2")),
new Stop(0.85, Color.web("#ef504c")),
new Stop(1, Color.web("#f2660f")),}));
colors.widthProperty().bind(scene.widthProperty());
colors.heightProperty().bind(scene.heightProperty());
root.getChildren().add(colors);

Este cdigo crea un rectngulo llamado colores. El rectngulo es la

misma anchura y altura que la escena y se llena con un gradiente
lineal que comienza en la esquina inferior izquierda (0, 1) y termina
en la esquina derecha superior (1, 0). El valor la verdad es
proporcional al rectngulo y NO_CYCLE indica que el ciclo de color no
se repetir. La secuencia de parada[] indica lo que el degradado de
color debe estar en un lugar en particular.

Las siguientes dos lneas de cdigo hacen que el gradiente lineal de

ajuste como el tamao de los cambios de escena por la unin de la
anchura y la altura del rectngulo con el ancho y el alto de la
escena. Consulte Uso de Propiedades de JavaFX y enlaces para obtener
ms informacin sobre la unin.

La ltima lnea de cdigo agrega los colores rectngulo al nodo raz.

Los crculos de color gris con los bordes borrosos aparecen ahora en
la parte superior de un arco iris de colores, como se muestra en la
Figura 7-5.

Figura 7-5 Linear Gradient

Figura 7-6 muestra el grfico de la escena(Scene Graph) intermedia. En
este punto, el grupo de crculos y colores rectngulo son hijos del
nodo raz.

Escena Figura 7-6 Grfica(Scene Graph) Intermedio

Aplicar un modo de fusin(Blend Mode)

A continuacin, aada color a los crculos y oscurezca la escena

aadiendo un efecto de mezcla de superposicin. Va a eliminar el grupo
crculos y el rectngulo gradiente lineal desde el escenario grfico y
agregarlos al nuevo grupo de mezcla de superposicin.

1. Busque las siguientes dos lneas de cdigo:

root.getChildren().add(colors);
root.getChildren().add(circles);

2. Vuelva a colocar las dos lneas de cdigo del paso 1 con el

cdigo en el ejemplo 7-5.

Ejemplo 7-5 Modo de mezcla

Group blendModeGroup =
new Group(new Group(new Rectangle(scene.getWidth(), scene.getHeight(),
Color.BLACK), circles), colors);
colors.setBlendMode(BlendMode.OVERLAY);
root.getChildren().add(blendModeGroup);

El grupo blendModeGroup configura la estructura de la mezcla de

superposicin. El grupo est formado por dos hijos. El primer hijo es
un nuevo grupo ( sin nombre ) que contiene un nuevo ( sin nombre )
rectngulo negro y el grupo de crculos previamente creada. El segundo
hijo es el rectngulo de colores creado previamente.

El mtodo setBlendMode() se aplica la mezcla de superposicin de colores

del rectngulo. La ltima lnea de cdigo agrega el blendModeGroup al
escenario grfico(SceneGraph) como un hijo del nodo raz(node root), como
se muestra en la Figura 7-2.

Una mezcla(blend) de superposicin(overlay) es un efecto comn en

aplicaciones de diseo grfico. Tal mezcla(blend) puede oscurecer una
imagen o aadir luces o ambos, dependiendo de los colores en la
mezcla(blend). En este caso, el rectngulo gradiente lineal se utiliza
como la superposicin(overlay). El rectngulo negro sirve para mantener
el fondo oscuro, mientras que los crculos casi transparentes recogen
los colores del degradado, sino que tambin se oscurecen.

La figura 7-7 muestra los resultados. Usted ver el efecto total de la

mezcla de superposicin cuando se anima a los crculos en el paso
siguiente .

Figura 7-7 Overlay Blend

Aadir animacin

El paso final es utilizar animaciones JavaFX para mover los crculos:

Si no lo ha hecho, aada importacin java.lang.Math.random esttica; a

la lista de declaraciones de importacin.

Agregue el cdigo de animacin en el Ejemplo 7-6 antes de la lnea

primaryStage.show().
Ejemplo 7-6 Animacin

Timeline timeline = new Timeline();

for (Node circle: circles.getChildren())
{
timeline.getKeyFrames().addAll(
new KeyFrame(Duration.ZERO, // set start position at 0
new KeyValue(circle.translateXProperty(), random() * 800),
new KeyValue(circle.translateYProperty(), random() * 600)
),
new KeyFrame(new Duration(40000), // set end position at 40s
new KeyValue(circle.translateXProperty(), random() * 800),
new KeyValue(circle.translateYProperty(), random() * 600)
)
);
}
// play 40s of animation
timeline.play();

La animacin es controlada por una lnea de tiempo(timeline), por lo que

este cdigo crea una lnea de tiempo(timeline), a continuacin, utiliza
un bucle for para sumar dos fotogramas(frames) claves, para cada uno de
los 30 crculos. El primer fotograma clave en 0 segundos utiliza las
propiedades translateXProperty y translateYProperty para establecer una
posicin aleatoria de los crculos dentro de la ventana. El segundo
fotograma clave en 40 segundos hace lo mismo. Por lo tanto, cuando se
reproduce la lnea de tiempo, se anima a todos los crculos de una
posicin al azar a otro durante un perodo de 40 segundos.

La Figura 7-8 muestra los 30 crculos de colores en movimiento, lo que

completa la solicitud. Para obtener el cdigo fuente completo,
consulte el archivo ColorfulCircles.java, que se incluye en el archivo
descargable ColorfulCircles.zip

Crculos Figura 7-8 animados

A dnde ir desde aqu?

Aqu hay varias sugerencias sobre qu hacer a continuacin:

Pruebe los ejemplos de JavaFX, que se puede descargar desde la

seccin de la pgina de Descargas de Java SE JDK Demos y
Muestras en
http://www.oracle.com/technetwork/java/javase/downloads/.
Especialmente echar un vistazo a la aplicacin Ensemble, que
proporciona cdigo de ejemplo para las animaciones y efectos.

Lea Creacin de transiciones y Cronograma de Animacin en

JavaFX. Encontrar ms detalles sobre la lnea de tiempo de
animacin, as como informacin sobre la decoloracin, camino,
paralelo y transiciones secuenciales.

Consulte Creacin de Efectos Visuales de JavaFX para adicionales

maneras de mejorar el aspecto y el diseo de la aplicacin,
incluyendo la reflexin, la iluminacin y efectos de sombra.

Pruebe la herramienta JavaFX Scene Builder para crear

aplicaciones visualmente interesantes. Esta herramienta
proporciona un entorno de diseo visual para el diseo de la
interfaz de usuario para las aplicaciones JavaFX y genera cdigo
FXML. Usted puede utilizar el panel Propiedades o la opcin
Modificar de la barra de men para aadir efectos a los
elementos de la interfaz. Ver el Panel de propiedades y las
secciones de la barra de mens de la Gua del usuario JavaFX
Scene Builder para mas informacin.
Herramientas utilizadas y recomendadas:

0. JRE
1. JDK
2. JavaFX Scene Builder 1.1
3. NetBeans Eclipse(o el IDE que ms te guste).
4. Eclipse(La Versin que prefieras, en este caso
utilice Keppler).
5. e(fx)clipse plugin for eclipse

Plugin para el IDE eclipse, permite crear proyectos de

JavaFX y tiene muy buena integracin con el JavaFX CSS

Sitio web:
http://www.eclipse.org/efxclipse/index.html

URL para instalar:

http://download.eclipse.org/efxclipse/updates-
released/0.9.0/site

Ejemplo:
6. Introduccin a FXML:
http://docs.oracle.com/javase/8/javafx/api/javafx/fxm
l/doc-files/introduction_to_fxml.html

7. Referencia de JavaFX CSS:

http://docs.oracle.com/javase/8/javafx/api/javafx/sce
ne/doc-files/cssref.html

8. Documentacin Apis de JavaFX 8:

http://docs.oracle.com/javase/8/javafx/api/toc.htm

9. Tecnologas, tutoriales oficiales de Oracle sobre FX:

http://docs.oracle.com/javase/8/index.html

10. FXExperience buen blog sobre JavaFX(ingles!):

http://fxexperience.com/

11. GuiGarage otro buen blog sobre JavaFX(ingles!):

http://www.guigarage.com/

12. Proyecto de lujo para bases de dates en tiempo real y

con componentes JavaFX, http://www.javafxdata.org/

13. Proyecto para pruebas unitarias especialmente para

JavaFX: https://github.com/SmartBear/TestFX

14. Api de DataFX: http://datafx.bitbucket.org/datafx-

core/

15. RovoBM, crea aplicaciones para iOS con JavaFX:

http://www.robovm.org/

16. Dejo un proyecto que he realizado en eclipse, en el

cual muestro como crear simples login de usuario sin
css, con css, en un solo archivo, alguno por ah con
mvc y otro que muestra el acceso a otra ventana
genera dialogos.
Deje swing hace das porque me limitaba a tener que
entender sus apis desactualizadas, un ejemplo tambin muy
claro es no usar frameworks como Java Media Frameworks
porque con JavaFX tienes efectos, sombras, transciciones,
Animaciones 3D.

Segn en su pgina oficial todo el proyecto JavaFX ya no es

Beta, esta en paales pero existen muchos proyectos que ni
por cerca Swing llego a crear, los invito a que empiecen en
este nuevo framework y crezca esta comunidad.

Desde Honduras un abrazo.