Aprendiendo JavaFX

Migrando a JavaFX 1.2: de UiStub --> FXDNode

2009-08-28T11:30:00.000-07:00

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

2009-06-16T22:41:00.000-07:00

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)

2009-06-05T17:50:00.000-07:00

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

2009-06-05T13:57:00.000-07:00

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

2009-05-08T14:21:00.000-07:00

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

2009-04-29T13:42:00.000-07:00

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)

2009-04-24T13:55:00.000-07:00

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

2009-04-23T13:49:00.001-07:00

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

2009-04-20T11:35:00.000-07:00

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

2009-04-18T00:10:00.000-07:00

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.

Un detalle para obtener una mejor performance

2009-04-16T14:01:00.001-07:00

Este detalle (junto con incluir canSkip:true en los timelines asociados a animaciones o transiciones gráficas de algún tipo) puede hacer una gran diferencia en la performance gráfica de JavaFX.

Tengo un CustomNode cuyo contenido son unos nodos almacenados en una secuencia:


public class myComponent extends CustomNode {

    var objs:Node[];

    public override function create(): Node {
        Group {
            content: bind objs
        };
    };
}

Digamos que se necesita reemplazar con frecuencia los nodos en objs y que tengo una función que realiza este trabajo:


function paint():Void {

    delete objs;

    for (element in someGroup) {
        ...
        insert newNode into objs;
        ...
    }
}

Como muestra el video, eso es ineficiente. Al estar enlazado el contenido de objs con el contenido del componente e ir cambiando el contenido de objs, se va gatillando trabajo para refrescar el componente.

Es más eficiente crear una secuencia temporal y traspasar al final todos los nodos a la secuencia asociada al componente:


function paint():Void {

    var tmpObjs:Node[];

    for (element in someGroup) {
        ...
        insert newNode into tmpObjs;
        ...
    }
    
    objs = tmpObjs;
}

Habría que probar si esto también es aplicable cuando se realizan cambios a los elementos en la secuencia (y no sólo cuando estos se reemplazan). Es probable que ocurra lo mismo, porque al actualizar uno a uno los elementos, es muy probable que también se vaya gatillando trabajo parcial, mientras si se reemplaza toda la secuencia de una vez, ese trabajo debería ocurrir una sóla vez... ¿?

Un "truco" para obtener el alto de un Font

2009-04-14T12:07:00.001-07:00

Estoy construyendo un componente de texto HTML para mi librería de JavaFX, y me encontré con el siguiente problema.

¿Cómo obtengo el alto de un font?

No confundan el obtener el alto de un TEXT con obtener el alto de un FONT.

Si uno tiene un texto y quiere obtener sus dimensiones, basta con:


var myText = Text {
    content: "Mi texto"
    ...
 Font {
        size:24
        ...
    }
}

var ancho = myText.boundsInLocal.width;
var alto = myText.boundsInLocal.height;

El asunto es que si uno pone "....." como contenido del texto, el alto es de apenas unos pixeles.

Probablemente ustedes no se vayan a encontrar con este problema con mucha frecuencia, pero para el componente que estoy creando es decisivo... entonces, aquí va una solución bastante... mmm.... "simple"... pero funciona.


var myFont = Font {
   size=24
   ...
}

var tmpText = Text {
   content: "Aj"
   font: myFont
}

var myText = Text {
   content: ".........."
   font: myFont
   ...
}

var altoFont = tmpText.boundsInLocal.height;
var anchoTexto = myText.boundsInLocal.width;

No es el ideal recurrir a este tipo de "trucos", pero me pareció mejor que tener que incluir las APIs de Java para el manejo de Fonts, que si entregan todo tipo de información sobre las fuentes... espero que en próximas versiones de JavaFX la API incluya una alternativa más "elegante", es decir, que entregue directamente las medidas asociadas a las fuentes.

"On Replace" no es "On Modify"...

2009-04-12T01:58:00.000-07:00

No tengo claro si hay alguna manera de hacer que "on replace" se dispare al modificar una variable de una clase definida por el usuario (supongo que no, porque se llamaría ON MODIFY). Al parecer es necesario recrear el objeto y asignarlo a la variable para que "on replace" detecte el cambio.

Digamos que defino una clase:


public class Data {
    public var attrib1:Number=0.0;
    public var attrib2:String="";
}

Luego, creo una instancia de la clase:


var data1:Data = Data {
    attrib1: 1.2,
    attrib2: "Mauricio"
} on replace {
    println("{data1.attrib1} {data1.attrib2}");
};
data1.attrib2="Omar";
data1.attrib2="Veronica";

La salida de este ejemplo es:


1.2 Mauricio

Es decir, al asignar "Omar" o "Veronica" a attrib2, el bloque "on replace" de data1 no se dispara.

La única manera (que conozco) de evitar esto es asignar una nueva instancia del objeto a data1:


data1= Data { attrib1:data1.attrib1 attrib2:"Omar"};

Quizás haya alguna forma de declarar la variable con algún tipo de binding o algo por el estilo que permita detectar los cambios de variables dentro de una instancia.

Por ahora, vale la pena tener este detalle presente para evitar problemas y pérdidas de tiempo... si uno no lo sabe, puede no ser evidente que esa parte del código no se está ejecutando y hay un bug en el código.

"On Replace" aplicado a secuencias

2009-04-12T01:20:00.000-07:00

La clausula "on replace", si está presente al momento de definir una variable, causa que el bloque de código sea ejecutado cada vez que el valor de la variable cambia -- incluyendo la asignación inicial de su valor.

Los parametros opcionales proveen información sobre qué cambió: on replace oldValue [ firstIndex .. lastIndex ] = newElements { ... }

Todos estos parámetros son opcionales, y en la más simple de las formas, ninguno está presente:


var x = 0 on replace { println("x is ahora: {x}") }

El parámetro "oldValue" provee el valor previo de la variable.


var x = 0 on replace oldValue { 
    println("x was {oldValue} and is now: {x}") }

Los parámetros remanentes son utiles con las secuencias.


var seq = ['A', 'B', 'C', 'D', 'E', 'F'] 
    on replace oldValue[firstIdx .. lastIdx] = 
    newElements { println(
        "reemplazo {oldValue}[{firstIdx}..{lastIdx}]"
        " por {newElements} produciendo {seq}") 
} 
seq[3] = '$'; 
insert '#' into seq; 
delete '$' from seq; 
delete seq[2]; 
seq[1..4] = ['X', 'Y']; 
delete seq;

Lo que produce está salida:


replaced [0..-1] by ABCDEF yielding ABCDEF
replaced ABCDEF[3..3] by $ yielding ABC$EF
replaced ABC$EF[6..5] by # yielding ABC$EF#
replaced ABC$EF#[3..3] by  yielding ABCEF#
replaced ABCEF#[2..2] by  yielding ABEF#
replaced ABEF#[1..4] by XY yielding AXY
replaced AXY[0..2] by  yielding

Nota que firstIndex, lastIndex and newElements se refieren únicamente a la porción que la secuencia que cambió.

Cómo compilar clases Java en JavaFX, que contienen delete o insert

2009-04-07T10:35:00.000-07:00

Como saben, los términos "insert" y "delete" están reservados por JavaFX para insertar y borrar elementos en las secuencias. Esto puede producir un inconveniente cuando uno incluye dentro de un proyecto JavaFX una clase Java donde se utiliza llamadas a métodos denominados "insert" o "delete".

Esto ocurre, por ejemplo, si se utiliza "delete" para borrar un archivo. El compilador muestra el siguiente error:


Sorry, I was trying to understand an expression
but I got confused when I saw 'delete' which is a keyword.
new java.io.File("temp").delete();
                         ^

La solución es simple, sólo hay que incluir el término entre << ... >>


new java.io.File("temp").<<delete>>();

Lo interesante es que esta sintaxis permite utilizar cualquier texto como un identificador:

def <<english
      variable>> = "cualquier simbolo sirve como identificador";
def <<русская переменная>> = <<english
      variable>>;
println(<<русская переменная>>);

La salida del script es:


cualquier simbolo sirve como identificador

Noten que el identificador "english variable" incluso incluye un salto de línea (CR/LF).

Usando FX.deferAction()

2009-03-30T23:41:00.000-07:00

Al desarrollar el componente de acordeón de imágenes, se producía un "pestañeo extraño" al momento de solicitar a los elementos que actualizaran su posición. Le dí algunas vueltas al código hasta comprobar que: no era resultado de algo producido por un error en el código, sino por algo relacionado con el refresco de la pantalla (o algo por el estilo ¿?).

Así que recurrí un poco al instinto y a la memoria... y... recorde haber leido algo sobre deferAction. Así que incluí el código que solicita el ajuste de posición, dentro de la llamada de esta función y el problema terminó:

El siguiente código:


public-read var active: Integer on replace {       
    for (item in pictures) {
        item.adjust();
    };
};

Pasó a ser este:


public-read var active: Integer on replace {
    FX.deferAction(function():Void {
        for (item in pictures) {
            item.adjust();
        };
    });
};

Sólo anidé el for dentro de FX.deferAction(function():Void { ... });

Sí descargan la biblioteca memeFX y quitan el FX.deferAction en ImagesAccordion.fx, quizás puedan ver el problema que me llevó a esta solución (no sé si el problema sea reproducible en otras máquinas). Tampoco me quedó claro que produce el problema ni por qué lo resuelve deferAction, voy a buscar información al respecto. Por ahora, sólo comparto el "tip" en caso que alguien tenga un problema similar.

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

Por qué incluir canSkip:true en los timelines

2009-03-29T10:20:00.000-07:00

Este video muestra la diferencia en el rendimiento de las animaciones gráficas con y sin canSkip:true. Es recomendable incluir este parametro en los KeyFrame que alteran valores (values:) asociados a animaciones y efectos (cambio de posiciones, variación de sombras, difuminado, etc... cualquier efecto o movimiento gradual).

Una persona del grupo JavafxProgramming creo una aplicación Flex que luego replicó en JavaFX. Su problema era el rendimiento de JavaFX, que hacia su aplicación inutilizable. Pidió consejos al foro, pero nada funcionó... hasta que incluyó el canSkip:true en los timelines... recién ahí la aplicación funcionó como debía.

Quizás sería bueno que Sun incluyera el canSkip con true como valor por defecto. Esto puede terminar desprestigiando la plataforma.

En todo caso, sería bueno que todos comparta este detalle o lo tengan muy presente al momento de usar los timelines o de tener problemas con el rendimiento.

memeFX 0.2.2 : ImagesAccordion con ORIENTACION

2009-03-22T11:59:00.000-07:00

Ahora se puede cambiar la orientación del componente de "acordeón", para que las imágenes se desplacen horizontal o verticalmente. Basta con incluir en la definición del componente, un:


orientation: ImagesAccordion.VERTICAL

para que las imágenes se muevan verticalmente.

Como crear juegos para móvil con Netbeans 6.5

2009-03-20T12:02:00.000-07:00

Realmente, es increible lo fácil que resulta crear un juego para teléfono con Netbeans 6.5. De hecho, este tutorial demuestra como crear uno en ¡10 minutos! Vale la pena verlo y tenerlo en cuenta.

Blogger no me permite incrustar el video aquí, así que ahí les va el enlance (se ve mejor a pantalla completa): CLICK AQUI

- Crea tu propio juego para móvil. Hands on Lab6400 (pdf)
- Mobile Game Project.zip
- Guía para el GameBuilder de Netbeans

memeFX v0.2

2009-03-20T10:26:00.000-07:00

Ya está disponible la librería incluyendo una versión final de "acordeón de imágenes". La verdad que tiene muchas opciones para personalizar el componente. Además, permite enlazar algunas acciones del usuario con funciones.

Asi, por ejemplo, se podría hacer el que componente comience a tocar un MP3 distinto al pasar el mouse sobre los distintos elementos del "acordeón", y que muestre detalles sobre la música si se hace click sobre ese elemento. Pudiendo además dejar de tocar al abandonar el "acordeón" (al sacar el mouse de encima).

Proyecto memeFX y descarga código fuente, CLICK AQUI

Demo Java Web Start del ImageAccordion, CLICK AQUI

Esto me dio la idea de hacer una variación que permita crear un "acordeón de formulario", es decir, que haya varios formularios con campos, botones, etc. Y que uno pueda pasar de uno a otro igual que en el acordeón de imágenes. Voy a darle vueltas y veré que resulta.

Timelines de duración variable y el at(..)

2009-03-19T11:40:00.001-07:00

Uno de los inconvenientes de trabajar en un ambientea tan nuevo como el JavaFX script, es que no abundan las fuentes de información.

Una de las cosas que no tenía claras (seguramente porque no investigué lo suficiente, o no miré mejor los ejemplos), era cómo se hace que un timeline tenga duración variable.

Bueno, ahora descubrí que diablos es el at(..) en los timeline y cómo se hace para que la duración sea variable.

Primera cosa, cuando uno usa at(), en realidad está usando una "abreviatura" en la manera de definir un timeline. La idea es que sólo sea una opción breve para escribir el código, pero por lo mismo, no es la forma más "potente".

Tomemos este ejemplo:


var x:Number;
Timeline {
    repeatCount: 1
    keyFrames: [
        at (0s) { x => 0.0}
        at (3s) { x => 100.0}
    ]
}.play();

En él, definimos una variable x, que al segundo 0s -de iniciado el timeline- asume un valor de 0.0, luego, x asumirá gradualmente los valores entre 0.0 y 100.0, alcanzando el máximo valor (100.0) en 3s segundos.

El asunto que me faltaba comprender era... ¿como cambiaba el tiempo en at(3s)?, porque no acepta ni variables ni bind dentro de los paréntesis.

Pues resulta que con at(..) no lo vas a conseguir (por lo menos eso entiendo en este momento), la forma correcta y potente de usar las lineas de tiempo es esta:


var dur=3s;
var x:Number;
Timeline {
    repeatCount: 1
    keyFrames : [
        KeyFrame {
            time : 0s
            values: [x=>0]
        },
        KeyFrame {
            time: bind dur
            values: [x=>100]
        }
    ]
}.play();

De hecho, esta forma de definir un timeline permite anidar timelines o agregar un action: en cada KeyFrame, de manera que una acción sea ejecutada cada vez que una etapa de la animación o transición se completa.


var dur=3s;
var dur2=5s;
var x:Number;
Timeline {
    repeatCount: 1
    keyFrames : [
        KeyFrame {
            time : 0s
            values: [x=>0]
        },
        KeyFrame {
            time: bind dur
            canSkip: true
            values: [x=>50]
            action: function() {
                println("completo etapa 1");
            };
        },
        KeyFrame {
            time: bind dur2
            canSkip: true
            values: [x=>200]
            action: function() {
                println("completo etapa 2");
            };
        }
    ]
}.play();

Un "acordeón" de imágenes

2009-03-18T06:16:00.001-07:00

Este componente aun no está terminado, pero ya lo pueden probar usando el link de más abajo.

Lanzar demo Java Web Start, CLICK AQUI

Código fuente componente y demo, CLICK AQUI

El código para crear un "Acordeón de imágenes" es el siguiente:


