Sun is shining...: Blog del programa Campus Ambassadors para las universidades argentinas

Hoy finalmente vamos a comenzar a trabajar en algunos proyectos algo más entretenidos que aquellos de la referencia. Además vamos a dejar de lado el pad de JavaFX y comenzaremos a usar un ambiente de desarrollo integrado, que nos dará la posibilidad de administrar nuestros proyectos de una forma más amigable, nos permitirá arrastrar y soltar componentes en nuestros scripts y resaltará la sintaxis del lenguaje aumentando la claridad y la legibilidad del código. 

Utilizaremos el IDE NetBeans 6.1 (Nota: el plug-in aún no funciona con la beta 6.5), un ambiente de desarrollo modular, multiplataforma, gratuito y libre (GPL v2 y CDDL), el cual pueden obtener aquí. Además, necesitaremos Java SE Update 7 o mayor, que puede descargarse aquí.

El ejemplo que realizaremos está tomado de javapassion, pueden encontrar la versión original aquí.

Paso 1: instalar el plugin de JavaFX en NetBeans

Empezaremos entonces por instalar el plugin de JavaFX en NetBeans, lo cual ampliará la funcionalidad original del IDE, agregando las funciones necesarias para desarrollar proyectos en el lenguaje JavaFX Script (si no poseemos NetBeans, podemos bajar una versión que incluye JavaFX aquí). Nota: para usar el update center de NetBeans, es necesario poseer una conexión a Internet.

1.1 - Abrir el update center. Abrimos NetBeans, vamos al menú herramientas, lo desplegamos y seleccionamos la opción "plugins".

1.2 - Obtener los plug-ins de interés. Dentro de la ventana "plugins" seleccionamos la pestaña "plugins disponibles", y buscamos aquellos que poseen la palabra "javafx" en su nombre. Seleccionamos los tres que el IDE encuentra ("JavaFX Wheater Sample" no es estrictamente necesario, pero es un ejemplo muy completo para observar y aprender algunas cosas) y procedemos a instalarlos. Finalmente reiniciamos el IDE para culminar la instalación.

Instalando los plug-ins de JavaFX

Paso 2: construir la aplicación "Hola Mundo"

2.1 - Crear un nuevo proyecto JavaFX. Para esto, vamos al menú "archivo" y seleccionamos la opción "nuevo proyecto". Dentro de la ventana correspondiente, seleccionamos "JavaFX" en la columna correspondiente a la categoría y "aplicación JavaFX script" en la columna "proyectos", a continuación, hacemos click en siguiente y completamos los datos del proyecto colocando como nombre del mismo "JavaFXHolaMundo" y dejando las otras opciones con sus valores por defecto. Finalmente, hacemos click en "finalizar", y dejamos que el IDE prepare nuestro ambiente de trabajo.

Creación de un nuevo proyecto JavaFX en NetBeans

2.2 - Agregar un frame para alojar todos nuestros elementos. Esto podemos hacerlo arrastrando desde la paleta al código (donde dice "//place your code here") el elemento Frame, o escribiendo a mano la descripción del literal y sus propiedades (fijense que el caret les indica donde quedará el código una vez que suelten el botón del mouse).

Dentro del código agregado podemos observar las propiedades titulo (title), ancho (width), alto (height), si es visible o no y la acción a realizar cuando el frame se cierre ("closeAction", en este caso, una llamada al método estático "close" de la clase "System", que hará que el programa finalice su ejecución).

2.3 - Modificar las propiedades del frame. Colocamos el valor de la propiedad height en 100, el de width en 400, y el titulo del frame lo cambiamos por "HolaMundoJavaFX".

2.4 - Construir y ejecutar el proyecto. Sencillo, simplemente hacemos click en el botón correspondiente, o podemos hacer click derecho sobre el proyecto y seleccionar la opción "ejecutar" del menú despegable.

Nota: en la versión del plug-in para algunos sistemas operativos se encuentra disponible una característica llamada "preview" que nos permite previsualizar el resultado de los cambios que vayamos realizando en nuestro código. Para activarla solo deben hacer click en el icono correspondiente, que se encuentra en el extremo izquierdo de la barra de acciones justo encima del editor.

Paso 3: agregar una etiqueta de texto a nuestro frame

3.1 - Agregar la etiqueta. Para esto, arrastramos el componente "text" desde la paleta hacia nuestro código, específicamente dentro de los contents del "stage" del frame.

3.2 - Editar el contenido del texto y su tamaño. Cambiamos el valor de la propiedad "content" por "Hola Mundo", y el de la propiedad "size" de la fuente por 24.

