dQu es JavaFX?

La plataforma JavaFX es la evolucin de la plataforma del cliente Java diseada para permitir a los desarrolladores de aplicaciones para crear y desplegar aplicaciones ricas de Internet (RIAs) que se comportan de forma consistente en mltiples plataformas. Construido sobre la tecnologa Java, la plataforma JavaFX proporciona un rico conjunto de grficos y medios de comunicacin de la API de alto rendimiento con aceleracin por hardware de grficos y los motores de los medios de comunicacin que simplifican el desarrollo de aplicaciones basadas en datos de la empresa cliente. Invertir en la plataforma JavaFX proporciona las siguientes ventajas para los desarrolladores de Java y las empresas que forman parte del ecosistema de Java: * Dado que la plataforma JavaFX est escrito en Java, los desarrolladores de Java pueden aprovechar sus habilidades existentes y las herramientas para desarrollar aplicaciones JavaFX. * Debido a que Java es ampliamente utilizada, es fcil encontrar desarrolladores Java con experiencia que puede convertirse rpidamente en la creacin de aplicaciones JavaFX productiva. * Mediante el uso de un conjunto homogneo de tecnologas Java para el servidor y las plataformas de cliente, la plataforma JavaFX reduce el riesgo de la inversin mediante la reduccin de la complejidad de las soluciones de negocio. * Los costos de desarrollo tambin se han reducido debido a las ventajas antes mencionadas. * La plataforma JavaFX proporciona a los desarrolladores un marco de desarrollo y entorno de ejecucin para crear aplicaciones empresariales y de negocios que se ejecutan en mltiples plataformas que soportan Java. Ver la arquitectura de JavaFX y el documento marco para conocer la arquitectura de la plataforma JavaFX y conceptos clave. Una breve historia de JavaFX En la conferencia de JavaOne 2007, Sun Microsystems introdujo la plataforma JavaFX para ayudar a los desarrolladores de contenido y desarrolladores de aplicaciones crear aplicaciones ricas en contenido para dispositivos mviles, escritorios, televisores y otros dispositivos de consumo. La oferta inicial consista en la plataforma JavaFX Mobile y el lenguaje JavaFX Script. Varios comunicados pblicos fueron entregados despus del anuncio inicial, la versin 1.3 fue lanzada el 22 de abril de 2010. Despus de la adquisicin de Oracle de Sun Microsystems, Oracle ha anunciado durante la conferencia JavaOne 2010 que el apoyo al lenguaje JavaFX Script se suspendera. Sin embargo, tambin se anunci que la API de JavaFX Script ser portado a Java y sera lanzado como parte del producto de JavaFX 2.0. Este anuncio significa que las capacidades JavaFX estar disponible para todos los desarrolladores de Java, sin necesidad de aprender un lenguaje de programacin nuevo. Con este anuncio, Oracle se ha comprometido a JavaFX el medio ambiente principal para las aplicaciones de cliente enriquecido.

Qu hay de nuevo en JavaFX 2.0? Las reas de enfoque principal para el lanzamiento de JavaFX 2.0 incluye las siguientes caractersticas, muchas de las cuales se describen tambin en la arquitectura de JavaFX y el documento marco: * Java API para JavaFX que proporcionan todas las caractersticas del lenguaje familiar (como los genricos, anotaciones y mltiples hilos) que los desarrolladores de Java estn acostumbrados a usar. El API se han diseado para ser amigable con alternativas de idiomas JVM, como JRuby y Scala. Debido a las capacidades JavaFX estn disponibles a travs de las API de Java, se puede seguir utilizando sus herramientas favoritas de desarrolladores Java (como IDEs, refactorizacin de cdigo, depuradores y analizadores) para desarrollar aplicaciones JavaFX. * Un nuevo motor grfico para manejar las modernas unidades de procesamiento grfico (GPU). La base de este nuevo motor es una aceleracin por hardware pipeline de grficos, llamado Prism, que se combina con un conjunto de herramientas de ventanas, llamado Glass. Este motor grfico es la base de los avances actuales y futuros para hacer grficos ricos simple, suave y rpido. * FXML, un nuevo lenguaje de marcado declarativo que est basado en XML y se utiliza para definir la interfaz de usuario en una aplicacin de JavaFX. No es un lenguaje compilado y, por tanto, no requiere volver a compilar el cdigo cada vez que haga algn cambio en el diseo. * Un nuevo motor de los medios de comunicacin que soporta la reproduccin de contenido web multimedia. Proporciona una estable, de baja latencia marco de los medios de comunicacin que se basa en el marco de GStreamer multimedia. * Uno de los componentes web que da la capacidad de incorporacin de las pginas web en una aplicacin JavaFX utilizando la tecnologa de renderizado WebKit HTML. Representacin de aceleracin por hardware est disponible usando Prism. * Un navegador actualizado plug-in para JavaFX 2.0, que permite la carga de los applets JavaFX basadas en Prism. * Una amplia variedad de controles integrados de interfaz de usuario, que incluyen grficos, tablas, mens y paneles. Adems, una API se proporciona para permitir a terceros que contribuyan controles de interfaz de usuario que la comunidad de usuarios puede utilizar. * Aplicaciones de ejemplo que muestran las diferentes caractersticas de la tecnologa JavaFX 2.0, junto con un gran nmero de ejemplos de cdigo y fragmentos. * Un doclet actualizada utilizada con la herramienta Javadoc para generar documentacin de la API de JavaFX en formato HTML. Informacin detallada sobre cmo utilizar este doclet actualizada se puede encontrar en uso de un Doclet con JavaFX.

