...
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.
![](/wiki/download/attachments/74974061/Example1.png?version=1&modificationDate=1409578937000&api=v2) |
Code Block |
---|
language | javafxjava |
---|
title | Example1.fxml |
---|
| <?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 text="Type something here!"/>
<Button text="Click me!"/>
</HBox> 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
...
| Code Block |
---|
language | javafx |
---|
title | Example2Example1.fxml | linenumbers | true |
---|
| <?xml version="1.0" encoding="UTF-8"?>
<?emfs /fxcontroller/Example2Example1.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> | FXML-fil for eksemplet. XML-elementer (tags) svarer stort sett til GUI-elementer, hvor tag-navnet svarer til GUI-klassen. |
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:
Code Block |
---|
language | javafx |
---|
title | Example2.java |
---|
linenumbers | true |
---|
| 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);
}
} |
FXML-fil for eksemplet. XML-elementer (tags) svarer stort sett til GUI-elementer, hvor tag-navnet svarer til GUI-klassen. | Code Block |
---|
language | javafx |
---|
title | Example2.fxml |
---|
linenumbers | true |
---|
| <?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> |
TIl venstre: Kode for innlasting av FXML-fil. Koden this.getClass().getResourceAsStream("Example2.fxml") brukes for å lese inn en fil som ligger i samme mappe/pakke som klassen. |
...
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:
Code Block |
---|
Code Block |
---|
language | javafx |
---|
title | Example4.fxml |
---|
| <?xml version="1.0" encoding="UTF-8"?>
<?emfs /fxcontroller/ | .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>
language | javafx |
---|
title | Example4.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 Example4 extends Application {
@Override
public void start(Stage primaryStage) throws IOException {
Parent root = FXMLLoader.load(this.getClass().getResource("Example4.fxml"));
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
} |
| Code Block |
---|
language | javafx |
---|
title | Example4.fxml |
---|
| <?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.
...