jueves, 14 de agosto de 2008

Primera Entrega JavaFX. Generalidades del Lenguaje

Como comentaba anteriormente, tengo la intención de subir la referencia al lenguaje JavaFX que está disponible aquí traducida al castellano. Aunque este documento no define una especificación formal de lenguaje, se puede considerar una referencia completa de todas las funcionalidades actuales soportadas por el lenguaje. Lo voy a hacer en varias entregas que coinciden con los capítulos del documento.

Esta primera entrada proporciona una vista general del lenguaje JavaFX Script. Describe sus funcionalidades principales, dejando los detalles para capítulos siguientes. Este documento está orientado a diseñadores y desarrolladores de aplicaciones ricas de cliente en Internet RIA, que funcionan en páginas web, como el software Java Web Start o como aplicaciones tradicionales de escritorio. Su contenido asume que el lector está familiarizado con el lenguaje Java.

El lenguaje de programación JavaFX Script tiene las siguientes particularidades:
  • Usa sintaxis declarativa para especificar componentes GUI, habilitando al código del desarrollador acercarse al diseño real del GUI.
  • Usa enlazado de datos declarativos y evaluación incremental, permitiendo la creación y configuración sencilla de componentes individuales. Los datos de aplicación y los componentes GUI se sincronizan automáticamente.
  • Está tipado estáticamente, teniendo la mayor parte de estructuración de código, reuso y encapsulación que permiten la creación y mantenimiento de programas muy grandes en el lenguaje Java.
  • Funciona con la mayoría de IDES, incluyendo NetBeans.
  • Es capaz de soportar GUIs de cualquier tamaño y complejidad
  • Es más sencillo de utilizar que Swing.
Las siguientes secciones presentan un recorrido rápido del lenguaje de programación JavaFX Script. Estas secciones proporcionan una introducción general de su sintaxis de núcleo y capacidades, comparando y contrastando con Java cuando sea apropiado. Cada punto se cubre luego con más detalle en capítulos subsecuentes.


Scripts

En el lenguaje JavaFX, un script es una o más declaraciones de expresiones. Evaluando el script se evalúan las declaraciones o expresiones en orden:

var ten : Integer = 10;

java.lang.System.out.println("Twice {ten} is {2 * ten}.");

Esto muestra:

Twice 10 is 20.

A diferencia de una aplicación escrita en Java, un script no necesita contener ninguna definición de clase ni funciones.


Clases

Las definiciones de clases comparten muchas similitudes con Java, pero algunas diferencias son notables. El estado, por ejemplo, es información almacenada en atributos, no en campos. El comportamiento se expone a través de funciones y no métodos (más adelante se verá que ha desaparecido "operation" en la nueva versión del lenguaje, ahora se utiliza "function" tanto para métodos, no usando "return", como para funciones, con "return"). El siguiente ejemplo define una clase simple Rectangle que muestra la sintaxis básica de cada uno.

class Rectangle {

attribute width: Integer;

attribute height: Integer;

function grow(): Void {

grow(1);

}

function grow(amount: Integer): Void {

width += amount;

height += amount;

}

}

El lenguaje de programación soporta herencia múltiple, haciendo posible que una clase herede de más de una clase.


Objetos

Objetct literals proporciona una sintaxis simple para instanciación de clase. El siguiente código crea una única instancia de la clase Rectangle definida previamente, inicializando sus atributos width y height a 100. (Nótese que no se necesita new)

Rectangle {

width: 100

height: 100

}


Para guardar una referencia a este objeto, usa la palabra var:

var myRect = Rectangle {

width: 100

height: 100

}


Expresiones y Operadores


Como cualquier otro lenguaje de programación, el lenguaje JavaFX Script soporta expresiones y operadores.

El capítulo 5 discute las expresiones y operadores disponibles en el lenguaje JavaFX Script.


Secuencias

Una secuencia guarda una lista ordenada de objetos. Esto es análogo grosso modo a los arrays de Java. Ambos guardan múltiples valores y son accedidos por un índice comenzando por 0.

var week = ["Monday","Tuesday","Wednesday","Thursday",

"Friday","Saturday","Sunday"];

var mon = week[0];

var wed = week[2];

var fri = week[4];

También están soportadas las porciones (slice) de secuencias:

var week = ["Monday","Tuesday","Wednesday","Thursday",

"Friday","Saturday","Sunday"];

var weekdays = week[0..4]; // first slice

