FXML: separare la UI dal modello dei dati
Il linguaggio FXML
Il linguaggio FXML permette di separare la presentazione dalla logica applicativa di un software scritto con JavaFX.
Un file FXML descrive il layout di una GUI permettendo l’implementazione del pattern MVC, per illustrare le basi di questo linguaggio riprendiamo il convertitore Gradi-Radianti e definiamone l’UI.
Nel package di default del progetto NetBeans definiamo il file form1 con estensione fxml aggiungendo al suo interno le righe di codice:
<?xml version="1.0" encoding="UTF-8"?>
<?language JavaScript?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.text.Text?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.effect.Reflection?>
Quindi: definiamo un file xml con il classico tag iniziale,
specifichiamo di voler utilizzare Javascript nel file fxml
e inseriamo una serie di import dei tag
corrispondenti ai controlli JavaFX utilizzati per il convertitore.
Sappiamo che il tag di layout BorderPane è anche
il tag root da cui discende tutta l’alberatura dell’interfaccia, iniziamo quindi con l’aggiungerlo:
<BorderPane id="borderPane" xmlns:fx="http://javafx.com/fxml">
<stylesheets>
<URL value="@form.css"/>
</stylesheets>
<padding>
<Insets top="10" bottom="50" left="50" right="50" />
</padding>
</BorderPane>
Da notare che la sintassi per l’importazione del file CSS prevede
il riferimento ad un file situato nella stessa posizione del file fxml.
Continuiamo inserendo il tag top
del BorderPane immediatamente dopo il tag padding. All’interno del top aggiungiamo una text
per il titolo del programma e un’altra (txtMsg) per mostrare un messaggio all’utente:
<top>
<VBox>
<padding>
<Insets top="10" bottom="50" left="50" right="50" />
</padding>
<Text id="text" text="Convertitore da gradi a radianti">
<font>
<Font name="Arial Black" size="28.0"/>
</font>
<effect>
<DropShadow offsetX="3" offsetY="3" />
</effect>
</Text>
<Text fx:id="txtMsg" text="" fill="yellow">
<font>
<Font name="Arial Black" size="14.0"/>
</font>
</Text>
</VBox>
</top>
Rispetto alla versione originaria del programma decidiamo di utilizzare un layout VBox per far in modo che i controlli del titolo e del messaggio compaiano uno sotto l’altro.
Completiamo l’interfaccia con l’utilizzo del tag center e del tag GridPane
per aggiungere label, aree di testo per l’inserimento dei dati e un pulsante per la logica di calcolo. Il tag center
deve chiaramente seguire il tag top:
<center>
<GridPane id="gridPane" hgap="5" vgap="5">
<effect>
<Reflection fraction="0.7" />
</effect>
<padding>
<Insets top="20" bottom="20" left="20" right="20" />
</padding>
<Label text="Gradi" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<TextField fx:id="txtGradi" GridPane.rowIndex="0" GridPane.columnIndex="1" />
<Label text="Radianti" GridPane.rowIndex="1" GridPane.columnIndex="0" />
<TextField fx:id="txtRadianti" GridPane.rowIndex="1" GridPane.columnIndex="1" />
<Button fx:id="button" text="Calcola" GridPane.rowIndex="1" GridPane.columnIndex="2" />
</GridPane>
</center>
Facciamo notare l’utilizzo di GridPane.rowIndex e GridPane.columnIndex
per specificare una posizione all’interno del layout GridPane per ciascuno dei controlli aggiunti.
Javascript e file FXML
Come anticipato un file FXML consente di utilizzare Javascript per inserire la logica all’interno del file stesso. Vediamo un esempio di utilizzo di Javascript definendo una funzione che implementi la logica di calcolo.
Chiamiamo la funzione calcola e facciamo in modo che venga invocata
al click del button. Affinchè questo avvenga abbiamo bisogno di inserire l’attributo onAction="calcola();"
nel tag button. Inseriamo quindi il codice Javascript utilizzando il tag script:
<Button fx:id="button" text="Calcola" GridPane.rowIndex="1" GridPane.columnIndex="2"
onAction="calcola();" />
<fx:script>
function calcola() {
txtMsg.setText("");
if( !isNaN(txtGradi.getText()) && !txtGradi.getText().isEmpty() )
txtRadianti.setText(txtGradi.getText()*3.14/180);
else{
txtMsg.setText("Errore: inserire un valore numerico per i gradi");
}
}
</fx:script>
Per poter vedere in azione l’interfaccia creata,realizziamo una classe applicativa JavaFX di nome GradiRadiantiFXMLJavaFX
con il seguente codice all’interno del metodo start:
primaryStage.setTitle("Convertitore da gradi a radianti");
FXMLLoader loader = new FXMLLoader(getClass().
getClassLoader().getResource("Form1.fxml"));
BorderPane root = (BorderPane) loader.load();
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.setResizable(false);
primaryStage.show();
Eseguendo l’applicazione dovremmo avere una schermata simile alla seguente:
