Page History

...

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 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 vises et GUI med kun et tekstfelt og en knapp, FXML-fila som beskriver strukturen og java-koden for å laste inn FXML-fila.

<?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://javafxcom/fxml"> <TextField text="Type something here!"/> <Button text="Click me!"/> </HBox> Code Block language javafxjava title Example1.fxml . Code Block language javafx title Example1.java package fxcontroller; import java.io.IOException; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; 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); } }

Kobling mellom FXML-filer og kontroller-logikk

...

<?xml version="1.0" encoding="UTF-8"?>
<?emfs /fxcontroller/Example1.fxml; ?>
<?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 me!" onAction="#handleUpcaseAction"/>
</HBox>

Kobling mellom FXML-filer og kontroller-logikk

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:

package fxcontroller;

import java.io.IOException;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
 
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;

	@FXML
    public void handleUpcaseAction(ActionEvent event) {
        textField.setText(textField.getText().toUpperCase());
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<?emfs /fxcontroller/Example2.fxml; ?>
<?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 me!" onAction="#handleUpcaseAction"/>
</HBox>

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 17 i Example2.java registreres applikasjonsobjektet som kontrolleren for GUI-elementene som bygges basert på FXML-fila.
• I linje 8 7 i Example2.fxml 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 22 og 12 23 i Example2.java deklareres et felt med en @FXML-annotasjon. Annotasjonen forteller FXMLLoader-en at feltet skal settes til GUI-elementet med tilsvarende id.
• I linje 9 8 i Example2.fxml så brukes onAction-attributtet for å angi handleUpcaseAction som kontroller-metoden for action-hendelsen til knappen. Merk #-tegnet foran metodenavnet.
• I linje 14 25 og 15 26 i Example2.java så deklareres en metode med en @FXML-annotasjon for å håndtere action-hendelsen. Merk at vi egentlig kan utelate parameteret, hvis det ikke brukes (som her).

...

package fxcontroller;

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
public class Example3 extends Application {
    @Override
    public void start(Stage primaryStage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader();
        fxmlLoader.setController(new Example3Controller());
        Parent root = (Parent) fxmlLoader.load(this.getClass().getResourceAsStream("Example3Example2.fxml"));
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

package fxcontroller;

import javafx.fxml.FXML;
import javafx.scene.control.TextField;
 
public class Example3Controller {
    @FXML
    private TextField textField;

    @FXML
	public void handleUpcaseAction() {
        textField.setText(textField.getText().toUpperCase());
    }
}

Ulempen med flere klasser oppveies av at begge er en klart definert rolle. Det er også mulig å la FXMLLoader-en selv opprette kontroller-instansen, basert på et eget fx:controller-attributt på toppnivå-elementet i FXML-fila:

...

...

:

...

...

package fxcontroller;

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Example4 extends Application {
    @Override
    public void start(Stage primaryStage) throws IOException {
        Parent root = FXMLLoader.load(this.getClass().getResource("Example3Example4.fxml"));
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<?emfs /fxcontroller/Example4.fxml; ?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.HBox?>

<HBox xmlns:fx="http://javafx.com/fxml"
    fx:controller="fxcontroller.Example3Controller">
    <TextField fx:id="textField" text="Type something here!"/>
    <Button text="Click me!" onAction="#handleUpcaseAction"/>
</HBox>

Vi ser at navnet til kontroller-klassen brukes i FXML-fila, slik at FXMLLoader-en selv kan opprette kontroller-instansen. Kontroller-klassen er uendret, mens applikasjonsklassen blir litt enklere, f.eks. så kan den statiske load-metoden i FXMLLoader-klassen brukes‚ siden vi ikke trenger å registrere kontrolleren.

...