Introduzione a JavaFX

Da Sun e dal mondo Java, spesso, sono arrivate quelle innovazioni tecnologiche che, poi riprese e rielaborate da altri, hanno posto le basi per l'evoluzione dei sistemi informatici e del Web. Basti pensare alle applet e all'idea di virtual machine: un runtime engine che permette di eseguire lo stesso codice su qualunque browser e su qualunque macchina.

Quelle erano le basi per le attuali RIA, idea cavalcata poi da Macromedia (Adobe) e che oggi si declina anche in chiave Microsoft e JavaScript.

Sun però non è rimasta a guardare e mette a disposizione JavaFX, un linguaggio di scripting cross-platform, adatto sia ad applicazioni stand-alone, sia alle RIA, poiché si integra al browser via Applet. In più, supportando i protocolli JNPL e MIDP, è utilizzabile anche per le soluzioni Web Start e per i dispositivi mobili.

Per iniziare possiamo scaricare l'SDK, che contiene il compilatore e le librerie fondamentali. Continuiamo poi esaminando alcune caratteristiche di JavaFX script, il linguaggio di scripting con il quale realizzeremo anche un piccolo esempio.

La sintassi di JavaFX è più snella e descrittiva rispetto a Java, simile a quella di Groovy. Il linguaggio di scripting, pienamente supportato dalla JRE, si chiama "JavaFX Script Programming Language" o semplicemente JavaFX script. Esaminiamone le caratteristiche principali.

Variabili e oggetti

In JavaFX script, possiamo definire le variabili dichiarando il tipo di dato in maniera esplicita oppure effettuando una dichiarazione generica. In ogni caso per dichiarare variabili e costanti ci serviamo rispettivamente delle parole chiave var e def.

Esaminiamo ora la definizione di una classe:

public class MyClass {
    var attr1;
    var attr2;
    var attr3   // manca il ';' ma non si è formalmente
}               // obbligati a rispettare la sintassi

Una classe si istanzia con:

MyClass {
    attr1: "a String";
    attr2: .1234;      // 0 omesso, corrisponde al
                       // valore decimale 0.1234
}

In questo caso si sta invocando il costruttore di MyClass inizializzandone gli attributi rispettivamente con una stringa e con un numero decimale. La firma del costruttore è libera, sono perciò permesse tutte le combinazioni.

Vediamo ora come definire il tipo di una variabile:

var myString:String;

o servici dell'assegnazione implicita:

var myClass = MyClass {
    attr1: "a String";
    attr2: .1234;
}

È anche utile esaminare il legame nativo al pattern observer, utile per le architetture orientate agli eventi, che avviene attraverso la keyword bind:

var myString:String = "a String";
var myClass = MyClass {
    attr1: bind myString;
    attr2: .1234;
}

la quale fa in modo che ogni modifica alla variabile myString comporti la modifica del valore di attr1, ma non il contrario.

Operare con le stringhe

Diversamente da Java non è prevista la differenza tra i tipi Char e String in quanto è utilizzato solo il tipo String. In questo contesto è possibile referenziare variabili attraverso l'operatore {}:

var myNumber:Number = 1234;
var myString:String = "my number is {myNumber}";

o col comodo meccanismo del binding, tenere aggiornati i valori:

var myString:String = bind "my number is {myNumber}";

Array e sequenze

Per le sequenze è previsto l'array, tipizzato o meno, allo stesso modo delle variabili. È possibile inizializzare la sequenza con espressioni.

L'utilizzo di parole chiave come insert, delete, into, before e after, per accedere o modificare i dati contenuti, rende più leggibile il codice e permette di svincolarsi dalla regolarità degli indici:

// crea una lista contenente interi da 1 a 5
var numbers:Integer[] = [1..5];	
// inserisce 6 in coda alla sequenza
insert 6 after numbers[100];
// inserisce 0 in testa alla sequenza,
// equivale a referenziare numbers[0]
insert 0 before numbers[-3];

Hello World con JavaFX

Di seguito illustriamo una semplice applicazione, un "Hello World" di poco modificato per mostrare i potenziali precedentemente descritti della sintassi, mostrando come output i valori di un array di numeri.

Il codice sorgente va salvato in un file con estensione .fx, da cui viene generato il .class, una volta compilato. La main-class è definita da un'istanza di javafx.stage.Stage, che rappresenta lo spazio in cui l'applicazione viene eseguita.

/*
 * Numbers.fx
 */
package it.html.fx;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
/**
 * @author Html.it
 */
var numbers:Integer[] = [1..5];
insert 6 after numbers[100];
insert 0 before numbers[-2];
Stage {
     title: "Numbers!"
     width: 250
     height: 80
     scene: Scene {
          content: [
               Text {
                    font : Font { size : 16 }
                    x: 10
                    y: 30
                    content: bind "Numbers: {numbers}"
               }
          ]
     }
}

Esaminiamo alcune delle classi che abbiamo utilizzato nel codice:

Compilare il progetto

Nella cartella bin dell'SDK troviamo le utility necessarie per la compilazione e il deploy della nostra applicazione le più importanti sono:

• javafxc, il compilatore
• javafxpackager, l'utility che crea tutti i file necessari alla distribuzione dell'applicazione (anche l'HTML)

Iniziamo lanciando la compilazione del nostro progettino. Dalla riga di comando scriviamo:

javafxc it/html/fx/numbers.fx

Il compilatore produrrà una serie di file .class. Possiamo testare l'applicazione semplicemente con il comando:

javafx it.html.fx.numbers

Ora possiamo assemblare il jar creare una vera e propria distribuzione grazie al packager:

javafxpackager -src ./ -appClass it.html.fx.numbers

al quale passiamo la cartella contenente i sorgenti (i file .class) e la classe principale dell'applicazione (tutto il namespace).

Il packager produce una cartella dist, che contiene il file numbers.jar, corredato da una pagina HTML con il codice per l'ebbedding e i file per Java Web Start.

Deploy multipiattaforma

Mostreremo come il semplice codice dell'esempio può essere eseguito:

• da riga di comando
• come Applet
• come applicazione Web Start
• su un dispositivo Mobile

Da riga di comando

Si lancia come un semplice jar, nel Manifest.mf va specificata la main class:

Manifest-Version: 1.0
Implementation-Title: FxSampleNumbers
Implementation-Vendor: Html.it
Main-Class: it.html.javafx.sample.numbers 

e si procede da riga di comando:

javafx -jar FxSampleNumbers.jar

JavaFX Applet

L'integrazione nel browser può avvenire attraverso il tag <applet> oppure utilizzando un oggetto JavaScript, e va importata la libreria dtfx.js. In quest'ultimo caso, il codice è:

<script src="http://dl.javafx.com/1.2/dtfx.js"></script>
<script>
javafx({ archive: "FxSampleNumbers.jar",
         width: 200,
         height: 200,
         code: "it.html.javafx.sample.Numbers",
         name: "Numbers"
       });
</script>

quindi, in maniera molto simile a come avremmo utilizzato il tag <applet>:

<applet code="it.html.javafx.sample.Numbers"
        width="480"
        height="560"
        archive="FxSampleNumbers.jar,<aggiungere le altre librerie per javafx>"
        name="Numbers" >
</applet>

Applicazione Web Start

Anche l'uso del codice come applicazione Web Start non presenta particolari problemi. Il file JNPL (FxSampleNumbers.jnpl)si configura in questo modo:

<?xml version="1.0" encoding="UTF-8"?>
<jnlp spec="1.0+" codebase="<percorso sul server>" href="FxSampleNumbers.jnlp">
<information>
  <title>Numbers</title>
  <vendor>Html.it</vendor>
  <homepage href="percorso sul server" />
  <description>FxSampleNumbers</description>
  <offline-allowed />
  <shortcut>
    <desktop/>
  </shortcut>
</information>
<resources>
  <j2se version="1.5+" />
  <extension name="JavaFX Runtime" href="http://dl.javafx.com/1.2/javafx-rt.jnlp" />
  <jar href="FxSampleNumbers.jar" main="true"/>
</resources>
<application-desc main-class="com.sun.javafx.runtime.main.Main">
  <argument>MainJavaFXScript=it.html.javafx.sample.Numbers</argument>
</application-desc>
<update check="background">
</jnlp>

Midlet

Per integrare il programma in un dispositivo mobile, bisogna creare il descrittore del jar, HelloWorld.jad, ad esempio:

MIDlet-Name: Numbers
MIDlet-Version: 1.0
MIDlet-Vendor: Html.it
MicroEdition-Profile: JAVAFX-1.2
MicroEdition-Configuration: CLDC-1.1
MIDlet-1: it.html.javafx.sample.Numbers_MIDlet
MIDlet-Jar-URL: FxSampleNumbers.jar
MIDlet-Jar-Size: 15153

rispetto ai precedenti esempi, in questo caso va però modificato il Manifest (Manifest.mf):

Manifest-Version: 1.0
MicroEdition-Configuration: CLDC-1.1
MIDlet-Name: Numbers
MIDlet-Vendor: Html.it
MIDlet-1: FxSampleNumbers,,it.html.javafx.sample.Numbers_MIDlet
MIDlet-Version: 1.0
MicroEdition-Profile: JAVAFX-1.2

Infine, si procede scaricando i files e installandoli. In ogni caso bisogna controllare che il dispositivo ne supporti le configurazioni (in questo caso JAVAFX-1.2 e CLDC-1.1).

Conclusioni

Questo è stato un semplice primo approccio, ma è possibile anche sfruttare le diverse librerie per realizzare, con JavaFX, animazioni, contenuti multimediali e form. Inoltre abbiamo a disposizione l'SDK integrato in NetBeans, con le impostazioni preconfezionate per i test sui dispositivi.