1- Premier exemple simple : HelloWorld

Pour créer une application JavaFX avec IntelliJ IDEA, il faut sélectionner dans le menu un nouveau projet (File -> new -> project). Vous obtiendrez la fenêtre suivante :

https://cours-info.iut-bm.univ-fcomte.fr/upload/supports/S4/Swing/tp1/Capture_décran_2022-03-26_à_10.05.02.png

Vous pouvez constater que dans la liste à gauche de la fenêtre, on peut choisir JavaFX comme type de projet. Mais pour les TPs, je vous déconseille de choisir cette option car à partir de la version 2021.2 d'Idea, cette option vous oblige à utiliser un système de production comme Maven ou Gradle. La présentation de tel système est hors de la portée de ce cours. Pour se passer de ces systèmes, choisissez Java comme type de projet. Vous pouvez ensuite choisir le SDK qui sera utilisé pour ce projet. Si vous choisissez une version égale ou supérieure à 11, il faut télécharger javaFX à partir de cette page. Pour éviter les problèmes d'incompatibilité, la version de javaFX doit être la même que la version du SDK java.  Si vous choisissez une version de SDK inférieure à 11, javaFX est déjà inclu dans le sdk et vous n'avez rien à télécharger. Par contre, je vous conseille d'utiliser une version récente comme vous l'avez déjà fait avec le projet de la SAE 126.

Ensuite, il faut appuyer sur le bouton next deux fois et vous aurez une fenêtre dans laquelle vous devez donner un nom à votre projet :

https://cours-info.iut-bm.univ-fcomte.fr/upload/supports/S4/Swing/tp1/Capture_décran_2022-03-26_à_10.31.19.png

Le projet sera créé mais il ne contiendra pas de fichier sources. Pour développer un premier exemple simple, créez une classe appelée HelloWorld et copiez le code suivant dans cette classe :

public class HelloWorld extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Hello World!"); //titre de la fenêtre
        Label label = new Label("Hello World"); //créer un label
        StackPane root = new StackPane(); //créer un conteneur
        root.getChildren().add(label);      //ajouter le bouton au conteneur
        primaryStage.setScene(new Scene(root, 300, 250)); //mettre le conteneur comme contenu de la fenêtre.
        primaryStage.show();
    }
}

Cet exemple définit la classe HelloWorld qui est la classe principale de l'application JavaFX et qui est une sous classe de javafx.application.Application. Cette classe redéfinit la méthode start() qui est le point d'entrée de l'application JavaFX. La méthode start() prend en paramètre la fenêtre principale primaryStage. Une scène est associée à la fenêtre et contiendra les composants graphiques de cette fenêtre. Des gestionnaires de positionnement appelés Layout sont utilisés pour placer les composants graphiques dans la scène. La méthode start() suivante crée une fenêtre qui a le titre Hello World et qui affiche aussi le label Hello World.

Dans ce premier exemple, la fenêtre principale (primaryStage) est affichée. Le contenu d'une fenêtre est défini dans un objet de la classe Scene qui est associé à cette dernière. Un objet Scene utilise des gestionnaires de positionnement (Layouts) pour positionner les composants graphiques dans le contenu de la fenêtre. Dans ce premier exemple, le layout StackPane a été utilisé. Plus d'information sur les layouts seront données dans les sections suivantes.

Si vous avez choisi un SDK égal ou supérieur à 11, l'éditeur ne va pas reconnaitre les classes de la bibliothèque javaFX. Pour régler ce problème, sélectionnez dans le menu File -> project structure. Puis dans l'élément Librairies, ajoutez en appuyant sur le bouton + la bibliothèque javaFX que vous avez téléchargée. Il faut choisir le répertoire lib de la bibliothèque javaFX. L'ajout de cette bibliothèque est affiché à la droite de la fenêtre comme suit :

https://cours-info.iut-bm.univ-fcomte.fr/upload/supports/S4/Swing/tp1/Capture_décran_2022-03-26_à_10.43.28.png

Ensuite, il faut importer toutes les classes utilisées de la bibliothèque javaFX. Faites bien attention, de ne pas importer ces classes de la bibliothèque awt qui contient des composants ayant les mêmes noms.

Si vous exécutez cet exemple avec un SDK égal ou supérieur à 11, vous aurez cette erreur : Error: JavaFX runtime components are missing, and are required to run this application. Pour régler ce problème, créez une configuration d'exécution et ajoutez les options de VM suivantes :

--module-path /path/to/javafx-sdk-17.0.1/lib --add-modules javafx.controls,javafx.fxml

Faites attention, à la place /path/to/.../lib vous mettez le chemin vers le répertoire lib de la bibliothèque javaFX que vous avez téléchargé comme dans la figure suivante :

https://cours-info.iut-bm.univ-fcomte.fr/upload/supports/S4/Swing/tp1/Capture_décran_2022-03-26_à_11.10.44.png

L'image ci-dessous est la fenêtre obtenue après la compilation et l'exécution de ce premier exemple.

https://cours-info.iut-bm.univ-fcomte.fr/upload/supports/S2/IHM/cours/bases/images/first_example.jpeg

L'interface graphique peut être représentée par un arbre appelé scene graph. Par exemple, la figure suivante présente le scene graph de l'application "Hello World" où tous les éléments JavaFX sont représentés par des noeuds dans le graphe :