Primeros pasos con JavaFX If you want to use JavaFX to quickly develop applications with rich user experiences, then this Getting Started is for you. Si desea utilizar JavaFX para desarrollar rápidamente aplicaciones con una experiencia de usuario, entonces esta introducción es para usted. You will create the simple application in Figure 1 and learn just how easy it is to attain complex graphic effects with very little coding. Va a crear la simple aplicación de la figura 1 y aprender lo fácil que es obtener efectos gráficos complejos con la codificación de muy poco. Of course, JavaFX is more than just pretty animated shapes. Por supuesto, JavaFX es más que formas animadas sólo bonita. After you have completed this tutorial, look at the JavaFX samples for a range of applications that you can build with JavaFX. Después de haber completado este tutorial, ver las muestras de JavaFX para una amplia gama de aplicaciones que se pueden construir con JavaFX.

Figure 1 Colorful Circles Application Figura 1 Aplicación Los círculos de colores

Description of "Figure 1 Colorful Circles Application" Descripción de la "Figura 1 Aplicación Los círculos de colores"

It is easier to understand the application code if you are familiar with the JavaFX scene graph programming model. Es más fácil entender el código de la aplicación, si usted está familiarizado con el modelo de programación JavaFX escena gráfica. The stage is the top-level container for the application, and the scene is the drawing surface for the application's content. El escenario es el contenedor de alto nivel para la aplicación, y la escena es la superficie de dibujo para el contenido de la aplicación. The content is structured as a scene graph, which is a hierarchical tree of nodes. El contenido está estructurado como un gráfico de la escena, que es un árbol jerárquico de nodos.

Figure 2 shows the scene graph for the ColorfulCircles application. La figura 2 muestra el gráfico de la escena de la ColorfulCircles aplicación. Nodes that branch are instantiations of the Group class, and the nonbranching nodes, also known as leaf nodes, are

instantiations of the Rectangle and Circle classes. Los nodos que son las instancias de poder del Group de clase, y los nodos nonbranching, también conocido como nodos de la hoja, son las instancias de la Rectangle y Circle clases.

Figure 2 Colorful Circles Scene Graph Figura 2 Gráfico de colores Escena Círculos

Description of "Figure 2 Colorful Circles Scene Graph" Descripción de la "Figura 2 Gráfico de colores Escena Circles"

Set Up the Application Configuración de la aplicación You can build a JavaFX application using any development tool designed for creating a Java application. Usted puede construir una aplicación JavaFX utilizando cualquier herramienta de desarrollo diseñado para crear una aplicación Java. The tool used in this Getting Started tutorial is NetBeans IDE 7.0 with the JavaFX 2.0 plugin. La herramienta que se utiliza en este tutorial de introducción ha sido NetBeans IDE 7.0 con el plugin de JavaFX 2.0. See the installation guide for instructions on how to install the NetBeans plugin. Vea la guía de instalación para obtener instrucciones sobre cómo instalar el plugin de NetBeans.

Set up your JavaFX project in the NetBeans IDE as follows. Configurar el proyecto de JavaFX en NetBeans IDE de la siguiente manera.

1. From the File menu, choose New Project . En el menú Archivo, seleccione Nuevo proyecto.

2. In the Java application category, choose JavaFX Application . En la categoría de la aplicación Java, seleccione la aplicación JavaFX. Click Next . Haga clic en Siguiente.

3. Name the project ColorfulCircles and ensure the main class is colorfulcircles.ColorfulCircles . El nombre del proyecto ColorfulCircles y asegurar la clase principal es colorfulcircles.ColorfulCircles . Click Finish . Haga clic en Finalizar.

4. Open the ColorfulCircles.java file, copy the import statements, and paste them into your project, overwriting the import statements that the NetBeans IDE generated. Abra el ColorfulCircles.java archivos, copia de las declaraciones de importación, y las pega en su proyecto, reemplazando las declaraciones de importación que el IDE NetBeans genera.