var accordion = ImagesAccordion{
    width: 650,
    height: 350, 
    lineWidth: 1.0,
    lineColor: Color.WHITE
    images: [
        ImageItem {
            id: "moais",
            caption: "Moais"
            image: Image { url: "{__DIR__}moais.jpg"
            }
            message: "Easter Island (Rapa Nui) is a Polynesian island in the "
                     "southeastern Pacific Ocean, The island is a special "
                     "territory of Chile. Easter Island is famous  for its "
                     "monumental statues, called moai."
            messageArea: Rectangle2D {
                minX: 30,
                minY: 253,
                width: 350,
                height: 87
            }
            call: click
        },
        ImageItem {
            id: "anakena",
            caption: "Anakena"
            image: Image { url: "{__DIR__}anakena.jpg"
            }
            message: "‘Anakena is a white coral sand beach in Rapa Nui..."
            messageArea: Rectangle2D {
                minX: 20,
                minY: 233,
                width: 360,
                height: 107
            }
            messageFont: Font { size: 12
            }
            call: click
        },
        ImageItem {
            id: "glacier",
            caption: "Grey glacier"
            image: Image { url: "{__DIR__}grey.jpg"
            }
            message: "The Glacier is in the south end..."
            messageArea: Rectangle2D {
                minX: 30,
                minY: 270,
                width: 320,
                height: 70
            }
            call: click
        },
        ImageItem {
            id: "torres",
            caption: "Torres del Paine"
            image: Image { url: "{__DIR__}paine.jpg"
            }
            message: "Spectacular mountain group in Torres del Paine..."
            messageArea: Rectangle2D {
                minX: 30,
                minY: 270,
                width: 320,
                height: 70
            }
            call: click
        },
        ImageItem {
            id: "salar",
            caption: "Atacama desert"
            image: Image { url: "{__DIR__}salar.jpg"
            }
            message: "The Atacama Desert is a virtually rainless plateau in Chile..."
            messageArea: Rectangle2D {
                minX: 20,
                minY: 237,
                width: 380,
                height: 103
            }
            //            messageFont: Font { size: 12 }
            call: click
        },
        /*        ImageItem {
        id: "crayons",
         caption: "Crayones"
         message: "Recuerdos de la niñez"
         image: Image { url: "{__DIR__}crayons.jpg"}
         call: click
         },*/
        ImageItem {
            id: "chaiten",
            caption: "Chaiten"
            image: Image { url: "{__DIR__}chaiten.jpg"
            }
            message: "Hell on Earth. Chaitén is a volcanic caldera..."
            messageArea: Rectangle2D {
                minX: 20,
                minY: 270,
                width: 420,
                height: 70
            }
            call: click
        }
    ]
    effect: Reflection { fraction: 0.1,
    }

};

function click(image:ImageItem) {
    println(image.id);
}

Un pequeño bug en el Timeline y una solución

2009-03-17T22:39:00.000-07:00

Estaba haciendo unas pruebas y de vez en cuando notaba un comportamiento extraño, finalmente descubrí que el problema se origina en la reutilización de un Timeline, que estaba definido como:


    var timeline= Timeline {
        repeatCount: 1
        keyFrames: [
            at (0s) { currentX => startX }
            at (0.5s) { currentX => posX }
        ]
    };

Aunque no es el ideal que haya bugs, es algo habitual en una plataforma nueva (he leído que Adobe Flex tiene demasiados bugs, así que -aunque es consuelo de tontos- me voy a conformar con este pequeño error en JavaFX).

La solución fue tan simple como... no reutilizar el Timeline una y otra vez, sino que recrearlo cuando lo voy a usar:


    var timeline:Timeline;

...

            timeline = Timeline {
                repeatCount: 1
                keyFrames: [
                    at (0s) { currentX => startX }
                    at (0.5s) { currentX => posX }
                ]
            };
            timeline.playFromStart();

El problema específico de mi programa, era que a veces asignaba currentX igual a 0 en at (0s), aunque startX no tenia ese valor.

En todo caso, no es un problema que ocurra con frecuencia (supongo que debe ser un pequeño error el compilador), así que no es necesario hacer esto cada vez que utilicen un Timeline... pero si notan algo extraño como que un elemento asociado de alguna manera a un timeline salta de manera no esperada, intenten esto (por lo menos hasta que el bug sea corregido).

for... indexof

2009-03-16T23:36:00.000-07:00

Este es un detalle muy menor, pero UTIL... típicamente, cuando uno recorre una lista, crea una variable que sirva de puntero y que se incremente en la medida que pasa los elementos de la lista.


var names=["peter","john","james"];

var i=0;
for (name in names) {
    println("{name} {i}");
    i++;
}

Con JavaFX script esto no es necesario, sólo basta con un:


var names=["peter","john","james"];

for (name in names) {
    println("{name} {indexof name}");
}

¿Comó aplicar más de un efecto a un nodo?

2009-03-16T10:04:00.000-07:00

Si por ejemplo, se desea hacer difusa una imagen y al mismo tiempo reducir su brillo.

El "truco" está en que casi todos los efectos tienen un INPUT. Eso permite anidar los efectos.


var img = ImageView {
    image: Image { url: "{__DIR__}crayons.jpg"},
    effect: 
        GaussianBlur {
            input:
                ColorAdjust{
                    brightness: -0.5
                }
        }
};

Agregando funcionalidad a eventos, sobre la marcha

2009-03-16T01:03:00.000-07:00

Mientras desarrollaba el componente de menú flotante, me encontré con esta posibilidad... agregar funcionalidad a un evento... sobre la marcha.

El asunto es este. Si defino un evento onMousePressed de un círculo, ¿como podría agregar funcionalidad a ese evento sin alterar el código y sin crear un nuevo tipo de clase?

Entonces pense... ¿qué tal si primero obtengo la funcionalidad en un evento (onMousePressed) de un objeto y la guardo en una variable? ... Luego, ¿qué tal si reemplazo el evento onMousePressed de ese objeto, con una nueva función en la que primero ejecute la funcion original (guardada en la variable) y luego agrego la nueva funcionalidad?

Bueno, es posible hacerlo...

Para ver una versión Java Web Start, CLICK AQUI


package addfunctions;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.Node;
import javafx.scene.input.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.util.Sequences;

var colors: Color[]=[Color.RED, Color.YELLOW,
    Color.BLUE, Color.GREEN];

var mycircle = Circle {
    centerX: 80, centerY: 80,
    radius: 40
    fill: Color.RED
    onMousePressed: function(e) {
        println("CLICK");
    };
}

var mycircle2 = Circle {
    centerX: 150, centerY: 150,
    radius: 40
    fill: Color.RED
    onMousePressed: function(e) {
        println("CLICK 2");
    };
}

function addColorSwitch(node:Node) {
    // obtiene la funcion original en el nodo
    var origFunc: function(e:MouseEvent):Void=
        node.onMousePressed;
    // reemplaza evento en el nodo por nuevo evento
    node.onMousePressed= function(e:MouseEvent) {
        // incluye la funcion original del nodo
        origFunc(e);
        // agrega funcionalidad
        var shape = (node as Circle);
        // obtiene color actual en el circulo
        var currentColor = shape.fill;
        // busca la posicion del color en la secuencia
        var pos = Sequences.indexOf(colors, currentColor);
        // si es el ultimo colo de la secuencia, vuelve a cero
        // si no, al siguiente elemento
        if (pos == sizeof colors - 1) then
        pos=0 else pos++;
        // asigna nuevo color a circulo
        shape.fill=colors[pos];
    };
};

// agrega funcionalidad a
// onMousePressed en los circulos
addColorSwitch(mycircle);
addColorSwitch(mycircle2);

Stage {
    width: 250, height: 250
    scene: Scene {
        content: [mycircle, mycircle2]
    }
}

MemeFX ... con Popup Menu (experimental)

2009-03-14T16:42:00.000-07:00

Estuve haciendo algunos arreglos al experimento del menú flotante que desarrollé hace algún tiempo, y salvo algunos detalles, funciona sin problemas.

Acabo de subir el código de la biblioteca (memeFX), incluyendo este código y un demo, donde se aprecia como usar el menú flotante.

Para ver el demo (Java Web Start), haz CLICK AQUI

Para visitar el sitio web del proyecto, CLICK AQUI

Algo de código:

Primero, se crea un tipo de menú colgante... lo que puede incluir cambios a la apariencia del menú (colores, grosores, rotación, transparencia, esquinas redondeadas, etc.).


var popupCircle = PopupMenu{
    corner: 20,  padding: 8, borderWidth: 4,
opacity: 0.9, animate: true

    content: [
        MenuItem { text: "Animar circulo!", 
          callNode: node },
        MenuItem { text: "Mostrar nombre y posicion",
           callPosId: positionId }
    ]
};

El tipo de función declarada para el Item (la función que ejecuta al ser seleccionado un item del menú), tiene que ver con los parámetros que retorna el menú al ser seleccionada la opción:

call = no retorna parametros, la función es declarada como:

function algo():Void { ... };

callId = retorna el ID del objeto sobre el que se utilizó el menú, la función es declarada como:

function algo(id:String):Void { ... };

callPos = retorna el MouseEvent que originó la aparición del menú. Permite, por ejemplo, obtener la posición del mouse al lanzar el menú (¿qué otros datos se pueden obtener de MouseEvent?). La función es declarada como:

function algo(e:MouseEvent):Void { ... };

callNode = retorna el Nodo sobre el que se utilizó el menú flotante. Permite manipular directamente el objeto (en este ejemplo, se anima el tamaño del círculo seleccionado). Si se quiere utilizar sobre un tipo particular de nodo, es necesario hacer un casting al tipo de objeto apropiado... ejemplo, si el tipo de objeto es un campo de texto: (node as SwingTextField).text="{node.id}" . La función es declarada como:

function algo(node:Node):Void { ... };

callPosId = retorna el MouseEvent que originó la aparición del menu y el ID del objeto sobre el que se utilizó (puede ser útil para saber en que parte del objeto se hizo click). La función es declarada como:

function algo(e:MouseEvent, id:String) { ... };

callPosNode = retorna el MouseEvent que originó la aparición del menu y el Nodo sobre el que se utilizó (puede ser útil para saber en que parte y sobre que objeto se hizo click). La función es declarada como:

function algo(e:MouseEvent, node:Node) { ... };

En este ejemplo agregaré dos círculos:


var circle1 = Circle {
    id: "Cicle 1"
    centerX: 100, centerY: 100
    radius: 40, fill: Color.RED
};

var circle2 = Circle {
    id: "Cicle 2"
    centerX: 220, centerY: 300
    radius: 80, fill: Color.YELLOW
};

Los ID son opcionales, pero pueden ser usados para reconocer sobre que objeto se lanzó el menú flotante (callId y callPosId).

A continuación, enlazo el menú con los círculos:


popupCircle.to(circle1);
popupCircle.to(circle2);

Se agregan las rutinas que serán ejecutadas por las opciones del menú (el código pudo ser incluido al definir el menú colgante).


function node(node:Node):Void {
    Timeline {
        repeatCount: 4
        autoReverse: true
        keyFrames: [
            at (0s) {node.scaleX => 1.0;
        node.scaleY => 1.0 }
            at (0.2s) {node.scaleX => 1.4;
          node.scaleY => 1.4}
        ]
    }.play();
};

function positionId(e:MouseEvent, id:String):Void {
    println("Mouse at {e.x},{e.y} over {id}");
}

Finalmente, se agregan los círculos y los menús al Stage:


Stage {
    scene: Scene {
        content: [
            circle1,
            circle2
            PopupMenu.activateMenus()
        ]
    }
}

MemeFX ... mi biblioteca para JavaFX

2009-03-13T14:06:00.000-07:00

El nombre puede parecer "curioso", pero tiene una razón "intelectualoide" de ser...

Meme (se pronuncia MIM), responde a toda una teoría sobre la capacidad de las ideas para replicarse y evolucionar por si mismas, como seres vivos. La idea es que el diseño puede surgir del caos (suena a código abierto, ¿no?).

Se supone que a través de un proceso evolutivo y se selección natural, se consigue un resultado superior al original... ahora, como este proyecto es código abierto, y por lo mismo, fácilmente replicable y modificable (puede mutar y evolucionar libremente)... entonces, podría convertirse en un meme.

Veamos si el EFECTO MEME (MemeFX) ocurre con él... ;)

En este momento la biblioteca contiene sólo tres componentes, pero, no por eso no son útiles ;D ... la idea es que con el tiempo vaya creciendo. Tengo algunas ideas como incorporar controles para un menu flotante gráfico (si han mirado el blog, por ahí ya hice un intento), un componente de acordeón, componentes que permitan fácilmente asignar drag and drop a los elementos y definir areas para ser arrojados, un componente para simplificar que los applets sean arrastrables desde el navegador al escritorio (básicamente que genere el área de arrastre solo, porque de por sí es simple habilitar esa funcionalidad), etc. Las ideas son bienvenidas.

Por ahora, aquí está el código fuente de la biblioteca, demos Java Web Start con sus respectivos códigos fuentes y la documentación sobre como utilizarlos y personalizarlos.

Ojalá les sean de utilidad y puedan unirse al proyecto quienes se sientan motivados.

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

Aquí hay más info sobre los Memes, si alguien tiene curiosidad.

Como guardar datos persistentes en una aplicación JavaFX Web Start

2009-03-11T15:10:00.000-07:00

Esto permite que incluso una aplicación JWS -sin autorización para acceder a los recursos locales- almacene objetos y datos localmente, utilizando un mecanismo parecido a los "cookies" de los navegadores web.

Para el desarrollo del proyecto, hay que incluir el archivo javaws.jar entre las bibliotecas del proyecto, de manera de poder compilar el código. El archivo javaws.jar es standard en las distribuciones de Java 6 y posteriores, así que no es necesario incluirlo en la distribución de tu aplicación.

Comenzamos incluyendo los import en la aplicación:


import java.io.*;
import java.net.URL;
import javax.jnlp.*;

A continuación declaramos dos variables:


var persistenceService: PersistenceService = null;
var codebase: URL = null;

En el bloque INIT de la aplicación JavaFX, incluimos:


init {
    try {
        var basicService: BasicService =
            ServiceManager.lookup("javax.jnlp.BasicService") 
            as BasicService;
        codebase = basicService.getCodeBase();
            persistenceService =
            ServiceManager.lookup("javax.jnlp.PersistenceService")
            as PersistenceService;
    } catch (use:Exception) {
    }

};

Eso inicializa codebase y persistenceService.

En este ejemplo, declaro una clase Java que contendrá los datos que deseo almacenar persistentemente en el computador del usuario:


import java.io.Serializable;

class persistentData implements Serializable {

 public float x;
 public float y;
 public float width;
 public float height;

    persistentData (float x, float y, float width, float height) {
        this.x=x;
        this.y=y;
        this.width=width;
        this.height=height;
    };
}

Ahora, puedo incluir el código para almacenar en el repositorio local una instancia de mi clase persistentData:


var cache = new persistentData (x, y, width, height);
try {
    var fc: FileContents =
        persistenceService.get(codebase);
    var oos: ObjectOutputStream = 
        new ObjectOutputStream
        (fc.getOutputStream(true));
    oos.writeObject( cache );
    oos.flush();
    oos.close();
} catch (e:Exception) {
}

Y para recuperar el objeto desde el repositorio:


var cache:persistentData;
try {
    var appSettings: FileContents = null;
    appSettings = persistenceService.get(codebase);
    var ois: ObjectInputStream = new ObjectInputStream
        ( appSettings.getInputStream() );
    cache = ois.readObject() as persistentData;
    ois.close();
} catch (fnfe: FileNotFoundException ) {
   try {
        var size = persistenceService.create(codebase, 1024);
   } catch (ioe:IOException) {
   }
} catch (e:Exception) {
}

Voila!

Nota: el número 1024 en la línea persistenceService.create(codebase, 1024) indica el espacio (en bytes) que la aplicación está solicitando al repositorio para almacenar datos.

Si vas a ejecutar más de una aplicación Java Web Start desde una misma ruta (el mismo directorio en las URLs), es necesario agregar algo al codebase de manera de distinguir a ambas aplicaciones, porque si no, van a "pisarse" los datos almacenados.

¿Qué usar? ¿Color o Paint?

2009-03-11T14:55:00.000-07:00

Desarrollando el componente de "reloj" (no sé como llamarlo en español, en inglés les dicen Gauge), al incluir la posibilidad que el usuario pueda cambiar el color de fondo del "reloj" me topé con este dilema.... ¿Color o Paint?

