TD 1 à 6 — Placement, événements, ergonomie

Les TD 1 à 3 construisent le geste JavaFX (graphe de scène, abonnement d'un handler), les TD 4 à 6 le geste ergonomique (critiquer, redessiner, prédire). Dans tous les cas, la réponse est justifiée : schéma annoté, critère nommé, calcul posé.

TD 1 — Gestionnaires de placement

• Exercices 1 et 2 : reproduire deux interfaces (dont « Mon notepad ») en dessinant le schéma de l'interface — widgets, conteneurs, gestionnaires de placement. Les interfaces sont montrées avant et après redimensionnement : le placement relatif doit rester le même. Pour l'exercice 2, préciser ce qui garde le bouton 4 collé au bord droit.
• Exercice 3 : fenêtre de configuration d'Eclipse simplifiée. Donner le graphe de scène et indiquer les éléments nécessaires pour : désactiver Revert et Apply par défaut ; rendre le champ grisé non éditable ; faire s'adapter les champs de texte à la fenêtre ; garder certains widgets en place au redimensionnement ; ne permettre qu'un seul des boutons Default/Other sélectionné à la fois.

Démarche : zones stables en BorderPane, lignes en HBox/VBox, croissance réservée aux bons nœuds (setHgrow, Region espaceur, setMaxSize) ; appels attendus : setDisable(true), setEditable(false), ToggleGroup.

TD 2 — Gestion des événements (1/2)

• Exercice 1 : analyse d'un code où une classe interne myClickHandler implémente EventHandler<MouseEvent> et fait label = new Label("toto") dans handle. Questions : quel type de classe gère le clic ? pourquoi le label n'affiche jamais « toto », et quelles modifications minimales suffisent ? pourquoi cette gestion d'un bouton n'est-elle pas celle attendue — et la corriger ? réécrire avec une lambda, puis avec une classe externe ; enfin N boutons en une seule boucle for, le clic faisant apparaître l'intitulé dans le Label.
• Exercice 2 — le carré perdu : un carré dessiné sur Canvas est déplacé au drag, mais l'utilisateur le perd quand il bouge trop vite le pointeur. Expliquer l'origine du problème, puis corriger.

Démarche : le bug vient de la création d'un nouveau Label local au lieu d'un label.setText(...) sur le label existant ; pour un bouton, l'événement attendu est un ActionEvent via setOnAction. Carré perdu : le test contains(...) échoue dès que le pointeur sort du carré entre deux événements de drag — mémoriser le début du drag, puis suivre le pointeur sans retester l'appartenance.

TD 3 — Gestion des événements (2/2)

• Exercice 1 : synchronisation bidirectionnelle d'un Slider et d'un TextField : s'abonner à slider.valueProperty() (un DoubleProperty) pour mettre à jour le champ, puis à field.textProperty() (une StringProperty) pour mettre à jour le potentiomètre.
• Exercice 2 — logiciel de dessin : compléter PencilConfig, qui configure la taille et la forme d'un pinceau. Corriger le listener du potentiomètre (la taille s'adapte mais pas le champ de texte — même bug de recréation qu'au TD 2) ; répercuter la saisie du champ sur le potentiomètre et le pinceau (interface dans la classe principale) ; au clic sur la représentation, taille = deux fois la distance centre du canvas → position du clic (nouvelle classe interne) ; changer la forme (booléen circle) avec les boutons radio et une lambda sur group.selectedToggleProperty().
• Exercice 3 (supplémentaire) — tri de listes : trois ListView, des boutons « Deplacer ici ». Quels sont les deux modèles d'une ListView ? mémoriser la dernière liste sélectionnée, puis déplacer l'item sélectionné (classe interne sur les boutons).

Démarche : tout changement d'état se traite par addListener sur la property, jamais en recréant le widget ; mettre à jour toutes les vues dépendantes (slider, champ, canvas).

TD 4 — Conception et critères ergonomiques

• Exercice 1 : application de gestion des absences et retards, saisie sur smartphone pendant le TD/TP, retards notés au quart d'heure près, temps de saisie essentiel, retards pas forcément notés à l'entrée. Donner scénario et séquence d'interaction, réaliser les schémas d'interface justifiés par les critères ergonomiques, puis un brainstorming sur la présentation des étudiants pour la saisie des retards.
• Exercice 2 : critique d'une interface de renouvellement d'ordonnance — commentaire argumenté sur trois critères d'utilisabilité au choix, puis nouveau design résolvant les problèmes identifiés.
• Exercice 3 : interface fictive MONVOL (dates, lieux, fourchette de prix) : deux avantages et deux inconvénients, chacun rattaché à un critère et argumenté (2 phrases max), puis dessin d'une nouvelle interface où chaque changement est justifié.

TD 5 — Ergonomie, conception et théorie

• Exercice 1 : deux propositions d'interface pour un navigateur Web. Pour chacune, au moins 6 points positifs ou négatifs appuyés sur les critères ergonomiques, la loi de Fitts, la Gestalt, la mémoire et l'apprentissage ; recommandation argumentée pour un public expert, puis novice.
• Exercice 2 : menus contextuels circulaires (13 actions, cibles circulaires de tailles variées autour du curseur, clic dans le vide pour annuler). Prédire l'item le plus facile et le plus difficile à sélectionner (Fitts : taille et distance) ; avantages et inconvénients face à un menu standard ; dessiner sa propre structure, justifiée par la performance humaine.
• Exercice 3 : visualisation de trajets (temps, tarif, bilan carbone). Limites de la table ; ce que dit la théorie de Bertin ; le graphique à bulles (axes temps et prix, taille = carbone) permet-il de comparer ? problème des bulles cliquables non découvertes et des points isolés trop petits — solutions justifiées.

TD 6 — Ergonomie, conception et théorie

• Exercice 1 — KLM : supprimer un fichier en le glissant vers la corbeille (technique 1) ou en appuyant sur SUPPR (technique 2), la décomposition en tâches étant fournie. Rappeler ce qu'est KLM, donner la séquence d'opérateurs et les temps de chaque technique (K = 0,28 s, B = 0,1 s, H = 0,4 s, P = 1,1 s, M = 1,2 s), conclure, puis illustrer les limitations de KLM.
• Exercice 2 : interface de gestion des dossiers d'un comité de sélection — peu d'utilisateurs découvrent le téléchargement du zip via le bouton « Filtrer ». Identifier le principal critère ergonomique non respecté, proposer une interface (schéma + justifications, sans supprimer le filtrage), puis réaliser un cognitive walkthrough de la tâche « télécharger le zip des dossiers des candidats auditionnables ».
• Exercice 3 — loi de Fitts : rappeler la formule et le rôle des variables ; deux exemples dans Microsoft Word 2007 ; analyser Bubble Cursor (agrandir la zone active du curseur) et TorusDesktop (traverser les bords de l'écran) : hypothèse de départ, situations où elle est vérifiée ou non.

---