Or, you can generate the import statements as you work your way through the tutorial by using either the code completion feature or Fix Imports command in the NetBeans IDE. O bien, puede generar las declaraciones de importación como usted trabaja su manera a través del tutorial utilizando la función de autocompletado de código o comandos Fix Las importaciones en el IDE NetBeans. When there is a choice of import statements, choose the one that starts with javafx . Cuando hay una selección de declaraciones de importación, elegir la que se inicia con javafx .

Create the Application Basics Crear los fundamentos de aplicación Delete the ColorfulCircles class that the NetBeans IDE generated and replace it with the code in Example 1 . Eliminar la clase ColorfulCircles que el IDE NetBeans genera y sustituirlo por el código en el ejemplo 1 . This is the minimum code needed to run a JavaFX application. Este es el código mínimo necesario para ejecutar una aplicación JavaFX.

Example 1 Basic Application Ejemplo 1 de aplicación básica

public class ColorfulCircles extends Application { ColorfulCircles public class se extiende la aplicación { public static void main(String[] args) { public static void main (String [] args) { Application.launch(args); Application.launch (args); } } @Override @ Override public void start(Stage primaryStage) { public void start (primaryStage Etapa) { primaryStage.setVisible(true); primaryStage.setVisible (true); } }} }

The ColorfulCircles class extends the Application class and includes two methods. La clase ColorfulCircles se extiende la Application de clase e incluye dos métodos. The first method is the main() method, which calls the launch() method. El primer método es el main() método, que llama al launch() método. As a JavaFX best practice, the launch() method is the only method called in the main() method. Como práctica recomendada de JavaFX, el launch() es el método sólo se le llama en el main() método.

Next, the ColorfulCircles class overrides the abstract start() method in the Application class. A continuación, el ColorfulCircles clase tiene prioridad sobre el resumen start() en el método Application de clase. The start() method takes as an argument the primary stage for the application. El start() método toma como argumento el escenario principal de la aplicación. The final line of code makes the stage visible. La última línea de código hace que el escenario visible.

You can compile and run the ColorfulCircles application now, and at each step of the tutorial, to see the intermediate results. Usted puede compilar y ejecutar la aplicación ColorfulCircles ahora, y en cada paso del tutorial, para ver los resultados intermedios. If you run into problems, take a look at the code in the ColorfulCircles.java file. Si llegas a tener problemas, echar un vistazo a el código de la ColorfulCircles.java archivo.

Add the Scene Añadir la escena Now, set a scene on the stage by adding the three lines in bold in Example 2 . Ahora bien, establecer una escena en el escenario mediante la adición de las tres líneas en negrita en el ejemplo 2 . Two best practices shown in this code create a group node as a root node for the scene and set the width and height of the scene, in this case 800 by 600. Dos mejores prácticas se muestra en este código de crear un nodo de grupo como un nodo raíz de la escena y ajustar el ancho y alto de la escena, en este caso 800 por 600.

Add the scene and all its contents before the primaryStage.setVisible line. Añadir la escena y todo su contenido antes de que el primaryStage.setVisible línea. This is another JavaFX best practice. Esta es otra de buenas prácticas JavaFX.

Example 2 Scene Ejemplo 2 Escena

