IUT A - Département informatique - N2 - M2105 - Université de Lille
2020-2021 
Interaction Homme-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.

Les deux solutions suivantes sont proposées. La solution Maven a le mérite d’être plus simple que la configuration manuelle, qui demande un peu plus d’étapes de configuration. Toutes les solutions disponibles sont détaillées sur le site de JavaFX.

2.1  Solution 1 : utilisation de Maven

Maven requiert une organisation spécifique de vos projets et un fichier de configuration :

  1. Le code doit se trouver dans un répertoire src/main/java, et non plus directement dans src comme auparavant dans vos projets Eclipse.
  2. Il faut un fichier pom.xml de configuration de maven qui décrit les bibliothèques nécessaires au projet.
  3. Le projet Eclipse doit être de type Maven.

Préalable en salles TP:

  1. Il faut commencer par configurer le proxy de maven en créant le fichier settings.xml dans le répertoire ~/.m2/ et en y copiant les lignes xml ci-dessous. Copiez ces lignes du sujet au format html car vous risquez des problèmes d’encodage de caractères avec la version pdf.
  2. Configurer Maven dans les préférences d’Eclipse pour que "User Settings" pointe vers votre fichier settings.xml (voir Figure 1). Cliquez sur le bouton "Update settings".
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
<proxies>
    <proxy>
        <id>optional</id>
        <active>true</active>
        <protocol>https</protocol>
        <host>cache.univ-lille.fr</host>
        <port>3128</port>
    </proxy>
</proxies>
</settings>

Figure 1: Configuration de Maven dans Eclipse.

Procédez comme suit:

  1. Créez un nouveau projet Maven en allant dans File > New > Project > Maven > Maven Project
  2. Cliquez sur Next puis choissez l’archetype. Pour cela dans Filter, tapez jfx et choississez
    javafx-archetype-simple (Figure 2).
    Dans les salles TP, si javafx-archetype-simple n’apparait pas, cliquer sur Add archetype Cela a pour effet de télécharger un certain nombre de fichiers dans le répertoire ~/.m2/repository/
  3. Après avoir cliqué sur Next, choississez un nom pour ArtifactId (ce sera celui de votre projet) puis cliquez sur Finish
  4. Supprimez App.java et SystemInfo.java. Renommez si vous souhaitez le module.
  5. Créez une classe SimpleScene et copier le code ci-dessus.
  6. Vous pouvez exécuter le code et une fenêtre doit s’afficher si tout va bien.

Figure 2: Configuration de Maven.

2.2  Solution 2 : configuration manuelle

A faire une fois pour un workspace donné :

  1. Télécharger 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 3 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.

Figure 3: 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. 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. Configurer le Java Build Path du système. Cliquer d’abord sur Add Library > JRE System Library et choisir JRE 11 ou supérieur puis choisir 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
    ErrorJavaFX runtime components are missingand 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 /Users/casiez/javafx-sdk-11.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.

Figure 4: Ajout de JavaFX comme User library (gauche). Configuration du Java Build Path pour un projet (droite).

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 5. 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 5, 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 5: 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 6. 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 6. Vous utiliserez à nouveau setMaxSize pour qu’un bouton puisse occuper plusieurs lignes ou colonnes.


Figure 6: 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 7.


Figure 7: 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 8.

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 8: 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