jphone.org - 2008 August 09

As we discussed in the last blog, about easing and constraint. Now we have seen the ball is moving inside the box but not completely. And this is not possible as well because the mouseMove code has been written on the box and mouse can move anywhere in the box. So, the basic funda comes first is to make one virtual box bigger than target box and the mouseMove code should be written on the outer virtual box rather than the box inside which we want to move our ball. Now the real constraint part, that will be written inside the onMouseMove code:

                onMouseMoved: function( e: MouseEvent ):Void {
                    mouseX = e.getX();
                    mouseY = e.getY();
                    if(mouseX < rect.x + circleRadius ) {
                        mouseX = rect.x + circleRadius
                    };
                    if(mouseX > rect.x + rect.width - circleRadius ) {
                        mouseX = rect.x + rect.width - circleRadius
                    };

                    if(mouseY < rect.y + circleRadius ) {
                        mouseY = rect.y + circleRadius
                    };
                    if( mouseY > rect.y + rect.height - circleRadius ) {
                        mouseY = rect.y + rect.height - circleRadius
                    };
                }

Here, rect is the target box inside which we want the ball to move. So, if mouse position is going out of the boundary, we are pushing it inside the boundary. I am still damn sure, some checking may be missing. Now, this mouseMove will go into the outer bigger circle. Here is the final code:

 package constraintcheck;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.geometry.Circle;
import javafx.scene.paint.Color;
import javafx.input.MouseEvent;
import javafx.scene.transform.Translate;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import java.lang.Math;
import javafx.scene.geometry.Rectangle;

var mouseX : Number = 100;
var mouseY : Number = 100;
var circleX : Number = 300;
var circleY : Number = 300;
var t : Number = 100;
var easing : Number = 0.05;
var circleRadius : Number = 50;

var timeline = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames : [
        KeyFrame {
            time : 16ms
            action : function() {
                if( 
                Math.abs(mouseX - circleX ) > 0.1 ) {
                    circleX = circleX + (mouseX - circleX ) * easing;
                }
                if( Math.abs(mouseY - circleY ) > 0.1 ) {
                    circleY = circleY + ( mouseY - circleY ) * easing;
                }
            }
        }
    ]
}

Frame {
    title: "Constrain Check"
    width: 700
    height: 700
    closeAction: function() { java.lang.System.exit( 0 ); 
    }
    visible: true

    var rect = Rectangle {
        x: 100, y: 100
        width: 400, height: 400
        fill: Color.RED
   }
    stage: Stage {
        content: [ 
            Rectangle {
                x: 0, y: 0
                width: 500, height: 500
                fill: Color.BLACK
                onMouseMoved: function( e: MouseEvent ):Void {
                    mouseX = e.getX(); 
                    mouseY = e.getY();
                    if(mouseX < rect.x + circleRadius ) { 
                        mouseX = rect.x + circleRadius
                    };
                    if(mouseX > rect.x + rect.width - circleRadius ) { 
                        mouseX = rect.x + rect.width - circleRadius
                    };
 
                    if(mouseY < rect.y + circleRadius ) { 
                        mouseY = rect.y + circleRadius
                    };
                    if( mouseY > rect.y + rect.height - circleRadius ) { 
                        mouseY = rect.y + rect.height - circleRadius
                    };
                }
            },rect,
            Circle {
                centerX: bind circleX, centerY: bind circleY
                radius: circleRadius
                fill: Color.GRAY
            }
        ]
        fill: Color.BLACK 
    }
}
timeline.start();

It combines both the code, easing part and the constaint part :-). Virual box has been made by filling the rectangle same color as of frame. Now, you can play around with the coordinate value and check its working fine or not. Still some condition need to check like the outer box size should be bigger. Now, look at the code of Constraint.fx written in Netbeans 6.1 example :-P.

Antes de comenzar con esta segunda parte, quiero agradecerle a toda la gente que durante esta semana estuvo dejando comentarios y criticas sobre el curso, tanto en la secci?n "comentarios" del blog como aquellos que se comunicaron por email. Me alegra saber que hay tanta gente enganchada, ya que, como escrib? en los comentarios, nunca pens? que esto (que pretend?a ser una introducci?n a JFX que pasara casi desapercibida) iba a tener el nivel de respuesta que tuvo.

Para aquellos que no estuvieron siguiendo los comentarios de la parte 1, les cuento como he decidido que siga esto: primero vamos a terminar de cubrir los aspectos b?sicos de la versi?n interpretada de JavaFX Script, para luego marcar las diferencias entre esta y la nueva versi?n de JFXS, JavaFX Script compilado. Una vez completo esto, vamos a empezar con ejemplos m?s avanzados.

Sin m?s introducci?n, retomemos donde hab?amos dejado en la parte 1:

Nota: al igual que en la parte 1, s?lo utilizaremos el pad de JavaFX para los ejemplos de esta parte.

Expresiones

Esta parte adem?s de aburrida es mera sintaxis, a la que van a tener que recurrir una y otra vez hasta que la memoricen, as? que me voy a limitar a copiar la tabla de operadores de la referencia, y a mostrarles un par de ejemplos (aquellos que est?n acostumbrados a Java noten especialmente que el operador de "?no igualdad" y los booleanos cambian, lo cual puede ser un dolor de cabeza en sus primeros pasos por JFXS):

Operador	Significado	Equivalente en Java

Relational Operators
`==`	igualdad	`==`
`<>`	no igualdad	`!=`
`<`	menor que	`<`
`>`	mayor que	`>`
`<=`	menor o igual que	`<=`
`>=`	mayor o igual que	`>=`

Boolean Operators
`and`	'y' l?gico	`&&`
`or`	'o' l?gico	`\|\|`
`not`	negaci?n	`!`

Arithmetic Operators
`+`	suma	`+`
`-`	resta, negaci?n unaria	`-`
`*`	multiplicaci?n	`*`
`/`	divisi?n	`/`
`%`	resto	`%`
`+=`	suma y asignaci?n	`+=`
`-=`	resta y asignaci?n	`-=`
`*=`	producto y asignaci?n	`*=`
`/=`	cociente y asignaci?n	`/=`
`%=`	resto y asignaci?n	`%=`

Other Operators
`sizeof`	tama?o de arreglo	`n/a`
`indexof`	posici?n ordinal	`n/a`
`if e1 then e2 else e3`	expresi?n condicional	`e1 ? e2 : e3`
`select`	list comprehension	`n/a`
`foreach`	list comprehension	`n/a`
`new`	asignaci?n de memoria	`new`
`op()`	llamada a funci?n u operaci?n	`n/a`
`x.op()`	llamada a m?todo	`x.op()`
`instanceof`	control de tipo	`instanceof`
`this`	acceso a si mismo	`this`
`.`	acceso a atributos, contextos	`., n/a`
`bind [lazy]`	evaluaci?n incremental	`n/a`
`:`	inicializaci?n "ansiosa"	`n/a`
`[]`	selecci?n en un arreglo	`[]`
`format as`	formateado de strings	`n/a`
`<<>>`	identificadores	`n/a`
`{}`	referencias en expresiones string	`n/a`
`(expr)`	agrupado	`(expr)`
`reverse`	invierte una lista	`n/a`
`[number1,next..number2]`	rango num?rico	`n/a`

Ejemplos varios:

import java.lang.System;
import java.lang.Math;

var x = 2;
var y = 4;
var a = true;
var b = false;
System.out.println(x == y);  // imprime false
System.out.println(x <> y);  // imprime true
System.out.println(x < y);   // imprime true
System.out.println(x > y);   // imprime true
System.out.println(x >= y);  // imprime false
System.out.println(x <= y);  // imprime true
System.out.println(x + y);   // imprime  6
System.out.println(x - y);   // imprime  -2
System.out.println(x * y);   // imprime  8
System.out.println(x / y);   // imprime  0.5
System.out.println(x % y);   // imprime  2
System.out.println(a and b); // imprime  false
System.out.println(a or b);  // imprime  true
System.out.println(not a);   // imprime  false
System.out.println(sizeof [x,y]);   // imprime  2
System.out.println([x,y][indexof . == 0]);   // imprime  2
System.out.println(if a then x else y); // imprime 2
System.out.println(select q from q in [x, y] where q > 3); // imprime 4
System.out.println(foreach(q in [x, y] where q < 3) q); // imprime 2
System.out.println(Math.max(x, y)); // imprime 4
System.out.println("abc".toUpperCase()); // imprime ABC
System.out.println(x instanceof Number); // imprime true
x = 10;
System.out.println(x); // imprime 10

Pasada la parte m?s pesada, volvamos a los mecanismos propios de JFXS:

Literales y expresiones con Strings

En JavaFX las cadenas de caracteres pueden ser declaradas usando comillas simples o dobles:

var s = 'Hola';
var s = "Hola";

Es importante destacar que dentro de estas declaraciones, pueden incluirse referencias a variables (o incluso porciones de c?digo) encerr?ndolas entre llaves ('{', '}'):

var nombre = 'Pepe';
var s = "Hola {nombre}"; // s = 'Hola Pepe'

var respuesta = true;
var s = "La respuesta es {if respuesta then "Si" else "No"}";
    // s = 'La respuesta es Si'

A diferencia de Java, en JFXS los Strings declarados con comillas dobles pueden contener saltos de l?nea:

var s = "Esto
         tiene
         varias lineas";

Arreglos

