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.