3.3 - Cambiar el color de relleno. Agregamos la propiedad "fill" con el valor "color.BLUE" en el componente "text". Necesitaran además agregar el "import" correspondiente para "Color", el mismo es "import javafx.scene.paint.Color". Nota: para ver una lista de propiedades de este y todos los componentes en el API de JavaFX, hacemos click en la opción "ayuda" de la barra de menús, expandimos la opción "referencias javadoc" y, seleccionamos la opción "documentación JavaFX Script". Luego vamos a la página correspondiente al API de JavaFX Script y buscamos los componentes y propiedades que nos interesen.

Resultado del paso 3

Paso 4: Agregar un circulo al frame

4.1 - Preparar el terreno. Primero, agregamos una coma luego de la descripción del "text" en el "stage" (entre la llave y el corchete), en pos de separar las descripciones de los distintos componentes.

4.2 - Agregar el circulo. Ahora, arrastramos el componente "circle" desde el panel, y lo ubicamos luego de la coma que acabamos de colocar.

4.3 - Ubicar el circulo y ajustar sus propiedades. Damos a la propiedad "CenterX" (coordenada X del centro) el valor 200, a "CenterY" (coordenada Y del centro) y a "radius" (radio) el valor 30, y a "fill" (relleno), "Color.PINK".

Resultado del paso 4

Paso 5: agregar un efecto al circulo

5.1 - Agregar el efecto lighting. Para agregar este efecto al circulo, debemos añadir la propiedad "effect" y darle el valor "lighting". La luz de este efecto la describiremos como de tipo "DistantLight", y al acimut (el ángulo de incidencia de la luz en el plano XY - experimenten cambiándole los valores para ver cual es el efecto que genera) de esta luz le daremos el valor 60. Además debemos agregarle 2 imports al código, que debería quedar de la siguiente forma (en negrita el código que tendríamos que agregar):

package javafxholamundo;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.text.Text;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.geometry.Circle;
import javafx.scene.paint.Color;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.light.DistantLight;
import javafx.input.MouseEvent;

/**
 * @author ezequiel
 */

// place your code here
Frame {
    title: "JavaFXHolaMundo"
    width: 400
    height: 100
    closeAction: function() { 
        java.lang.System.exit( 0 ); 
    }
    visible: true

    stage: Stage {
        content: [Text {
                font: Font { 
                    size: 24 
                    style: FontStyle.PLAIN
                }
                fill: Color.BLUE
                x: 10, y: 30
                content: "HelloWorld"
            },Circle {
                centerX: 200, centerY: 30
                radius: 30
                fill: Color.PINK
                effect: Lighting {
                    light: DistantLight {
                        azimuth: 60
                    }
                }
              
        }]
    }
}

Resultado del paso 5.1

5.2 - Hacer que la iluminación se encienda y apague al hacer click en el circulo. Para hacer esto, agregamos un efecto "onMousePressed" arrastrando y soltando el mismo debajo de la última propiedad del circulo. Adicionalmente, para agregar el comportamiento deseado, agregamos el siguiente código (bastante sencillo de comprender):

package javafxholamundo;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.text.Text;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.geometry.Circle;
import javafx.scene.paint.Color;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.light.DistantLight;
import javafx.input.MouseEvent;

/**
 * @author ezequiel
 */

// place your code here
Frame {
    title: "JavaFXHolaMundo"
    width: 400
    height: 100
    closeAction: function() { 
        java.lang.System.exit( 0 ); 
    }
    visible: true
    var counter: Integer=0

    stage: Stage {
        content: [Text {
                font: Font { 
                    size: 24 
                    style: FontStyle.PLAIN
                }
                fill: Color.BLUE
                x: 10, y: 30
                content: "HelloWorld"
            },Circle {
                centerX: 200, centerY: 30
                radius: 30
                fill: Color.PINK
                effect: Lighting {
                    light: DistantLight {
                        azimuth: 60
                    }
                }
                onMousePressed: function( e: MouseEvent ):Void {
                if (counter mod 2  == 0) {
                        e.node.effect = null
                    } else {
                        e.node.effect = Lighting {
                            light: DistantLight {
                                azimuth: 60
                            }
                        }
                    }
                    counter++
                }
        }]
    }
}

Noten que ahora, al hacer click, el efecto desaparece y se incrementa el contador (o el efecto aparece, dependiendo de la paridad del valor del contador).

Por hoy esto es todo, en la siguiente entrega (que espero publicar a mediados de semana, aunque a esta altura no puedo prometer nada), agregaremos más comportamiento a este ejercicio utilizando la propiedad de binding de JavaFX. Les recomiendo entretanto, comenzar a experimentar con los diferentes componentes, efectos y eventos, utilizando la documentación del API incluida en el plug-in como guía.