JavaFX har støtte for egne såkalte GUI-definisjonsfiler av typen FXML, som er XML-filer som beskriver innholdet i et GUI. Den hierarkiske strukturen av XML-elementer (tags) tilsvarer den hierarkiske strukturen av GUI-objekter, bestående av vinduer, paneler og enklere interaktive elementer som lister, tekstfelt og knapper. Ved oppstart av JavaFX-applikasjonen så lastes FXML-fila inn og alle GUI-objektene opprettes. Fordelen er at FXML-fila er lettere å skrive og vedlikeholde enn Java-koden som trengs for å opprette den tilsvarende strukturen. Under viser et GUI med kun et tekstfelt og en knapp, tilsvarende FXML-fil og java-koden
<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.TextField?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.HBox?> <HBox xmlns:fx="http://javafx.com/fxml"> <TextField text="Type something here!"/> <Button text="Click me!"/> </HBox> | public class Example1 extends Application { @Override public void start(Stage primaryStage) throws IOException { Parent root = FXMLLoader.load(this.getClass().getResource("Example1.fxml")); primaryStage.setScene(new Scene(root)); primaryStage.show(); } public static void main(String[] args) { launch(args); } } |
Det er praktisk at GUI-strukturen automatisk bygges, men det blir samtidig upraktisk å få tak i (referanser) til de interaktive GUI-elementene, så en kan få lagt til lyttere og implementert kontroller-logikk. Dersom en f.eks. skal reagere på trykk på "Click me!"-knappen, så må en lete gjennom children-lista til root-elementet og finne knappen, for så å bruke cast og legge til lytteren. Heldigvis har FXML støtte for nettopp å koble elementer i GUI-strukturen til kontroller-logikk, som vist under:
<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.TextField?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.HBox?> <HBox xmlns:fx="http://javafx.com/fxml"> <TextField fx:id="textField" text="Type something here!"/> <Button text="Click here to change to upper case" onAction="#handleUpcaseAction"/> </HBox> | public class Example2 extends Application { @Override public void start(Stage primaryStage) throws IOException { FXMLLoader fxmlLoader = new FXMLLoader(); fxmlLoader.setController(this); Parent root = (Parent) fxmlLoader.load(this.getClass().getResourceAsStream("Example2.fxml")); primaryStage.setScene(new Scene(root)); primaryStage.show(); } @FXML private TextField textField; public void handleUpcaseAction(ActionEvent event) { textField.setText(textField.getText().toUpperCase()); } public static void main(String[] args) { launch(args); } } |
Teknikken er basert på at en FXMLLoader-instans leser inn FXML-fila og underveis/i etterkant kobler elementer i FXML-fila til felt og metoder i et kontroller-objekt:
- I linje 5 til høyre registreres applikasjonsobjektet som kontrolleren for GUI-elementene som bygges basert på FXML-fila.
- I linje 8 til venstre så brukes fx:id for å knytte en id til TextField-objektet. Merk at "fx" først må være registrert som XML-namespace i en xmlns-deklarasjon, slik det gjøres i linje 7.
- I linje 11 og 12 til høyre deklareres et felt med en @FXML-annotasjon. Annotasjonen forteller FXMLLoader-en at feltet skal settes til GUI-elementet med tilsvarende id.
- I linje 9 til venstre så brukes onAction-attributtet for å angi handleUpcaseAction som kontroller-metoden for action-hendelsen til knappen. Merk #-tegnet foran metodenavnet.
- I linje 13 til høyre så deklareres en metode for å håndtere action-hendelsen. Merk at vi egentlig kan utelate parameteret, hvis det ikke brukes (som her).
Det sentrale her er registrering av kontroller-objektet og sammenhengen mellom elementer og attributter i FXML-fila og deklarasjoner i kontroller-klassen. Typen og navnet til feltene som er annotert med @FXML må stemme med henholdsvis element-navnet (tag-en) og fx:id-attributtet. Tilsvarende må navnet og signaturen til kontroller-metoden stemme med verdien til onAction-attributtet (eller generelt onXxx for Xxx-hendelsen).