JavaFX Scene Builder

Dopo aver configurato e(fx)clipse come da tutorial al link https://www.gianlucadivincenzo.it/java/configurazione-javafx/ vediamo come realizzare una prima piccola applicazione con JavaFX.

Albero delle componenti di JavaFX

• Stage: dove viene visualizzata la nostra applicazione (es.finestra di Windows).
• Scene: contenitore dei nodi della nostra “pagina” applicativa.
• Node: elemento dello Scene, dotato di un aspetto visivo e di un comportamento.

Siccome aggiungere elementi visivi a JavaFX mediante codice risulta essere noioso, ripetitivo ed implica maggior dispendio di tempo è quindi preferibile realizzare GUI mediante JavaFX Scene Builder, a tal proposito esiste un apposito oggetto di JavaFX lo FXMLoader che linka le nostre interfacce FXML mediante un Controller che fungerà da ricettore degli eventi innescati dall’utente.
Supponiamo di voler realizzare una semplice calcolatrice che calcola somma/sottrazione/moltiplicazione e divisione di due operandi. Realizziamo il tutorial per step:
I STEP: Realizzazione dell’interfaccia grafica FXML

GUI della calcolatrice in JavaFX Scene Builder

Pane del nostro file FXML

1. Un Main, per il run del progetto JavaFX.
2. Una classe Controller, che si occuperà di intercettare gli eventi.
3. Un file CSS, per lo stile degli elementi che fanno parte del layout della nostra applicazione.
4. Un file FXML, che definisce il layout dell’applicazione.

III STEP: Linkiamo il Controller al file FXML
La classe Main non deve essere toccata in quanto il linking tra Main e file FXML viene automaticamente fatto da e(fx)clipse, mediante l’oggetto FXMLoader discusso in precedenza.

BorderPane root = (BorderPane) FXMLLoader.load(getClass().getResource("file_fxml.fxml"));

A questo punto occupiamoci del collegamento tra tale file fxml e il Controller, già creato, per fare ciò torniamo un attimo nel programma JavaFX Scene Builder aprendo il file FXML che hai scaricato prima.
Quì recati in View->Show Sample Controller Skeleton spuntiamo Comments e Full poi selezioniamo tutto cliccando su Copy, torniamo nell’IDE ed incolliamo tutto questo codice nel nostro Controller. Attenzione potrebbe essere possibile rinominare la classe Controller nell’IDE di e(fx)clipse.
Ma non è finita quì, sono necessari altri due passaggi per espletare tale task.
Chiudete JavaFX Scene Builder ed aprite il file FXML mediante un editor che vi consenta di visualizzare il codice. Personalmente utilizzo XMLSpy (Tutorial XMLSpy) per file XML e derivati, se interessati a tale programma contattatemi privatamente per la versione craccata, ma anche un semplice Notepad++ andrà bene. Copiate tutto il contenuto di tale file ed incollatelo nel file FXML presente nel vostro progetto JavaFX.
A questo punto, l’editor non vi servirà più, aggiungiamo ora al file FXML del nostro progetto il path del Controller. Per fare ciò occorre aprirlo dall’IDE e semplicemente aggiungere al primo tag del file fxml, ossia BorderPane, il path nell’attributo fx:controller, come potete notare quì sotto.

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity"
	minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0"
	prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
	fx:controller="it.univaq.mwt.javafx.business.controller.CalcolatriceSelectController">
        .....
</BorderPane>

IV STEP: Gestione degli eventi
A questo punto effettuando il Run As->Java Application dopo aver cliccato con il tasto dx del mouse sulla classe Main.java, potrete già visualizzare la vostra GUI. Ma essa è ancora priva di interazione in quanto i metodi corrispondenti agli On Action discussi nel I STEP non sono ancora stati realizzati.
L’implementazione di tali metodi viene fatta nella classe Controller. Ad esempio al bottone con fx:id=”btnPiu” è collegato il metodo “doButtonPiu” già previsto nel controller.
Ecco una semplice implementazione del bottone +.

@FXML
void doButtonPiu(ActionEvent event) {
     try {
         int operando1 = Integer.parseInt(txt1.getText());
	 int operando2 = Integer.parseInt(txt2.getText());
	 risultato.setText("" + (operando1 + operando2));
     } catch (NumberFormatException e) {
	 risultato.setText("Operaione Invalida");
         e.printStackTrace();
     }
}

Come è semplice comprendere tale metodo/evento del controller prende il contenuto dei TextField txt1 e txt2 rispettivamente ne effettua la conversione ad integer e ne calcola la somma depositandola nella TextField risultato.
Facile no! Vi lascio a voi se incuriositi l’implementazione dei restanti metodi doButtonMeno, doButtonPer e doButtonDiviso.
Inoltre al seguente link è possibile scaricare tale semplice progetto JavaFX da me realizzato.
Per importarlo unzippatelo nel vostro workspace di e(fx)clipse e dall’IDE di Eclipse fare, File->Import->Existing Projects into Workspace. Ma non fermiamoci qua con JavaFX, vedremo infatti nel prossimo tutorial come far interagire l’applicazione JavaFX con un database MySql, continua.