Migrando a JavaFX 1.2: de UiStub --> FXDNode

Ayer retomé JavaFX para migrar el proyecto memeFX (código abierto) a la versión JavaFX 1.2 y este es básicamente el único inconveniente que encontré (además de un bug algo extraño que tengo que verificar).

Estas clases se utilizan para obtener recursos gráficos para la aplicación, como las imágenes generadas con Adobe Illustrator:

En JavaFX 1.1 se usaba UiStub del paquete javafx.fxd.UiStub:

import javafx.fxd.UiStub;

public class myClass extends UiStub {

  override protected function update() {
      ...
  }

}

Ahora, es necesario utilizar FXDNode también en el paquete javafx.fxd. Sólo hay que hacer este cambio:

import javafx.fxd.FXDNode;

public class BasicKnob extends FXDNode {

  override protected function contentLoaded() {
      ...
  }

}

Pastello... JavaFX crayon phyics

Me suscribi para seguir el Twitter de JavaFX y el primer post que encontré me pareció entretenido. Se llama Pastello. Es un juego de "puzzle" en que debes dibujar la solución para que una bolita llegue hasta donde está la estrella.

Lo interesante del proyecto es la FISICA de los elementos. Así, por ejemplo, puedes dejar caer bolitas sobre la bola principal, de manera que esta gire subiendo por una rampa que dibujaste con un triangulo. También puedes agregar contrapesos, etc. Un tanto adictivo! ;D

Jugar Pastello

Sitio del proyecto Pastello

JavaFX 1.2 incluye APIs para gráficos (charts)

Este es el código para agregar un gráfico de Pie en JavaFX

package piechartsample;

import javafx.scene.chart.*;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;

var name = ["Java", "JavaFX", "MySQL", "Netbeans", "Others"];
var val = [20, 12, 25, 22, 30];


var r :  PieChart.Data[] = [];
for(i in [0..4]) {
insert  PieChart.Data {
 action: function() {
     print("Name   ::  {name[i]}");
 }
 label  : name[i] value : val[i] } into r; }


var chart = PieChart3D {
            data : r
            pieLabelFont: Font.font("dialog", FontWeight.REGULAR, 8);
            pieLabelVisible: true
            pieValueVisible: true
            pieToLabelLineOneLength: 3
            pieToLabelLineTwoLength : 6

         }

         var st = Stage {
            height: 420
             width: 480
             title:"Pie Chart 3D"
             scene: Scene {
                 content: [
                     chart
                  ]
             }
         }

Este es el código para un gráfico de "burbujas":

package bubblechart;

import javafx.scene.chart.*;
import javafx.scene.chart.part.*;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
var x: Number[] = [30, 60, 10, 100,50];
var y: Number[] = [40,20,90,40,23];
var radius: Number[] = [10,13,7,10,5];

var x1: Number[] = [13, 20, 100, 30,50];
var y1: Number[] = [100,80,60,40,20];
var radius1: Number[] = [7,13,10,6,12];

var r :  BubbleChart.Data[] = [];
var r1:  BubbleChart.Data[] = [];
for(i in [0..4]) {
insert  BubbleChart.Data {fill: Color.YELLOWGREEN xValue : x[i] yValue : y[i] radius: radius[i] }into r;
insert  BubbleChart.Data {fill: Color.RED xValue : x1[i] yValue : y1[i] radius: radius1[i] }into r1;

}
var s1 : BubbleChart.Series =  BubbleChart.Series{data: [r,r1]};
var BubbleChartData : BubbleChart.Series[] = [s1];
var chart = BubbleChart {
              title : "BubbleChart"
              xAxis : NumberAxis{
                  lowerBound: 0
                  upperBound : 150
                  label: "SomeX"
                  visible: true
                  axisStrokeWidth: 1
                  tickUnit : 20
                  tickLabelsVisible: true

              }
              yAxis : NumberAxis{
                  lowerBound: 0
                  upperBound : 150
                  tickUnit: 20
                  label: "SomeY"
                  visible: true
                  tickLabelsVisible: true
             }
              data : BubbleChartData
          }

          var st = Stage {
             height: 520
              width: 640
              title:"Bubble Chart"
              scene: Scene {
                  content: [
                      chart
                   ]
              }
          }

