- Learn
- Guida Java
- FXML: separare la UI dal modello dei dati
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:

Se vuoi aggiornamenti su Java inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Da Arduino all’industria 4.0, intervista a Massimo Banzi
Incontriamo il padre dell’IoT e del movimento dei maker, per cogliere il suo punto di vista alle soglie di quella […]