Obviamente que yo opté por el Paint en el caso de este componente, porque permite pasar como un parametro a una función no solo un "color", sino una "gradiente" de colores, ya sea radial o lineal.


    public function customBackground(
      color:Paint, effect:Effect):Node {
        Circle {
            centerX: 150,
            centerY: 150
            radius: 135
            fill: bind color
        }
    };

La ventaja de usar Paint es que luego uno puede llamar la función (en el caso de mi componente) con :


background: control2.
    customBackground(Color.DARKBLUE)

o pasarle una "gradiente":


background: control3.customBackground(
        RadialGradient {
        centerX: 56, centerY: 56
        focusX: 0.1, focusY: 0.1
        radius: 103
        proportional: false
        stops: [
            Stop {
                color: Color.WHITE
                offset: 0.0
            },
            Stop {
                color: Color.DARKRED
                offset: 1.0
            }
        ]
    })

lo que permite mayor personalización....

Es un detalle menor, pero al menos es bueno tener presente que existe la opción, especialmente si se están desarrollando componentes y se desea dar flexibilidad a quienes los utilicen.

Pronto liberaré este nuevo componente

2009-03-09T16:30:00.000-07:00

No crean que abandoné mi pasión por el JavaFX ;D ... sólo he estado dedicado a desarrollar este componente que voy a liberar como código abierto.

JAVA WEB START DEMO

Sería genial si alguien con algo de tiempo me ayuda a integrar estos componentes (la perilla, el stagecontroller y este nuevo componente) en el proyecto JFXtras (CLICK). Mi problema es de falta de tiempo.

¿Algún voluntario?


package democombo;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.Group;
import javafx.scene.paint.*;
import javafx.scene.text.*;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import org.combofx.gauge.*;
import org.combofx.stage.*;
import org.combofx.knob.*;


/** Stage controller */
var cs = controlStage{
width: 1024, height: 600
initialPosition: controlStage.CENTER
checkMinHeight: true, minHeight: 600
checkMinWidth: true, minWidth: 1024
stickyBorders: true, limitBorders: true
};

// gauge component #1
var gauge1 = Gauge {
ui: BasicGauge{ }
primaryLabel: "Km/H"
secondaryLabel: "Speed"
secondaryLabelFont: Font { size: 15 };
min: 0.0, max: 100.0
scaleX: 0.72, scaleY: 0.72
translateX: -35, translateY: -42
speed: Gauge.SLOW
initialValue: 0
value: bind knob1.value
};

/** knob input #1 */
var knob1 = Knob {
ui: BasicKnob{ }
dialLinesNumber: 31
dialLinesLongEvery: 3
minAngle: 0, maxAngle: 720
translateX: 160, translateY: 160
min: 0, max: 100
scaleX: 0.5, scaleY: 0.5
value: 50
};


// gauge component #2
var control2 = CornerLLGauge{};
var gauge2 = Gauge {
ui: control2
primaryLabel: "Km/H"
secondaryLabel: "Current\nSpeed"
min: 0.0, max: 100.0
dialNumsVisibleEvery: 2
translateX: 300
speed: Gauge.SLOWEST
initialValue: 0
value: bind knob2.value
dialLongLinesColor: Color.YELLOW
// custom background color
    background: control2.customBackground(Color.DARKBLUE)
};

/** knob input #2 */
var knob2 = Knob {
ui: BasicKnob{ }
dialLinesNumber: 31
minAngle: 0, maxAngle: 720
dialLinesLongEvery: 3
translateX: 470, translateY: 160
min: 0, max: 100
scaleX: 0.5, scaleY: 0.5
value: 50
};

// gauge component #3
var control3 = RectGauge{ };
var gauge3 = Gauge {
ui: control3
primaryLabel: "Km/H"
primaryLabelColor: Color.ORANGE
secondaryLabel: "Speed"
min: -100.0, max: 100.0
dialNumsLargeEvery: 2
largeNumberFont: Font { size: 16, oblique: true }
smallNumberFont: Font { size: 10, oblique: true }
translateX: 600, translateY: -7
scaleX: 0.94, scaleY: 0.94
speed: Gauge.INMEDIATE
initialValue: 0.1
value: bind knob3.value
dialLongLinesWidth: 4
internalLongRadDial: 118
dialShortLinesColor: Color.YELLOW
dialShortLinesWidth: 0.5
// custom background radial gradient
    background: control3.customBackground(
        RadialGradient {
        centerX: 56, centerY: 56
        focusX: 0.1, focusY: 0.1
        radius: 103
        proportional: false
        stops: [
            Stop {
                color: Color.WHITE
                offset: 0.0
            },
            Stop {
                color: Color.DARKRED
                offset: 1.0
            }
        ]
    })
};

/** knob input #3 */
var knob3 = Knob {
ui: BasicKnob{ }
dialLinesNumber: 31
minAngle: 0, maxAngle: 720
dialLinesLongEvery: 3
translateX: 830, translateY: 160
min: -100, max: 100
scaleX: 0.5, scaleY: 0.5
value: 0
};

// gauge component #4
var control4 = SquareGauge{};
var gauge4 = Gauge {
ui: control4
decorationVisible: false
primaryLabel: "Km/H"
secondaryLabel: "Speed"
secondaryLabelFont: Font { size: 15 }
valueColor: Color.CYAN
valueFont: Font {
    size: 19,
    oblique: true
    name: "Verdana"
}
min: 0.0, max: 100.0
scaleX: 0.72, scaleY: 0.72
translateX: -35, translateY: 250
speed: Gauge.FAST
initialValue: 0
value: bind knob4.value
// custom gauge background color
   background: control4.customBackground(Color.DARKGREEN)
 // highlighted ranges
    highlightRange: [
        Gauge.range { 
            start: 0, end: 70 
            color: Color.GREEN 
            opacity: 0.8 
        },
        Gauge.range {
            start: 70, end: 90
            color: Color.YELLOW
            dialLongLinesColor: Color.YELLOW
            dialShortLinesColor: Color.YELLOW
            opacity: 0.5
        }
            Gauge.range {
            start: 90, end: 100
            color: Color.RED
            dialLongLinesColor: Color.RED
            dialShortLinesColor: Color.RED
            opacity: 0.5
        }
    ]
};

/** knob input #4 */
var knob4 = Knob {
ui: OrangeKnob{}
dialLinesNumber: 31
minAngle: 0, maxAngle: 720
dialLinesLongEvery: 3
translateX: 160, translateY: 450
min: 0, max: 100
scaleX: 0.5, scaleY: 0.5
value: 50
};

// gauge component #5
var control5 = SmallGauge{};
var gauge5 = Gauge {
ui: control5
primaryLabel: "Km/H"
secondaryLabel: "Speed"
min: 0.0, max: 100.0
dialNumsVisibleEvery: 2
translateX: 295, translateY: 290
speed: Gauge.FASTEST
initialValue: 0
value: bind knob5.value
valueColor: Color.RED
dialLongLinesColor: Color.RED
shadowColor: Color.RED
shadowX: 2, shadowY: 2
// custom background radial gradient
    background: control5.customBackground(
        RadialGradient {
        centerX: 56, centerY: 56
        focusX: 0.1, focusY: 0.1
        radius: 103
        proportional: false
        stops: [
            Stop {
                color: Color.WHITE
                offset: 0.0
            },
            Stop {
                color: Color.BLACK
                offset: 1.0
            }
        ]
    })
 // highlighted gauge range
    highlightRange: [
        Gauge.range {
            start: 80, end: 100,
            color: Color.RED
            dialLongLinesColor: Color.RED,
            dialShortLinesColor: Color.RED
            internalRad: 120, externalRad: 123
        }
    ]
};

/** knob input #5 */
var knob5 = Knob {
ui: OrangeKnob{}
dialLinesNumber: 31
minAngle: 0, maxAngle: 720
dialLinesLongEvery: 3
translateX: 470, translateY: 450
min: 0, max: 100
scaleX: 0.5, scaleY: 0.5
value: 50
};

/** knob input noise #6 */
var knob6noise = Knob {
ui: OrangeKnob{ }
dialLinesNumber: 11
dialLinesLongEvery: 2
translateX: 730, translateY: 450
min: 0, max: 1
scaleX: 0.5, scaleY: 0.5
value: 0
};

// gauge component #6
var control6 = FlatRectInvGauge{};
var gauge6 = Gauge {
ui: control6
primaryLabel: ""
secondaryLabel: "Km/H"
secondaryLabelColor: Color.ORANGE
secondaryLabelFont: Font { size: 19 }
min: 0, max: 1
dialNumsVisibleEvery: 2
translateX: 600, translateY: 280
scaleX: 0.94, scaleY: 0.94
speed: Gauge.FAST
initialValue: 0.1
value: bind knob6.value
dialLongLinesWidth: 4
internalLongRadDial: 118
dialShortLinesColor: Color.ORANGE
dialShortLinesWidth: 0.5
noise: true, noiseLevel: bind knob6noise.value
reverseScale: true
dialNumsIntegerOnly: false
dialNumsDecimals: 1
useDots: true
displayVisible: false
decorationVisible: false
shadowX: 0, shadowY: 0
// highlighted gauge ranges
    highlightRange: [
            Gauge.range {
            start: 0, end: 0.5
            dialNumsColor: Color.ORANGE
        },
            Gauge.range {
            start: 0.6, end: 0.8
            color: Color.DARKRED
            opacity: 0.3
            internalRad: 0
        },
            Gauge.range {
            start: 0.8, end: 1.0
            color: Color.DARKRED
            opacity: 0.6
            internalRad: 0
        }
    ]
 // custom gauge background
    background: Group { content: [
            Rectangle {
                x: 10, y: 10
                arcHeight: 20, arcWidth: 20
                width: 260, height: 180
                fill: Color.RED
            }
            Circle {
                centerX: 140, centerY: 52
                radius: 125
                fill: Color.DARKRED
                opacity: 0.5
                clip: Rectangle { 
                    x: 15, y: 35, 
                    width: 250, height: 180 
                    arcHeight: 20, arcWidth: 20 
                }
        }]
    }
};

/** knob input #6 */
var knob6 = Knob {
ui: OrangeKnob { }
dialLinesNumber: 31
minAngle: 0, maxAngle: 720
dialLinesLongEvery: 3
translateX: 830, translateY: 450
min: 0, max: 1
scaleX: 0.5, scaleY: 0.5
value: 0.5
};


Stage {
// bind Stage (window) to the controller
width: bind cs.width with inverse
height: bind cs.height with inverse
x: bind cs.x with inverse
y: bind cs.y with inverse

scene: Scene {
    content: [gauge1, knob1, gauge2, knob2, gauge3, knob3,
    gauge4, knob4, gauge5, knob5, gauge6, knob6, knob6noise]
}
}

Una aplicación Desktop / Móvil que se adapta a la pantalla

2009-02-24T09:25:00.000-08:00

Este ejemplo hace algo bastante simple, pero útil:

- Detecta el profile en que se está ejecutando (si es una aplicación móvil o de escritorio)
- Dependiendo de eso, obtiene las dimensiones de la pantalla (en caso de ser móvil) o define un tamaño inicial para la aplicación de escritorio.
- En caso de tratarse de una aplicación de escritorio, resta al tamaño de la ventana el borde de la misma, de manera de conocer el area útil (en la que puede desplegar información o gráficos).
- En el caso de una aplicación de escritorio, ajusta lo desplegado al tamaño de la ventana, en caso que se cambie el tamaño a la ventana.

Aquí está el código:

package mobilescreen;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.*;
import javafx.animation.*;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;

var dx: Number=2;
var dy: Number=3;
var x: Number;
var y: Number;
var realW:Number;
var realH:Number;

var profile = FX.getProperty("javafx.me.profiles");
var isMobile = profile != null and 
               profile.indexOf("MIDP") >= 0;

var w: Number on replace {
  if (w == 0) then w = 300;
  realW = w - (if (isMobile) 0 else 16);
  x = realW / 2 ;
};

var h: Number on replace {
  if (h == 0) then h = 400;
  realH = h - (if (isMobile) 0 else 36);
  y = realH / 2 ;
};

Timeline {
  repeatCount: Timeline.INDEFINITE
  keyFrames: [
      KeyFrame {
          time: 0.02s
          action: function () {
              x += dx;
              y += dy;
              if (x < 0 or x > realW )
              dx = -dx;
              if (y < 0 or y > realH)
              dy = -dy;
          }
      }
  ]
}.play();

Stage {
    width: bind w with inverse
    height: bind h with inverse
  scene: Scene {
      content: [
          Text {
              font: Font { size: 16 }
              x: 10, y: 30
              content: bind
              "width: {w}\nheight:{h}\nis mobile: {isMobile}"
          },
          Rectangle {
              x: 10, y: 10
              width: bind realW - 20
              height: bind realH - 20
              fill: Color.BLUE
              opacity: 0.5
          },
          Circle {
              centerX: bind x,
              centerY: bind y
              fill: Color.RED,
              opacity: 0.5
              radius: 40
          }
      ]
  }
};

Cómo crear una aplicación móvil con JavaFX y Netbeans 6.5

2009-02-23T20:47:00.001-08:00

Este video muestra lo sencillo que es crear y probar aplicaciones móviles desarrolladas en JavaFX script con Netbeans 6.5.

Básicamente, sólo tienes que crear una aplicación y luego indicar que la vas a ejecutar con el emulador.

Como reemplazar y centrar textos incrustados en archivos Adobe Illustrator con JavaFX

2009-02-16T07:36:00.000-08:00

Uno de los beneficios de crear gráfica para JavaFX con Adobe Illustrator, es que luego esta puede ser reemplazada sin necesidad de alterar el código. Esto permite cambiar rápidamente la apariencia de una aplicación o dotarla de "pieles" o "skins" (distintas apariencias, a elección del usuario). Estas plantillas, que permiten incluso cambiar la posición de los elementos en la interfaz de usuario, entre otras cosas, pueden contener textos, que son posibles de reemplazar (haciendo su contenido dinámico).

Pero, para hacerlo hay un par de detalles que es necesario conocer.

Primero crearé una plantilla con Adobe Illustrator:

Una vez generado el archivo .FXZ podemos analizar el código.

Sólo me concentraré en la manipulación de textos, ya que en artículos anteriores he mostrado como trabajar con otro tipo de elementos gráficos generados con Adobe Illustrator.

Primero, crearemos una clase que cargue el archivo gráfico (.fxz) y que obtenga de él los nodos con los objetos.


import javafx.scene.Node;
import javafx.fxd.UiStub;
import javafx.scene.text.*;

public class gaugeui extends UiStub {

    override public var url = "{__DIR__}gauge.fxz";

    public var reflex: Node;
    public var needle: Node;
    public var decoration: Node;
    public var body: Node;

    public var dispvalue: Text;
    public-read var dispvaluew;
    public-read var dispvaluex;

    override protected function update() {

        reflex = getNode("reflex");
        needle = getNode("needle");
        decoration = getNode("decoration");
        body = getNode("body");

        dispvalue = getNode("dispvalue") as Text;
        dispvaluew = dispvalue.boundsInLocal.width;
        dispvaluex = dispvalue.boundsInLocal.minX;

    }
}

Revisemos el código:


override public var url = "{__DIR__}gauge.fxz";

Esa línea indica desde donde debe descargar el archivo con la gráfica: {__DIR__} apunta al mismo directorio que la aplicación;


    public var reflex: Node;
    public var needle: Node;
    public var decoration: Node;
    public var body: Node;

Declara algunas variables para contener otros elementos gráficos;


    public var dispvalue: Text;
    public-read var dispvaluew;
    public-read var dispvaluex;

