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

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).