Java FX Script, primeros pasos – Parte 1

¿Qué es JavaFX Script?

JavaFX Script es un lenguaje de scripting declarativo estáticamente tipado, llamado anteriormente F3 (Form Follows Function) que fue desarrollado en su mayoría por Chris Oliver, quien trabaja para Sun microsystems desde la adquisición de SeeBeyond Technology por parte de esta a fines de 2005.

El compilador de JavaFX, así como gran parte de las bibliotecas gráficas y herramientas se encuentran liberadas con la licencia GPL2, a través del proyecto OpenJFX.

JFXS Forma parte del conjunto de tecnologías JavaFX, las cuales tienen el propósito de facilitar la creación de Rich Internet Applications (RIAs) con gran cantidad de contenido multimedia, respetando siempre la idea de Java de poder luego ejecutarlas en forma independiente de la plataforma. Lo último que pudo verse de esta tecnología son las “draggable applets“, que son aplicaciones (que como su nombre indica) pueden arrastrarse desde el navegador al escritorio, en donde se convierten en una especie de “widgets” (similares a aquellos del Dashboard en Mac OS X  o los del Sidebar de Windows Vista), estas fueron presentadas en JavaOne 2008, y les dedicamos un post hace tiempo en el que pueden obtener más info.

La idea de esta serie de artículos es introducir las características de este novedoso lenguaje a través de la realización de pequeños ejemplos. En esta primera parte solo utilizaremos el Pad de JavaFX (click en el link para ejecutarlo), que es una pequeña aplicación multiplataforma que podrán ejecutar desde Internet utilizando Java Web Start (sólo requiere tener instalado el JRE de Java).

¿Lenguaje declarativo?, ¿Estáticamente tipado?

Para comenzar, la característica principal de JFXS es que es un lenguaje de tipo declarativo, esto significa que, en vez de explicar  “como” realizar algo (el algoritmo, en los lenguajes imperativos), deberemos describir “que” es ese algo. Por ejemplo, en HTML, se declara el contenido de la pagina, pero no se explica como este será mostrado en la pantalla. En general, se consideran declarativos aquellos programas escritos en un lenguaje puramente funcional, lógico o basado en restricciones, formando un paradigma que contrasta con el imperativo.

Para ver a que me refiero con “declarativo”, podemos ver el siguiente programa JFXS:

import javafx.ui.*;

class HelloWorldModel {
    attribute saying: String;
}

var model = HelloWorldModel {
    saying: "Hello World"
};

var win = Frame {
    title: bind "{model.saying} JavaFX"
    width: 200
    content: TextField {
        value: bind model.saying
    }
    visible: true
};

En el mismo podemos observar como aparecen una debajo de la otra las descripciones de los elementos que formaran parte de, en este caso, un frame con el mensaje “hello world“. Nótese como, en ningún momento aparece un punto de entrada al programa (un método main, por ejemplo), en vez de esto, el motor de JFXS deberá leer todo el contenido del programa, para que luego el interprete decida que hacer con toda esta información.

JavaFX Pad ejecutando el programa “Hello World”

La segunda característica importante de JFXS es que es estáticamente tipado, esto quiere decir que la verificación de tipos se realiza en tiempo de compilación. Por lo tanto, si bien es un lenguaje de scripting, no podremos hacer cosas típicas de estos lenguajes como cambiar el tipo de una variable en tiempo de ejecución.

Veamos el siguiente ejemplo:

var myVariable = "Hello"; //linea 1
myVariable = 12345; // linea 2

En la linea 1, creamos la variable “myVariable” y le asignamos el String “Hello“. En la linea 2, intentamos asignarle el valor 12345, sin las comillas, lo cual implica que el valor será interpretado como un integer, resultando en un error.

Resultado de intentar realizar esta operación en JavaFX Pad

Elementos del lenguaje

Lamentablemente, y como en todos los tutoriales de un nuevo lenguaje, no podemos escaparnos de la introducción a los elementos del mismo. Puede que sea aburrido, pero es mejor conocerlos desde un principio que perder tiempo recurriendo a la ayuda luego, cuando estemos trabajando en ejemplos más interesantes.

Tipos primitivos

Para comenzar, veremos los tipos primitivos de JFXS, que se corresponden a tipos del lenguaje Java, de la siguiente forma:

JavaFX Java
String java.lang.String
Boolean java.lang.Boolean
Number java.lang.Number
Integer byte,short,int,long,BigInteger

Podemos utilizar en ellos los mismos métodos que utilizamos en programas Java, por ejemplo:

var s = "que aburrido";
s.toUpperCase(); // retorna "QUE ABURRIDO";
s.substring(4);  // retorna "aburrido";
var n = 4.5;
n.intValue();    // retorna 4
(1.5).intValue();    // retorna 1
s.substring(n);  // retorna "aburrido"
var b = true;
b instanceof Boolean; // retorna true

Adicionalmente, los valores numéricos se truncan automáticamente cuando interactúan con métodos Java así como cuando se convierten Numbers a Integers.

En JFXS podemos importar clases Java, crear objetos y llamar sus métodos. Por ejemplo:

import javax.swing.JFrame;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.lang.System;

var frame = new JFrame();
var button = new JButton("Apretame");
frame.getContentPane().add(button);
button.addActionListener(new ActionListener() {
    operation actionPerformed(event) {
        System.out.println("Me apretaste");
    }
});
frame.pack();
frame.setVisible(true);
Esto dará como resultado lo siguiente:

Resultado del programa

Sin embargo, utilizar JFSX de esa forma rompe totalmente con la idea de sencillez propuesta por el lenguaje, por lo que una manera más apropiada de escribir el mismo programa sería:

import javafx.ui.*;
         import java.lang.System;
         Frame {
              content: Button {
                   text: "Apretame"
                   action: operation() {
                        System.out.println("Me apretaste");
                   }
              }
              visible: true
         }

Pueden verificar el resultado copiando y pegando los códigos en el pad de JavaFX.

Variables

En JFXS la palabra reservada “var” encabeza la declaración de una nueva variable. Si no se especifica un tipo para la misma, el interprete lo inferirá de acuerdo al uso que le demos. Una declaración de variable en JFXS toma la siguiente forma:

var nombreDeLaVariable : tipoDeLaVarible [?,+,*] = valor;

Donde tanto los operadores “?”, “+”, “*” como el tipo de la variable (e incluso el valor) son opcionales. El signo de pregunta implica que la variable puede ser null, el asterisco que puede estar compuesta de cero o más ocurrencias y el signo de suma obliga a que al menos este compuesta de una ocurrencia. Por ejemplo:

var numeros : Number* = [1,2,3]; //declara la variable "numeros" como un arreglo de 0 o más ocurrencias del tipo Number.

Pero, dado que tanto el operador como el valor y el tipo son opcionales, el siguiente código logrará el mismo efecto:

  var nums = [1,2,3];
Por hoy esto es todo, pero en la próxima entrega veremos el uso de funciones, arreglos, expresiones, operadores y quizás algo de queries para arreglos, dependiendo de la longitud que vaya tomando el/ los articulos a medida que los escriba.

Antes de dejarlos, les paso los datos para configurar el uso de la consola con programas JFXS, ya que la misma no viene configurada por defecto en ningún sistema operativo (esto es muy útil para ver el resultado de algunos programas utilizando System.out.println). Nota: deberán importar java.lang.System para hacer uso de la consola.

  • En Windows XP o Vista, vayan al panel de control, click en el icono de Java, y en el tab “Avanzado“, seleccionen “Mostrar consola“.
  • En Solaris, click en el icono Java en el tab de preferencias, y seleccionen “Mostrar consola” en el tab “Avanzado“. Si no tienen un icono de Java en las preferencias, ejecuten la aplicación “ControlPanel” (o jcontrol) en el directorio bin de su distribución Java.
  • En Linux, busquen la aplicación ControlPanel (o jcontrol) dentro del directorio bin de su distribución Java. Ejecútenlo, y luego aparecerá el icono de Java en las preferencias, vayan al tab “Avanzado” y tilden “Mostrar Consola“.
  • En Mac OS X, vayan a Aplications/Utilities/Java/ y ejecuten “preferencias de Java“. En el tab “Avanzado“, seleccionen “Ver consola“. Al parecer, luego de hacer esto en algunos Mac con procesador Intel, puede surgir un error que hace que Java Web Start deje de funcionar. Para Solucionarlo vayan a Library/Caches/Java/deplyment.properties y cambien todos los valores osarch de “i386” (o “X86_64“) a “ppc“. En mi caso, esto no sucedió y todo funcionó correctamente.