Declara una variable (dispvalue) de tipo TEXTO, para obtener el nodo que contiene el texto que vamos a reemplazar en este ejercicio, y dos variables adicionales asociadas a ese texto: una (dispvaluew) que contendrá el ancho del area reservada originalmente para el texto y otra (dispvaluex) que contendrá la posición horizontal original para el área de texto;


    override protected function update() {

        // obtiene los nodos graficos
        reflex = getNode("reflex");
        needle = getNode("needle");
        decoration = getNode("decoration");
        body = getNode("body");

        // obtiene el nodo, pero lo transforma en texto
        dispvalue = getNode("dispvalue") as Text;

        // obtiene el ancho del texto original
        dispvaluew = dispvalue.boundsInLocal.width;
        // obtiene la posicion horizontal original del texto
        dispvaluex = dispvalue.boundsInLocal.minX;

    }

Para rescatar los nodos desde el archivo .fxz, utilizamos los nombres de asignamos a los elementos en el diseño. En nuestro ejemplo, llamamos al elemento de texto que deseamos manipular "jfx:dispvalue" (la identificacion jfx: permite identificar las etiquetas de nodos que importará JavaFX), y por lo tanto, obtenemos ese nodo con un getNode("dispvalue"), e inmediatamente lo convertimos en un Text (as Text).

Ahora bien, uno de los inconvenientes de la modificación de los textos desde un script, es que al modificar el contenido, se modifica el ancho del elemento que contiene el texto, y dependiendo de la alineación también puede modificarse la posición horizontal.

Por eso, al obtener el nodo de texto original, también almaceno la posición (dispvaluex) y el ancho (dispvaluew) que tenía el texto en el diseño. Con esta información más la nueva información de ancho generada al modificar el contenido del texto, puedo calcular la posición centrada del texto.

Para conseguirlo, puedo hacer algo como esto:


// instancia la clase que carga la gráfica (arriba)
var ui = gaugeui{};

// variable (degree) que mostrará en el area de texto
var degree = 0.0 on replace {

    // actualiza contenido con numero entero convertido en string
    ui.dispvalue.content="{degree as Integer}";

    // obtiene nuevo ancho del texto (alterado por nuevo contenido)
    var w = ui.dispvalue.boundsInLocal.width;

    // calcula coordenada horizontal para mantener el texto
    // centrado respecto a su posicion original en el diseño
    ui.dispvalue.x = ui.dispvaluex +
                 ui.dispvaluew / 2 - w / 2;

};

Al modificarse degree, obtiene su valor entero y lo convierte en un string. Esto lo hace al incluir la variable como parte de una cadena de texto entre paréntesis de llave... "{expresión}"

A continuación, obtiene el nuevo ancho del texto modificado, con un: elemento_texto.boundsInLocal.width

Finalmente, obtiene la nueva posición horizontal del texto, usando la posición original del texto en el diseño mas la mitad del ancho del texto original. En este punto sabemos cual era el punto medio del texto original (posición respecto a la cual centraremos el nuevo texto).

A esa posición, restamos la mitad del nuevo ancho del texto.... y como resultado, el texto se mantiene visualmente centrado.

La inconveniente con el uso de TextAlignment.CENTER, es que el texto se centra respecto a las demás líneas de un párrafo (con más de una línea), entonces, si usamos un texto con una sóla línea, TextAligment.CENTER no tiene ningún efecto.

En resumen, hay que recuperar el nodo del texto por su nombre, convertilo y almacenarlo como Text, obtener el ancho y posición original del texto en el diseño... y calcular la posición horizontal del texto al modificar su contenido.

Por cierto, es posible exportar los archivos Illustrator a .fxz sin los fonts, pero si te quieres asegurar que los textos se mantendrán en apariencia, tamaño y posición, es mejor incluirlos. El resultado no es extremadamente grande, un font típico pesa cerca de 50KB.

Ojalá esto sea de utilidad.

Como hospedar Aplicaciones Java Web Start en Google App Engine

2009-02-15T10:33:00.000-08:00

Estaba buscando donde hospedar un par de demos Java Web Start y finalmente recordé que tenía una cuenta de Google App Engine, así que me puse a investigar como hospedar allí los archivos JNLP y JAR de mis aplicaciones.

Hacerlo no resulta obvio, pues Google App Engine no ofrece un acceso de tipo FTP o un upload de archivos via web. La manera de hacerlo es sincronizando una aplicación Python local con los servidores de Google utilizando el utilitario appcfg.py update path/nombre_aplicacion_local, y la forma de subir los contenidos estáticos es incluirlos como parte de la aplicación Python y configurar la aplicación para servir contenidos estáticos e incluir una definición del MIME type para los archivos JNLP, de manera que sean bien interpretados por los navegadores (IE 7 despliega el contenido del archivo JNLP en vez de lanzar la aplicación, si el servidor no está configurado con el tipo JNLP entre los tipos servidos).

La solución final fue esta (creo que hay otras, pero esta fue la que me funcionó y no quise gastar más tiempo en investigar ;D):

- Creé dos subdirectorios como parte de una aplicación Python, en la ruta demos en mi copia local de Google App Engine... los llamé /exec y /jfx

- En el directorio /jfx copié los archivos JNLP

- En el directorio /exec copié los archivos JAR con mis aplicaciones JWS

- Luego, configuré el archivo app.yaml en el raíz de mi aplicación Python, de la siguiente manera:


application: javafxdemo
version: 3
runtime: python
api_version: 1

handlers:
- url: /exec
  static_dir: exec

- url: /jfx
  static_dir: jfx
  mime_type: application/x-java-jnlp-file

- url: .*
  script: javafxdemo.py

Finalmente, ejecuté el comando: appcfg.py update demos\javafxdemo ... que sincronizó el directorio local con la aplicación en Google App Engine.

Previamente modifiqué los archivos JNLP, de manera de explicitar que los archivos JNLP y los JAR están en directorios separados. Así que alteré las siguientes líneas:


<jnlp spec="1.0+" codebase=
"http://javafxdemo.appspot.com/"
href="jfx/Knob.jnlp">

...

<jar href="exec/Knob.jar" main="true"/>

Espero que les sirva este dato (por lo menos me servirá de ayuda-memoria la próxima)... o que me digan donde puedo hospedar (gratuítamente) contenidos estáticos sin tanto jaleo! jaja! y con 10GB de tráfico de salida gratuito ;D

Saludos.

Stage Controller, almost 1000 downloads - Casi 1000 visitas para descargar el Stage Controller

2009-02-15T03:14:00.000-08:00

Almost 1000 people visited the blog in a day to download the Stage Controller class. Thanks to all of you for your interest.

La verdad me sorprendió, pero casi 1000 personas visitaron el blog en un día para descargar el componente que controla los Stage... :D ... Visitas desde Nigeria, China, India, EEUU, Brazil, etc. Se ve que JavaFX está consiguiendo una comunidad global de desarrolladores, ¿no?

Gracias a todos por su interés.

My Google Code: Knob & Stage Controller / Perilla y controlador de Stage

2009-02-14T18:02:00.001-08:00

Two of the components I developed are now hosted at Google Code. They include documentation about how to use them.

Dos de los componentes que desarrollé están ahora hospedados en Google Code. Ellos incluyen la documentación sobre como usarlos.

Knob control / Perilla
http://code.google.com/p/javafxknob/
Java Web Start demo

Stage Controller / Controlador de Stage
http://code.google.com/p/javafxstagecontroller/
Java Web Start demo

JavaFX 1.1 liberado (incl. JavaFX Mobile)

2009-02-14T17:44:00.000-08:00

Fue liberada la versión 1.1 de JavaFX, que incluye el primer release de JavaFX Mobile.

Ahora los programas desarrollados con JavaFX de escritorio corren sin modificación en JavaFX Mobile, a diferencia -por ejemplo- de Flex, que tiene su propia versión para móviles, FlexLite.

http://www.javafx.com/launch/

El SDK 1.1 incluye un emulador que permite probar que tal funciona la portabilidad escritorio -> móvil

También, a primera vista, se ven algunos detalles de mejor integracion con Netbeans 6.5, como algunos elementos en la paleta de componentes.

JavaFX: Stage "controller" demo - Demo "controlador" de Stage

2009-02-12T01:52:00.000-08:00

This small code demostrates how easy is to handle the onResize and onMove events implemented by the Stage controller (Stage Controller).

Este pequeño código demuestra lo fácil que es manejar los eventos onResize y onMove implementados por el controlador de Stage (Controlador de Stage)

Here's the code / Aquí está el código:

var img = Image { url: "{__DIR__}myimage.jpg" };
var rect:Rectangle;
var sw:Integer;
var sh:Integer;

var cs = controlStage {
  timeToCallFunctions:0.001s
  timeToCheckPosSize:0.001s
  initialPosition:controlStage.CENTER, persist:true
  checkMinWidth:true, minWidth:270,
  checkMinHeight:true, minHeight:270,
  stickyBorders:true
    onResize: function(e) { clip(e) }
    onMove: function(e) { clip(e) }
};

// screen resolution
sw = cs.maxScrWidth;
sh = cs.maxScrHeight;

function clip(r:Rectangle2D) {
  rect = Rectangle {
      x: r.minX - (sw - img.width) / 2
      y: r.minY - (sh - img.height) /2
      width: r.width, height: r.height
  }
};

Stage {
    width: bind cs.width with inverse
    height: bind cs.height with inverse
    x: bind cs.x with inverse
    y: bind cs.y with inverse
    onClose: function() { cs.persistStage() };

  scene: Scene { content:
      ImageView {
          translateX: bind -rect.x
          translateY: bind -rect.y
          image: img
          clip: rect
      }
  }
};

Download the Netbeans 6.5 project, here. Descarga el proyecto Netbeans 6.5, aquí.

JavaFX: A Stage "controller" / Un "controlador" de Stage

2009-02-06T15:15:00.000-08:00

Update: Stage Controller hosted on Google Code, includes documentation for using the class. Click Here for a Java Web Start example.

This class allows you to "attach" some automatic behaviors to your app window (Stage). For example, you can make the window to stick to the edges of the screen with a simple... stickyBorders:true ... or select the borders you want to make sticky... ie. stickyLeft:true

You can persist the position and/or size of the window (with a simple persist:true, persistPosition:true or persistSize:true). You can anchor the window to the borders too (ie. anchorBottom:true). Enforce minimum and maximum sizes or enforce a specific size for the window or keep it in the middle of the screen, etc.

It can trigger two events: onResize and onMove... so, your app can obtain it screen position and size at any moment (demo, handling events).

There are many options and combinations.

Enjoy it ;)

Actualización: Ahora el Controlador de Stage es capaz de mantener la posición y/o tamaño de la ventana de la aplicación entre sesiones.

Esta clase permite definir comportamientos automáticos para la ventana de tu aplicación. Por ejemplo, puedes hacer que la ventana se "pegue" a los bordes de la pantalla con un simple... stickyBorders:true ... o seleccionar los bordes que quieres que sean "pegajosos"... ej. stickyLeft:true

Puedes hacer que la aplicación recuerde su posición y/o tamaño entre sesiones de uso (con un simple persist:true, persistPosition:true o persistSize:true). Puedes "anclar" la ventana a los bordes también (ej. anchorBottom:true). Forzar tamaños mínimos y máximos o un tamaño específico para la ventana... o mantener la ventana en el centro de la pantalla.

También puede gatillar dos eventos: onResize (si cambia el tamaño de la ventana) y onMove (si cambia de posición la ventana en la pantalla)... de esa manera la aplicación puede saber -en todo momento- en que área de la pantalla está localizada o que tamaño tiene (demo, manejando los eventos).

Hay muchas opciones y combinaciones.

Ojalá sea útil ;)

How to use it / Cómo se usa...

/** Stage controller */
var cs = controlStage { //persistFile: "testStage.persist"
initialPosition:controlStage.RIGHT + controlStage.TOP, persist:true
checkMinWidth:true, minWidth:440, checkMinHeight:true, minHeight:270,
stickyBorders:true

    onResize: function(e):Void {
  println("resize to {e.width},{e.height} at {e.minX},{e.minY}");
}
onMove: function(e):Void {
  println("moved to {e.minX},{e.minY} with {e.width},{e.height}")
};

};

Stage {
// bind Stage (window) to the controller
    width: bind cs.width with inverse
height: bind cs.height with inverse
x: bind cs.x with inverse
y: bind cs.y with inverse

// on stage close, stores last position and size
onClose: function() { cs.persistStage() };

scene: Scene {  ....

Descargar el proyecto Netbeans 6.5.... DOWNLOAD the Netbeans 6.5 project.... CLICK HERE

Curso gratuito de JavaFX Script, de 15 semanas de duración

2009-02-04T18:13:00.001-08:00

A partir del 30 de Enero pasado, se inició un curso gratuito por internet, para aprender JavaFX Script. Una vez por semana, los autores (Jim Weaver** & Sang Shin) publican el material necesario para experimentar y estudiar el lenguaje.

Solo tienen que mirar una vez por semana este sitio, al final del curso los participantes recibirán un diploma por su participación (aunque simbólico mas que nada, porque no es respaldado por ninguna institución):

http://www.javapassion.com/javafx/

** Jim Weaver es autor de dos libros sobre JavaFX Script:

- Pro JavaFX™ Platform: Script, Desktop and Mobile RIA with Java™ Technology

- JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications (quedó desactualizado por los cambios en el lenguaje).

JavaFX: un detalle importante sobre como se retornan valores

2009-02-04T17:27:00.001-08:00

Si se han fijado, muchas veces nos encontramos con cosas como esta en el código de una aplicación JavaFX:


function figura():Node {
Group {
    content: Line { startX:0,
    startY:0, endX:100,
    endY:100 }
}
};

Ahora, según la definición de la función, esta debe retornar un NODO (un objeto que puede ser una figura geométrica o una imagen, por ejemplo). Pero ese código, nunca ejecuta "explícitamente" un return.

Lo que sucede, es que JavaFX Script asume (salvo que exista explícitamente una instrucción RETURN), que la última expresión evaluada es lo que se retorna. En el caso del código (arriba), retornaría el Group.

El código escrito de manera más "formal" podría ser este:


function figura():Node {
var objeto = Group {
    content: Line { startX:0,
        startY:0, endX:100,
        endY:100 }
};
return objeto;
};

Ahora, esta flexibilidad no deja de tener su encanto al poder por ejemplo escribir algo como:


var resultado:Number = if (a==b)
 then { a+b/c } else { d/e+f };

... o poder decribir el cuerpo de una función como:


function calculo(a:Number,
 b:Number):Number {

     a + 1000 / b

};

En realidad, es un detalle que no deja de ser comodo y que hace más comprensible y breve el código... quizas más natural (siendo siempre opcional, y teniendo siempre la posibilidad de ser mas "formal" al codificar).

Ojalá esta explicación ayude a que comprendan mejor el código de algunos scripts.

JavaFX + Phys2D : JavaFX aprende sobre física (ojo, no solo ciencia)

2009-02-04T11:32:00.000-08:00

Phys2D es una excelente API de física, que no solo sirve para simular descabellados experimentos de cientificos encerrados en sus laboratorios o estudiantes queriendo experimentar lo aprendido en clases, esta API es excelente para desarrollar JUEGOS. Si, porque con ella puedes hacer que los elementos del juego se comporten como elementos reales, que se deslicen por pendientes, reboten o se comporten de manera elástica, aceleren, frenen o colisionen.

Lo mejor es que es código abierto... para más información, visita el sitio web de Phys2D

Este ejemplo comprende tres archivos:

1) la biblioteca de Phys2D, que debe estar incluida en los libraries del proyecto (y que incluyo en el directorio lib).

2) una clase que describe EL MODELO de elementos en la simulación... en este caso, incluye una BASE (o anchor, ancla en inglés... que es el elemento fijo en la parte superior), un RESORTE, una masa y un trozo rigido que lo une a la segunda masa. En otras palabras, es un péndulo doble que cuelga por un resorte. OJO: Porque el modelo es una CLASE JAVA... así que de pasada pueden ver lo simple que es integrar Java + JavaFX Script.

3) la animación en JavaFX, que incluye un Timeline para generar los cálculos y el código que pinta los elementos dependiendo de las coordenadas recibidas desde el modelo físico. Bastante simple, como verán... pero no menos sofisticado.