Qu puedo crear con JavaFX? La Tabla 1 muestra las imgenes en miniatura de algunos de los ejemplos de aplicaciones JavaFX que se incluyen con el lanzamiento de JavaFX 2.0. Haga clic en cada miniatura para ver una imagen ms grande de la aplicacin. Para ejecutar estas y otras aplicaciones de ejemplo, vaya a http://www.oracle.com/technetwork/java/javafx/downloads/index.html. Descargue el archivo zip que contiene las muestras de JavaFX 2.0 y extraer los archivos. El directorio de JavaFX, muestras-2.0 \ created.Samples se encuentran en el directorio JavaFX-muestras-2.0 \. Se puede ejecutar una muestra haciendo doble clic en uno de sus archivos ejecutables. Por ejemplo, para ejecutar la aplicacin Ensemble, haga doble clic en el archivo Ensemble.jar. Proyectos de NetBeans para las muestras se encuentran en el directorio de JavaFX, muestras2.0 \ src. Asegrese de consultar al Sistema de JavaFX documento de Requisitos para la versin con soporte de NetBeans IDE que usted necesita para ejecutar estos proyectos NetBeans para las muestras.

Primeros pasos con JavaFX

Si desea utilizar JavaFX para desarrollar rpidamente aplicaciones con una experiencia de usuario, entonces esta introduccin es para usted. Va a crear una simple aplicacin en la Figura 1 y aprender lo fcil que es obtener efectos grficos complejos con la codificacin de muy poco. Por supuesto, JavaFX es ms que formas animadas muy justo. Despus de haber completado este tutorial, mira las muestras de JavaFX para una amplia gama de aplicaciones que se pueden construir con JavaFX. Figura 1 Aplicacin crculos de colores

Descripcin de la "Figura 1 Aplicacin crculos de colores" Es ms fcil entender el cdigo de la aplicacin, si usted est familiarizado con el modelo de programacin grfica escena de JavaFX. El escenario es el contenedor de alto nivel para la aplicacin, y la escena es la superficie de dibujo de los contenidos de la aplicacin. El contenido est estructurado como un grfico de la escena, que es un rbol jerrquico de nodos. La Figura 2 muestra el escenario grfico para la ColorfulCircles aplicacin. Los nodos que son las instancias de poder del grupo de clase, y los nodos nonbranching, tambin conocido como nodos de la hoja, son instancias del rectngulo y crculo de clases. Figura 2 Grfico de colores Escena Crculos

Descripcin de la "Figura 2 Grfico de colores Escena Circles"

Configuracin de la aplicacin
Usted puede construir una aplicacin JavaFX utilizando cualquier herramienta de desarrollo diseado para crear una aplicacin Java. La herramienta que se utiliza en este tutorial de introduccin ha sido el IDE NetBeans. Antes de empezar, asegrese de que la versin de NetBeans IDE que est utilizando admite JavaFX 2.0. Ver el Requisitos del sistema para ms detalles. Configure su proyecto JavaFX en NetBeans IDE de la siguiente manera.

1. Desde el archivo de men, seleccione Nuevo proyecto . 2. En la categora de aplicaciones JavaFX, seleccione la aplicacin JavaFX . Haga clic enSiguiente . 3. Nombre del proyecto ColorfulCircles y haga clic en Finalizar . 4. Abra el ColorfulCircles.java archivos, copia de las declaraciones de importacin, y pegarlos en su proyecto,
reemplazando las declaraciones de importacin que genera el IDE NetBeans. O bien, puede generar las declaraciones de importacin como usted trabaja su manera a travs del tutorial utilizando la funcin de autocompletado de cdigo o comandos Fix Imports en NetBeans IDE. Cuando hay una seleccin de declaraciones de importacin, elegir la que se inicia con JavaFX .

Crear los fundamentos de aplicaciones

Eliminar la clase ColorfulCircles que el IDE NetBeans genera y sustituirlo por el cdigo en el ejemplo 1 . Este es el cdigo mnimo necesario para ejecutar una aplicacin JavaFX. Ejemplo 1 de aplicacin bsica

ColorfulCircles pblico de clase se extiende la aplicacin {

public static void main (String [] args) { lanzamiento (args); } @ Override public void start (primaryStage escenario) { primaryStage.show (); } }
La clase ColorfulCircles se extiende la aplicacin de clase e incluye dos mtodos. El primer mtodo es el main () mtodo, que llama al lanzamiento () mtodo. Como prctica recomendada de JavaFX, el lanzamiento de () es el mtodo slo se llama en el main ()mtodo. A continuacin, el ColorfulCircles clase tiene prioridad sobre el resumen start () en el mtodo de aplicacin de clase. El start () mtodo toma como argumento la primera etapa de la aplicacin. La ltima lnea de cdigo hace que el escenario visible. Usted puede compilar y ejecutar la aplicacin ColorfulCircles ahora, y en cada paso del tutorial, para ver los resultados intermedios. Si llegas a tener problemas, echar un vistazo a el cdigo de la ColorfulCircles.java archivo.

Agregue la escena
Ahora bien, establecer una escena en el escenario mediante la adicin de las tres lneas en negrita en el ejemplo 2 . Dos mejores prcticas se muestra en este cdigo de crear un nodo de grupo como un nodo raz de la escena y ajustar el ancho y alto de la escena, en este caso 800 por 600. Aadir la escena y todo su contenido antes de que el primaryStage.show () de lnea. Esta es otra de buenas prcticas JavaFX. Ejemplo 2 Escena

