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);
|
![]() |
| 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
}
|
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]; |
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 |






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.
Enviado por Ezequiel en agosto 06, 2008 a las 09:03 PM GMT-03:00 #
Yo estoy iniciandome con javaFX, pero lo que he leído me parece mas que interesante y me parece muy bueno que estes dando este curso, ahora mi pregunta va si vas a realizar algún ejemplo de la integración y/o traspaso de web a escritorio y a mobile, y si también vas a hacer algún ejemplo usando el Proyect Nile con una herramienta de diseño como Adobe Photoshop CS3 y / o Adobe Illustrator CS3 y después usarlo desde NetBeans.
Gracias por tu trabajo y quisiera seguir viendo mas avances sobre esto que me ha llamado tanto la atención.
Enviado por Emilio en agosto 08, 2008 a las 09:42 AM GMT-03:00 #
Emilio, a decir verdad no tengo un gran plan a largo plazo respecto de los tópicos va a cubrir el curso.
El plan inicial era cubrir sólo los tópicos básicos, ya que para serte sincero, nunca pensé que el curso iba a tener el nivel de respuesta que tuvo (además de los comentarios en el blog, recibimos varios mails de gente pidiendo más info).
Por ahora el rumbo a seguir es el que le comentaba a Leonardo (ver comentario #4), una vez que alcancemos ese punto, veremos para donde sigue la cosa. Obviamente se aceptan pedidos y sugerencias, así como críticas que apunten a mejorar el contenido.
Es muy probable que mañana cerca del mediodía este publicando la segunda entrega.
Enviado por Ezequiel en agosto 08, 2008 a las 03:01 PM GMT-03:00 #
Gracias este blog esta muy bueno y seguire los 5 capitulos que hay espero que surjan mas para poder aprender de este programa las cosas interesantes que tiene un saludo a todo ustedes que hacen posible de aprender nuevas tegnologias.
Enviado por yamilfg en febrero 22, 2009 a las 02:01 PM GMT-03:00 #