Descarga el projecto Netbeans 6.5. DOWNLOAD the Netbeans project, here!

JavaFX: a Knob control - Un control "de perilla"

2009-02-04T01:07:00.000-08:00

Update: Stage Controller hosted on Google Code, includes documentation for using the class. Click Here for a Java Web Start example.

English: Please, visit the Google Code hosted project

JavaFX me está convirtiendo realmente en una fábrica de componentes... este control lo desarrollé en menos de un día. Como verán es bastante sofisticado. No voy a entrar en detalles por ahora, pero el código del programa de ejemplo explota varias de sus funcionalidades.

Una de las cosas que dejo pendiente de demostrar, es cómo se pueden agregar nuevos tipos de perillas... basta con crear la gráfica en Adobe Illustrator y luego crear una clase que herede de la clase basicKnob (update: ver orangeKnob.fx). En esa nueva clase, pueden incluir detalles propios de la gráfica asociada... entre otras cosas, el nombre del archivo que contiene la grafica, las dimensiones de la nueva perilla (ancho y alto) y el radio inicial y final de las lineas del dial (la distancia al radio de la perilla), de manera que el componente pueda dibujar las lineas que le solicite el usuario y que estas lineas coincidan con la gráfica importada (update: ahora también incluye el radio inicial y final de las líneas cortas en el dial).

Aquí va el código fuente del componente, el programa demostrativo, los archivos de gráficos, etc. Sólo tienen que abrirlo en Netbeans 6.5 y ejecutarlo ;D

¡Ah! un detalle que me dió dolor de cabeza, hasta que recordé que lo había leído antes... si se fijan en el código, por cada control instancio la gráfica de la perilla ( ui: orangeKnob{} )... esto es así, porque si creo una sóla instancia y luego la enlazo desde varios lugares, solo queda activo el último enlace.... quizás debería ver si se puede crear algo como una versión "estática" con la gráfica... pero eso tengo que investigarlo y luego probar si funciona.

Descarga el proyecto completo de Netbeans 6.5... Download the complete Netbeans project... CLICK HERE.

JavaFX: Menú flotante (popup menu)

2009-02-02T03:10:00.000-08:00

Este código utiliza un menú flotante que implemente yo. Es un trabajo en progreso, así que tiene un par de detalles pendientes... pero, por ahora, quizás le puede servir a alguien para su aplicación o para aprender como funciona...

Como he dicho, estoy aprendiendo JavaFX script, así que es probable que haga cosas de maneras inapropiadas, no se crean que soy un experto! ;) ... aun... en todo caso, implementar el menú flotante me tomó sólo un par de horas desde que comencé (de cero), para que vean lo productivo que puede ser este lenguaje.

Por cierto, se pueden crear menús flotantes sin tanta configuración, sólo son necesarias las opciones (el texto de la opción [text:] y la función a las que están asociadas [call:]), las demás configuraciones son opcionales... y ojo, que hay bastantes opciones por probar y combinar.... por cierto, JavaFX script permite hacer combinaciones como el Timeline que agregué para que cambie el color del borde del menú flotante. Quizás puedes experimentar agregándole un Interpolador de resorte para que se vea más simpático al aparecer o elegir una opción, o que el menú aparezca rotando cuando es lanzado, etc.

Aquí está el proyecto Netbeans 6.5 completo (Download the complete Netbeans project here, alpha version).


package popupmenu;

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.animation.*;
import javafx.scene.input.*;

var screenWidth=500.0;
var screenHeight=500.0;

// Primer menu flotante
var popupmenu=popupMenu{

corner:20
padding:8
borderWidth:4
borderColor:bind dynamicColor

// opciones del menu
content: [
    menuItem { text:"Say Hello!", call: hello },
menuItem { text:"Again, say Hello!", call: again },
//menuSeparator { },
    menuItem { text:"Say Bye!", call: bye }
]

};

// Timeline anima el borde del primer menu flotante
var dynamicColor:Color;
Timeline {
repeatCount:Timeline.INDEFINITE
autoReverse:true
keyFrames: [
at (0s) {dynamicColor => Color.YELLOW }
at (0.5s) {dynamicColor => Color.DARKBLUE}
at (1s) {dynamicColor => Color.LIGHTSALMON}
]
}.play();


// Segundo menu flotante
var popupCircle=popupMenu{

font: Font { size:20 };
gradient: LinearGradient { proportional: false
startX: 125.0, startY: 0.0, endX: 225.0, endY: 0.0
stops: [ Stop { offset: 0.0 color: Color.BLACK },
     Stop { offset: 1.0 color: Color.RED } ] }
fill:Color.TRANSPARENT
stroke:Color.WHITE
highlight: Color.YELLOW
verticalSpacing:10

// opciones del menu
content: [
menuItem { text:"Multiline options\n"
           "for your menu!", call: helloCircle },
menuItem { text:"This is a second\n"
           "multiline option!", call: helloCircle },
]
};

// Tercer menu flotante
var popupmenu2=popupMenu{

font: Font { size: 18, name:"Verdana", embolden:true };
gradient: LinearGradient { proportional: true
stops: [ Stop { offset: 0.0 color: Color.GRAY },
     Stop { offset: 1.0 color: Color.WHITE } ] }
fill:Color.TRANSPARENT
corner:20
padding:16
verticalSpacing:6
rotation:-25
highlight:Color.WHITE
highlightStroke:Color.RED

// opciones del menu
content: [
menuItem { text:"Say Hello!", call: hello },
menuItem { text:"Again, say Hello!", call: again },
menuItem { text:"Say Bye!", call: bye }
]

};


// funciones asignada a menus
function hello(e:MouseEvent):Void {
println("hello {e.x},{e.y}");
};

function helloCircle(e:MouseEvent):Void {
println("hello Circle {e.x},{e.y}");
};

function again(e:MouseEvent):Void {
println("hello, again {e.x},{e.y}");
};

function bye(e:MouseEvent):Void {
println("bye! {e.x},{e.y}");
};


Stage {
title: "Application title"
width: bind screenWidth with inverse
height: bind screenHeight with inverse
scene: Scene {
content: [
// agrega un fondo a la ventana
Rectangle {
    fill: Color.BLUE
    width: bind screenWidth
    height: bind screenHeight
    // le asigna un menu flotante
        onMousePressed: function(e) {
        popupmenu.event=e;
    }
            },
// crea un circulo
Circle {
    // bloquea el click para que no dispare el menu flotante del fondo
        blocksMouse:true
        centerX: 100,
    centerY: 100
    radius: 40
    fill: Color.RED
    // le asigna un menu flotante
        onMousePressed: function(e) {
        popupCircle.event=e;
    }
            },
// crea un segundo circulo
Circle {
    // bloquea el click para que no dispare el menu flotante del fondo
        blocksMouse:true
        centerX: 300,
    centerY: 300
    radius: 80
    fill: Color.YELLOW
    // le asigna un menu flotante
        onMousePressed: function(e) {
        popupmenu2.event=e;
    }
            },
// incluye los menus flotantes
    popupmenu,
popupmenu2,
popupCircle
        ]
}
}

JavaFX: ¿Cuantas bolitas? (test de rendimiento gráfico)

2009-01-31T16:47:00.000-08:00

Este ejercicio contiene 3 controles de barra que permiten ajustar:

1) El número de bolas rebotando en la ventana;
2) La transparencia de las bolas;
3) El radio de las bolas.

Cada nueva bola que se agrega, lo hace con un efecto (cambia el radio un par de veces) y luego continua rebotando entre los márgenes de la ventana. Si se aumenta el tamaño de la ventana, el area de desplazamiento aumenta, si se reduce, las bolas que se encuentran más alla del nuevo margen, regresan al centro de la ventana.

Un area de texto muestra el número de bolas en la ventana, el porcentaje de transparencia y el radio de los círculos.

Una instrucción importante es "canSkip:true", en el Timeline que actualiza la posicion de las bolas (y que por lo tanto, las redibuja). Esta instrucción evita que la CPU se sobrecargue de trabajo y solo realiza la actualización de las bolas si hay capacidad de procesamiento disponible. Intenten con unas 200 bolas y quiten el canSkip y veran como el programa se "pega".

Archivo Maix.fx

package howmany;

import javafx.scene.*;
import javafx.stage.Stage;
import javafx.ext.swing.SwingSlider;
import javafx.scene.layout.VBox;
import javafx.scene.text.*;

// si cambia tamaño de la ventana
// reposiciona los circulos mas alla del margen
var maxX=250.0 on replace { circles.resetPos() };
var maxY=250.0 on replace { circles.resetPos() };

// seleccion numero de bolas
var selector = SwingSlider {
minimum: 0
maximum: 100
value: 0
vertical: false
};

// transparencia de las bolas
var transparency = SwingSlider {
minimum: 0
maximum: 100
value: 50
vertical: false
};

// radio de las bolas
var radius = SwingSlider {
minimum: 0
maximum: 40
value: 20
vertical: false
};

// texto para desplegar valores
var total = Text {
font: Font { size: 18 }
textOrigin:TextOrigin.TOP;
};

// componente que contiene los circulos
var circles = element {
balls:bind selector.value;
radius:bind radius.value;
level:bind transparency.value / 100.0;
display: total
maxX:bind maxX
maxY:bind maxY
};

Stage {
// si cambia tamaño de la ventana
    // actualiza variables con dimensiones
width: bind maxX with inverse
height: bind maxY with inverse

scene: Scene { content: [
 circles,
 VBox { content: [
     selector,
     transparency,
     radius,
     total ]
 } ]
}
}

Archivo element.fx


package howmany;

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.animation.*;
import java.lang.Math;


// clase que extiende circulos
class ball extends Circle {

// "sobreescribe" los parametros del circulo normal,
    // de manera de tener los valores en la nueva clase
override var stroke = null;
override var fill = Color.RED;
override var centerX = 100;
override var centerY = 100;
override var radius = 10;
override var scaleX;
override var scaleY;

public var incx;
public var incy;

// mueve el circulo en los incrementos de la instancia
function move():Void {
 centerX += incx;
 centerY += incy;
 if (centerX<0 or centerX>maxX) then
     incx = -incx;
 if (centerY<0 or centerY>maxY) then
     incy = -incy;
};

// efecto para cuando crea el circulo
    // cambia un par de veces de tamaño (como rebote)
var dropIn = Timeline {
 repeatCount:5
 autoReverse:true
 keyFrames: [
     at (0s) { scaleX => 2.0; scaleY => 2.0 }
     at (0.3s) { scaleX => 1.0; scaleY => 1.0 }
 ]
};

// al crear el circulo, dispara el efecto de rebote
postinit {
 dropIn.play();
};

};


// clase que contiene a todos los circulos
public class element extends CustomNode {

public var balls = 50.0;
public var display = Text { };
public var maxX;
public var maxY;
// si cambia la transparencia
public var level = 1.0 on replace {
 // actualiza la opacidad de todos los circulos
 for (obj in objs) obj.opacity = level; };
// si cambia el radio
public var radius = 10.0 on replace {
 // actualiza el radio de todos los circulos
 for (obj in objs) obj.radius = radius; };

// arreglo que contiene todos los circulos
var objs:ball[];
// colores que asigna a los circulos
var colors:Color[]=[
 Color.RED, Color.BLUE, Color.YELLOW,
 Color.PURPLE, Color.CYAN];

var i=0;

// agrega nuevo circulo al componente
function addBall():Void {
 var ix=Math.random()*15 - 7;
 var iy=Math.random()*15 - 7;
 var circ = ball {
     centerX:maxX/2
     centerY:maxY/2
     incx: ix
     incy:iy
     radius:radius
     fill: colors[i mod sizeof colors]
     opacity:level
 };
 insert circ into objs;
};


// crea el componente con los circulos
override function create():Node {

 // chequea si debe agregar o quitar circulos
 Timeline {
     repeatCount:Timeline.INDEFINITE
     keyFrames: [
         KeyFrame {
             time: 0.2s
             action: function():Void {
                 display.content=
                            "{sizeof objs} / {(level*100) as Integer}% / {radius}";
                 if (sizeof objs < balls) then {
                     addBall();
                     i++;
                 }
                 if (sizeof objs > balls) then
                     delete objs[0];
            }
         }
     ]
 }.play();

 // mueve los circulos
 Timeline {
     repeatCount:Timeline.INDEFINITE
     keyFrames: [
         KeyFrame {
             time: 0.04s
             // para evitar que se sobrecargue de trabajo
             canSkip: true
             action: function():Void {
                 for (obj in objs)
                     obj.move();
             }
         }
     ]
 }.play();

 // retorna el componente con los circulos
 Group {
     content: bind objs
 };

};

// reposicion los circulos si excende el margen
public function resetPos():Void {
 for (obj in objs) {
     var pos = obj.boundsInScene;
     if (pos.maxX > maxX) then
         obj.centerX = maxX/2 ;
     if (pos.maxY > maxY) then
         obj.centerY = maxY/2 ;
 }
};

}

Mi primer juego en JavaFX: Alunizaje

2009-01-28T11:51:00.001-08:00

Al juego le falta un par de detalles, como que la nave aparezca inicialmente en cualquier area de la pantalla. Por ahora aparece al centro a una velocidad y dirección aleatoria. También me falta agregar que la "base" de alunizaje tenga una posición aleatoria y que detecte cuando aterriza fuera de ella. Son detalles menores que quizas hasta puedes terminar tú.

El juego usa 4 teclas. La barra de espacio, para encender el motor principal. Las teclas de flecha hacia izquierda y derecha, que encienden los motos auxiliares para inclinar el módulo, y la tecla con la flecha hacia arriba, que enciende el piloto automático, para frenar la rotación del módulo (automáticamente).

Está bastante realista, los retrocohetes se encienden cuando corresponde y dejan de operar cuando no hay mas combustible. También incluye alarmas visuales y sonoras para cuando se excede la velocidad de aterrizaje, la inclinación del módulo es incorrecta cuando esta cerca de alunizar o cuando el combustible baja de 1/3 del estanque.

Me resultó entretenido hacer este juego y también descubrir LO INCREIBLEMENTE SIMPLE que es desarrollar cosas bastante decentes en tan poco tiempo (el grueso estaba operando en un par de horas... ¡y eso que estoy aprendiendo JavaFX script!).

La facilidad de incluir gráficos desde Adobe Illustrator sin duda es una ventaja inmensa. Especialmente, porque puede ser reemplazada por el trabajo de un diseñador más experto, sin necesidad de tocar el código de JavaFX script ya desarrollado. De hecho, con poco trabajo adicional podría agregarse multiples "skins" o apariencias al juego... escenarios de distintos planetas y naves por ejemplo (pudiendo relocalizar las alarmas, botones, formas de la nave, motores, entorno, etc).

El proyecto Netbeans 6.5 completo está disponible aquí (código fuente, gráfica, sonidos, etc).

El código requiere que esté incluida la libreria JavaFX FXD 1.0 en el proyecto.

JavaFX: Objetos que se devuelven a su origen si no caen en el destino

2009-01-26T15:35:00.000-08:00

Esta es una versión modificada del ejercicio anterior. Si se arrastra un objeto y este no cae dentro del destino, entonces rebota hacia el punto de origen.

Lo único que agregué fue que al crear el objeto guarda su posicion inicial en las variables original_x y original_y, y si detecta que no cae dentro del destino, ejecuta un Timeline que lo hace volver a su posición de origen.

Adicionalmente, hice algunos pequeños cambios para reemplazar el destino circular por un cuadrado de esquinas redondeadas.

Aquí hay una copia completa del proyecto Netbeans 6.5 (Download Complete Project)

JavaFX: Objetos que son atraídos por su área de destino

2009-01-26T09:40:00.000-08:00

Hola nuevamente, aquí va otro ejercicio entretenido e interesante. Probablemente se puede mejorar, pero por ahora, esta es la manera en que lo hice funcionar.