Una de las estructuras m?s utilizadas en JFXS son los arreglos, los cuales representan una secuencia de elementos que, al igual que en Java, deben ser del mismo tipo. En este lenguaje, los arreglos poseen muchas funcionalidades, lo cual da lugar a un infinito n?mero de posibilidades al momento de trabajar con ellos. Comencemos por ver como crear una variable de este tipo:

var diasLaborales = ["Lun","Mar","Mie","Jue","Vie"];
var dias = [weekdays, ["Sab","Dom"]];

C?mo puede observarse en el ejemplo de arriba, los arreglos se crean utilizando corchetes y comas, y pueden crearse en base a otros arreglos. Sin embargo, es importante saber que los arreglos no son objetos en s? mismos y, adem?s, que las expresiones que producen arreglos anidados (como la declaraci?n de "dias" del ejemplo) son aplanadas autom?ticamente. Esto ?ltimo implica que el valor de "dias" ser? en realidad '["Lun", "Mar", "Mie", "Jue", "Vie", "Sab", "Dom"]' y no '["Lun", "Mar", "Mie", "Jue", "Vie", ["Sab", "Dom"]]' (si bien la diferencia es sutil, puede llevar a errores).

Si intentamos imprimir el valor del arreglo con "System.out.println(dias)" s?lo veremos el primer elemento del arreglo, para obtener todos los elementos, tendremos que usar un ?ndice. Adem?s, cabe destacar que en JFXS no obtendremos una excepci?n "ArrayIndexOutOfBoundsException" como en Java al intentar acceder a un ?ndice fuera de rango, en lugar de eso, obtendremos un cero.

Para saber el tama?o de un arreglo, podemos usar el operador "sizeof":

var n = sizeof dias;     // n = 7

Pueden utilizarse dos puntos seguidos '..' para crear arreglos cuyos elementos formas series aritm?ticas, por ejemplo:

var unoACien = [1..100];
var tamanio = sizeof unoACien;   // tamanio == 100
var porTres = [1*3, 2*3 .. 10*3]; // [3,6,9,12,15,18,21,24,27,30]
tamanio = sizeof porCien;   // tamanio == 10

El Operador "[]"

En JFXS el operador "[]" se utiliza para expresar una selecci?n utilizando predicados Xquery-Update (similares a los de XPath). Este mecanismo se basa en la utilizaci?n de una variable de contexto, con la cual el interprete se encargar? de localizar aquellos valores que cumplen con la condici?n planteada. Es importante destacar que es el valor y no el ?ndice a lo que estaremos haciendo referencia. Para obtener el ?ndice, debemos utilizar el operador "indexof":

var nums = [1,2,3,4];
var numsMayoreQueDos = nums[n|n > 2]; // resulta en [3,4]
var numsMenosLosDosPrimeros = nums[n|indexof n > 1]; // resulta en [3,4]

El significado de la primera expresi?n es "los n, contenidos en num tal que ('|') n sea mayor a 2" mientras que el de la segunda es "los n tales que el ?ndice de dichos n sea mayor que 1". Nota: En versiones anteriores de JFXS se aceptaba no declarar n y utilizar un punto en lugar de "n|n", por lo que es probable que lo encuentren en alg?n ejemplo m?s viejo. Bastar? con intercambiar dicho punto por "n|n" para hacer que estos funcionen correctamente.

Error que surge al intentar usar el punto como variable de contexto

Insertar y Borrar elementos en un arreglo

Para realizar inserciones y borrados en los arreglos, se utilizan los operadores "insert" y "delete", los cuales soportan los siguientes modificadores:

insert Expression1 [as first | as last] into Expression2: inserta la primera expresi?n 
al comienzo o al final de la segunda (la segunda debe ser un atributo o variable).

insert Expression1 before Expression2: inserta la primera expresi?n 
antes de la segunda (la segunda debe ser una selecci?n sobre un atributo o variable)

insert Expression1 after Expression2: inserta la segunda expresi?n 
luego de la segunda (la segunda debe ser una selecci?n sobre un atributo o variable)

Para mayor claridad, veamos varios ejemplos varios de posibles usos de insert:

var x = [1,2,3];
insert 12 into x;                 // resulta en [1,2,3,12]
insert 10 as first into x;        // resulta en [10,1,2,3,12]
insert [99,100] as last into x;   // resulta en [10,1,2,3,12,99,100]

var y = [1,2,3];
insert 10 after y[n|n == 3];        // resulta en [1,2,3,10]
insert 12 before y[1];            // resulta en [1,12,2,3,10]
insert 13 after y[n|n == 2];        // resulta en [1, 12, 2, 13, 3, 10];

El operador "delete" funciona en forma similar, n?tese que en caso de no especificar una expresi?n se borrar? todo el arreglo:

var x = [1,2,3];
insert 10 into x;          // resulta en [1,2,3,10]
insert 12 before x[1];     // resulta en [1,12,2,3,10]
delete x[n|n == 12];         // resulta en [1,2,3,10]
delete x[n|n >= 3];          // resulta en [1,2]
insert 5 after x[n|n == 1];  // resulta en [1,5,2];
insert 13 as first into x; // resulta en [13, 1, 5, 2];
delete x;                  // borra el arreglo resulta en []

Queries en arreglos

Adem?s de estas operaciones, pueden realizarse Consultas (mejor conocidas como Queries) m?s complejas sobre los arreglos utilizando el mecanismo llamado "List Compehensions" a trav?s de los operadores "select" y "foreach". Algunos ejemplos a continuaci?n:

var a:Integer* = select n*n from n in [1..10];
    //  resulta en [1,4,9,16,25,36,49,64,81,100]

Lo que estamos diciendo es algo as? como: "recorr? los n?meros de 1 a 10, asignando el n?mero de turno a la variable 'n', elevalo al cuadrado y agregalo al arreglo 'a'".

Pueden agregarse filtros utilizando el operador "where":

var a:Integer* = select n*n from n in [1..10] where (n%2 == 0);
    //  resulta en [4,16,36,64,100]

Aqu? estariamos diciendo: "recorr? los numeros de 1 a 10, y asign? el n?mero de turno a la variable 'n' s?lo si es par, elevalo al cuadrado y agregalo al arreglo 'a'".

Podemos realizar bucles sobre m?s de una variable resultando en, por ejemplo, el siguiente producto cartesiano:

var a:Integer* = select n*m from n in [1..4], m in [100,200] where (n%2 == 0);
    //  resulta en [200, 400, 400, 800]

Aqu?, decimos "recorr? los n?meros de 1 a 4, asigna el n?mero a 'n' si es par, luego por cada n recorr? el arreglo que contiene 100 y 200, asign? el elemento de turno a la variable 'm' y multiplicalo por n y agregalo al arreglo 'a'".

Podr?amos completarlo a?n m?s agregando finalmente una condici?n sobre el segundo arreglo:

var a:Integer* = select n*m from n in [1..4], m in [100,200] where (n%2 == 0) and (m==100);
    //  resulta en [200, 400]

Utilizando el operador "foreach", se pueden obtener los mismos resultados:

var a:Integer* =
    foreach(n in [1..4], m in [100,200] where (n%2 == 0) )
            n*m;      // resulta en [200, 400, 400, 800]

Formateado

Finalmente, para cerrar esta parte veremos el operador "format as" que permite (como su nombre lo indica) dar formatos especificos a ciertos valores permitiendo, por ejemplo, su homogeneidad a la hora de almacenarlos, imprimirlos, etc.

Para empezar, la sintaxis de format as es:

expresi?n format as directiva

En donde la directiva indica cual es la clase que se utilizar? para dar el formato. M?s especificamente, si la directiva comienza con '%' se utilizar? la clase java.util.Formatter, en caso contrario si la expresi?n es de tipo Number se utilizar? java.util.DecimalFormat, sino, si la expresi?n es de tipo Date se utilizar? java.text.SimpleDataFormat.

Algunos ejemplos:

import java.util.Date;

100.896 format as <<%f>>; // resulta en '100.896000'
31.intValue() format as <<%02X>>; // resulta en '1F'
var d = new Date();
d format as <<yyyy-MM-dd'T'HH:mm:ss.SSSZ>>; // resulta en '2005-10-31T08:04:31.323-0800'
0.00123 format as <<00.###E0>>; // resulta en '12.3E-4'

El uso de las comillas francesas ('<<' y '>>') hace que JavaFX reconozca cualquier secuencia de caracteres encerrada en estas como un identificador (incluso los espacios en blanco). Esto permite utilizar las palabras reservadas de JFXS u otros identificadores ilegales como nombres de variables, clases, atributos o funciones. Lo que es m?s importante, permite llamar a m?todos Java que poseen nombres de palabras reservadas en JavaFX, por ejemplo:

import javax.swing.JTextArea;

var textArea = new JTextArea();
textArea.<<insert>>("Hello", 0);

Hasta aqu? llegamos hoy. Del contenido b?sico s?lo queda por cubrir: funciones, clases, sentencias de control y triggers (y alg?n que otro detalle), con lo cual es muy posible que quede completo con la pr?xima clase, que posiblemente est? publicando a mitad de la semana pr?xima. Hasta entonces, una buena practica puede ser la de comenzar a probar estos ejemplos, y modificarlos para ver toda la gama de posibilidades que provee JavaFX Script y, de paso, irse acostumbrando a la sintaxis del lenguaje.