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.

JavaFX components

Albero delle componenti di JavaFX

I componenti chiave su cui si basa JavaFX sono essenzialmente tre:

  • 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

Realizzazione di GUI FXML mediante JavaFX Scene Builder

GUI della calcolatrice in JavaFX Scene Builder

Tale file FXML può essere scaricato al seguente link. Una volta scaricato il file ed aperto con JavaFX Scene Builder vi invito a porre la vostra attenzione su alcuni punti dell’interfaccia grafica, così poi potrete realizzare senza problemi le vostre applicazioni JavaFX.
1. Identificazione Elementi
Cliccando su una delle tre TextField e spostandovi nella scheda Code sul menù accordion situato sulla destra vedrete che nel campo fx:id è settato il valore txt1, tale valore ci servirà poi nel controller per identificare univocamente tale TextField. Stesso ragionamento viene ripetuto per la seconda TextField (operando 2) e per la TextField (Risultato).
2. Associazione degli eventi
Ora occorre associare gli eventi ai bottoni relativi alle operazioni sempre dirigendovi nella sezione Code dopo aver selezionato uno dei quattro bottoni vedrete che quì oltre ad fx:id è stato settato anche il campo On Action che corrisponde al metodo invocato nel Controller nel momento in cui linkeremo tale file nel nostro JavaFX Project.
II STEP: Spostiamoci all’interno di Eclipse
Realizziamo una nuova JavaFX Application andando su File->New->Other->JavaFX->JavaFX Project quì andiamo sempre avanti fino alla schermata sulla destra, ora selezioniamo Language->FXML ed attribuiamo un nome sia al file FXML sia al Controller, nella casella Root-Type ci va bene javafx.scene.layout.BorderPane in quanto il Pane di root in questo caso è proprio un BorderPane. Magari assegnamo anche un nome migliore al package il mio è it.univaq.mwt.javafx e clicchiamo su Finish.
Il Controller in JavaFX funge da insieme di EventHandler, che si occupano della gestione degli eventi.
Realizzazione di un nuovo progetto JavaFX

Pane del nostro file FXML


Così noteremo che nel nostro progetto Eclipse sono state creati:

  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.

JavaFX Scene Builder ultima modidfica: 2015-01-29T18:45:37+01:00 da Gianluca Di Vincenzo
Posted in: Java

By on 29 Gennaio 2015

Tagged: , , , , , , ,