ULille - IUT de Lille - Département informatique - N2 - R2.02
2022-2023 
Interaction Humain-Machine


TP : Gestion du placement de widgets

Vous trouverez une version de ce document au format PDF ici.

Objectifs

Travail à réaliser :

1 Hello JavaFX

D’une manière générale votre code pourra s’inspirer de l’exemple minimal suivant:

import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class SimpleScene extends Application { public void start(Stage stage) { VBox root = new VBox(); Label msg = new Label("Hello JavaFX"); root.getChildren().add(msg); Scene scene = new Scene(root, 300, 50); stage.setScene(scene); stage.setTitle("Hello JavaFX"); stage.show(); } public static void main(String[] args) { Application.launch(args); } }

En salles TP, si ce n’est pas déjà fait, commencez par configurer votre proxy dans Eclipse en allant dans Preferences > General > Network Connections. L’adresse du proxy est cache.univ-lille.fr sur le port 3128. Dans l’interface, n’oubliez pas de choisir Manual pour Active Provider. Faites ces réglages pour http et https.

2 Configuration d’Eclipse

A partir de Java 11, JavaFX n’est plus intégrée au JDK. Il faut donc installer JavaFX séparément et configurer Eclipse en conséquence. La procédure a été testée avec succès avec Eclipse 2020-12 et le JDK 11.

A faire une fois pour un workspace donné :

  1. (Non nécessaire en salle TP) Téléchargez le JavaFX SDK pour votre système et décompressez l’archive à un endroit connu.
  2. Dans Eclipse, allez dans les préférences et cherchez ⁠User librairies (Figure 1 gauche). Créez une nouvelle librairie que vous appellerez JavaFX. Cliquez ensuite sur ⁠Add external JARs, naviguez à l’endroit où vous avez décompressé le SDK jusqu’au répertoire ⁠lib et sélectionnez l’ensemble des fichiers jar. Dans les salles TP, le répertoire se trouve à l’adresse suivante :
    /home/public/javafx-sdk-17.0.2/lib/
Figure 1: Ajout de JavaFX comme User library (gauche). Configuration du Java Build Path pour un projet (droite).

Ensuite, pour chaque projet créé, il faut :

  1. Créez un nouveau projet Java puis ajoutez une classe ⁠SimpleScene (par exemple). Copiez-collez le code ci-dessus. Pour l’instant le code ne peut pas compiler. Si un fichier module-info.java est présent, supprimez-le.
  2. Configurez le ⁠Java Build Path du système. Si nécessaire, cliquez d’abord sur Add Library > JRE System Library et choisir JRE 11 ou supérieur. Choisir ensuite Add Library > User Library > JavaFX (configurée avant dans les préférences).
  3. Lors du lancement d’une Application, vous aurez certainement le message d’erreur suivant
    ⁠Error⁠: JavaFX runtime components are missing⁠, and are required to run this application. Il faut aller dans ⁠Run Configurations (petite flèche vers le bas, à droite du bouton vert run) et choisir l’onglet Arguments et ajouter dans ⁠VM arguments :
    --module-path /home/public/javafx-sdk-17.0.2/lib/ --add-modules javafx.controls,javafx.fxml en prenant soit de modifier le chemin vers celui où vous avez installé JavaFX et décocher la case Use the -XstartOnFirstThread argument when lauching SWT si elle est présente. Sur macOS, ajoutez l’option -Dprism.lcdtext=off si vous rencontrez des artefacts visuels sur l’interface.
Figure 2: Ajout de JavaFX comme User library (gauche). Configuration du Java Build Path pour un projet (droite).

Pour éviter de devoir configurer les VM arguments à chaque fois, vous pouvez créer une VM dédiée avec les bons arguments de la façon suivante :

3 ⁠Stage

L’objet Stage est le conteneur principal qui est habituellement une fenêtre avec des bordures.

Q 1. Testez les différentes méthodes disponibles pour mettre la fenêtre en plein écran, toujours devant les autres fenêtres, régler son degré d’opacité (ne fonctionne pas sur les machines des salles de TP) et la rendre non redimensionnable. Testez également les différents styles de fenêtres (decorated, undecorated, transparent, utility).

Q 2. Ajoutez une seconde fenêtre modale à la première (notion vue en cours). Vous utiliserez pour cela les méthodes initOwner et initModality.

Q 3. La fenêtre apparaît par défaut centrée à l’écran. Utilisez les méthodes setX et setY pour positionner la fenêtre modale juxtaposée à droite de la fenêtre parente.

4 Gestionnaires de placement

Le gestionnaire de placement (layout) a pour rôle de gérer la position des composants d’une interface. Différents gestionnaires de placement existent, chacun représentant une stratégie de placement particulière.

4.1 ⁠FlowPane

Q 4. FlowPane permet de placer les noeuds les uns à côté des autres, de gauche à droite par défaut. Ajoutez 10 boutons dans un FlowPane de manière à obtenir le résultat visible Figure 3. Observez comment évolue la position des boutons quand vous redimensionnez la fenêtre. Pour modifier les marges, utilisez la méthode statique setMargin de FlowPane.

4.2 ⁠HBox et ⁠VBox

Q 5. Testez de la même façon Hbox et VBox.

4.3 ⁠BorderPane

Q 6. Ce gestionnaire de placement utilise 5 positions pour placer les composants. Ajoutez un bouton dans chaque emplacement. Notez comment les boutons sont positionnés ainsi que leurs dimensions. Pour obtenir le résultat représenté Figure 3, modifiez la taille maximale des boutons avec la méthode setMaxSize et en passant comme paramètres ⁠Double⁠.⁠MAX_VALUE. Pour modifier les marges, utilisez la méthode statique setMargin de BorderPane.

Figure 3: Illustration de ⁠FlowPane et ⁠BorderPane

4.4 ⁠TilePane

Q 7. Ajoutez 16 boutons dans un TilePane de manière à obtenir le résultat visible Figure 4. Vous utiliserez à nouveau setMaxSize pour que les boutons aient tous la même taille.

4.5 ⁠GridPane

Q 8. Ajoutez 10 boutons dans un GridPane de manière à obtenir le résultat visible Figure 4. Vous utiliserez à nouveau setMaxSize pour qu’un bouton puisse occuper plusieurs lignes ou colonnes.

Figure 4: Illustration de ⁠TilePane et ⁠GridPane

4.6 Positionner manuellement les noeuds

Q 9. Utilisez Pane pour positionner manuellement 2 boutons en utilisant les méthodes setLayoutX et setLayoutY, de manière à obtenir un résultat similaire à la figure 5.

Figure 5: Illustration de ⁠Pane

5 Un éditeur de texte

Q 10. Proposez une hiérarchie de composants pour reproduire l’interface d’un éditeur de texte représenté Figure 6.

Q 11. Implémentez la proposition. Pour le menu, vous utiliserez MenuBar à laquelle vous ajouterez des MenuItems. Les séparateurs dans les menus s’obtiennent en utilisant SeparatorMenuItem. Lien vers icône de la flèche de gauche et celle de droite

Figure 6: Un éditeur de texte.

6 BONUS: Création d’applications natives avec JavaFX

Le déploiement permet de créer un installeur et une application sous la forme d’un .msi sous Windows ou d’un .app sous Mac. Le déploiement intègre le .jar et la machine virtuelle Java si bien qu’un utilisateur de votre application n’a rien de supplémentaire à installer pour l’utiliser.
Si vous voulez en savoir plus, vous pouvez consulter le projet maven-jpackage-template.

Ce document a été traduit de LATEX par HEVEA