Aquí hay algunos demos con JavaFX

A partir del minuto 20 de este video hay unas demos con JavaFX, incluyendo (minuto 30) la herramienta para generar JavaFX (como la utilizada hoy para generar Flash). Se ve bastante interesante, especialmente la capacidad de generar versiones para distintos dispositivos, en el mismo proyecto. Esto quiere decir que, mientras desarrollas una aplicación JavaFX para el escritorio, puedes ir creando una versión para un aparato móvil, un netbook o un TV con JavaFX (con distintos elementos o distribución de esos elementos en la pantalla de cada dispositivo).

Video: El show de los "Juguetes" Java

Mejores prácticas para el desarrollo de JavaFX móvil

Un interesante artículo que describe como desarrollar aplicaciones con el mejor rendimiento posible en aparatos móviles, usando JavaFX Script:

- Evitar bindings innecesarios
- Mantener el scenegraph lo más pequeño posible
- Usar Integer en vez de Number
- Usar figuras simples en vez de imágenes
- Usar funcionalidad de pre-escalado
- Usar background loading ("descarga de fondo")
- Usar funciones de clase Sequences

Aquí está el artículo completo. Más adelante revisaré cada recomendación, para compartir los "descubrimientos" ;)

http://java.sun.com/developer/technicalArticles/javafx/mobile/

MemeFX en artículo de Sun.com

Los articulistas de Sun seleccionaron 3 proyectos JavaFX para mostrar lo que la comunidad está desarrollando con el nuevo lenguaje. Uno de los desarrollos seleccionados fue mi proyecto de código abierto MemeFX :D

.... ¡está bien!, no es lo mismo que aparecer en la portada del Times jajaja.... pero no deja de ser bueno para el ego hacer algo que para otros puede resultar interesante... ;D ... así que me disculpan que me sienta un poco más "importante" que ayer jajajaja... ;D

Bueno, el artículo incluye otro dos proyectos bastante buenos. Un cliente para Twitter, desarrollado en JavaFX y una aplicación de Widgets para el escritorio (similar al Windows Sidebar de Vista).

Por cierto, el autor de TwitterFX me contacto para agradecer por el componente TextHTML, porque hasta ahora el no habia podido desarrollar uno ni había otro en existencia en la internet, así que por lo menos el proyecto de componentes que estoy desarrollando comienza a ser UTIL -de verdad y no sólo una curiosidad técnica- que es lo que realmente importa.

Aquí está el link al artículo en java.sun.com:

http://java.sun.com/developer/technicalArticles/javafx/AppORama/index.html

Demo de TextHTML (componente de memeFX)

Aquí hay una pequeña demo del componente TextHTML en acción. Incluido el uso de LINKS en los textos de una aplicación JavaFX. También pueden ver AQUI una demo Java Web Start.



La biblioteca memeFX está AQUI

Cache:true ... otro detalle para mejorar el rendimiento gráfico

Si, por ejemplo, utilizas una figura con una gradiente -o sombra- como fondo de un área, es mejor agregar a esa figura el parámetro cache:true, de manera de evitar que el objeto sea re-dibujado con cada cambio que se realiza por encima de él (en el caso de una gradiente, debe volver a recalcular y redibujar cada franja de color que conforma la transición entre los colores... lo que resulta sumamente "caro" en términos de procesamiento).

El código al pie del artículo

Al agregar cache:true se le indica al sistema que debe generar la imagen una vez y guardarla en cache, de esta menera, cuando se realiza un cambio sobre ella, sólo recupera la imagen desde una copia almacenada en memoria (como bytes) y pinta los cambios encima, lo que resulta sumamente rápido y menos "costoso" en ciclos de procesamiento.

En todo caso, no debes utilizar cache:true cuando la imagen va a cambiar con frecuencia, porque esto sólo producirá que sea re-generada con cada cambio, pero además almacenada, lo que da por resultado un proceso mucho más "costoso". El cache:true debe ser utilizado en imágenes que NO cambian frecuentemente.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.scene.effect.DropShadow;