En parte, se basa en el código de ejemplos anteriores. Por ejemplo, el Interpolador de resorte es el mismo código que había usado antes. La clase DraggableObj es una versión modificada de un ejemplo anterior. Hay dos pequeñas clases que sólo describen un par de objetos simples y la clase principal que tiene un par de cosillas interesantes.

Por ejemplo, la clase principal tiene una lista de objetos para arrastrar, que sólo son "descritos" y que luego el programa transforma en los objetos gráficos definitivos, que el usuario manipula. También utiliza una función (toPaint) para consolidar todos los elementos gráficos que debe pintar y manipular.

Respecto a los ajustes que hace en DraggableObj al detectar que el objeto se acercó al area de destino: Lo que ocurre es que los círculos son posicionados por el centro, mientras los rectángulos/cuadrados son posicionados por la esquina superior izquierda (creo que hay una forma de mover ese punto, pero no lo he probado ni me consta que realmente exista... sólo tengo la impresión que leí algo como eso).

Aquí hay una copia del proyecto Netbeans 6.5 completo. (Download Complete Project)

Aquí va el código:

archivo Main.fx


package placeobject;

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.scene.Node;

var destinationMessage:Text;

// area de destino
var destinationArea=Circle{
opacity: 0.5
centerX: Area.destination.x
centerY: Area.destination.y
radius: Area.destination.radius
fill: Area.destination.color
};

// mensaje para destino
destinationMessage=Text {
font: Font { size: 24 }
x: bind messagePosX, y: bind messagePosY
content: "Destino"
textOrigin:TextOrigin.TOP
}

// calcula posicion para mensaje
var messagePosX = Area.destination.x - destinationMessage.boundsInLocal.width/2;
var messagePosY = Area.destination.y - destinationMessage.boundsInLocal.height/2;


// lista de objetos por arrastrar
var objects= [
 MyObject {type:"square", size:100, x:50, y:50, color:Color.BLUE},
 MyObject {type:"circle", size:100, x:250, y:50, color:Color.RED},
 MyObject {type:"square", size:80, x:50, y:250, color:Color.PURPLE},
 MyObject {type:"circle", size:120, x:200, y:200, color:Color.YELLOW}
];

// carga objetos en una secuencia (array)
var list:Node[];
for (obj in objects) {

// si es un cuadrado
if (obj.type=="square") then {
var rect=DraggableObj{
translateX:obj.x
translateY:obj.y
content: Rectangle{
   width:obj.size
   height:obj.size
   fill:obj.color
}
};
insert rect as Node into list;
}

// si es un circulo
if (obj.type=="circle") then {
var circ=DraggableObj{
translateX: obj.x + obj.size/2
translateY: obj.y + obj.size/2
isCircle: true
content: Circle{
   radius: obj.size/2
   fill:obj.color
}
}
insert circ as Node into list;
}

};

// obtiene los objetos a pintar
function toPaint():Node[] {
// array para objetos
var objs:Node[];
// crea area de destino
var dest=Group {
content: [
destinationArea,
destinationMessage
]
};
// agrega destino a la lista
insert dest into objs;
// agrega los objetos a la lista
insert list into objs;
// retorna un array de objetos por pintar
return objs;
};

var stage=Stage {
title: "Application title"
width: 600
height: 600
scene: Scene {
content:
bind toPaint()
}
};

archivo DraggableObj.fx


package placeobject;

import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.animation.Timeline;
import javafx.animation.Timeline.*;
import javafx.animation.Interpolator;
import javafx.animation.Interpolator.*;
import javafx.geometry.*;


def spring = SpringInterpolator { bounce: true};

public class DraggableObj extends CustomNode {

public var content: Node[];
public var isCircle = false;

var endX = 0.0;
var endY = 0.0;
var startX = 0.0;
var startY = 0.0;

var op:Number=100;
var scale:Number=100;
var final:Point2D;
var origin:Point2D;
var original_width=0.0;
var original_height=0.0;

// vuelve escala a 100%
var s=Timeline {
keyFrames: [
at (1.5s) { scale => 100.0 tween spring},
]
};

// aumenta escala de 100% a 150%
var i=Timeline {
keyFrames: [
at (0s) { scale => 100.0 },
at (0.3s) { scale => 150.0},
]
};

// desplazamiento hacia el centro de destino
var dxy=Timeline {
keyFrames: [
at (0s) { endX => origin.x; endY => origin.y },
at (1s) { endX => final.x tween spring; endY => final.y tween spring},
]
};


override function create() : Node {

// crea objeto
var newNode = Group {

translateX: bind endX
translateY: bind endY
content: bind content
opacity: bind op/100.0
scaleX: bind scale/100.0
scaleY: bind scale/100.0

onMousePressed: function(e) {
   startX = e.dragX-endX;
   startY = e.dragY-endY;
   dxy.stop();
   s.stop();
   i.playFromStart();
}
onMouseDragged: function(e) {
   endX = e.dragX-startX;
   endY = e.dragY-startY;
}
onMouseReleased: function(e) {
   s.time=0s;
   s.play();
   checkDestination();
}
};

// obtiene tamaño del objeto
      original_width=newNode.boundsInLocal.width;
      original_height=newNode.boundsInLocal.height;

// retorna el objeto creado (la instruccion return es opcional)
return newNode;
}


// chequea si esta proximo al destino
function checkDestination() {

// obtiene coordenadas y tamaño del destino
var dest=Rectangle2D {
minX:Area.destination.x - Area.destination.radius
minY:Area.destination.y - Area.destination.radius
width:Area.destination.radius*2
height:Area.destination.radius*2
};

// verifica si el area del objeto arrastrado y el destino coinciden
if (dest.intersects(this.boundsInScene)) then {
// punto de origen para la animacion (posicion actual del objeto)
origin=Point2D{x:endX, y:endY};
// cuanto debe moverse el objeto para alcanzar el destino
final=this.sceneToLocal(Area.destination.x, Area.destination.y);
// si no es un circulo (y el centro esta desplazado a la esquina
// superior izquierda del rectangulo/cuadrado)
if (not isCircle) {
   // ajusta cuanto debe moverse
   final=Point2D {
       // menos la mitad del ancho y alto
       x: final.x - original_width / 2;
       y: final.y - original_height / 2;
   };
};
// inicia animacion para alcanzar el centro del destino
dxy.playFromStart();
};

}

}

archivo MyObject.fx


package placeobject;

import javafx.scene.paint.Color;

public class MyObject {
public var type:String;
public var size:Number;
public var x:Number;
public var y:Number;
public var color:Color;
}

archivo Area.fx


package placeobject;

import javafx.scene.paint.Color;

public class Area {
public var x:Number;
public var y:Number;
public var radius:Number;
public var color:Color;
}

public var destination=Area {
  x:400
  y:400
  radius:100
  color:Color.RED
};

JavaFX: Applet con area para arrastrarlo

2009-01-24T23:13:00.000-08:00

Esta versión posee un area delimitada que permite arrastrar el applet fuera del navegador. La versión anterior permitía arrastrar el applet desde cualquier area del applet. El inconveniente de la versión anterior, es que no permite utilizar drag and drop (arrastrar elementos) dentro del applet, porque arrastraba el applet completo fuera del navegador.


package advdragapplet;

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.text.TextOrigin;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.scene.input.MouseEvent;
import javafx.animation.Timeline;
import javafx.stage.AppletStageExtension;

// area para arrastrar el applet
var dragArea:Group;
dragArea = Group {

opacity: 0.5
// la barra solo aparece si es un applet y puede ser arrastrado
visible: bind AppletStageExtension.appletDragSupported
onMouseDragged:function(e:MouseEvent):Void {
 stage.x += e.dragX;
 stage.y += e.dragY;
}
content: [
 Rectangle {
     x: 0
     y: 0
     width: 140
     height: 20
     fill: Color.YELLOW
 },
 Text {
     font: Font {
         size: 12
     }
     x: 10,
     y: 5
     textOrigin:TextOrigin.TOP
     content: "Arrastrame / Drag me"
 }
]
};

var x:Number;
Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
 at(0.0s) { x => 40}
 at(0.5s) { x => 224}
]
}.play();

var stage=Stage {
title: "Draggable Applet"
width: 280
height: 116
scene: Scene {
 fill:Color.PURPLE
 content: [
     Circle {
         centerX: bind x,
         centerY: 40
         radius: 40
         fill: Color.CYAN
     },
     dragArea,
 ]
}
 extensions: [
 AppletStageExtension {
     shouldDragStart: function(e): Boolean {
         e.primaryButtonDown and dragArea.hover;
     }
 }
]
}

JavaFX: Applet Arrastrable

2009-01-24T17:10:00.000-08:00

Una de las nuevas funcionalidades de Java 6 update 10 es la posibilidad de crear applets "arrastrables" (que el usuario puede "arrastrar" fuera de la página de su navegador, y convertir en una aplicación de escritorio). Esta funcionalidad también está disponible -con un mínimo de trabajo- para los applets JavaFX.

Lo único que tienes que tienes que agregar a tu código es:


import javafx.stage.AppletStageExtension;

Y posteriormente, incluir este trozo como atributo del Stage:


extensions: AppletStageExtension {
    shouldDragStart: function(e: MouseEvent): Boolean {
        e.primaryButtonDown;
    }
}

Listo, los usuarios de tu applet ya pueden arrastrarlo al escritorio y crear un short-cut (automáticamente) para re-lanzar el applet, sin siquiera tener que abrir su navegador.

Nota: Para desinstalar desde Windows un applet convertido en aplicación de escritorio, tienes que ir al Panel de Control y desinstalarlo como cualquier otro programa.

Aquí está el código del ejemplo en video:


package draggableapplet;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.*;
import javafx.scene.text.Font;
import javafx.scene.input.MouseEvent;
import javafx.animation.Timeline;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.stage.AppletStageExtension;

var x:Number;

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
    at(0.0s) { x => 40}
    at(1.0s) { x => 224}
]
}.play();

Stage {

title: "Application title"
width: 270
height: 116

    extensions: AppletStageExtension {
            shouldDragStart: function(e: MouseEvent): Boolean {
                e.primaryButtonDown;
            }
    }

scene: Scene {
    fill:Color.YELLOW
    content: [
        Circle {
            centerX: bind x,
            centerY: 40
            radius: 40
            fill: Color.RED
        },
        Text {
            font: Font {
                size: 24
            }
            x: 10,
            y: 28
            textOrigin:TextOrigin.TOP
            content: "Arrastrame / Drag me"
        }
    ]
}

}

JavaFX: Integración con recursos Adobe Illustrator

2009-01-21T22:56:00.000-08:00

JavaFX permite integrar fácilmente recursos gráficos en el código, permitiendo dar una apariencia más rica y atractiva a las aplicaciones y juegos desarrollados con JavaFX.

Para traspasar recursos de Adobe Illustrator a JavaFX, tienes que instalar el JavaFX Production Suite.

Una copia completa del proyecto Netbeans -con los recursos Adobe Illustrator- está aquí ... (Download Complete Project)

archivo CDartUI.fx


package animatecd;

import javafx.scene.Node;
import javafx.fxd.UiStub;
import javafx.scene.Group;

public class CDartUI extends UiStub {

override public var url = "{__DIR__}CDart.fxz";
public var Artwork: Node;

override protected function update() {

Artwork=getNode("Artwork");
}

}

Archivo Main.fx


package animatecd;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.Group;
import javafx.animation.Timeline;

// carga imagenes de Illustrator
var ui = CDartUI {};
var scale:Number;

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
at(0s) { scale => 0.1 }
at(10s) { scale => 12.0 }
]
}.play();

Stage {
width: 400
height: 400
scene: Scene {
content: Group {
content:ui
scaleX:bind scale
scaleY:bind scale
translateX:bind scale*80
translateY:bind scale*80
rotate:bind scale*36
}
}
}

{__DIR__} indica que el archivo CDart.fxz está en el mismo directorio que las clases compiladas (basta poner el archivo CDart.fxz en el directorio que contiene el código fuente para que Netbeans lo copie al directorio correspondiente con la copia para distribuir).

Si el archivo de Adobe Illustrator contiene mas de un elemento (layers identificados con la etiqueda "jfx:" y el nombre del elemento), puede acceder a las propiedades usando (en este caso) ui.Artwork.nombre_de_la_propiedad. Esto le permitirá mover los elementos contenido en el archivo Adobe, de manera independiente. Otras propiedades que puede alterar son... cambiar su opacidad (transparencia), rotarlo, escalarlo, etc.

JavaFX: Pintando un array (arreglo) de funciones y detectando el mouse encima

2009-01-21T12:36:00.000-08:00

En este ejercicio es posible descubrir varias cosas interesantes:

1) Como se puede crear un arreglo cuyos elementos son funciones que retornan figuras gráficas.

2) Como se pueden consolidar en una sola figura los resultados de las funciones en el arreglo (bind for....)

3) Como, sin hacer nada adicional, el programa es capaz de detectar cuando el mouse entra y sale de esta figura consolidada.

4) Finalmente, como detalle gráfico, muestra como se puede aplicar un efecto de sombra sobre la figura consolidada.

Bastante para tan poco código, ¿no?


package experimentfunctions;

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.scene.text.*;
import javafx.scene.effect.*;
import javafx.animation.Timeline;

var count:Integer=0;

function circulo():Circle {
Circle{
radius:90
fill:Color.RED
}
};

function rectangulo():Rectangle {
Rectangle{
width:100
height:75
fill:Color.BLUE
}
};

function texto():Text {
Text{
translateX: -80
translateY: -70
font: Font{
   name:"Verdana"
   embolden:true;
   size:24
}
content: "Prueba de texto"
}
};

var functions=[
circulo(),
    rectangulo(),
    texto()
];

var shadow=0;

var shadowAnim = Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
at(0s) { shadow => 4 }
at(0.3s) { shadow => 10}
]
};

Stage {
title: "Application title"
width: 250
height: 250
scene: Scene {
content: Group {
   translateX:100
   translateY:100
   content: bind for (shape in functions) shape;
   effect: DropShadow {
       offsetY: bind shadow
       offsetX: bind shadow
   }
   onMouseEntered: function(e) {
       shadowAnim.stop();
   }
   onMouseExited: function(e) {
       shadowAnim.play();
   }
}
}
}

shadowAnim.play();

Una explicación más detallada sobre bind for (shape in functions) shape.

Lo que hace esta instrucción es... obtener cada una de las funciones en el arreglo:


for (shape in functions)

... luego ejecutarlas y pasar ese resultado como parte del contenido a pintar.

Una forma más ordenada de presentar el código sería:


content:
    bind
        for (shape in functions)
            shape; <-- ejecuta y retorna la figura

JavaFX: Limita el tamaño de la ventana (mínimo y máximo) - Bind with inverse

2009-01-19T13:58:00.001-08:00

Esta es una variación del ejemplo anterior, que detectaba el tamaño de la ventana para ajustar el contenido (cómo descubrir el tamaño de la ventana). En este caso, fuerza dimensiones mínimas y máximas para la ventana.

Como vimos en el ejemplo anterior, la instrucción 'bind with inverse' permite iniciar el tamaño de la ventana unas ciertas dimensiones (300x300 pixeles), pero luego, las variables 'w' y 'h' reciben las variaciones del tamaño de la ventana, a través del mismo 'bind with inverse'. Esto, sumado a la instrucción 'on replace' (al definir las variables para el tamaño de la ventana), permite gatillar la validación del tamaño de la ventana.... y forzar su tamaño dentro de límites al asignar nuevos valores para las variables 'w' y 'h'.

En otras palabras, las variables 'w' y 'h' se hacen BIDIRECCIONALES... pues al modificar su valor, se afecta el tamaño de la ventana.... y al modificar el tamaño de la ventana, se actualiza los valores de las variables, con las nuevas dimensiones.


package experimentsize;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.geometry.Rectangle2D;

