jphone.org - 2008 September 06

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.

This is one simulation of Golden Eyes :-D(with an ugly face). I tried to make one use of Gaussian Blur which is applied in the white color of eyes. Adding this spot in the eyes gives a real simulation.

Here is the simple code :

package eyes;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.geometry.Arc;
import javafx.scene.geometry.*;
import javafx.scene.paint.Color;
import javafx.scene.paint.*;
import javafx.scene.effect.*;

var y: Number = 150;
Frame {
    title: "Golden Eyes"
    width: 500
    height: 500
    closeAction: function() { java.lang.System.exit( 0 ); 
    }
    visible: true

    stage: Stage {
        fill: Color.GRAY;
        content: [  
 
            Circle {
                centerX: 160, centerY: y
                radius: 23
                fill: LinearGradient {
                    startX: 0.0
                    startY: 0.0
                    endX: 1.0
                    endY: 0.0
                    proportional: true
                    stops: [
                        Stop { offset: 0.0 color: Color.GOLD },
                        Stop { offset: 1.0 color: Color.BLACK }
                    ]
                }
                opacity: 0.9
            },
 
            Circle {
                centerX: 160, centerY: y
                radius: 10
                fill: Color.BLACK
            },
            Circle {
                centerX: 166, centerY: y - 5
                radius: 5
                fill: Color.WHITE;
                effect : GaussianBlur {
                    radius: 6
                }
            },
            Circle {
                centerX: 250, centerY: y
                radius: 23
                fill: LinearGradient {
                    startX: 0.0
                    startY: 0.0
                    endX: 1.0
                    endY: 0.0
                    proportional: true
                    stops: [
                        Stop { offset: 0.0 color: Color.BLACK },
                        Stop { offset: 1.0 color: Color.GOLD }
                    ]
                }
                opacity: 0.2
            },
 
 
            Circle {
                centerX: 250, centerY: y
                radius: 10
                fill: Color.BLACK
            },
            Circle {
                centerX: 244, centerY: y - 5
                radius: 5
                fill: Color.WHITE;
                effect : GaussianBlur {
                    radius: 6
                }
            },
            Circle {
                centerX: 200, centerY: 180
                radius: 100
                fill: Color.SIENNA
                opacity: 0.1
 
            },
            Polyline { 
             stroke:Color.BLACK
                points: [
                    200,160, 
                    220.0,220.0,
                    180.0,220.0
                ]
            },
            Path {
               fill: LinearGradient {
                    startX: 0.0
                    startY: 0.0
                    endX: 1.0
                    endY: 0.0
                    proportional: true
                    stops: [
                        Stop { offset: 0.0 color: Color.BLACK },
                        Stop { offset: 1.0 color: Color.RED }
                    ]
                }
                elements: [
                    MoveTo { x: 160 y: 240 },
                    ArcTo { x: 250 y: 240 radiusX: 100 radiusY: 100},
 
                ]
            },
 
       ]
    }
}