Panel de preferencias de Java

Finalmente, en el Pad de JavaFX desactiven la opción “Run Automatically” y vacien la consola antes de ejecutar alguna aplicación. Para ejecutar las aplicaciones manualmente, utilicen la opción Run del menú homonimo del Pad.

Programa que imprime “pepe” en la consola Java

Comentarios:

muy bueno, las explicaciones, y el material para poder iniciar en esta nueva herramienta,
estaria muy bueno recibir sobre los lenguajes declarativos que por lo que vi es muy intuitivo

Enviado por luis en agosto 06, 2008 a las 10:44 AM GMT-03:00 #

Muy bueno hasta ahora. Me gustaría ver mas!!

Hay alguna intensión de integrarlo con algún framework de los que están de “moda”?, onda spring.

Gracias y espero ansioso la otra entrega!

Enviado por Juan Pablo en agosto 06, 2008 a las 01:17 PM GMT-03:00 #

Felicitaciones por el curso. Encuentro muy positivo que publiquen información en español sobre JFX, la cual no es precisamente abundante en este idioma.

No obstante, me gustaría hacer una crítica constructiva:
La sintaxis que aquí se expone corresponde a la primera versión de JavaFX, la cual es interpretada. Esta cambió radicalmente hacia fines de 2007, cuando JavaFX pasó a ser un lenguaje puramente compilado, con .class “nativos” para la jvm (gracias a un javacfx,javafx y javadocfx), con lo cual se aumentó notablemente el rendimiento de este lenguaje.

La nueva sintaxis (a veces referida como JFXC o compiled JFX) es incompaible en muchos aspectos con la que aquí se explica:
1.declaración de clases estilo Java, en lugar del estilo C++ que se usó originalmente
2.Sustitución de los modificadores de tamaño de vectores estilo DTD por los utilizados en Java ([])
3. cambio de la sintaxis (pero no de la semántica) del mecanismo de enlace via “bind”
4. En algunas construcciones, la apertura de llaves ha pasado a ser opcional, y en otras obligatoria.
5. Disparadores y clausuras
6. Y varios cambios y características nuevas.

La migración a la misma es fundamental, ya que JFXC es la versión utilizada en el JDK que fue lanzado recientemente (junio 2008), mientras que la vieja sintaxis (según tengo entendido) será simplemente dejada de lado.

En vista de que este curso está algo desactualizado, recomiendo, con todo respeto, alguna página como por ejemplo
http://learnjavafx.typepad.com/
completa, con una guía de transición a la nueva sintaxis y ejemplos prácticos al día. Otra opción es la página oficial del compilador openJFX. Lamentablemente, ambas se encuentran solo en inglés.

Lo que comento no es necesariamente exacto; tan solo he seguido con interés el desarrollo de esta nueva tecnología desde hace 1 año, la cual ha estado en constante evolución.

Enviado por Leonardo en agosto 06, 2008 a las 08:13 PM GMT-03:00 #

Leonardo, lo que decís es cierto… Pero me cortaste el curso a la mitad!!!

Para no comenzar de cero, lo que voy a hacer es terminar con la descripción de la sintaxis de JavaFX interpretado en una o dos entregas más del curso (ya que de todas formas sirve para ir conociendo los mecanismos básicos y elementos del lenguaje). A continuación voy realizar una entrega que muestre las diferencias entre la sintaxis de JFXI y la de JFXC. Finalmente, seguiremos con ejemplos mas avanzados utilizando la nueva versión de JFX, JFXC.

Mientras tanto, pueden encontrar un draft (en inglés) de la referencia de JFXC en http://openjfx.java.sun.com/current-build/doc/reference/overview.html

Por cierto, espero poder publicar dos partes del curso por semana, bajando a una por semana si se me complica mucho mantener la frecuencia.

Ezequiel Aranda

One Response to “Java FX Script, primeros pasos – Parte 1”

  1. Buena tu contribucion amigo saludos desde PERÚ.

Discussion Area - Leave a Comment