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 (cedric.fleury@lri.fr)

https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2018/

Rappels

2

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

Différents styles d’interaction WIMP, interaction gestuelle, tangible jusqu’à la réalité virtuelle

https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2018/

Plan du cours

A - Interface graphique

B - Implémentation d’une interface avec JavaFX

C - Programmation événementielle

3

Plan du cours

A - Interface graphique

B - Implémentation d’une interface avec JavaFX

C - Programmation événementielle

4

Interface graphique

L'interaction graphique

Les entrées sont spécifiées directement à partir des sorties

Périphérique d’entrée spécifie une position à l'écran qui désigne un objet précédemment affiché par le système

Cette désignation directe est appelée pointage

Elle est familière au monde physique D’où le succès de ce type d’interface

5

Tâches de base de l’interaction

Tâche d’entrée

Tâche de sélection

Tâche de déclenchement

Tâche de navigation

Tâche de réglage de propriétés

Tâche de transformation

6

Tâche d’entréeEntrer du texte

Champs de texte + clavier

Entrer une valeur simple Slider

Entrer une position Pointage

Entrer un chemin Echantillonnage (avec de l’« encre » comme feedback)

7

Adapter les interactions au type des valeurs entrées Exemple : la taille d’un tableau

Tâche d’entrée

8

Tâche de sélectionChoisir un ou plusieurs objets parmi un ensemble

Ensemble de taille fixe ou variable Ensemble de petite taille ou de grande taille

Ensemble de taille fixe Menu, boîtes à cocher (checkboxes),boutons radio (radio buttons)

Ensemble de taille variable Pointage, liste, entrée textuelle

9

Sélection multiple Par groupe Par interval

Ajout/suppression

Combinaison de techniques Pointer les éléments d’un liste / utiliser un modifier avec le clavier

Tâche de sélection

10

Tâche de sélectionMenus linéaires

Barre de menu +menus descendant (pulldown menus)

Palettes fixes

Menus contextuels (ou Pop-up)

Menus hiérarchiques

Menus détachables

11

Tâche de sélectionMenus circulaires

Pie menus

Selection plus rapide, mais nombres d’items limités (8 en pratique)

Marking menus

Transition naturelle du novice à l’expert : effectuer le geste plus rapidement et le menu ne s’affiche pas !

12

Tâche de déclenchement

Bouttons et menus

Drag-and-drop L’action dépend à la fois de la source et de la destination

13

Tâche de déclenchementInteraction gestuelle pour déclencher une action

Exemples :

14

Tâche de navigationBarres de défilement (scrollbars)

Direction de défilement Division de l’attention

Défilement direct Déplacement avec la main Défilement automatique

Changement d’échelle (zoom) Agrandissement pour voir les détails Rétrécissement pour voir le contexte

15

Boîte de dialogue Champs + boutons « OK » / « Appliquer » / « Annuler » Modale ou non modale

Découplage spatial et temporel entre les spécification de la commande, ces paramètres et son exécution

Parties optionnelles

Tâche de réglage de propriétés

16

Problème avec le bouton « OK »

Tâche de réglage de propriétésBoîte de propriété / inspecteurs

L’inspecteur est toujours visible

Le contenu change en fonction de l’objet sélectionné

La modification des propriétés affectent immédiatement l’objet sélectionné

17

Poignées de manipulation

Tâche de transformation

18

Feedbacks sur les entrées

Pointage

Sélection (simple/multiple cliques, avec ou sans modifiers)

19

Feedbacks sur les entrées

Déplacement (drag)

Fantômes ou ombres

Encre

20

Plan du cours

A - Interface graphique

B - Implémentation d’une interface avec JavaFX

C - Programmation événementielle

21

Implémentation d’une interface

Problématique Faire le lien avec le système d’exploitation

Ne pas tout ré-implémenter de zéro (bouton, fenêtre, etc.)

Garder une homogénéité entre les applications

Solutions Découpage en plusieurs couches logicielles

Utilisation de boîtes à outils d’interface

22

Couches logicielles

23

Boîte à outils d’interface

Bibliothèque d’objets interactifs (les « widgets ») que l’on assemble pour construire l’interface

Fonctionnalités pour faciliter la programmation d’applications graphiques interactives (et gérer les entrées)

Exemple : Windows : MFC, Windows Forms (.NET) Mac OS X : Cocoa Unix/Linux : Motif Multiplateforme : Java AWT/Swing, QT, GTK+

24

Boîte à outils d’interface

Exemples

25

Les « widgets » (window gadget)

26

JavaFX

JavaFX est une boîte à outils d’interface pour Java API orientée graphisme et interaction