var px:Number;
var py:Number;
Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse:true
    keyFrames : [
        KeyFrame {
            time : 0s
            values: [px=>100, py=>100]
        }
        KeyFrame {
            time : 3s
            canSkip : true
            values: [px=>1180, py=>680]
        }
    ]
}.play();

var angle:Number;
Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse:true
    keyFrames : [
        KeyFrame {
            time : 0s
            values: [angle=>0]
        }
        KeyFrame {
            time : 1.5s
            canSkip : true
            values: [angle=>360]
        }
    ]
}.play();

Stage {
    title: "Application title"
    width: 1024
    height: 768
    scene: Scene {
        content: [
            Rectangle {
                cache:true
                x: 0, y: 0
                width: 1280, height: 768
                fill: LinearGradient {
                    startX : 0.0
                    startY : 0.0
                    endX : 1.0
                    endY : 0.0
                    stops: [
                        Stop {
                            color : Color.BLACK
                            offset: 0.0
                        },
                        Stop {
                            color : Color.BLUE
                            offset: 1.0
                        },

                    ]
                }
                effect: DropShadow { offsetX:10, offsetY:10 }
            }
            Rectangle {
                x: bind px, y: bind py
                width: 200, height: 200
                fill: Color.RED
                rotate: bind angle
            }

        ]
    }
}

HTML en JavaFX

Componente TextHTML

Ya está disponible el componente TextHTML en la biblioteca memeFX.

Este control -aunque básico- permite incluir contenido mucho mas rico que el permitido por el componente Text, standard en JavaFX.

Por ahora, básicamente permite cambiar los fonts (fuentes), color del texto, la alineación de parrafos, agregar LIKS (enlaces) e incluir algunos caracteres especiales (< > € etc). Para más información visita el sitio del proyecto y mira la documentación.

TextHTML {
    x: 20, y: 20, wrappingWidth:300

    content:
        "<p align=justify><font size=24 color=#ffff00>"
        "Easter Island</font> <i>(Rapa Nui)</i> is a "
        "Polynesian island in the southeastern <font "
        "size=24 face=Verdana color=#ff5555>Pacific "
        "Ocean</font>. The island is a <font face="
        "TimesRoman size=24  color=#55ffff><a href="
        "algo>special</a> <i>territory</i></font> of "
        "<a href=Chile>Chile</a>. Easter Island is "
        "famous for its monumental statues, called "
        "<font color=#00ff00 size=18>moai.</font></p>"

    onLinkPressed: function(link) { println(link) }

};

En el futuro espero incluir imágenes y algun tipo de control sobre ellas (alineación de las imágenes, eventos como mouseOver, etc).

HTML en ImagesAccordion

El componente ImagesAccordion ahora incluye el componente TextHTML para las descripciones extensas de las imágenes.

CLICK AQUI para lanzar un demo Java Web Start


http://code.google.com/p/memefx/

Como mejorar la partida de Java Web Start

Aquí hay un truco para mejorar la velocidad de partida de las aplicaciones JavaFX Web Start.

Todo lo que necesitas hacer es agregar una linea a tus archivos JNLP.

<update check="background">

El elemento update se usa para indicar la preferencia sobre como Java Web Start maneja las actualizaciones. El elemento update puede contener los siguientes atributos opcionales:

Atributo check: El atributo check indica la preferencia sobre cuando el cliente JNLP debe chequear por actualizaciones, y puede tener uno de los siguientes tres valores:

1. "always": Siempre chequea por actualizaciones antes de lanzar la aplicación.
2. "timeout" (default): Chequea por actualizaciones hasta alcanzar un umbral de tiempo (timeout) antes de lanzar la aplicación. Si el chequeo de actualización no se completa antes del timeout, la aplicación es lanzada, y el chequeo de actualización continua por "atras" del proceso de la aplicación.
3. "background": Lanza la aplicación mientras chequea si existen actualizaciones simultaneamente, por "atras".

La opción 3 mejorará el tiempo de partida de las aplicaciones JavaFX Web Start.