@Override @ Override public void start(Stage primarystage) { public void start (primarystage Etapa) { Group root = new Group(); Raíz del grupo = new Grupo (); Scene scene = new Scene(root, 800, 600, Color.BLACK); Escena = Escena nueva (raíz, 800, 600, Color.black); primaryStage.setScene(scene); primaryStage.setScene (escena);

primaryStage.setVisible(true) primaryStage.setVisible (true)

Figure 3 shows the application so far. La Figura 3 muestra la aplicación hasta la fecha.

Figure 3 Stage and Scene Figura 3 escenario y la escena

Description of "Figure 3 Stage and Scene" Descripción de la "Figura 3 escenario y la escena"

Add Graphics Agregar gráficos Next, create 30 circles by adding the code in Example 3 before the primaryStage.setVisible line. A continuación, cree 30 círculos, agregue el código en el ejemplo 3 antes de la primaryStage.setVisible línea.

Example 3 30 Circles Ejemplo 3 30 Círculos

Group circles = new Group(); Círculos grupo = new Grupo ();for (int i = 0; i < 30; i++) { for (int i = 0; i <30; i + +) { Circle circle = new Circle(150, Color.web("white", 0.05)); Círculo círculo = new Circle (150, Color.web ("blanco", 0,05)); circle.setStrokeType(StrokeType.OUTSIDE); circle.setStrokeType (StrokeType.OUTSIDE); circle.setStroke(Color.web("white", 0.16)); circle.setStroke (Color.web ("blanco", 0,16)); circle.setStrokeWidth(4); circle.setStrokeWidth (4); circles.getChildren().add(circle); . circles.getChildren () suma (círculo);} }root.getChildren().add(circles); . root.getChildren () añadir (círculos);

This code creates a group named circles , then uses a for loop to add 30 circles to the group. Este código crea un grupo llamado circles , y luego utiliza una for bucle para añadir 30 círculos con el grupo. Each circle has a radius of 150 , fill color of white , and opacity level of 5 percent, meaning it is mostly transparent. Cada círculo tiene un radio de 150 , color de relleno de white , y el nivel de opacidad del 5 por ciento, lo que significa que es casi transparente.

To create a border around the circles, the code includes the StrokeType class. Para crear un borde alrededor de los círculos, el código incluye la StrokeType clase. A stroke type of OUTSIDE means the boundary of the circle is extended outside the interior by the StrokeWidth value, which is 4 . Un tipo de trazo de OUTSIDE entiende el límite del círculo se extiende fuera del interior de la StrokeWidth valor, que es 4 . The color of the stroke is white , and the opacity level is 16 percent, making it brighter than the color of the circles. El color de la carrera es white , y el nivel de opacidad es 16 por ciento, por lo que es más brillante que el color de los círculos.

The final line adds the circles group to the root node. La última línea añade el circles de grupo para el nodo raíz. This is a temporary structure. Esta es una estructura temporal. Later, you will modify this scene graph to match the one shown in Figure 2 . Más tarde, se va a modificar este gráfico de la escena para que coincida con la que se muestra en la Figura 2 .

Figure 4 shows the application. Figura 4 se muestra la aplicación. Because the code does not yet specify a unique location for each circle, the circles are drawn on top of one another, with the upper left-hand corner of the window as the center point for the circles. Dado que el código no ha especificado todavía una ubicación única para cada círculo, los círculos se dibujan en la parte superior de uno al otro, con la parte superior izquierdo de la ventana como el punto central de los círculos. The opacity of the overlaid circles interacts with the black background, producing the gray color of the circles. La opacidad de los círculos superpuestos interactúa con el fondo negro, produciendo el color gris de los círculos.

Figure 4 Circles Figura 4 círculos

Description of "Figure 4 Circles" Descripción de la "Figura 4 Circles"

Add a Visual Effect Añadir un efecto visual

Continue by applying a box blur effect to the circles so that they appear slightly out of focus. Continuar aplicando un efecto de desenfoque a la caja de los círculos para que se vean fuera de foco. The code is in Example 4 . El código está en el ejemplo 4 . Add this code before the primaryStage.setVisible line. Añadir este código antes de la primaryStage.setVisible línea.

Example 4 Box Blur Effect Ejemplo 4 Efecto Desenfoque de cuadro

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

This code sets the blur radius to 10 pixels wide by 10 pixels high, and the blur iteration to 3, making it approximate a Gaussian blur. Este código establece el radio de desenfoque de 10 píxeles de ancho por 10 píxeles de alto, y la iteración de desenfoque a 3, por lo que es aproximadamente un desenfoque gaussiano. This blurring technique produces a smoothing effect on the edge of the circles, as shown in Figure 5 . Esta técnica de desenfoque produce un efecto suavizante en el borde de los círculos, como se muestra en la Figura 5 .

Figure 5 Box Blur on Circles Figura 5 Desenfoque de cuadro en los círculos

Description of "Figure 5 Box Blur on Circles" Descripción del "Desenfoque de cuadro Figura 5 en círculos"

Create a Background Gradient Crear un degradado de fondo Now create a rectangle and fill it with a linear gradient, as shown in Example 5 . A continuación, cree un rectángulo y lo rellenamos con un gradiente lineal, como se muestra en el ejemplo 5 .

Add the code before the root.getChildren().add(circles) line so that the gradient rectangle appears behind the circles. Agregue el código antes de la root.getChildren().add(circles) la línea de forma que el rectángulo degradado aparece detrás de los círculos.

Example 5 Linear Gradient Ejemplo 5 degradado lineal

Rectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(), Colores rectángulo = new Rectangle (scene.getWidth (), scene.getHeight (), new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE, new nueva linearGradient (0f, 1f, 1f, 0f, cierto, CycleMethod.NO_CYCLE, nuevo Stop[]{ Stop [] { new Stop(0, Color.web("#f8bd55")), nueva parada (0, Color.web ("# f8bd55")), new Stop(0.14, Color.web("#c0fe56")), nueva parada (0,14, Color.web ("# c0fe56")), new Stop(0.28, Color.web("#5dfbc1")), nueva parada (0,28, Color.web ("# 5dfbc1")), new Stop(0.43, Color.web("#64c2f8")), nueva parada (0,43, Color.web ("# 64c2f8")), new Stop(0.57, Color.web("#be4af7")), nueva parada (0,57, Color.web ("# be4af7")), new Stop(0.71, Color.web("#ed5fc2")), nueva parada (0,71, Color.web ("# ed5fc2")), new Stop(0.85, Color.web("#ef504c")), nueva parada (0,85, Color.web ("# ef504c")), new Stop(1, Color.web("#f2660f")),})); nueva parada (1, Color.web ("# f2660f ")),}));root.getChildren().add(colors); . root.getChildren () para sumar (colores);

