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:

Figura 1. Installare il 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.

Figura 2. Impostare le variabili d’ambiente

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

Figura 3. La perspective di JavaFX

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.

Figura 4. I template JavaFX

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.

Figura 5. Creare un progetto JavaFX

Questa fase produce un progetto con le seguenti directory:

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)

Figura 6. Proprietà del template

Configurazioni per l’esecuzione

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

Figura 7. Configurare il tipo di applicazione

Figura 8. Emulatore per applicazioni Mobile

Un esempio di applicazione

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

Figura 9. Creare un file JavaFX vuoto

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.

Figura 10. Impostare le proprietà di un 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.