// borde horizontal de la ventana
var bh=16.0;
// borde vertical de la ventana (incluye titulo)
var bv=36.0;
// dimension minima de la ventana
var minSize=Rectangle2D{width:200 height:200};
// dimension maxima de la ventana
var maxSize=Rectangle2D{width:500 height:500};

// valida dimensiones de la ventana
function validateSize():Void {
   if (w<minSize.width) then w=minSize.width;
   if (h<minSize.height) then h=minSize.height;
   if (w>maxSize.width) then w=maxSize.width;
   if (h>maxSize.height) then h=maxSize.height;
   println("ajusto ventana a {w} x {h}");
}

// tamaño inicial de la ventana
var w=300.0 on replace {validateSize()};
var h=300.0 on replace {validateSize()};

Stage {
title: "Ajusta a dimension de ventana"
width: bind w with inverse
  height: bind h with inverse
scene: Scene {
    content: {
        Circle {
            translateX: bind (w-bh)/2
            translateY: bind (h-bv)/2
            radius:bind if (w<h) then
                        (w-50)/2
                    else
                        (h-80)/2
            fill:Color.RED
        }
    }
}
}

JavaFX: Bind with inverse. Ajusta tamaño de círculo a tamaño de la ventana

2009-01-19T02:21:00.000-08:00

La instrucción BIND es una de las cosas interesantes de JavaFX Script. Esta permite declarar la DEPENDENCIA entre una variable y otros elementos del programa. Por ejemplo, si al declarar un circulo, se define que el color de este dependerá de una variable X, al cambiar el color asignado a X se produce la actualización automática del círculo en pantalla, sin necesidad de ordenar al programa que repinte.

Circle {
 radius:20
 fill:bind colorcirculo
}

Ahora bien, la instrucción BIND puede ir acompañada de la instrucción WITH INVERSE, por ejemplo:


var a=bind b with inverse;

Esto significa que cuando se cambie el valor de 'b' en algún lugar del programa, se asignará el nuevo valor de 'b' a 'a', pero también quiere decir que cuando se modifique el valor de 'a' también se traspasará el valor de 'a' a 'b'.

¿Qué utilidad puede tener esta instrucción? ... pues, por ejemplo, se puede usar para ajustar el tamaño de un círculo al tamaño de la ventana que lo contiene... o para conocer las medidas de la ventana y cuando se cambia su tamaño.

En el siguiente ejemplo, se usa 'bind with inverse' para asignar el tamaño inicial de la ventana (300x300 pixeles)... pero luego, cuando se ajusta manualmente el tamaño de la ventana, la misma instrucción 'bind with inverse' pasa de regreso el tamaño actualizado de la ventana a las variables 'h' y 'w' que originalmente definieron su tamaño (h=height=alto y w=width=ancho).


package experimentsize;

import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import java.lang.System;

// tamaño inicial de la ventana
var w=300.0 on replace {
    println("ajusto ancho de la ventana a {w}");
};
var h=300.0 on replace {
    println("ajusto alto de la ventana a {h}");
};

// borde horizontal de la ventana
var bh=16.0;
// borde vertical de la ventana (incluye titulo)
var bv=36.0;

Stage {
title: "Ajusta al tamaño de ventana"
width: bind w with inverse
    height: bind h with inverse
scene: Scene {
    content: {
        Circle {
            translateX: bind (w - bh) / 2
            translateY: bind (h - bv) / 2
            radius:bind 
                if (w < h) then (w - 50) / 2 else ( h - 80) / 2
            fill:Color.RED
        }
    }
}
}

JavaFX: Objetos arrastrables con "efectos"

2009-01-18T08:38:00.000-08:00

Este ejemplo incluye 3 clases:

1) Una clase (SpringInterpolator) que define un nuevo tipo de "interpolador" que genera un movimiento "elástico" (de resorte)

2) Una clase (DraggableObj) que permite que los elementos asignados sean "arrastrables" (drag and drop).

3) La clase principal (Main) que implementa la aplicación y que agrega 4 elementos para arrastrar por la ventana.

archivo SpringInterpolator.fx


package DraggableClass;

import javafx.animation.SimpleInterpolator;
import java.lang.Math;

public class SpringInterpolator extends SimpleInterpolator {
    // amplitud de la onda
    // controla que tan lejos puede llegar el objeto desde su punto final
    public-init var amplitude:Number = 1.0;
    // determina el peso del objeto
    // hace el movimiento de la onda mas grande y llega mas lejos
    public-init var mass:Number = 0.058;
    // rigidez del movimiento de la onda o resolte
    // hace la onda mas corta o ceñida
    public-init var stiffness:Number = 12.0;
    // hace la onda de fase, de modo que el objeto
    // no acabe en el lugar de descanso.
    // esta variable generalmente no cambia
    public-init var phase:Number = 0.0;

    // si actua como un resorte normal o rebota
    public-init var bounce:Boolean = false;

    // usado para calculos internos
    var pulsation:Number;

    init {
        this.pulsation = Math.sqrt(stiffness / mass);
    }

    // ecuacion del resorte
    override public function curve(t: Number) : Number {
        var t2 = -Math .cos(pulsation   *   t   +   phase   +   Math.PI) * (1 - t) * amplitude ;
        // usa el valor absoluto de la distancia si rebota
        if(bounce) {
            return 1 - Math.abs(t2);
        } else {
            return 1 - t2;
        }
    }
}

archivo DraggableObj.fx


package DraggableClass;

import javafx.scene.Group;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.animation.Timeline;
import javafx.animation.Timeline.*;
import javafx.animation.Interpolator;
import javafx.animation.Interpolator.*;


public class DraggableObj extends CustomNode {

public var content: Node[];

var endX = 0.0;
var endY = 0.0;
var startX = 0.0;
var startY = 0.0;

var op:Number=100;
var scale:Number=100;

// produce un parpadeo rapido al
// al soltar los objetos arrastrados
var t = Timeline {
repeatCount: 3
keyFrames: [
at (0s) { op => 100.0 },
at (0.05s) { op => 0.0 }
]
}

// instancia el interpolador de resorte
def spring = SpringInterpolator { bounce: true};

// escala objetos con efecto de resorte
var s = Timeline {
keyFrames: [
at (1.5s) { scale => 100.0 tween spring},
]
};

// escala objectos de tamano original
// a tamano 50% mas grande al hacer
// click sobre ellos
var i = Timeline {
keyFrames: [
at (0s) { scale => 100.0 },
at (0.3s) { scale => 150.0},
]
};


override function create() : Node {

// produce una variacion constante en la
// opacidad de los elementos arrastrables
Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) { op => 70.0 },
  at (0.3s) { op => 100.0 tween Interpolator.EASEBOTH}
]
}.play();

Group {
translateX: bind endX
translateY: bind endY
content: bind content
  opacity: bind op/100.0
  scaleX: bind scale/100.0
  scaleY: bind scale/100.0

onMouseDragged: function(e) {
  endX = e.dragX-startX;
  endY = e.dragY-startY;
}
onMousePressed: function(e) {
  startX = e.dragX-endX;
  startY = e.dragY-endY;
      s.stop();
      i.playFromStart();
}
onMouseReleased: function(e) {
      t.playFromStart();
      s.time=0s;
      s.play();
}
};
}

}

archivo Main.fx


package DraggableClass;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.input.MouseEvent;


var newCircle=DraggableObj{
translateX:700
translateY:200
content: Circle {
        radius: 100
        fill: Color.RED
        opacity:0.75
    }
};

// este objeto incluye un ARRAY (arreglo) de figuras
var newCircle2=DraggableObj{
translateX:200
translateY:200
content: [
 Circle {
     opacity:0.5
     fill:Color.BLUE
     radius:70
 },
 Rectangle {
     translateX:-50
     translateY:-50
     width:100
     height:100
     rotate:45
     fill:Color.GREEN
     opacity:0.5
 }
]
};

var newImage=DraggableObj{
translateX:200
translateY:500
content: ImageView {
 opacity:0.8
 preserveRatio:true
 fitWidth:200
 image: Image {
//            url: "file:/C:/Users/myuser/Pictures/2008a.png"
     url: "http://www.google.com/intl/en_ALL/images/logo.gif"
 }
}
}

var newRect=DraggableObj{
translateX:700
translateY:500
content: Rectangle {
 width:100
 height:100
 rotate:45
 fill:Color.PURPLE
 opacity:0.5
}
};


Stage {
title: "Application title"
width: 1200
height: 750
scene: Scene {
   // Incluye un ARRAY de objetos
   content: [
       newCircle,
       newCircle2,
       newImage,
       newRect
   ]
}
}

JavaFX: Clases de clases... y dos Scene alternadas

2009-01-17T11:58:00.000-08:00

Este ejemplo crea una clase que hace rotar un círculo. Luego, crea una nueva clase que utiliza varias instancias de la primera clase para hacer rotar varios círculos dentro del nuevo objeto. Finalmente, crea varias instancias de este último tipo de objeto y los pone en dos Scene que luego alterna... es decir, es un Stage con dos Scene.


package experimentroam;

import javafx.stage.Stage;
import javafx.animation.*;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;

// clase basica que dibuja circulo moviendose formando un cuadrado
class myObject extends CustomNode {

var x:Number;
var y:Number;

public var ix=0;
public var iy=0;
public var dx=100;
public var dy=100;
public var radius=40;
public var color=Color.RED;

var roamingtimeline = Timeline {
repeatCount: Timeline.INDEFINITE
  keyFrames: [
        at(0s) { x => ix+radius; y => iy+radius }
        at(0.3s) { x => dx-radius; y => iy+radius }
        at(0.6s) { x => dx-radius; y => dy-radius }
        at(0.9s) { x => ix+radius; y => dy-radius }
        at(1.2s) { x => ix+radius; y => iy+radius }
   ]
};

// mensaje desplegado (compuesto por texto y rectangulo a su alrededor)
override protected function create():Node {
  roamingtimeline.play();
  Group {
      content: [
          Circle {
                centerX: bind x
                centerY: bind y
               radius: bind radius
              fill: bind color
          }
      ]
  }
};

};


// clase compuesta por objetos de la clase precedente
class myBigObject extends CustomNode {

var fig:myObject=myObject{
  ix: 0
  iy: 0
  radius:55
  dx:250
  dy:250
  color:Color.PURPLE
}
var fig2:myObject=myObject{
  ix: 40
  iy: 40
  radius:40
  dx:210
  dy:210
  color:Color.RED
}
var fig3:myObject=myObject{
  ix: 80
  iy: 80
  radius:30
  dx:170
  dy:170
  color:Color.GREEN
}
var fig4:myObject=myObject{
  ix: 120
  iy: 120
  radius:20
  dx:130
  dy:130
  color:Color.BLUE
}
var fig5:myObject=myObject{
  ix: 160
  iy: 160
  radius:10
  dx:90
  dy:90
  color:Color.YELLOW
}
var fig6:myObject=myObject{
  ix: 190
  iy: 190
  radius:5
  dx:60
  dy:60
  color:Color.ORANGE
}

override protected function create():Node {
  Group {
      content: [
          fig,
          fig2,
          fig3,
          fig4,
          fig5,
          fig6
      ]
  }
};

}


// instancia de clase compuesta
var bigFig:myBigObject=myBigObject{};

// instancia de clase compuesta desplazada en la pantalla
var bigFig2:myBigObject=myBigObject{
translateX:250
translateY:0
};
// instancia de clase compuesta desplazada en la pantalla
var bigFig3:myBigObject=myBigObject{
translateX:250
translateY:250
};
// instancia de clase compuesta desplazada en la pantalla
var bigFig4:myBigObject=myBigObject{
translateX:0
translateY:250
};

var myScene:Scene=Scene {
  fill:Color.BLACK
     content: [
         bigFig,
         bigFig2,
         bigFig3,
         bigFig4
     ]
};

var myScene2:Scene=Scene {
  fill:Color.BLACK
     content: [
         bigFig,
         bigFig3,
     ]
};

var scenes=[myScene, myScene2];
var activeScene:Integer;

Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: [
  at(0s) { activeScene => 0 }
  at(1s) { activeScene => 1 }
]
}.play();

Stage {
  title: "Application title"
  width: 500+16
  height: 500+36
  scene: bind scenes[activeScene]
}

JavaFX: Textos que giran y cambian de tamaño

2009-01-17T04:22:00.000-08:00

Este ejercicio lo desarrollé para crear una clase que contiene sus propios timeline y que modifica el tamaño del font mientras gira el mensaje. Quizas lo más interesante de este ejercicio es la manera en que se modifica el tamaño del font desde el timeline. Otra cosa interesante es cómo el programa obtiene las dimensiones del texto para pintar el area que lo contiene (para ello es necesario que el texto sea definido en una variable y luego incluida en el contenido).


package experimenttext;

import javafx.stage.Stage;
import javafx.animation.*;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;


class myObject extends CustomNode {

 // texto en el mensaje
 public var message = "Nada aun";
 // color del mensaje
 public var color = Color.BLACK;
 // color borde
 public var stroke = Color.BLACK;
 // color fondo
 public var fill = Color.WHITE;
 // tamaño maximo del font
 public var max_size = 64.0;

 // angulo de la rotacion
 var angle: Number;
 // tamaño del font
 var size: Number;
 // font del texto
 var varfont = function(size:Number):Font {
        Font{
            name:"Verdana"
            oblique:true;
            size:size;
        }
    };


 // mensaje desplegado
 var geomText = Text {
     content: bind message
     font : bind varfont(size)
     fill: bind color
     textOrigin: TextOrigin.TOP
 };

 // rotacion del mensaje (un giro en 2 segundos)
 var rotatetimeline = Timeline {
  repeatCount: Timeline.INDEFINITE
     keyFrames: [
         at(0s) { angle => 0 }
         at(2s) { angle => 360 }
     ]
 };

 // variacion del tamaño del font (de 12 a MAX_SIZE en 1 segundos)
 var fontsize = Timeline {
  repeatCount: Timeline.INDEFINITE
     autoReverse: true
     keyFrames: [
         at(0s) { size => 12 }
         at(0.3s) { size => max_size tween Interpolator.EASEBOTH}
     ]
 };


 // mensaje desplegado (compuesto por texto y rectangulo a su alrededor)
 override protected function create():Node {

     // inicia los timelines de la instancia
     rotatetimeline.play();
     fontsize.play();

     Group {
         content: [
             // rectangulo
             Rectangle {
                 width: bind geomText.boundsInLocal.width
                 height: bind geomText.boundsInLocal.height
                 stroke: bind stroke
                 fill: bind fill
             },
             // mensaje
             geomText
         ]
         // rotacion del conjunto (rect+mensaje)
         rotate:bind angle
     }
 };

};

// primera instancia de mensaje
var msg=myObject{
 translateX: 200
 translateY: 150
 message: "Primer mensaje"
};
// segunda instancia de mensaje
var msg2=myObject{
 translateX: 300
 translateY: 250
 message: "Segundo mensaje"
 color: Color.RED
 stroke: Color.GREEN
 fill: Color.YELLOW
 max_size: 40.0
};
// tercera instancia de mensaje
var msg3=myObject{
 translateX: 100
 translateY: 350
 message: "Tercer mensaje"
 color: Color.WHITE
 stroke: Color.BLUE
 fill: Color.BLUE
 max_size: 90.0
};

// aplicacion
Stage {
 title: "Application title"
 width: 800
 height: 600
 scene: Scene {
     content: [
         msg,
         msg2,
         msg3
     ]
 }
}

JavaFX: Circulo arrastrable que cambia de color

2008-12-08T12:49:00.000-08:00

Este ejemplo dibuja un circulo de radio "rad=60", que cambia de color y que puede ser arrastrado con el mouse. Además, incluye una función que se "dispara" al cambiar el color del círculo (color=0 on replace oldColor {})

package javafxclasses;

import javafx.stage.Stage;

import javafx.scene.Scene;