This code creates a rectangle named colors . Este código crea un rectángulo llamado colors . The rectangle is the same width and height as the scene and is filled with a linear gradient that starts in the lower left-hand corner (0, 0) and ends in the upper right-hand corner (1, 1). El rectángulo es la misma anchura y altura que la escena y se rellena con un degradado lineal que se inicia en la parte inferior izquierda esquina (0, 0) y termina en la parte superior derecha de la esquina (1, 1). The value of true means the gradient is proportional to the rectangle, and NO_CYCLE indicates that the color cycle will not repeat. El valor de la true , la pendiente es proporcional a la del rectángulo, y NO_CYCLE indica que el ciclo de color no se repetirá. The Stop[] sequence indicates what the gradient color should be at a particular spot. El Stop[] secuencia indica que el color del degradado debe estar en un lugar particular. The final line of code adds the colors rectangle to the root node. La última línea de código añade el colors rectángulo para el nodo raíz.

The gray circles with the blurry edges now appear on top of a rainbow of colors, as shown in Figure 6 . Los círculos grises con bordes borrosos aparecen ahora en la parte superior de un arco iris de colores, como se muestra en la Figura 6 .

Figure 6 Linear Gradient Figura 6 gradiente lineal

Description of "Figure 6 Linear Gradient" Descripción de la "Figura 6 degradado lineal"

Figure 7 shows the intermediate scene graph. Figura 7 muestra el gráfico de la escena intermedia. At this point, the circles group and colors rectangle are children of the root node. En este punto, los circles de grupos y colors rectángulo son hijos del nodo raíz.

Figure 7 Intermediate Scene Graph Figura 7 Intermedio Escenario Gráfico

Description of "Figure 7 Intermediate Scene Graph" Descripción de la "Figura 7 Escenario Gráfico Intermedio"

Apply a Blend Mode Aplicar un modo de fusión Now add color to the circles and darken the scene by adding an overlay blend effect. Ahora agregue color a los círculos y oscurecer la escena mediante la adición de un efecto de mezcla de superposición. This task requires a bit of housekeeping. Esta tarea requiere un poco de limpieza. You will remove the circles group and the linear gradient rectangle from the scene graph and add them to the new overlay blend group. Va a borrar el circles