var weekend = week[5..6]; // second slice


Enlazado de Datos (bind)

El enlazado de datos proporciona una sintaxis simple para sincronizar el estado de objetos múltiples. Cuando dos objetos están enlazados uno con el otro, el valor del segundo objeto cambia automáticamente cuando el primero se actualiza. Un uso común de enlazado de datos es guardar componentes GUI sincronizados con sus datos por debajo.

import javafx.application.Frame;

import javafx.application.Stage;

import javafx.scene.text.Text;

var myString = "Hello World!";

Frame {

width: 50

height: 50

visible: true

stage: Stage {

content: Text {

content: bind myString

}

}

}

// Si otra parte del código cambia myString

//el texto del GUI cambiará automáticamente



Disparadores (Triggers)

Los disparadores (triggers) son bloques de código que se ejecutan cuando se satisfacen ciertas condiciones. Por ejemplo, puede que quieras estar alertado de si el valor de un atributo ha sido establecido a algo que no es apropiado. El siguiente ejemplo muestra la sintaxis básica de un trigger:

import java.lang.System;

ReplaceDemo {

mySensitiveData: "Will anyone notice?"

}

class ReplaceDemo {

attribute mySensitiveData: String

on replace {

System.out.println("I noticed a change!");

};

// application-specific safeguarding code would go here

}


miércoles, 13 de agosto de 2008

Dudas para el "Ask the Expert" del día 18

Antes del "Ask an Expert" que promocionó Sun el día 18 de Agosto para atender las cuestiones de los desarrolladores pioneros con JavaFX desde su página, me entretuve en apuntar algunas de las dudas que me iban surgiendo con el SDK Preview. No sólo tuve la oportunidad de remitirle estas preguntas sino algunas más que se me ocurrieron durante los cinco días que duró la recepción. Desafortunadamente ninguna de ellas fue respondida por los expertos. Así es que he decidido publicarlas y resolverlas yo mismo, al estilo de las entrevistas de VdePanceta.

Q: Proyecto Nile. El plugin de Illustrator presenta problemas, traduce float con ",". El traductor de svg tampoco funciona correctamente, no aparecen rellenos de color. 
A: He conseguido traducir svg creados con NetBeans (bastante sencillos) a código .fx. Nada nuevo sobre los plugin de Ilustrator y Photoshop.

Q: Aplicación de efectos. Máscaras? InvertMask {input: effect}. Desaparición de método clip de los elementos gráficos en el api del sdk preview. 
A: Estoy seguro de que no estaba, pero ahora está en todos los objetos tipo nodo, ya puedo utilizar métodos clip de los nodos. El efecto InvertMask requiere un parámetro input para su aplicación, sería de esperar que se tratara de un objeto tipo nodo pero es un efecto.

Q: Plugin de NetBeans fácilmente bloqueable. Consumo de recursos indecente. Comportamiento del visor irregular. 
A: No sólo eso sino que el resaltador de errores no funciona correctamente, algunas líneas se quedan marcadas como incorrectas cuando compila sin problemas.

Q: Recolector de objetos? Una solución para tener funcionabilidad de menú es cambiar el atributo visible del nodo en cuestión. Si la aplicación es compleja cada nodo será un elemento gráfico complejo o muy complejo. Si únicamente cambiamos el atributo visible, los objetos van a estar previamente cargados, ¿será esto un problema para el funcionamiento suave de la aplicación?. 
A: Podemos utilizar bind para actualizar el array de nodos que se gestionan. Además, los objetos vivos se pueden gestionar con "do".

Q: Renderizado html, webkit. Se carga con un componente swing (a través de componentview, antes no hacía falta llamarlo así) llamado label. ¿Cuáles son las expectativas de desarrollo de esta utilidad?, ¿es posible tener interactividad además de adentro hacia afuera además de afuera hacia adentro como tiene ahora?. ¿Cómo accedo a los argumentos de ejecución de un programa en JavaFX?. 
A: Ninguna notcia sobre ello. De lo dicho por algunos miembros del equipo de desarrollo, JavaFX al igual que Swing tendrá un explorador html de andar por casa "street browser".

martes, 12 de agosto de 2008

Scene Graph & JWebPan

Acabo de leer la documentación que se dió en el JavaOne 2008 para una charla de JavaFX. Me ha salido como resultado de google a la búsqueda de FXNode. JavaFX tiene dos modos de aproximación a SceneGraph, SGNodes y FXNodes.