import javafx.scene.paint.Color;

import javafx.scene.text.*;

import javafx.scene.input.*;

import javafx.scene.shape.Circle;

import javafx.scene.transform.Transform;

def rad=60.0;

var x1=rad;

var y1=rad;

var dx:Number;

var dy:Number;

var colors = [Color.RED, Color.BLUE, Color.GREEN, Color.YELLOW];

var color=0 on replace oldColor {

println("\nALERT! El color cambio!");

println("Antiguo color: {oldColor}");

println("Nuevo color: {color}");

}

Stage {

title: "Application title"

width: 400

height: 400

scene: Scene {

content: [

Circle {

centerX: bind x1;

centerY: bind y1;

radius: rad

fill: bind colors[color]

onMousePressed: function(e) {

// obtiene distancia entre el centro del círculo

// arrastrado y la posición del mouse al hacer click

dx = x1 - e.x;

dy = y1 - e.y;

if (++color==sizeof colors)

color=0;

}

onMouseDragged : function(e) {

// calcula el centro del círculo aplicando la

// diferencia respecto al centro del círculo al

// comenzar a arrastrarlo

x1 = e.x + dx;

y1 = e.y + dy;

}

]

}

JavaFX: La rueda de la fortuna

2008-12-06T10:59:00.000-08:00

Este ejemplo genera una "rueda" de colores de distinta intensidad y que gira... el ejemplo original viene incluido con Netbeans 6.5, yo sólo le agregué el giro. Pueden modificar la velocidad del giro cambiando el tiempo en el Timeline (0.5s, o medio segundo para una vuelta completa).

Básicamente, lo único que agregué fue un rotate: bind angle; asociado a la rueda ya generada incluida en la escena (Scene) y una "linea de tiempo" (Timeline) que incrementa el ángulo entre 0º y 360º, en el tiempo especificado. Una vez que llega a 360º, comienza por el ángulo 0º. Así queda la impresión que la ruega gira indefinidamente.

package color;

import javafx.scene.Group;

import javafx.scene.CustomNode;

import javafx.scene.Node;

import javafx.scene.paint.Color;

import javafx.scene.shape.Arc;

import javafx.scene.shape.ArcType;

import javafx.stage.Stage;

import javafx.scene.Scene;

import javafx.animation.Timeline;

import javafx.lang.FX;

class ColorWheelNode extends CustomNode {

var segments : Number = 12;

var steps : Number = 6;

var radius : Number = 95;

var stripes : Arc[];

override function create() : Node {

return Group {

content: bind stripes

};

}

init {

// Set radius

var r = radius;

var rStep = radius / steps;

var colors : Color[];

for( i in [1..

segments + 1] ) {

insert Color.rgb( 255, 255, 0 ) into colors;

}

for( i in [0..

steps - 1] ) {

colors[1] = Color.rgb( 255 - ( 255 / steps * i ), 255 - ( 255 / steps * i ), 0 );

colors[2] = Color.rgb( 255 - ( 255 / steps ) * i, ( 255 / 1.5 ) - (( 255 / 1.5 ) / steps ) * i, 0 );

colors[3] = Color.rgb( 255 - ( 255 / steps ) * i, ( 255 / 2 ) - ( ( 255 / 2 ) / steps ) * i, 0 );

colors[4] = Color.rgb( 255 - ( 255 / steps ) * i, ( 255 / 2.5 ) - (( 255 / 2.5 ) / steps ) * i, 0 );

colors[5] = Color.rgb( 255 - ( 255 / steps ) * i, 0, 0 );

colors[6] = Color.rgb( 255 - ( 255 / steps ) * i, 0, ( 255 / 2 ) - (( 255 / 2 ) / steps ) * i );

colors[7] = Color.rgb( 255 - ( 255 / steps ) * i, 0, 255 - ( 255 / steps ) * i );

colors[8] = Color.rgb(( 255 / 2 ) - (( 255 / 2 ) / steps ) * i, 0, 255 - ( 255 / steps ) * i );

colors[9] = Color.rgb( 0, 0, 255 - ( 255 / steps ) * i );

colors[10] = Color.rgb( 0, 255 - ( 255 / steps ) * i, ( 255 / 2.5 ) - (( 255 / 2.5 ) / steps ) * i );

colors[11] = Color.rgb( 0 , 255 - ( 255 / steps ) * i, 0 );

colors[12] = Color.rgb(( 255 / 2 ) - (( 255 / 2 ) / steps ) * i, 255 - ( 255 / steps ) * i, 0 );

for( j in [1..segments] ) {

var c = colors[

j.intValue()];

insert Arc {

centerX: 100,

centerY: 100

radiusX: r ,

radiusY: r

startAngle: 360 / segments * ( segments - j - 0.5)

length: 360 / segments

fill: c

type: ArcType.ROUND

} into stripes;

}

r -= rStep;

}

var angle:Integer;

Timeline {

repeatCount: Timeline.INDEFINITE

autoReverse: false

keyFrames: [

at (0s) {angle => 0},

at (0.5s) {angle => 360},

]

}.play();

Stage {

scene: Scene {

fill: Color.GRAY

content: ColorWheelNode {

rotate: bind angle;

}

width: 216

height: 232

title: "Color Wheel"

}

JavaFX: Pelota 3D con sombra rebotando sobre video

2008-12-06T00:36:00.000-08:00

Ok, solo para que vayan descubriendo el poder de JavaFX. Ayer yo no sabía NADA de JavaFX script. Luego de jugar unas pocas horas, ya tengo este ejemplo: Una "habitación" que tiene en el piso un VIDEO y sobre el cual rebota una bola de apariencia 3D, que incluso se aleja del frente de la pantalla y que proyecta una sombra que varia tanto en intensidad como tamaño dependiendo de la altura a la que se encuentra la bola.

Por ahora sólo les dejo el código. Más adelante postearé otro artículo con la explicación del mismo.

Atención: este ejemplo requiere el mediacomponent.jar entre los Libraries del proyecto. Si crean un proyecto demo basado en el SimpleMediaPlayer (incluido con Netbeans 6.5) y luego reemplanzan el código de Main.fx, la biblioteca mediacomponent.jar quedará incluida en el proyecto automáticamente. Si no, tienen que buscar donde se encuentra en su disco la biblioteca e incluirla entre los libraries del proyecto haciendo click con el botón derecho del mouse en Libraries (a la izquierda en Netbeans) y seleccionado Add Library... (ahí tienen que decirle donde está el archivo). Pero como les digo, lo más fácil es comenzar con un proyecto de ejemplo de mediaplayer y reemplazar el código de Main.fx por el código que incluyo a continuación:


package simplevideoplayer;

import javafx.stage.Stage;
import javafx.scene.Scene;
import com.sun.fxmediacomponent.*;
import javafx.scene.Group;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.scene.paint.Stop;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.shape.Ellipse;
import javafx.scene.paint.*;
import javafx.scene.effect.*;
import javafx.scene.transform.*;
import javafx.scene.shape.Line;


var mediaUrl:String = "http://sun.edgeboss.net/download/sun/media/1460825906/1460825906_2956241001_big-buck-bunny-640x360.flv";
if(FX.getArgument("mediaURL")!=null) {
  mediaUrl = FX.getArgument("mediaURL").toString();
}

def vidWidth = 1024;
def vidHeight = 576;

var X=0;
var Y=1;
var Z=0;
var VX=230; // perspectiva horizontal para video
var VY=376; // perspectiva vertical para video
var S:Number;

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {X => 100},
  at (2.3s) {X => 924 tween Interpolator.LINEAR},
]
}.play();


Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {Y => 100},
  at (0.5s) {Y => 476 tween Interpolator.EASEIN},
]
}.play();


Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {Z => 40},
  at (10s) {Z => 100 tween Interpolator.LINEAR},
]
}.play();


Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {S => 0.5},
  at (0.5s) {S => 1 tween Interpolator.EASEIN},
]
}.play();


var mediaBox:MediaComponent = MediaComponent {
  // set the media and make the component visible
  mediaSourceURL : mediaUrl
  visible:true
  // the position and size of the media on screen
  translateX: 0
  translateY: 0
  mediaViewWidth : vidWidth
  mediaViewHeight: vidHeight
  // determines if the control bar is below the media or on top with a fade in
  staticControlBar: false
  // make the movie play as soon as it's loaded
  mediaPlayerAutoPlay: true
  // set the volume
  volume: 1.0

  effect: PerspectiveTransform {
      ulx: bind VX        uly: bind VY
      urx: bind 1024-VX   ury: bind VY
      lrx: 1024           lry: 576
      llx: 0              lly: 576
  }
};


// Currently these variables have to be set after the component is created

// Description to be displayed when the mouse is over the component
mediaBox.mediaDescriptionStr = "A well-tempered rabbit finds his day spoiled by the rude actions of the...";
// Duration to be displayed when the mouse is over the component
mediaBox.mediaDurationStr = "9:56";
// Title to be displayed when the mouse is over the component
mediaBox.mediaTitleStr = "Big Buck Bunny";


Stage {

 title: "Simple Media Player"

 scene: Scene{

     width: vidWidth
     height: vidHeight

     stylesheets: [
        MediaComponent.css_skins
     ]

     content: [

         mediaBox,

         Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind VX
              startY: bind VY
              endX:   0
              endY:   576
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind VX
              startY: bind VY
              endX:   bind VX
              endY:   0
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind VX
              startY: bind VY
              endX:   bind 1024-VX
              endY:   bind VY
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind 1024-VX
              startY: bind VY
              endX:   bind 1024-VX
              endY:   0
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind 1024-VX
              startY: bind VY
              endX:   1024
              endY:   576
        }


         Ellipse {
             centerX: 0, centerY: 0 radiusX: 100 radiusY: 30
             fill: Color.BLACK
             opacity: bind S - 0.2
             fill: RadialGradient {
                 proportional: false  radius: 100
                 centerX: 0  centerY: 0
                 focusX: 0  focusY: 0
                 stops: [
                     Stop { offset: 0.0  color: Color.web("#333333", 1.0) },
                     Stop { offset: 0.4  color: Color.web("#444444", 1.0) },
                     Stop { offset: 1.0 color: Color.web("#FFFFFF", 0.0) }
                 ]
             }
             transforms: bind [
                 Transform.translate(X , 476 + Z - 100 + Z / 2)
                 Transform.scale(S * Z / 100.0, S * Z / 100.0)
             ]
         }

         Circle {
             centerX: 0  centerY: 0  radius: 100
             stroke: Color.BLACK
             fill: RadialGradient {
                 proportional: false  radius: 100
                 centerX: 0  centerY: 0
                 focusX: 20  focusY: -50
                 stops: [
                     Stop { offset: 0.0  color: Color.WHITE },
                     Stop { offset: 0.85 color: Color.RED },
                     Stop { offset: 1.0  color: Color.BLACK }
                 ]
             }
             transforms: bind [
                 Transform.translate(X , Y + Z - 100)
                 Transform.scale(Z/100.0, Z/100.0)
             ]

         }

    ]

 }

}

Mi primer post sobre JavaFX... se va la bolita

2008-12-05T21:31:00.000-08:00

La verdad es que no tengo mucha idea sobre JavaFX, mi primer contacto con este nuevo lenguaje de programación fue ayer, así que podrán imaginar cuanto sé del tema.

Mi intención es sólo compartir lo que vaya descubriendo, de manera de facilitarle la vida a otros que vengan después de mi ;D

De lo que ví, creo que hay cosas que me han gustado bastante. Para comenzar, me sorprendió un par de cosas:

1) El poco código que se requiere para hacer "algo" que haga algo ;D ... si saben programar en Java o C# sabrán cuanto código se necesita sólo para escribir el típico "Hola Mundo!!". Con JavaFX es tan corto como:

println("Hola Mundo");

¿Van captando los beneficios? ;D

2) Descubrí la instrucción BIND, algo que por lo menos no tiene ningún otro lenguaje de programación que conozca.

¿Qué hace esta instrucción?

En palabras simples, permite "amarrar" los cambios de estados (por ejemplo) de las variables y disparar "eventos" a través del código, sin hacer nada. Aquí les va un ejemplo muy básico:


package myfirstjavafx;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.ext.swing.SwingButton;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;

var count=0;
var colors = [Color.RED, Color.BLUE, Color.YELLOW];
var newcolors = [Color.PURPLE, Color.GREEN, Color.CYAN];

Stage {
title: "Application title"
width:250
height:250

scene: Scene {
   content: [

       Circle {
           centerX: 100
           centerY: 100
           radius: 100
           fill: bind colors[count];
       },

       SwingButton {
           text: "Rota colores"
           rotate:20
           translateX:100
           translateY:100

           action: function() {
               if (++count == sizeof colors)
                   count=0;
           }
       },

       SwingButton {
           text: "Agrega nuevo color"
           rotate:20
           translateX:100
           translateY:130

           action: function() {
                  if (sizeof newcolors > 0) {
                      var col=newcolors[0];
                      delete newcolors[0];
                      insert col into colors;
                      println("Adding {col} to the current list")
                  }
           }
       }

   ]
}
}

De este ejemplo se pueden aprender un par de cosas: ¿Qué hace?

Esta "aplicación" tiene tres elementos visibles. Un CIRCULO y dos BOTONES. Cuenta además con dos listas de colores (arreglos o SECUENCIAS). Al oprimir el primer botón, rota los colores aplicados al círculo, contenidos en la primera secuencia (COLORS). Cuando llega al último color disponible, regresa al primero. Si se oprime el segundo botón, "trasvasija" el primer color de la secuencia NEWCOLORS a la lista de colores aplicados al circulo (COLORS). Hace eso mientras haya nuevos colores disponibles en la secuencia (NEWCOLORS).

1) Al definir el escenario (Stage), se está creando una ventana o area de ejecución de la aplicación. Con Width y Height se declara el tamaño de esa ventana o espacio de ejecución (en caso que sea un applet, supongo)

2) La escena (Scene) viene siendo el interior de la ventana que alberga los contenidos (content).

3) Define el círculo con su tamaño y radio, y aquí viene algo interesante. DEFINE con BIND que... el color usado para rellenar el círculo, es el color en la secuencia COLORS al que apunta COUNT. Lo interesante es que luego basta que en alguna parte del programa cambies el valor de COUNT para que actualice el círculo con el nuevo color. No es necesario hacer nada adicional.

4) Define el primer botón (el rotate sólo GIRA el botón en 20º, lo hice únicamente para probar que las interfaces pueden ser mas "divertidas" y de manera muy sencilla), y le asigna una ACCION al botón (action), que se ejecutará al ser oprimido.

¿Qúe hace este botón?

Simplemente incrementa COUNT hasta alcanzar el número máximo de colores disponibles en la lista COLORS. Al hacerlo, el color del círculo cambia (si te fijas, al incrementar COUNT no ejecuta ninguna rutina adicional o método, basta con cambiar el puntero y este actualiza el color del círculo [obteniendo el nuevo color al que apunta COUNT en la lista COLORS]).

Una vez que llega al último color de la lista, regresa al primer color (COUNT=0).

5) Define el segundo botón y le asigna la siguiente acción: primero, verifica si hay nuevos colores disponibles en la segunda lista (secuencia NEWCOLORS), con un simple "sizeof newcolors> 0", es decir, valida si hay un color disponible en la lista newcolors antes de proseguir.

A continuación, obtiene el primer color disponible en la lista newcolors (var col=newcolors[0];) y lo borra de la lista (delete newcolors[0];). Acto seguido, agrega el color obtenido de newcolors y lo agrega al final de la lista COLORS (insert col into colors;)

Listo. Funciona.... sólo tienes que oprimir el botón PLAY (>) en la barra de Netbeans.

PD: Si da algún error, anda al nombre del proyecto en la columna izquierda (arriba) y haz click con el botón derecho del mouse y selecciona SET AS MAIN PROJECT (en caso que tengas otro proyecto abierto).