y el rectángulo grupo gradiente lineal del gráfico de la escena y añadir al grupo de superposición nueva mezcla.

1. Remove the following two lines of code: Eliminar las dos líneas siguientes de código:

root.getChildren().add(colors);

root.getChildren().add(circles);

2. Add the code in Example 6 where you removed the two lines. Agregue el código en el ejemplo 6 , donde ha eliminado las dos líneas.

Example 6 Blend Mode Ejemplo 6 modos de mezcla

Group blendModeGroup = Grupo blendModeGroup = new Group(new Group(new Rectangle(scene.getWidth(), scene.getHeight(), Grupo nuevo (nuevo grupo (new Rectangle (scene.getWidth (), scene.getHeight (), Color.BLACK), Color.black), circles), círculos), colors); colores);blendModeGroup.setBlendMode(BlendMode.OVERLAY); blendModeGroup.setBlendMode (BlendMode.OVERLAY);root.getChildren().add(blendModeGroup); . root.getChildren () para sumar (blendModeGroup);

The group blendModeGroup sets up the structure for the overlay blend. El grupo blendModeGroup establece la estructura de la mezcla de superposición. The group contains two children. El grupo está formado por dos niños. The first child is a new (unnamed) Group containing a new (unnamed) black rectangle and the previously-created circles group. El primer hijo es un nuevo (sin nombre) Group que contiene un nuevo (sin nombre) y el rectángulo negro creado previamente circles grupo. The second child is the previously-created colors rectangle. El segundo hijo es la creada anteriormente colors rectángulo.

The setBlendMode() method applies the overlay blend. El setBlendMode() método se aplica la mezcla de superposición. The final line of code adds the blendModeGroup to the scene graph as a child of the root node, as depicted in Figure 2 . La última línea de código añade el blendModeGroup al escenario gráfico como un hijo del nodo raíz, como se muestra en la Figura 2 .

Overlay blends are common effects in graphic design applications. Mezclas de superposición son efectos habituales en las aplicaciones de diseño gráfico. They can darken an image or add highlights or both, depending on the colors in the blend. Se puede oscurecer una imagen o añadir destaca o ambos, dependiendo de los colores en la mezcla. In this case, the linear gradient rectangle is used as the overlay. En este caso, el rectángulo degradado lineal se utiliza como la superposición. The black rectangle serves to keep the background dark, while the nearly-transparent circles pick up colors from the gradient but

are also darkened. El rectángulo negro sirve para mantener el fondo oscuro, mientras que los círculos casi transparente recoger los colores del degradado, pero también se oscurecen.

Figure 8 shows the results. La figura 8 muestra los resultados. You will see the full effect of the overlay blend when you animate the circles in the next step. Que se vea el efecto completo de la mezcla de recubrimiento al animar los círculos en el paso siguiente.

Figure 8 Overlay Blend Figura 8 superposición de mezcla

Description of "Figure 8 Overlay Blend" Descripción de la "mezcla de la figura de superposición 8"

Add Animation Añadir animación The final step is to use JavaFX animations to move the circles: El paso final es el uso de animaciones JavaFX para mover los círculos:

1. If you haven't already, add import static java.lang.Math.random; to the list of import statements. Si usted no ha hecho, agregue import static java.lang.Math.random; a la lista de declaraciones de importación.

2. Add the animation code in Example 7 before the primaryStage.setVisible line. Agregue el código de la animación en el ejemplo 7 antes de la primaryStage.setVisible línea.

Example 7 Animation Ejemplo 7 Animación