@ Override public void start (primarystage escenario) { Raz del grupo = new Grupo (); escena Escena = Escena nueva (raz, 800, 600, Color.black); primaryStage.setScene (escena); primaryStage.show ()
Si ha ejecutado la aplicacin en este punto, usted podra ver una escena completamente negro.

Agregar grficos
A continuacin, crear 30 crculos, agregue el cdigo en el ejemplo 3 antes de laprimaryStage.show () de lnea. Ejemplo 3 30 Crculos

Crculos grupo = new Grupo (); for (int i = 0; i <30; i + +) { Crculo crculo = new Circle (150, Color.web ("blanco", 0,05));

circle.setStrokeType (StrokeType.OUTSIDE); circle.setStroke (Color.web ("blanco", 0,16)); circle.setStrokeWidth (4); . circles.getChildren () suma (crculo); } . root.getChildren () para sumar (crculos);
Este cdigo crea un grupo llamado los crculos , y luego utiliza una de bucle para aadir 30 crculos con el grupo. Cada crculo tiene un radio de 150 , color de relleno de color blanco , y el nivel de opacidad del 5 por ciento, lo que significa que es casi transparente. Para crear un borde alrededor de los crculos, el cdigo incluye la StrokeType clase. Un tipo de trazo de EXTERIOR se entiende el lmite del crculo se extiende fuera del interior de laStrokeWidth valor, que es 4 . El color de la carrera es blanco , y el nivel de opacidad es 16 por ciento, por lo que es ms brillante que el color de los crculos. La ltima lnea aade el crculos de grupo para el nodo raz. Esta es una estructura temporal.Ms tarde, modificar este grfico de la escena para que coincida con la que se muestra en la Figura 2 . La figura 3 muestra la aplicacin. Dado que el cdigo no ha especificado todava un lugar nico para cada crculo, el crculo se dibujan en la parte superior de uno al otro, con la parte superior izquierdo de la ventana como el punto central de los crculos. La opacidad de los crculos superpuestos interacta con el fondo negro, produciendo el color gris de los crculos. Figura 3 Circles

Descripcin de la "Figura 3 Circles"

Aadir un efecto visual

Continuar aplicando un efecto de desenfoque a la caja de los crculos para que se vean fuera de foco. El cdigo est en el ejemplo 4 . Aadir este cdigo antes de la primaryStage.show ()de lnea. Ejemplo 4 Efecto Desenfoque de cuadro

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

Este cdigo establece el radio de desenfoque de 10 pxeles de ancho por 10 pxeles de alto, y la iteracin de desenfoque a 3, por lo que es aproximadamente un desenfoque gaussiano.Esta tcnica de desenfoque produce un efecto suavizante en el borde de los crculos, como se muestra en la Figura 4 . Figura 4 Desenfoque de cuadro en crculos

Descripcin del "Desenfoque de cuadro la Figura 4 en crculos"

Crear un degradado de fondo

A continuacin, cree un rectngulo y lo rellenamos con un gradiente lineal, como se muestra enel ejemplo 5 . Agregue el cdigo antes de la root.getChildren (). aadir (crculos) la lnea de forma que el rectngulo degradado aparece detrs de los crculos. Ejemplo 5 degradado lineal

Colores rectngulo = new Rectangle (scene.getWidth (), scene.getHeight (), nueva linearGradient (0f, 1f, 1f, 0f, cierto, CycleMethod.NO_CYCLE, nuevo Stop [] { nueva parada (0, Color.web ("# f8bd55")), nueva parada (0,14, Color.web ("# c0fe56")), nueva parada (0,28, Color.web ("# 5dfbc1")), nueva parada (0,43, Color.web ("# 64c2f8")), nueva parada (0,57, Color.web ("# be4af7")), nueva parada (0,71, Color.web ("# ed5fc2")), nueva parada (0,85, Color.web ("# ef504c")), nueva parada (1, Color.web ("# f2660f ")),})); . root.getChildren () para sumar (colores);
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 parte inferior izquierda esquina (0, 1) y termina en la parte superior derecha de la esquina (1, 0). El valor de la verdad, la pendiente es proporcional a la del rectngulo, y NO_CYCLE indica que el ciclo de color no se repetir. El Stop [] secuencia indica que el gradiente de color debe estar en un lugar determinado. La ltima lnea de cdigo aade el color rectngulo para el nodo raz. Los crculos grises con bordes borrosos aparecen ahora en la parte superior de un arco iris de colores, como se muestra en la Figura 5 .

Figura 5 degradado lineal

Descripcin de la "Figura 5 degradado lineal" La figura 6 muestra el grfico de la escena intermedia. En este punto, los crculos de grupos ycolores rectngulo son hijos del nodo raz. Figura 6 Intermedio Escenario Grfico

Descripcin de la "Figura 6 Escenario Grfico Intermedio"

Aplicar un modo de fusin

Ahora agregue color a los crculos y oscurecer la escena mediante la adicin de un efecto de mezcla de superposicin. Esta tarea requiere un poco de limpieza. Va a borrar el crculo y el rectngulo grupo gradiente lineal del grfico de la escena y aadir al grupo de superposicin nueva mezcla. 1. Eliminar las dos lneas siguientes de cdigo: . root.getChildren () para sumar (colores); . root.getChildren () para sumar (crculos);

2. Agregue el cdigo en el ejemplo 6 , donde ha quitado las dos lneas.

Ejemplo 6 modos de mezcla

Grupo blendModeGroup =

Grupo nuevo (nuevo grupo (new Rectangle (scene.getWidth (), scene.getHeight (), , Color.black) los crculos), los colores); colors.setBlendMode (BlendMode.OVERLAY); . root.getChildren () para sumar (blendModeGroup);
El grupo blendModeGroup establece la estructura de la mezcla de superposicin. El grupo est formado por dos nios. El primer hijo es un nuevo (sin nombre) Grupo que contiene un nuevo (sin nombre) y el rectngulo negro creado previamente crculos grupo. El segundo hijo es la creada anteriormente colores rectngulo. El setBlendMode () mtodo se aplica la mezcla a la superposicin de colores rectngulo.La ltima lnea de cdigo aade el blendModeGroup al escenario grfico como un hijo del nodo raz, como se muestra en la Figura 2 . Mezclas de superposicin son efectos comunes en las aplicaciones de diseo grfico. Pueden oscurecer una imagen o aadir destaca o ambos, dependiendo de los colores en la mezcla. En este caso, el rectngulo degradado lineal se utiliza como recubrimiento. El rectngulo negro sirve para mantener el fondo oscuro, mientras que los crculos casi transparente recoger los colores del degradado, pero se oscurecen tambin. La figura 7 muestra los resultados. Usted ver el efecto completo de la mezcla de recubrimiento cuando se anima los crculos en el siguiente paso. Figura 7 superposicin de mezcla

Descripcin de la "mezcla de superposicin Figura 7"

Aadir animacin
El paso final es el uso de animaciones JavaFX para mover los crculos:

1. Si usted no ha hecho, agregue java.lang.Math.random importacin esttica, a la lista de

declaraciones de importacin.

2. Agregue el cdigo de la animacin en el ejemplo 7 antes de la primaryStage.show () de lnea.

Ejemplo 7 Animation

Cronologa Cronologa Cronologa = new (); de (Nodo crculo: circles.getChildren ()) { timeline.getKeyFrames (). AddAll ( nuevo fotograma clave (Duration.ZERO, / start / establecer la posicin a 0 nueva KeyValue (circle.translateXProperty (), random () * 800), nueva KeyValue (circle.translateYProperty (), random () * 600) ), nuevo fotograma clave (Duracin nuevo (40000), al final / / establecer la posicin en 40 aos nueva KeyValue (circle.translateXProperty (), random () * 800), nueva KeyValue (circle.translateYProperty (), random () * 600) ) ); } / / Juego 40 de la animacin timeline.play ();
La animacin es impulsado por una lnea de tiempo, por lo que este cdigo se crea una lnea de tiempo, y luego utiliza una de bucle para aadir dos fotogramas clave para cada uno de los 30 crculos. El primer fotograma clave en 0 segundos utiliza eltranslateXProperty y translateYProperty propiedades para establecer una posicin aleatoria dentro de la ventana. El segundo cuadro clave en 40 segundos hace lo mismo.As, cuando la lnea de tiempo se juega, se anima a todos los crculos de una posicin al azar a otro durante un perodo de 40 segundos. La figura 8 muestra los 30 crculos de colores en movimiento, que completa la solicitud. Para el cdigo fuente completo, vea el ColorfulCircles.java archivo. Figura 8 crculos animados

Descripcin de la "Figura 8 crculos animados"

Implementar la aplicacin

Cuando se ejecuta la aplicacin en el IDE NetBeans o utilizar el comando limpiar y construir, su aplicacin est empaquetada para todos los tipos de JavaFX de despliegue, con las opciones que se configuran como las propiedades del proyecto. Vaya al directorio dist del directorio de su proyecto ColorfulCircles y haga doble clic en cada uno de los tres archivos siguientes: ColorfulCircles.jar ejecuta la aplicacin en modo autnomo. ColorfulCircles.jnlp ejecuta la aplicacin en modo Web Start. ColorfulCircles.html abre una pgina web que contiene un enlace Web Start y ejecuta la aplicacin en el navegador. Para obtener ms informacin acerca de la implementacin, vea Implementar aplicaciones JavaFX .

Revisin
He aqu un resumen de la informacin presentada en este artculo acerca de las aplicaciones JavaFX:

La clase principal se extiende la aplicacin de clase. La clase principal anula el start () en el mtodo de aplicacin de clase. El start () mtodo toma como argumento la primera etapa de la aplicacin. El principal () llama al mtodo de lanzamiento () mtodo en la aplicacin de clase.Una mejor prctica es hacer que este mtodo, el nico mtodo que el main () llama al mtodo.

La escena se agrega como un nodo raz, que puede ser un nodo de grupo, como se muestra en este tutorial, o cualquier otro nodo padre, como un panel de diseo.

Una buena prctica consiste en establecer la altura y la anchura de la escena cuando lo cree, de lo contrario los valores predeterminados de escena con el tamao mnimo necesario para mostrar su contenido.

La sintaxis para agregar hijos al nodo raz tiene esta forma: root.getChildren () para sumar (crculos). El show () lnea hace que el contenido de la fase visible. Como una buena prctica, este cdigo debe ser la ltima lnea en el start () mtodo. JavaFX ofrece intrincados efectos grficos, como manchas, rellenos degradados, las mezclas, y la animacin.

A dnde ir desde aqu

Ahora que est familiarizado con JavaFX, aqu estn algunas sugerencias sobre qu hacer a continuacin:

Pruebe las muestras de JavaFX, que se puede descargar desdehttp://www.oracle.com/technetwork/java/javafx/downloads/index.htm . Especialmente echar un vistazo a la aplicacin de Ensemble, que proporciona las mejores prcticas para la creacin de aplicaciones JavaFX.

Lea la documentacin JavaFX en http://docs.oracle.com/javafx/ . Usted encontrar documentos sobre todo lo tratado en este tutorial, incluyendo detalles sobre el grafo de escena, efectos visuales y animacin.

Introduccin a FXML
FXML es nuevo para JavaFX 2.0, y usted podra preguntar: "Qu es FXML?" y "Es FXML para m?" FXML es un lenguaje basado en XML para la definicin de marcado declarativo de la interfaz de usuario en una aplicacin de JavaFX. FXML es muy adecuado para la definicin de diseo esttico, como formularios, controles, y las tablas. Con FXML, tambin se puede construir diseos de forma dinmica mediante la inclusin de un script. Una de las ventajas de FXML es que se basa en XML y es familiar a la mayora de los desarrolladores, desarrolladores web y desarrolladores de todo el uso de otras plataformas RIA. Otra ventaja es que FXML no es un lenguaje compilado, no es necesario volver a compilar el cdigo para ver los cambios realizados. Una tercera ventaja es que FXML hace que sea fcil ver la estructura de un escenario grfico de la aplicacin. Esto, a su vez, hace que sea ms fcil para colaborar en las interfaces de usuario entre los miembros de su equipo de desarrollo. Para comparar JavaFX y FXML, vistazo a la interfaz de usuario en la Figura 1 . El grfico de la escena que hace que esta aplicacin incluye un diseo de panel de la frontera con la parte superior y la regin centro, donde cada uno contiene una etiqueta. Figura 1 Ejemplo de panel de borde simple

Descripcin de la "Figura 1 Ejemplo de panel de borde simple" Ejemplo 1 muestra el cdigo JavaFX para la escena grafica en la figura 1 . Ejemplo 1 JavaFX Escenario Grfico

Frontera BorderPane = new BorderPane (); Toppanetext etiqueta = new Label ("Ttulo de la pgina"); border.setTop (toppanetext); Centerpanetext etiqueta = new Label ("Algunos datos aqu"); border.setCenter (centerpanetext);
Ejemplo 2 muestra el mismo grfico de escena como el ejemplo 1 , pero en FXML. Ejemplo 2 FXML Escenario Grfico

<BorderPane> <top> <label Text="Page Title"/> </ Top> <center> <label Text="Some datos here"/> </ Center> </ BorderPane>

La mejor manera de mostrar las ventajas de FXML es con un ejemplo. Este tutorial describe cmo crear la interfaz de usuario de inicio de sesin se muestra en la Figura 2 . Figura 2 Ingresar la interfaz de usuario

Descripcin de la "Figura 2 Interfaz de usuario de inicio de sesin" Antes de comenzar, a familiarizarse con el diseo de la interfaz de usuario de inicio de sesin, se muestra en la Figura 3 . La interfaz de usuario utiliza un diseo de panel de la frontera que contiene dos regiones. La regin superior contiene un diseo panel de pila con el texto Ejemplo de etiqueta , que se superpone una imagen. La regin central incluye un diseo de panel de cuadrcula con una etiqueta, el campo de texto, el campo de contrasea, y el botn. Figura 3 Diseo de la interfaz de usuario Inicio de sesin

Descripcin de la "Figura 3 Estructura de la interfaz de usuario Inicio de sesin" Para crear la interfaz de usuario de inicio de sesin, se realizarn las siguientes tareas:

Preprese para este tutorial

Configurar el proyecto Configuracin de los conceptos bsicos de aplicacin Creacin del archivo de propiedades Creacin del archivo de FXML Definir un diseo de panel de la frontera Pila de texto sobre una imagen Agregar una cuadrcula de diseo y controles Aadir un evento de botn Use un lenguaje de scripting Use una hoja de estilo

Preprese para este tutorial

Este tutorial usa el IDE NetBeans. Asegrese de que la versin de NetBeans IDE que est utilizando admite JavaFX 2.0. Ver el Requisitos del sistema para ms detalles. Para completar este tutorial, debe estar familiarizado con la forma de crear una interfaz de usuario mediante programacin con JavaFX. El conocimiento de cmo trabajar con un escenario grfico es especialmente til debido a que la estructura jerrquica de FXML sigue de cerca la estructura del escenario grfico JavaFX.

Configurar el proyecto
El primer paso es la creacin de un proyecto JavaFX en NetBeans IDE.

1. Desde el archivo de men, seleccione Nuevo proyecto . 2. En el JavaFX categora de la aplicacin, seleccione Aplicacin FXML JavaFX . Haga clic en Siguiente . 3. El nombre de la FXMLExample proyecto y haga clic en Finalizar . NetBeans IDE se abre un proyecto con
tres archivos: FXMLExample.java, Sample.fxml y Sample.java.

4. Descargue la imagen de la luz azul de la pendiente para el fondo al hacer clic derecho en este
enlace fx_boxback.jpg y guardarla en su escritorio. A continuacin, arrastrarlo desde el escritorio a la carpeta en el directorio fxmlexample Source Packages.

Configuracin de los conceptos bsicos de aplicacin

Cada solicitud debe incluir FXML algn cdigo JavaFX. Como mnimo, este es el cdigo para crear el escenario y la escena y para iniciar la aplicacin. Abra el archivo FXMLExample.java , elimine el cdigo que genera el IDE NetBeans, y sustituirlo por el cdigo en el ejemplo 3 . Ejemplo 3 FXMLExample.java

paquete fxmlexample; importacin java.util.ResourceBundle; importacin javafx.application.Application; importacin javafx.fxml.FXMLLoader;

importacin javafx.scene.Parent; importacin javafx.scene.Scene; importacin javafx.stage.Stage; pblica FXMLExample clase extiende la aplicacin { @ Override public void start (etapa Etapa) throws Exception { stage.setTitle ("Ejemplo FXML"); Raz primaria = FXMLLoader.load (getClass (). GetResource ("fxml_example.fxml"), ResourceBundle.getBundle ("fxmlexample.fxml_example")); Escena = Escena nueva (raz, 226, 264); stage.setScene (escena); stage.show (); } public static void main (String [] args) { lanzamiento (args); } }
Como programador de JavaFX, el cdigo para crear la escena y el escenario y lanzar la aplicacin debe ser familiar para usted. Sin embargo, esta lnea es especfica para FXML: Raz primaria = FXMLLoader.load (. GetClass () getResource ("fxml_example.fxml"), ResourceBundle.getBundle ("fxmlexample.fxml_example")); El FXMLLoader.load () mtodo carga la jerarqua de objetos de la fxml_example.fxml archivo de recursos y se asigna a la variable llamada raz . El getResources argumento aade un paquete de recursos que externaliza las cadenas de la interfaz de usuario, lo que facilita tareas como la localizacin. En las dos secciones siguientes, se realizar una copia del paquete de recursos con un archivo de propiedades y crear el archivo de origen FXML. En general, un objeto de la escena se ha creado, con la raz del conjunto de variables como la raz del grafo de escena. El elemento raz en el marcado FXML se convierte en la raz del escenario grfico.

Creacin del archivo de propiedades

Una prctica recomendada es de externalizar cadenas de texto para la interfaz de usuario en un archivo de propiedades. Siga estos pasos para crear un archivo de propiedades de la interfaz de usuario de inicio de sesin.

1. En la ventana de Proyectos, haga clic en la carpeta en el directorio fxmlexample Source Packages y

seleccione Nuevo , y luego otros .

2. En el cuadro de dilogo Nuevo archivo, haga clic en Otros , y luego Propiedades del archivo , a
continuacin, en Siguiente .

3. Introduzca fxml_example como el nombre del archivo y haga clic en Finalizar . El IDE abre un archivo con
la extensin. Propiedades.

4. Escriba los nombres de los recursos y sus valores, como se muestra en el ejemplo 4 .
Ejemplo 4 Los nombres de recursos en fxml_example.properties

loginExample = Login Ejemplo signIn = Firma en: userName = Nombre de Usuario: password = Contrasea: submit = Enviar

Creacin del archivo de FXML

Ahora cree un archivo llamado FXML fxml_example.fxml e insertar la declaracin XML y las declaraciones de importacin.

1. En la ventana de Proyectos, haga clic en la carpeta Sample.fxml fxmlexample y seleccioneCambiar

nombre .

2. Introduzca fxml_example archivo y haga clic en Aceptar . 3. Abra el archivo fxml_example, elimine el cdigo generado por el IDE NetBeans, y sustituirlo por el cdigo
en el ejemplo 5 . Ejemplo 5 Instrucciones de declaracin y de importacin

<? Xml version = "1.0" encoding = "UTF-8"?> <? Javafx.scene.layout importacin .*> <? Javafx.scene.control importacin .*> <? Javafx.scene importacin .*> <? Javafx.scene.image importacin .*>
Todos los archivos FXML debe comenzar con una declaracin XML. Se define la versin de XML (1,0) y el tipo de codificacin (UTF-8). Al igual que en JavaFX, los nombres de clase puede ser completo (incluyendo el nombre del paquete), o pueden ser importados con la declaracin de importacin, como se muestra en el ejemplo 5 . Si lo prefiere, puede utilizar las declaraciones de importacin especficos que se refieren a las clases.

Definir un diseo de panel de la frontera

A continuacin, empezar a construir la interfaz de usuario. Despus de las declaraciones de importacin, inserte el diseo de panel de la frontera se muestra en el ejemplo 6 . Ejemplo 6 Layout Panel de Frontera

<BorderPane fx: controller = "fxmlexample.FXMLExampleController" xmlns: fx = "http://javafx.com/fxml"> <top> </ Top> <center> </ Center>

</ BorderPane>
En este ejemplo, la raz del grafo de escena es el BorderPane clase de diseo, que se define con dos regiones, superior y central. La fx: controlador de atributo identifica un archivo de controlador, que debe ser declarado en el elemento FXML raz. Usted aprender ms sobre el controlador ms adelante en el tutorial. El xmlns: fx = "http://javafx.com/fxml" mapas de atributos del espacio de nombres a la URLhttp://javafx.com/fxml . Usted debe declarar el espacio de nombres en el elemento FXML raz. Este atributo le permite utilizar etiquetas FXML que corresponden a los elementos de la API de JavaFX.

Pila de texto sobre una imagen

Ahora, el nido de un panel de pila en la regin superior del diseo del panel de la frontera. El panel de pila contiene una etiqueta de superposicin de una imagen, como se muestra en la Figura 4 . Figura 4 Regin Fronteriza parte superior del panel, incluyendo panel de la pila

Descripcin de la "Figura 4 Regin Fronteriza parte superior del panel, incluyendo panel de pila" El cdigo para el panel de la pila se encuentra en el ejemplo 7 . Inserte el cdigo entre las<top> y </ top> etiquetas. Ejemplo 7 pila de texto sobre una imagen

<StackPane> <children> <ImageView> <image> <imagen Url="@fx_boxback.jpg"/> </ Image> </ ImageView> <label Text="%loginExample" style="-fx-font: NORMAL 20 Tahoma;"/> </ Hijos> </ StackPane>
El StackPane disposicin lugares sus nodos secundarios dentro de una sola pila, con cada nuevo nodo aadido en la parte superior del nodo anterior. Este modelo de diseo proporciona una manera fcil de superposicin de texto en una imagen. El <children> etiqueta agrega nodos secundarios al escenario grfico, que es similar al uso de la GetChildren (). add () mtodo de JavaFX. La imagen de clase carga el archivo fx_boxback.jpg, que se supone que se encuentra en una ruta relativa al archivo de FXML actual. El ImageView clase muestra la imagen en pantalla.

La etiqueta de clase tiene una propiedad de texto que figura en el nombre del recursologinExample . En FXML, un nombre de recurso es identificado por el operador%. Durante la carga, el cargador de FXML sustituye a la loginExample nombre de recurso por su valor, Ejemplo Login. Tenga en cuenta que FXML define estilos similares a los estilos CSS se definen en el setStyle () mtodo en cdigo JavaFX. En el ejemplo 7 , la etiqueta de clase utiliza el estilo de etiqueta para definir el peso de la fuente a la normalidad, la tipografa Tahoma, y el tamao de letra de 20 puntos. Otra forma de definir los estilos es aadir una hoja de estilo a la escena, de la misma manera que lo hara en Java. Usando una hoja de estilo que hace que sea ms fcil cambiar el estilo de su aplicacin en una fecha posterior. Vea la seccin de este tutorial titulado Use una hoja de estilo para obtener informacin sobre el uso de una hoja de estilo con la aplicacin FXMLExample.

Agregar una cuadrcula de diseo y controles

Nido prximo, un diseo de cuadrcula en la regin centro del panel de la frontera. Se utiliza un diseo de cuadrcula para colocar los controles en la pantalla en un patrn vertical y horizontal, como se muestra en la Figura 5. Figura 5 Panel de rejilla en la Regin Centro del panel de la frontera

Descripcin del "Panel de rejilla Figura 5 en la Regin Centro del panel de la frontera" Ejemplo 8 incluye el cdigo para el diseo de cuadrcula. Insertarla entre las <center> y </ center> etiquetas. Ejemplo 8 cuadrcula de diseo con controles

<GridPane alineacin = "top_center" hgap = "8" vgap = "8" style = "-fx-padding: 40 0 0 0"> <children> Texto <Label = "% signIn" style = "-fx-font: NORMAL 14 Tahoma;" GridPane.columnIndex = "0" GridPane.rowIndex = "0" /> Texto <Label = "% username" GridPane.columnIndex = "0" GridPane.rowIndex = "1" labelFor = "$ usernameField" /> <TextField fx: id = "usernameField" prefColumnCount = "10" GridPane.columnIndex = "1" GridPane.rowIndex = "1" /> Texto <Label = "% password" GridPane.columnIndex = "0" GridPane.rowIndex = "2" labelFor = "$ passwordField" />

<PasswordField fx: id = "passwordField" prefColumnCount = "10" GridPane.columnIndex = "1" GridPane.rowIndex = "2" onAction = "# handlePasswordFieldAction" /> <Botn fx: id = "submitButton" text = "% submit" GridPane.columnIndex = "1" GridPane.rowIndex = "3" onAction = "# handleSubmitButtonAction" /> <Etiqueta fx: id = "buttonStatusText" GridPane.columnIndex = "1" GridPane.rowIndex = "4" style = "-fx-texto-fill: # ff0000;" /> </ Hijos> </ GridPane>
El cdigo debe ser conocido por ahora, pero algunos nuevos atributos debe ser explicado. ElGridPane.columnIndex y GridPane.rowIndex atributos corresponden a la setColumnIndex () ysetRowIndex () los mtodos de la GridPane clase. La numeracin de filas y columnas de la cuadrcula empieza en cero. Por ejemplo, la ubicacin de la primera etiqueta de control (0,0), lo que significa que est en la primera fila de la primera columna, o en la esquina superior izquierda. El prefColumnCount atributo se utiliza para el TextField y passwordField controles para ajustar el ancho de columna preferido 10. Asignacin de una fx: Identificacin del valor a un elemento crea una variable en el espacio de nombres del documento, que puede consultar ms adelante en el cdigo. Referencia de las variables se identifican con un operador $. En el ejemplo 8 , el ID de TextField esusernameField . Este ID se asigna a la labelFor propiedad de la etiqueta de control, que establece una etiqueta para el TextField control. Tenga en cuenta que la passwordField y botn de los controles tienen un onAction atributo. El signo de nmero se refiere a un mtodo personalizado, que va a definir en la siguiente seccin cuando se crea el FXMLExampleController clase. Mientras FXML es una manera conveniente para definir la estructura de la interfaz de usuario de una aplicacin, no proporciona una forma de implementar el comportamiento de una aplicacin. Este comportamiento debe ser implementado en el cdigo de Java, que se describe en la siguiente seccin, o en un lenguaje de script, que se describe en utilizar un lenguaje de secuencias de comandos.

Aadir un evento de botn

Ahora, cree un controlador para manejar el evento del botn. Este ejemplo muestra cmo asociar marcado FXML con un controlador de eventos en Java.

1. En la ventana de Proyectos, haga clic en la carpeta Sample.java fxmlexample y seleccione Refactor , a

continuacin, cambiar el nombre .

2. Introduzca FXMLExampleController y haga clic en Refactorizar . 3. Abra el archivo FXMLExampleController.java, elimine el cdigo generado por el IDE NetBeans, y sustituirlo
por el cdigo en el ejemplo 9 . Ejemplo 9 FXMLExampleController.java

paquete fxmlexample;

importacin javafx.event.ActionEvent; importacin javafx.fxml.FXML; importacin javafx.scene.control.Label; pblica FXMLExampleController clase { @ FXML etiqueta privada buttonStatusText; @ FXML handleSubmitButtonAction protected void (ActionEvent evento) { buttonStatusText.setText ("Enviar pulsa el botn"); } @ FXML protegidos handlePasswordFieldAction vaco (ActionEvent evento) { buttonStatusText.setText ("Enter presionada la tecla"); } }
La anotacin @ FXML se utiliza para etiquetar campos no pblicos miembros de control y mtodos de control para el uso de marcas. Adems de el lenguaje de programacin Java, tambin puede utilizar otros lenguajes compilados, como Scala, para implementar un controlador. Ahora puede ejecutar la aplicacin. Prueba de la aplicacin mediante la introduccin de texto en los dos campos y hacer clic en Enviar. Para el cdigo fuente completo, puede descargar FXMLExample.zip .

Use un lenguaje de scripting

Como una alternativa al uso del cdigo de Java para crear un controlador de eventos, se puede crear el controlador con cualquier lenguaje que proporciona un motor de scripting compatible con JSR223. Idiomas incluyen JavaScript, Groovy, Jython, y Clojure. Editar el archivo FXML de la siguiente manera el uso de JavaScript en el ejemplo de inicio de sesin.

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

<? Javascript>

2. En el botn de marcado, cambiar el nombre de la funcin de lo que la llamada es el siguiente:

onAction = "handleSubmitButtonAction (evento);"

3. Actualizar el margen de beneficio en el passwordField algo parecido a esto:

onAction = "handlePasswordFieldAction (evento);"

4. Retire la fx: controlador de atributo de la BorderPane marcado y aadir la funcin de JavaScript en una
etiqueta <script> directamente debajo de l, como se muestra en el ejemplo 10 . Ejemplo 10 JavaScript en FXML

<BorderPane Xmlns:fx="http://javafx.com/fxml"> <fx:script>

handleSubmitButtonAction function () { buttonStatusText.setText ("Llamando a la JavaScript"); } funcin handlePasswordFieldAction (evento) { buttonStatusText.text = "JavaScript Ms"; } </ Fx: script>
Alternativamente, usted puede poner las funciones de JavaScript en un archivo externo (como fxml_example.js) e incluir el script de esta manera: <fx:script source="fxml_example.js"/> Si usted est considerando usar un lenguaje de script con FXML, tenga en cuenta que una IDE puede no ser compatible pasar a travs de cdigo de script durante la depuracin.

Use una hoja de estilo

Como alternativa al uso de estilos en lnea, usted puede aadir una hoja de estilo a la escena y luego establecer una clase de estilo en un nodo. Siga estos pasos para crear una hoja de estilo que define un estilo para el diseo de panel de red y control de etiqueta. 1. Crear la hoja de estilo.

a. En la ventana de Proyectos, haga clic en la carpeta en el directorio fxmlexample Source Packages y

seleccione Nuevo , y luego otros .

b. En el cuadro de dilogo Nuevo archivo, seleccione Otros , a continuacin,Cascading Style

Sheet , y haga clic en Siguiente .

c. Introduzca fxmlstylesheet y haga clic en Finalizar . d. Elimine el cdigo generado por el IDE NetBeans y sustituirlo por el cdigo deejemplo 11 .
Ejemplo 11 Contenido de la hoja de estilo

@ Charset "UTF-8"; / * Documento: FXMLstylesheet.css * / . Grid panel { -Fx-padding: 80 0 0 0; } . Label { -Fx-font: 36px Tahoma normal; }

2. Abra el archivo FXMLExample.java y aadir la hoja de estilo a la escena mediante la inclusin de este
cdigo antes de la lnea s tage.show () .

. scene.getStylesheets () para sumar ("fxmlexample / fxmlstylesheet.css");

3. Vaya al archivo fxml_example.fxml y agregar la clase de estilo. a. Agregue una instruccin de importacin para el elemento <String>.
<? Java.lang importacin .*>

b. Vuelva a colocar el marcado de la GridPane con el cdigo de ejemplo 12 .

Ejemplo 12 estilo de clase para panel de rejilla

<GridPane Alignment="top_center" hgap="8" vgap="8"> <styleClass> <string Fx:value="grid-pane"/> </ StyleClass>

c. Vuelva a colocar el marcado para el "Sign In" etiqueta con el cdigo de ejemplo 13.
Ejemplo 13 estilo de clase de etiqueta

Texto <Label = "% signIn" GridPane.columnIndex = "0" GridPane.rowIndex = "0"> <styleClass> <string Fx:value="label"/> </ StyleClass> </ Label>
Cuando se utiliza la <styleClass> etiqueta en un objeto, el estilo se aplica a todas las instancias de la misma clase, a menos que la clase tiene su propio estilo en lnea. Por lo tanto, cuando se ejecuta la aplicacin FXMLExample, el estilo en elejemplo 13 se aplica no slo a la sesin en la etiqueta, sino tambin el nombre de usuario y contrasea etiquetas. El estilo no se aplica a la etiqueta Ejemplo Login porque tiene un estilo en lnea que prevalece sobre la hoja de estilo.