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


TP : Prototypage haute fidélité

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

Objectifs

Travail à réaliser :

1 Préambule

Vous allez réaliser un prototype haute fidélité de la version basse fidélité conçue à la séance précédente. Aujourd’hui le but n’est pas de réaliser une interface complètement fonctionnelle mais de rendre interactives certaines parties critiques de l’interface pour lesquelles les retours des utilisateurs sont importants.

Figure 1: Capture d’écran de JavaFX Scene Builder 2.0

2 JavaFX Scene Builder 2.0

JavaFX Scene Builder 2.0 est déjà installé sur les machines des salles TP (/opt/JavaFXSceneBuilder2.0/). Il peut être facilement installé sur n’importe quelle plateforme en suivant les instructions disponibles ici. C’est un logiciel à part entière qui permet de créer des interfaces pour JavaFX par drag-and-drop de widgets et définition de leurs propriétés. Le logiciel génère un fichier fxml qui contient une représentation au format XML de l’interface. Ce fichier pourra ensuite être chargé par votre programme JavaFX. L’intégration de Scene Builder dans Eclipse peut se faire en précisant simplement le chemin d’accès à Scene Builder dans les préférences d’Eclipse. Vous pourrez alors faire un clic droit sur le fichier fxml visible dans "Package Explorer" et sélectionner "Open with SceneBuilder".

3 Création de l’interface

Q 1. En utilisant JavaFX Scene Builder 2.0, reproduisez l’interface du compteur présenté dans le TP 3, de manière à obtenir un résultat similaire à la Figure 1.

4 Chargement du fichier FXML

En supposant que votre interface est enregistrée dans le fichier interface.fxml, le code suivant permet de charger ce fichier et d’afficher l’interface. Le fichier fxml doit ici se trouver dans le même répertoire que les .java

public class FXMLdemo extends Application { public void start(Stage stage) throws IOException { FXMLLoader loader = new FXMLLoader(); URL fxmlFileUrl = getClass().getResource("interface.fxml"); if (fxmlFileUrl == null) { System.out.println("Impossible de charger le fichier fxml"); System.exit(-1); } loader.setLocation(fxmlFileUrl); Parent root = loader.load(); Scene scene = new Scene(root); stage.setScene(scene); stage.setTitle("FXML demo"); stage.show(); } public static void main(String[] args) { Application.launch(args); } }

Q 2. Testez.

5 Gestion des événements

La gestion des événements pour incrémenter le label quand on clique sur le bouton + nécessite de:

  1. Tout en bas à gauche de la fenêtre de Scene Builder, dans la partie "Controller", donnez le nom de la classe qui va gérer les événements dans le champ de texte "Controller class". Si par exemple la classe MonController du package tp6 va gérer les événements, on ajoutera: tp6.MonController.

  2. Dans Scene Builder donner un fx:id au Label (dans la rubrique Code). Ici vous donnerez la valeur monLabel.

  3. Préciser quelle méthode sera appelée quand le bouton + reçoit un Action Event. Dans la rubrique Code du bouton + indiquez pressedButtonPlus en dessous de On Action.

  4. Créer la classe MonController comme donné en exemple ci-dessous. Notez que la syntaxe @FXML permet d’instancier automatiquement monLabel avec la référence du label de l’interface, grâce au fx:id qui a été précisé!
public class MonController { @FXML Label monLabel; public void initialize() { System.out.println("Initialisation..."); } public void pressedButtonPlus(ActionEvent event) { int newValue = Integer.parseInt(monLabel.getText()) + 1; monLabel.setText("" + newValue); } }

Q 3. Testez le code ci-dessus.

Q 4. Faites le nécessaire pour faire fonctionner le bouton -

6 A vous de jouer !

Q 5. Réalisez une version haute fidélité de votre prototype de projet et gérez les événements pour une partie de l’interface qui parait essentielle.

7 Créer un jar exécutable avec Eclipse

La procédure décrite ci-dessous nécessite la configuration de JavaFX dans Eclipse en mode manuel (voir TP 1).
Le but est de créer un jar exécutable qui puisse facilement s’exécuter sur toute machine équipée de Java. Pour cela, il faut intégrer la librairie JavaFX dans votre jar. Il est aussi recommandé d’intégrer d’autres ressources (images, fichiers fxml...) plutôt que de les mettre dans un répertoire annexe.
La première chose est de définir le niveau de compatibilité de votre code, qui va déterminer la version minimale de la JRE nécessaire pour exécuter le jar. Pour cela, allez dans les propriétés de votre projet > Java Compiler > Compiler compliance level et choisissez 11 (pour que votre jar fonctionne sur les machines des salles TP).
Si nécessaire, dans le Java Build Path, allez dans l’onglet Source puis Add Folder et choisissez le répertoire qui contient vos ressources (fxml, images ...). L’accès aux ressources, comme par exemple l’accès à un fichier interface.fxml qui se trouve dans un répertoire data (ajouté comme ressource), se fait de la façon suivante :

URL fxmlFileUrl = getClass().getResource("/interface.fxml");

Pour créer votre jar exécutable, allez dans File > Export > Java > Runnable JAR file
Choisissez la bonne "Launch configuration" dans le menu déroulant et un répertoire d’export. Choisissez également "Package required libraries into generated JAR". JavaFX a également besoin de librairies (.dll, .so, .dylib) propres à chaque système pour fonctionner. Il faut copier manuellement ces librairies du répertoire d’installation de JavaFX dans le répertoire où le jar exécutable a été généré. Il n’est pas possible de mettre ces librairies dans le jar car le système ne pourrait pas les exécuter.
Vous pouvez tester maintenant votre java exécutable avec la commande java -jar fichier.jar. Si les librairies propres au système ne sont pas dans le même répertoire que le jar, vous pouvez indiquer leur chemin en utilisant l’option -Djava.library.path, de la façon suivante :
java -Djava.library.path=/home/public/javafx-sdk-17.0.2/lib -jar tp6.jar
Note : si les jar de JavaFX n’ont pas été intégrés dans le jar exécutable, il est possible d’exécuter votre jar en précisant le répertoire d’installation de JavaFX :
java --module-path /home/public/javafx-sdk-17.0.2/lib
--add-modules javafx.controls,javafx.fxml -jar tp6.jar
Faites également une copie de votre jar et renommez-le avec une extension .zip. Décompressez-le pour examiner son contenu et vérifier la présence des librairies JavaFX et de vos fichiers ressources.

8 Créer manuellement un jar exécutable

La création du jar exécutable se fait avec la commande jar, de la façon suivante pour le TP2 :
jar -cvfm carres.jar manifest.MF tp2/Carres.class tp2/Rectangle.class
Le fichier manifest.MF précise la classe principale. Il est nécessaire d’ajouter une ligne vide en fin du fichier.

Manifest-Version: 1.0 Main-Class: tp2.Carres Class-Path: .

L’exécution se fait avec la ligne suivante :
java --module-path /home/public/javafx-sdk-17.0.2/lib
--add-modules javafx.controls,javafx.fxml -jar carres.jar
La commande suivante permet de vérifier le contenu du jar : jar tf carres.jar

Ce document a été traduit de LATEX par HEVEA