Timeline timeline = new Timeline(); Cronología Cronología Cronología = new ();for (Node circle: circles.getChildren()) { de (Nodo círculo: circles.getChildren ()) { timeline.getKeyFrames().addAll( timeline.getKeyFrames (). AddAll (

new KeyFrame(Duration.ZERO, // set start position at 0 nuevo fotograma clave (Duration.ZERO, / start / definir la posición a 0 new KeyValue(circle.translateXProperty(), random() * 800), nueva KeyValue (circle.translateXProperty (), random () * 800), new KeyValue(circle.translateYProperty(), random() * 600) nueva KeyValue (circle.translateYProperty (), random () * 600) ), ), new KeyFrame(new Duration(40000), // set end position at 40s nuevo fotograma clave (Duración nuevo (40000), al final / / establecer la posición en 40 años new KeyValue(circle.translateXProperty(), random() * 800), nueva KeyValue (circle.translateXProperty (), random () * 800), new KeyValue(circle.translateYProperty(), random() * 600) nueva KeyValue (circle.translateYProperty (), random () * 600) ) ) ); );} }// play 40s of animation / / Juego 40 de la animacióntimeline.play(); timeline.play ();

Animation is driven by a timeline, so this code creates a timeline, then uses a for loop to add two key frames to each of the 30 circles. La animación es impulsado por una línea de tiempo, por lo que este código se crea una línea de tiempo, y luego utiliza una for bucle para añadir dos fotogramas clave para cada uno de los 30 círculos. The first key frame at 0 seconds uses the translateXProperty and translateYProperty properties to set a random position within the window. El primer fotograma clave en 0 segundos utiliza el translateXProperty y translateYProperty propiedades para establecer una posición aleatoria dentro de la ventana. The second key frame at 40 seconds does the same. El segundo fotograma clave en 40 segundos hace lo mismo. Thus, when the timeline is played, it animates all circles from one random position to another over a period of 40 seconds. Así, cuando la línea de tiempo se juega, se anima a todos los círculos de una posición al azar a otro durante un período de 40 segundos.

Figure 9 shows the 30 colorful circles in motion, which completes the application. Figura 9 muestra los 30 círculos de colores en movimiento, que completa la solicitud. For the complete source code, see the ColorfulCircles.java file. Para el código fuente completo, vea el ColorfulCircles.java archivo.

Figure 9 Animated Circles Figura 9 círculos animados

Description of "Figure 9 Animated Circles" Descripción de la "Figura 9 círculos animados"

Review Revisión Here is a summary of the information presented in this article about JavaFX applications: He aquí un resumen de la información presentada en este artículo sobre las aplicaciones de JavaFX:

The main class extends the Application class. La clase principal se extiende la Application de clase.

The main class overrides the start() method in the Application class. La clase principal anula el start() en el método Application de clase.

The start() method takes as an argument the primary stage for the application. El start() método toma como argumento el escenario principal de la aplicación.

The main () method calls the launch() method in the Application class. El main () llama al método launch() en el método Application de clase. A best practice is to make this method the only method that the main() method calls. Una mejor práctica es hacer que este método, el único método que el main() llama al método.

The scene is added as a root node, which can be a group node, as shown in this tutorial, or another parent node, such as a layout pane. La escena se agrega como un nodo raíz, que puede ser un nodo de grupo, como se muestra en este tutorial, o cualquier otro nodo padre, como un panel de diseño.

A best practice is to set the height and width of the scene when you create it; otherwise the scene defaults to the minimum size needed to display its contents. Una buena práctica consiste en establecer la altura y la anchura de la escena cuando se crea, de lo contrario los valores predeterminados de escena para el tamaño mínimo necesario para mostrar su contenido.

The syntax for adding children to the root node takes this form: root.getChildren().add(circles); La sintaxis para agregar a los niños en el nodo raíz tiene esta forma: root.getChildren().add(circles);

The setVisible(true) line makes the contents of the stage visible. El setVisible(true) línea hace que el contenido de la etapa visible. As a best practice, this code should be the last line in the start() method. Como una buena práctica, este código debe ser la última línea en el start() método.

JavaFX provides intricate graphic effects, including blurs, gradient fills, blends, and animation. JavaFX ofrece intrincados efectos gráficos, como manchas, rellenos degradados, las mezclas, y la animación.