Eclipse plug-in per JavaFX

In questo articolo analizziamo le funzionalità del plug-in per Eclipse di JavaFX, trattando i seguenti punti:

• installazione e configurazione del plug-in, provvisto di un esempio specifico per una versione di Eclipse e di JavaFX
• panoramica sul plug-in: la perspective, le nuove finestre, la configurazione dell’ambiente di runtime e la gestione del progetto
• utilizzo del plug-in come supporto alle attività di sviluppo, con la realizzazione di un breve esempio

Installazione del plug-in

Il plug-in di JavaFX per Eclipse permette di agevolare lo sviluppatore nella creazione di un’applicazione per questo linguaggio sfruttando il potenziale di Eclipse.

Si assume che lo sviluppatore abbia a disposizione una versione recente di Eclipse e la Javafx-sdk sul proprio sistema.

A questo punto, il passo successivo è installare il plug-in per JavaFX, quindi da menu Help > Install New Software > Add... e nella maschera inseriamo:

Name	JavaFX
Location	http://javafx.com/downloads/Eclipse-plugin/

Nota: queste informazioni potrebbero subire variazioni, in quanto valgono per la versione 3.5.1 di “Eclipse for JEE” e per il plug-in JavaFXFeatures v.1.2.1

Al termine del download del pacchetto dobbiamo riavviare l’IDE per aggiornare le modifiche. Prima di cominciare, impostiamo JAVAFX_HOME o come variabile di ambiente del sistema operativo o come ClassPath Variable di Eclipse, indicando il percorso della nostra installazione dell’SDK. Se non effettuiamo questa impostazione risultano non configurati sia i builder del progetto, sia i parametri di esecuzione.

A questo punto l’installazione e la configurazione del plug-in è completata. Abbiamo a disposizione una nuova perspective:

Si presenta con la sezione Snippets arricchita da diversi gruppi di componenti, oltre a quelli già presenti, che permettono di velocizzare la creazione di oggetti sull’editor. Nella costruzione di un progetto pilota ne vedremo l’utilizzo.

Inoltre sono stati aggiunti i template JavaFX nel menu File > New.., che ci consentono di creare un progetti di tipo JavaFX, esempi completi e funzionanti da cui poter partire per la realizzazione delle nostre applicazioni.

Template	Descrizione
Empty JavaFX Script	crea un file con estensione .fx vuoto
“Hello” Stage JavaFX Script	crea un file Javafx col Template Hello World di default

Ecco il codice generato con il template “Hello World”:

package it.html.tutorials.javafx;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
/**
 * @author HTML.IT
 */
Stage {
    title: "Application title"
    width: 250
    height: 80
    scene: Scene {
        content: Text {
            font : Font {
                size : 24
            }
            x: 10, y: 30
            content: "Application content"
        }
    }
}

Gestione del progetto

Quando creaimo un nuovo progetto, scegliendo JavaFX Project da menu File > New..., abbiamo la possibilità di sceglierne la natura, tra il profilo Desktop (stand alone, applet, web start) e Mobile. In questo modo stabiliamo la configurazione di esecuzione di default, che va comunque confermata, e non è univoca.

Questa fase produce un progetto con le seguenti directory:

Directory	Descrizione
src	contiene i sorgenti
temp	contiene i compilati dal builder di JavaFX
dist	contiene gli archivi generati nelle distibuzioni
bin	i compilati dal builder di Java (editabile dalla sezione Java Build Path)

Nota: temp e dist non sono visibili dell’IDE dalla vista Navigator, ma sono presenti sul filesystem

Nelle proprietà del progetto, abbiamo a disposizione la voce JavaFX Default, dove possiamo effettuare impostazioni specifiche:

• JAVAFX_HOME
• Metadati dell’applicazione
• Valori dell’applet
• Parametri di firma
• Avanzate (Modalità di compressione)

Configurazioni per l’esecuzione

Come abbiamo accennato in precedenza, possiamo scegliere tra diverse modalità di esecuzione:

Modalità	Descrizione
Desktop profile – Run as Application	esecuzione dell’applicazione stand alone
Run as Applet	apre l’applicazione come applet. Nella seconda tab della figura possiamo impostare le dimensioni
Run with Web Start	lancia l’applicazione nel contesto web start
Run in Emulator	esegue lo script come applicazione per dispositivi mobili, utilizzando l’emulatore

Un esempio di applicazione

Dopo aver creato un progetto, creiamo un nuovo file JavaFX vuoto, usando Empty JavaFX script.

Dal menu Snippet, selezioniamo la voce Stage all’interno del tag Application, e lo trasciniamo sull’editor. Apparirà la seguente finestra che ci permette di impostare i parametri iniziali dell’oggetto.

Questo meccanismo vale anche per le altre voci di menu.

Stage {
    title : "Hello"
    scene: Scene {
        width: 200
        height: 200
        content: [ ]
    }
}

Quando vogliamo aggiungere componenti, occorre ricordare che non siamo in un ambiente grafico, quindi dobbiamo fare attenzione alla posizione in cui inseriamo gli oggetti nel contesto dell’editor.

Per completare l’esempio, aggiungiamo all’interno dell’array, nella voce content, i componenti che desideriamo: volendo aggiungere del testo, selezioniamo Text dal menu Snippets (sotto la voce Basic Shape) e facciamo il drag’n’drop. Allo stesso modo aggiungiamo un paio di eventi. Avremo con pochi click:

package it.html.tutorials.javafx;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.ext.swing.SwingButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
var text = "Hello JavaFX!";
/**
 * @author Html.it 
 */	
var stage = Stage {
    title : "Event viewer"
    scene: Scene {
        width: 300
        height: 200
        content: [ 
        	Rectangle {
                width: 300,
	        	height: 200,
	            fill : LinearGradient {
                    startX: 0.0,
                    startY: 1.0,
                    endX: 1.0,
                    endY: 0.0,
                    stops: [
                        Stop {
                            color: Color.BISQUE,
                            offset: 0.0
                        },
                        Stop {
                            color: Color.BLUE,
                            offset: 1.0
                        },
                    ]
                }
		    onMouseEntered: function( e: MouseEvent ): Void {
		     	text = "event: onMouseEntered"
		    }onMouseExited : function( e: MouseEvent ): Void {
		     	text =  "Hello JavaFX!"
		    }onMousePressed: function( e: MouseEvent ): Void {
	          	text = "event: onMousePressed"
		    }
	        }
        	,
        	Text {
	            font: Font {
	                size: 24
	            },
	            x: 10,
	            y: 30,
	            content: bind text
        	}
        ]
    }
}

Per mandarlo in esecuzione, possiamo usare lo shortcut da tasto destro sull’editor (Run As), o andare nella sezione Run Configuration.

Per esportare l’applicazione, non è prevista nessuna configurazione dell’Export di Eclipse, ma troviamo i pacchetti nella directory dist del progetto.

Conclusioni

Il plug-in risulta ancora un po’ primitivo: può essere d’aiuto nella costruzione del codice, ma non nella sua gestione.

Gli Snippets aumentano la produttività, grazie alle finestre di pop-up contestuali è possibile impostare i parametri principali degli oggetti, il ché favorisce chi si accosta a questa tecnologia per la prima volta.

Poiché non siamo di fronte ad un tool grafico, bisogna intervenire comunque spesso a mano.

Infine, non abbiamo la possibilità di fare refactoring né di ispezionare i riferimenti degli oggetti nel progetto, quindi non sono sfruttati i punti di forza di Eclipse. Anche l’auto-completamento dei metodi e delle variabili non sembra funzionare in tutti i casi.