FAQ JavaFXConsultez toutes les FAQ

Le FXML est un format de fichier propre à JavaFX et servant, entre autres, à définir des interfaces graphiques. Ce format utilise tout simplement une syntaxe XML.

Prenons par exemple le fichier FXML suivant :

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="UTF-8"?> 
  
<?import java.lang.*?> 
<?import java.util.*?> 
<?import javafx.scene.*?> 
<?import javafx.scene.layout.*?> 
  
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"/>

Pour tester si le FXML est supporté par votre plateforme, vous pouvez invoquer la méthode isSupported() de la classe javafx.application.Platform en lui passant en paramètre la valeur javafx.application.ConditionalFeature.FXML :

Platform.isSupported(ConditionalFeature.FXML);

Pour charger un fichier FXML, vous devez utiliser un chargeur, un objet de type javafx.fxml.FXMLLoader. Vous devez initialiser cet objet avec l'URL d’accès à votre fichier FXML et ensuite invoquer sa méthode load() pour charger le fichier. Si elle s’exécute correctement, cette méthode retourne l'objet défini en nœud racine dans le fichier FXML.

Il est possible de récupérer un fichier FXML à charger de trois manières :

• le fichier FXML peut être empaqueté dans une bibliothèque ou une application et récupéré via le mécanisme des ressources ou des ClassLoader.
  
  Par exemple :
  
  

  Code Java :

  Sélectionner tout

  1
  2
  3
  final URL fxmlURL = getClass().getResource("monFXML.fxml"); 
  final FXMLLoader fxmlLoader = new FXMLLoader(fxmlURL); 
  final Node node = fxmlLoader.load();

  
  Ici, nous chargeons notre fichier FXML depuis les ressources du projet inclus dans le fichier JAR de l'application ou de ses dépendances ;
• le fichier FXML peut être situé sur un disque local et peut être référencé par les classes File, Path, URI ou URL.
  
  Par exemple :
  
  

  Code Java :

  Sélectionner tout

  1
  2
  FXMLLoader fxmlLoader = new FXMLLoader(new File("monFXML.fxml").toURI().toURL()); 
  final Node node = fxmlLoader.load();

• le fichier FXML peut être hébergé sur un site web distant et on peut y accéder par une String ou une URL contenant son chemin d’accès.
  
  Par exemple :
  
  

  Code Java :

  Sélectionner tout

  1
  2
  FXMLLoader fxmlLoader = new FXMLLoader(new URL("http://monsite/monFXML.fxml")); 
  final Node node = fxmlLoader.load();

  
  

Cette erreur indique que le FXMLLoader ne trouve pas votre fichier FXML. Vérifiez que le chemin donné est correct ou que l'objet de type URL retourné par le mécanisme d’accès aux ressources n'a pas une valeur égale à null (auquel cas, le fichier FXML n'est pas présent dans votre fichier JAR ou votre chemin d’accès n'est pas valide).

Pour définir des chaines de texte internationalisées (I18N, L10N) dans un fichier FXML, vous devez préfixer le texte par le caractère %. Lors du chargement du fichier, le chargeur tentera alors de substituer le texte internationalisé.

Par exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>  
  
<?import java.lang.*?>  
<?import java.util.*?>  
<?import javafx.scene.*?>  
<?import javafx.scene.control.*?>  
<?import javafx.scene.layout.*?>  
  
<AnchorPane id="AnchorPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">   
    <children>  
        <Label text="%hello.message"/>  
    </children>  
</AnchorPane>

hello.message=Salut le monde !

hello.message=Hello World!

Pour charger un fichier FXML contenant des chaines de texte internationalisées (I18N, L10N), vous devez initialiser votre FXMLLoader en lui passant en second paramètre un objet de type ResourceBundle.

Par exemple :

1
2
3
4
final URL fxmlURL = getClass().getResource("monFXML.fxml");  
final ResourceBundle bundle = ResourceBundle.getBundle("monpackage.monbundle"); 
final FXMLLoader fxmlLoader = new FXMLLoader(fxmlURL, bundle);  
final Node node = fxmlLoader.load();

Cette erreur indique que votre FXML contient des chaines de texte internationalisées (I18N, L10N), mais que vous n'avez pas fourni à votre FXMLLoader un ResourceBundle qui permettrait de les résoudre au chargement du fichier.