Además en este documento se habla de JWebPane que permite la renderización de código HTML con CSS y JavaScript, algo de lo que ya sabíamos y de lo que no había vuelto a leer nada sobre ello para el preview sdk.

Veo muchas más cosas interesantes sobre JavaFX en la página de JavaOne. Voy a estar entretenido un rato.

Id de Nodo

A la pregunta de cómo puedo hacer que aparezcan un nodo específico cuando se pulsa un botón, al estilo de un funcionamiento de menú de botones típico, el blog de James Weaver resuelve con el uso del id del nodo y de su atributo de visible. Siguiendo este método, cada botón modifica el valor (boolean) del atributo "visible" del nodo que se quiera ver. Dado que mi intención es concretar un método de uso del menú para la aplicación que estoy construyendo, tengo que comprobar que el recargo de elementos no sea una traba para el funcionamiento eficiente de la aplicación.

Teniendo en cuenta que cuando se añade un grupo que contiene distintos nodos (que serán las pantallas que queramos ver), se van a superponer uno sobre otro, únicamente habrá que posicionar el grupo en la pantalla principal y gestionar el atributo de visibilidad de cada uno.

Con la propiedad nodo se me ocurre tener alguna funcionalidad más. A la hora de crear los botones del menú, podría plantearme pasar únicamente el id como parámetro de creación y que sea el objeto botón el que se preocupe de construir sus recursos. Esto me obligaría a tener controlados los nombres de los ficheros de imágenes.

jueves, 7 de agosto de 2008

JavaFX SDK Preview

Desde que tengo instalado el plugin con el compilador propio del Preview SDK en NetBeans 6.1, la experiencia de desarrollo ha mejorado. Sigue habiendo momentos en los que deja de responder el IDE y en algunas ocasiones al ejecutar un fichero con Alt-F6 se carga una versión anterior creada con "Build Project". Por lo demás, las clases se ajustan al API ya perfilado y al manual.

En breve, subiré los ejemplos con los que estoy trabajando. Construcción de botones con comportamientos, distribuciones de nodos para formar el diseño en pantalla, animaciones con máscaras. También aprovecharé para subir la documentación que he traducido y comentaré algunos cambios curiosos que ha tenido el lenguaje.

martes, 5 de agosto de 2008

Esquemas de Diseño en Pantalla

Después de todos los cambios que en el API se han ido haciendo desde la creación de JavaFX Script creo se tiene una buena referencia en el API publicado.

Es aquí donde veo que existen dos clases llamadas VBox y HBox en el paquete javafx.scene.layout (VerticalBox y HorizontalBox, supongo) que se pueden usar para establecer la disposición de los nodos que se muestren en pantalla. He comprobado que efectivamente, son nodos los que toman estas clases como argumentos de su contenido y por ende todos los objetos de las clases que implemento como hijos de CustomNode son perfectamente añadibles. El funcionamiento de las dos clases parece idéntico excepto, claro está, que una dispone sus nodos de forma vertical y otra horizontal. Supongo que se podrán tomar cada una de ellas como nodos de su contenido de forma que se puedan arreglar disposiciones más complejas. He comprobado que efectivamente son anidables, con estas disposiciones se pueden acomodar distintos diseños en pantalla. Desconozco si ésta es la forma en la que se quiere que los desarrolladores hagan la distribución de objetos en pantalla o no.

De acuerdo, podemos hacer diseños con menús de botones que diseñamos previamente. Podemos Interactuar entre objetos mostrados en pantalla. Mi pregunta es ahora, ¿cómo puedo cargar y descargar objetos de una zona en concreto?. Mi idea es poder definir una jerarquía de contenidos en los que los menús definen los objetos mostrados.

Leyendo un manual de ActionScript 2 veo que tiene dos funciones con ciertas similitudes que se llaman HBox y VBox y que realizan una función muy similar. Da que sospechar.

Perfilador de SceneGraph

Efectivamente, si sigo las indicaciones de la página:

http://www.nobel-joergensen.com/roller/java/entry/profiling_javafx_rendering

veo que la aplicación que nos propone funciona mucho mejor. ¿Pero y el resto de las aplicaciones que ya tengamos funcionando? ¿puede ser esta la causa de que no tenga buen comportamiento mi botón negro?

¿Qué es SceneGraph?, ¿qué tiene que ver con todo ésto?. Esta tecnología se ha incorporado al API de JavaFX recientemente. SceneGraph no sólo se utiliza con JavaFX, también se utiliza con Swing.

Anodino

¿Porqué el visor que ofrece NetBeans 6.1 en el plugin de JavaFx no siempre es fiel a lo que se ofrece cuando se ejecuta?
Creo que ya tengo resuelta esa duda. Cuando se llaman a clases desde un frame, se accede a la última clase compilada. Aunque el visor de dentro de NetBeans muestre la clase ya compilada, no es ésa la que está en el paquete que después es llamada. Hay que refrescar las clases disponibles (F11).
- Ejemplo de botón negro, el triángulo
- Ejemplo de BlurMotion
- Tengo una distribución de botones que no actualizan lo mostrado al código que ... Hay algunas clases que no refrescan su clase compilada después de construir el proyecto.

- La url que tiene como argumento la clase image debe tener especificar el protocolo en su ruta. De esto me he dado cuenta cuando he visto que las urls externas "http://..." funcionaban sin mayor problema pero ha sido cuando he especificado una ruta como esta: "file:///c:/Documents%20and%20Settings/alvaro.EUROPA-SYSTEM/Mis%20documentos/NetBeansProjects/JFXSandBox/img/mensajes.png" cuando por fin ha podido leer el fichero en la máquina local. No sólo se trata del "file:///" al principio sino que no admite espacios en medio tampoco.

Anodino y Edificante JFX

Para ver el uso que tiene Timeline para hacer animaciones en la versión compilada de JavaFX (ya se ha dejado de utilizar dur) miro el ejemplo que aparece en una entrada del Wiki de JavaFX.

De este código, una vez visto correr, se pueden inferir reglas interesantes. El código del script es el siguiente:

import javafx.ext.swing.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import javafx.animation.*;
import java.lang.System;


var x = 0;

var t = Timeline { // Utilizo Timeline como un objeto al que le aplicaré
repeatCount: 3 // los métodos start() y stop(). Interesante atributos
autoReverse: true // repeatCount y autoReverse
// Únicamente modifico el valor de x que es accesible
// dentro del script. Es a este valor al que se hace
// referencia con un bind del atributo animable
// La estructura general de Timeline es metódica

keyFrames: [KeyFrame{time : 0s
values: x => 0},

KeyFrame{time : 2s
values: x => 400 tween Interpolator.LINEAR}
]//keyFrames
}//Timeline;



SwingFrame {
closeAction: function(): Void {System.exit(0);}

title : 'Animation: Simple'
background : Color.WHITE;
width : 550
visible : true

content: BorderPanel{
top: Canvas {content:
Rectangle {x : bind x
y : 0
width : 100
height: 100
fill : Color.BLUE
}
}//Canvas


bottom: FlowPanel{content: [ // La versión de compilación de la que
// dispongo no utiliza SwingButton sino
// Button (igualmente tiene atributo action)
Button{text : "Start"
action: function(): Void{t.start();}},

Button{text : "Pause"
action: function(): Void{t.pause();}},

Button{text : "Resume"
action: function(): Void{t.resume();}},

Button{text : "Stop"
action: function(): Void{t.stop();}}
]}//FlowPanel
}//BorderPanel
}//SwingFrame

La animación siempre hace uso de la función especial (de JavaFX, también la he visto en Swing) bind. Esta tiene la propiedad de actualizar automáticamente el valor del atributo al que se le asocia cuando cambia el valor de una variable y es ésta variable primera la que cambia con el tiempo con el objeto Timeline.

El tema con el sizeof me mola.

JavaFX permite hacer comparaciones de cadenas con el operador lógico "==" que se utiliza para comprobar igualdad entre cualquier tipo de variables. Esto es una diferencia con el lenguaje Java que necesita del método .equals().

JavaFX

Un día me dicen: "La aplicación se tiene que hacer con JavaFX". ¿Qué es JavaFX?, ¿cómo se utiliza?, ¿para qué sirve?, ¿qué posibilidades tiene?, ¿es una plataforma estable de desarrollo?, ¿qué futuro tiene?, ¿cómo es de fiable?, ¿cuál es la mejor herramienta para utilizarlo?. La información que iba leyendo sobre JavaFX más que resolver dudas me platean muchas más.

Será en este blog donde recoja las conclusiones, observaciones e impresiones sobre mi toma de contacto con esta tecnología.