Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée sur les transparents de Ignacio Avellino, Anastasia Bezerianos et Michel Beaudouin-Lafon Année 2017/2018 – Et3 Info - Polytech Paris-Sud Cédric Fleury ([email protected]) https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2018/
71
Embed
Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX
Une partie de ce cours est basée sur les transparents de Ignacio Avellino, Anastasia Bezerianos et Michel Beaudouin-Lafon
Système interactif n’est pas juste un système algorithmique Représentation d’un état interne Réponse aux actions de l’utilisateur Boucle perception-action
IHM : approche multidisciplinaire Prise en compte des capacités humaines dans le système Adaptation au modèle mental de l’utilisateur
Stage qui est le conteneur de plus haut niveau de l’application
Scene qui contient les composants visuels
29
Architecture d’une application JavaFX
Toute application JavaFX doit :
Hériter de la classe javafx.application.Application
Implémenter la méthode main(String[] args) Comme toute application Java Appelle uniquement la méthode launch(String[] args) de la classe parent Application
Redéfinir la méthode start(Stage primaryStage) Appelée par le méthode launch
Contient le code de l’application
30
Application
Exemple
31
Application
Stage
S’adapte en fonction du cadre d’utilisation Application lourde : fenêtre classique en fonction de l’OS Application web : fenêtre du navigateur
Est instancié automatiquement par l’application en paramètre de la méthode start(Stage primaryStage)
Contient une ou plusieurs instance de Scene
32
Stage
Exemple
33
Scene
Contient les composants visuels
Décrit le graphe de scène = la hiérarchie des composants visuels de la scène (sous forme de graphe)
34
Construction du graphe de scène
Récupérer la liste des enfants d’un conteneur grâce à la méthode getChildren()
Ajouter à cette liste un enfant ou un groupe d’enfants avec le méthodes add(E) ou addAll(E,…)
Enlever à cette liste un enfant ou un groupe d’enfants avec le méthodes remove(E) ou removeAll(E,…)
35
Scene
SceneExemple
36
Scene
37
Stage
Scene
FlowPane
Label Button
Noeuds du graphes de scène
Widgets « simples » Composants de l’interface graphique (affichage + interaction) Boutons, barre de défilement, …
Widgets « composés » Destinés à contenir d’autres widgets (simples ou composés) Boites de dialogue, menus, …
Les conteneurs de Widgets (Layout containers) Contient des Widgets ou d’autres conteneurs Définit le placement des composants qu’il contient
Plusieurs types de conteneurs : placement en ligne, colonne, grille, …
Combiner de différents layouts Des VBox ou HBox dans un GridPane Des FlowPane dans un BorderPane Etc.
La fonction sizeToScene() sur le Stage permet de redimensionner la fenêtre en fonction du contenu de cette fenêtre
Particulèrement utile si le contenu de la fenêtre change
51
Plan du cours
A - Interface graphique
B - Implémentation d’une interface avec JavaFX
C - Programmation événementielle
52
Système interactif ≠ système algorithmique
Système algorithmique (fermé) Lit des entrées, calcule, produit un résultat => il y a un état final !
Système interactif (ouvert) Évènements provenant de l’extérieur => boucle infinie, non déterministe
53
Problèmes
1. Nous avons appris à programmer des algorithmes (la partie “calcul”)
2. La plupart des langages de programmation (C, C++, Java, Lisp, Scheme, Ada, Pascal, Fortran, Cobol, ...) sont conçus pour écrire des algorithmes, pas des systèmes interactifs
3. Les entrées (read, get, scanf, cin, etc.) que nous avons utilisées sont bloquantes
54
Comment gérer les entrées ?
55
Programmation événementielle
56
Programmation événementielle
57
Programmation événementielle avec JavaFX
JavaFX se base sur :
Un ensemble d’événements (Event) émis par l’interface Fournis par l’API Créés par les developeurs
Des gestionnaires d’événements (EventHandler) qui définissent les actions effectuer lorsqu’un événement se produit
Un système de propagation des événements très riche
Plusieurs façons de s’abonner à la reception d’un événement
58
Evénements
Evénements fournis par l’API de JavaFX
ActionEvent pour une action simple sur l’interface (clic sur un bouton par exemple)
MouseEvent pour les déplacements, survols et clics de la souris
ScrollEvent pour les défilements à l’aide de la molette de la souris, du trackpad, d’un écran tactile, …
Réagir à un événementExemple : instanciation d’une classe locale (voir externe)
65
Réagir à un événementExemple : abonnement grâce à une classe interne anonyme
66
Réagir à un événement
Exemple : abonnement grâce à une expression lambda
67
(depuis java 8)
Réagir à un événement
Les convenience methods ont deux inconvénients
Elles ne fonctionnent qu’avec les événements standards, pas avec ceux créés par les développeurs
Les abonnements à un événement donné ne sont pas cumulables sur un même composant
Pour palier à ces problèmes, il faudra utiliser le mécanisme complet de propagation des événements.
68
ConclusionCe que l’on a vu sur JavaFX
Architecture d’une application JavaFX Classes constituant une application Construction du graphe de scène Les Widgets de JavaFX Les Layouts et le placement des Widgets
Programmation événementielle Evénements Gestionnaires d’événements Réagir à un événement
69
Conclusion
Ce que l’on vera la prochaine fois L’abonnement complexe aux événements et leur propagation
Les éléments graphiques
Les transformations
Le langage basé sur xml permettant de décrire le graphe de scène et les interactions de base : FXML
L’interface permettant de concevoir les interfaces graphiques de façon plus intuitive : SceneBuilder
70
Conclusion
Ce que l’on ne vera pas dans le cadre du cours
La gestion de la 3D
Les effets et les animations sur n’importe quel élément du graphe de scène (dessin ou widget)