Pour inclure une ressource média ou une image (c'est-à-dire que le média ou l'image est empaqueté en tant que ressource de l'application) dans un fichier FXML, il faut préfixer le chemin relatif donné en valeur de la propriété url avec le caractère @.

Par exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="UTF-8"?> 
  
<?import java.lang.*?> 
<?import java.util.*?> 
<?import javafx.scene.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 
<?import javafx.scene.image.*?> 
  
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"> 
   <children> 
      <ImageView fitHeight="150.0" fitWidth="200.0"> 
         <image> 
            <Image url="@image.png" /> 
         </image> 
      </ImageView> 
   </children> 
</AnchorPane>

Pour inclure un fichier FXML dans un autre fichier FXML, il faut déclarer un élément de type <fx:include>. Cet élément référence le chemin d’accès vers le fichier inclus dans son attribut source.

Prenons ce simple fichier FXML qui sera le fichier secondaire, test.fxml :

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="UTF-8"?> 
  
<?import java.lang.*?> 
<?import java.util.*?> 
<?import javafx.scene.*?> 
<?import javafx.scene.layout.*?> 
  
<AnchorPane id="AnchorPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"/>

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="UTF-8"?> 
  
<?import java.lang.*?> 
<?import java.util.*?> 
<?import javafx.scene.*?> 
<?import javafx.scene.layout.*?> 
  
<AnchorPane id="AnchorPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"> 
    <children> 
        <fx:include source="test.fxml"/> 
    </children> 
</AnchorPane>

Il est possible d'utiliser des langages de script pour écrire des actions à effectuer, par exemple en cas de clic sur des boutons, directement dans le fichier FXML.

Par exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="UTF-8"?> 
  
<?import java.lang.*?> 
<?import java.util.*?> 
<?import javafx.scene.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 
  
<?language javascript?> 
  
<StackPane id="StackPane" prefHeight="200.0" prefWidth="200.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"> 
    <fx:script> 
        function sayHello() { 
            print("Salut le monde !"); 
        } 
    </fx:script> 
    <children> 
        <Button text="Dire "Salut"" onAction="sayHello()"/> 
    </children> 
</StackPane>

1
2
3
4
5
6
7
8
final URL fxmlURL  = getClass().getResource("fxmljavascript.fxml"); 
final FXMLLoader fxmlLoader = new FXMLLoader(fxmlURL); 
final Node node = fxmlLoader.load(); 
final StackPane root = new StackPane(node); 
final Scene scene = new Scene(root, 300, 250); 
primaryStage.setTitle("Test sur FXML et JavaScript"); 
primaryStage.setScene(scene); 
primaryStage.show();

Il est possible de référencer et de manipuler des objets qui sont définis dans le FXML directement depuis le code du script inclus dans ce même fichier. Pour ce faire, il faut utiliser l'attribut fx:id pour donner un nom unique à chaque élément du document. On peut alors utiliser ce nom en tant que variable dans le code du script pour invoquer des méthodes sur les objets référencés.

Par exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="UTF-8"?> 
  
<?import java.lang.*?> 
<?import java.util.*?> 
<?import javafx.scene.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 
  
<?language javascript?> 
  
<StackPane id="StackPane" prefHeight="200.0" prefWidth="200.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"> 
    <fx:script> 
        function sayHello() { 
            print("Salut le monde !"); 
            helloButton.setStyle("-fx-base: red;"); 
        } 
    </fx:script> 
    <children> 
        <Button fx:id="helloButton" text="Dire "Salut"" onAction="sayHello()"/> 
    </children> 
</StackPane>

Il est possible d'externaliser le script hors du fichier FXML ce qui permet de découpler plus aisément la partie vue (le FXML) et son contrôleur (le script). Lorsque le code a été déplacé dans un fichier externe, il suffit de déclarer le chemin d’accès vers le script dans l'attribut source de l’élément <fx:script>. Ce chemin peut être une URL vers un site distant, une URI sur un fichier local ou un chemin relatif dans les ressources de l'application.

Par exemple, nous avons déplacé le code vers un fichier script.js :

1
2
3
4
function sayHello() { 
    print("Salut le monde !"); 
    helloButton.setStyle("-fx-base: red;"); 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="UTF-8"?> 
  
<?import java.lang.*?> 
<?import java.util.*?> 
<?import javafx.scene.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 
  
<?language javascript?> 
  
<StackPane id="StackPane" prefHeight="200.0" prefWidth="200.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"> 
    <fx:script source="script.js"/> 
    <children> 
        <Button fx:id="helloButton" text="Dire "Salut"" onAction="sayHello()"/> 
    </children> 
</StackPane>

A priori, n'importe quel langage de script qui fonctionne sur la JVM (Groovy, Scala, Ruby, Python, R, etc.), même s'il requiert l'utilisation de bibliothèques tierces, peut être utilisé. Il faudra cependant veiller à ce que moteur de script soit correctement implémenté en suivant les directives de la JSR223 et que les fichiers JAR nécessaires à l'initialisation et au fonctionnement du moteur de script soient sur le CLASSPATH lors du chargement du fichier FXML.

Cependant, en pratique, le degré d’implémentation de la JSR et de maturité de l’interpréteur fait que le support de tel ou tel langage puisse être partiel ou carrément non fonctionnel.

De manière générale, le support de l'utilisation du langage JavaScript dans du FXML est pleinement fonctionnel dans les JDK7 (rhino) et JDK8 (nashorn).

Il est possible d'injecter le nœud racine d'un document FXML. Pour cela, nous allons écrire le fichier FXML en utilisant l’élément <fx:root>, puis nous allons injecter un nœud du même type en invoquant la méthode setRoot() du FXMLLoader avant d'invoquer sa méthode load().

Prenons le fichier FXML suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="UTF-8"?> 
  
<?import java.lang.*?> 
<?import java.util.*?> 
<?import javafx.scene.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 
  
<fx:root type="javafx.scene.layout.VBox" id="root" spacing="10" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> 
    <Button fx:id="button1" text="Button1"/> 
    <Button fx:id="button2" text="Button2"/> 
    <Button fx:id="button3" text="Button3"/> 
    <Button fx:id="button4" text="Button4"/> 
    <Button fx:id="button5" text="Button5"/> 
</fx:root>

1
2
3
4
5
6
final URL fxmlURL = getClass().getResource("testroot.fxml"); 
final FXMLLoader fxmlLoader = new FXMLLoader(fxmlURL); 
final VBox newRoot = new VBox(); 
fxmlLoader.setRoot(newRoot); 
final Node node = fxmlLoader.load(); 
System.out.println(newRoot == node);