Successeur des API graphiques historiques AWT et Swing

Prévu aussi pour un déploiement web (Rich Internet Application)

Amène des choses en plus : Véritable graphe de scène, Transformations graphiques, Effets, Animations, 3D, …

27

Documentation officielleJavadoc (à partir de celle de JavaSE) https://docs.oracle.com/javase/8/javafx/api/toc.htm

Documentation et exemples de JavaFX https://docs.oracle.com/javase/8/javase-clienttechnologies.htm

Tutoriel sur les composants de l’interface https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/

Tutoriel sur les layouts https://docs.oracle.com/javase/8/javafx/layout-tutorial/

Tutoriel sur la gestion des événements https://docs.oracle.com/javase/8/javafx/events-tutorial/

28

Classes constituant une application JavaFX

Application qui représente une application JavaFX

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, …

38

Les widgets de JavaFX

39

Label & Image View

Button

Radio Button

Toggle Button

Checkbox

Text Field

Password Field

Combo BoxSlider

Affichage

Déclenchement

SélectionEntrée

Separator

40

Menu

Les widgets de JavaFX Sélection

Color Picker

Date PickerFile Chooser

41

Les widgets de JavaFX

List View

Table View

Tree View

Sélection / Affichage

42

Scroll BarProgress Bar and Progress Indicator

Tooltip

Les widgets de JavaFX

Navigation

Scroll Pane

Feedback

https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/ui_controls.htm#JFXUI336

Fenêtre attachée à une autre fenêtre La fenêtre (ou boîte) de dialogue se ferme avec celle-ci

Une fenêtre de dialogue peut être « modal » C-à-d bloquer l’interaction de la fenêtre de niveau inférieure

Différents types de boîtes de dialogue43

Boîtes de dialogue de JavaFX

Boîtes de dialogue de JavaFXExemple

44

Placement des widgets

Les boîtes à outils graphiques permettent de contrôle le placement des widgets

Il faut être indépendant de la taille des widgets et de la fenêtre

Utilisation de gestionnaires de géométrie dans les widgets composés

45

Placement des widgets

Règles générales Imbrication géométrique d’un widget fils dans son parent Contrôle par le parent du placement de ses fils

Algorithme de placement 1. Taille naturelle de chaque fils 2. Taille et position finales

imposées par le parent 3. Contraintes :

grille, formulaire, etc.

46

Exemple

47

Placement des widgets

Layouts avec JavaFX

48https://docs.oracle.com/javase/8/javafx/layout-tutorial/

Vbox TilePane GridPane BorderPane

Hbox FlowPane StackPane AncchorPane

Layouts avec JavaFXExemple : FlowPane

49

Layouts avec JavaFXExemple : GridPane

50

Astuces

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, …

TouchEvent pour les appuis sur un écran tactile

Etc.

59

https://docs.oracle.com/javase/8/javafx/events-tutorial/

EvénementsUn événement transporte des informations

type : une information additionnelle sur le type Ex : MouseEvent.MOUSE_PRESSED

target : une cible qui dépend type d’événement Ex : pour la souris, c’est le noeud le plus haut placé sous le pointeur

source : le noeud qui a été abonné à l’événement

Etc.

Et éventuellement des informations spécifiques à l’événement

Toutes ces informations sont accessibles par des getters getType(), getTarget(), getSource(), getX(), …

60

Evénements

Créer ses propres événements

Créer une classe héritant de javafx.event.Event ou d’une de ses sous-classes

Intérêt ? Transporter des informations particulières

Obtenir un couplage faible entre des composants logiciels

61

Gestionnaires d’événementsEventHandler<T extends Event> : interface fonctionnelle décrivant la réaction à un événement

Comporte une unique méthode handle(T event) avec l’événement géré comme paramètre

Pour décrire la réaction à un événement :

Implémenter l’interface et placer le code du traitement à effectuer à l’intérieur de la méthode handle(T event)

Toutes les informations sur l’événement sont récupérables dans cette méthode grâce à son paramètre

62

Exemples

63

Gestionnaires d’événements

Réagir à un événementAbonnement simplifié

Utiliser les convenience methods de JavaFX pour s’abonner à une événement

Syntaxe : setOnXXX(EventHandler<T> event) où XXX est le type de l’événement (sans la terminaison Event)

Exemples : setOnAction(EventHandler<ActionEvent> event)

setOnKeyPressed(EventHandler<KeyEvent> event)

setOnMousePressed(EventHandler<MouseEvent> event)

64

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)

L’habillage CSS

A vous de le découvrir !

71