architecture logicielle des ihms

24
Page 1 IHM > ArchiLog- Eric Lecolinet - ENST Paris Architecture Logicielle des IHMs Eric Lecolinet - ENST - www.enst.fr/~elc Page 2 IHM > ArchiLog- Eric Lecolinet - ENST Paris Conception Logicielle ! Modèle conceptuel modèle de fonctionnement du système idéalement : correspond au modèle mental de l’utilisateur ! Exemple de feedback

Upload: others

Post on 05-Oct-2021

22 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Architecture Logicielle des IHMs

Page 1 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Architecture Logicielle des IHMs

Eric Lecolinet - ENST - www.enst.fr/~elc

Page 2 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Conception Logicielle

! Modèle conceptuel

– modèle de fonctionnement du système

– idéalement : correspond au modèle mental de l’utilisateur

! Exemple de feedback

Page 2: Architecture Logicielle des IHMs

Page 3 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Langages de spécification

! Problème

– spécifier de manière non ambiguë le comportement

– en particulier pour travail en équipe !

– génération de code éventuelle avec certains systèmes

! Langages de description de syntaxe

– UAN : User Action Notations

– PPS: Propositional Production Systems

! Exemple PPS

– Color ( Black, White, Red )

– Input ( .MouseDown, .MouseMove, .MouseUp ) // noter le point

– .MouseUp, Shift -> !DoMultipleSelect, InSelectMode

Page 4 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Page 3: Architecture Logicielle des IHMs

Page 5 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Page 6 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Principe de séparation

! Principe de base de conception des IHMs

! Pas toujours réalisable en toute rigueur

– si manipulation directe / forte interactivité

– exemple : traitement de texte

! Partage de données entre GUI et NF

– modèle MVC, variables actives

Page 4: Architecture Logicielle des IHMs

Page 7 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Conception itérative / participative

! Conception itérative

– cycle en spirale

– cycle en étoile

! Conception participative

– les utilisateurs prennent un rôle actif dans la conception

utilisateurs

analyse

conception

implémentation

évaluation

Page 8 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Modèles d’architecture logicielle

! Structure générique de conception

! Décrire

– flux de données utilisateur <--> application

– étapes de transformation des données

– identification et agencement des composants logiciels

Page 5: Architecture Logicielle des IHMs

Page 9 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Modèle Langage

! Vue linguistique de l’interaction

– analogie : IHM <=> dialogue entre individus

! 3 composantes :

– Lexicale: vocabulaire d’entités d’entrée-sortie

• exple: primitives et objets graphiques de base, sons ...

– Syntaxique: construction des phrases

• exple: sélection et modification d’un objet (dessin, texte...)

– Sémantique: signification des phrases

• concepts et objets du domaine d’application

Page 10 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Modèle de Seeheim

! Inspiré du modèle langage (groupe de travail SIGGRAPH en 1985)

! Cadre de pensée, forme générique

! Contrôleur = notion plutôt floue, centralisation du traitement

Page 6: Architecture Logicielle des IHMs

Page 11 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Modèle Arch

! Extension de Seeheim

– “Pieds de l’arche” : composants imposés par réalité

– Interaction : objets d’une boîte à outils (Toolkit)

– Présentation : “abstraction” de la boîte à outils (-> boîte à outils virtuelle)

Page 12 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Modèle multi-agents

! Vision: système interactif =

– ensemble d’agents spécialisés

– qui réagissent à / produisent

des événements

! Agent = système de traitement doté

– d’une mémoire

– d’un état

– d’un “processeur” (éventuellement simulé)

– de récepteurs-émetteurs d’événements

Page 7: Architecture Logicielle des IHMs

Page 13 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Communication par envoi de messages

! Message = couple

– sélecteur =

opérateur du destinataire

– données =

paramètres de cet

opérateur

! Encapsulation :

séparation entre:

– spécifications externes

(filtre ou port d’entrée)

– implémentation interne

Page 14 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Caractéristiques et réalisation

! Réalisation

– langage objets, généralement « statiques » : Java, C++, C#

– parfois plus « dynamiques » : Objective-C (MacOSX)

– ou même en C (X-Window)

! Envoi de message

– se réduit généralement à de l’appel de méthode

! Caractéristiques

– organisation modulaire (souvent hiérarchique)

– gestion décentralisée

– réutilisabilité :

• héritage, composition, décoration

• peu de classes, beaucoup d’instances

Page 8: Architecture Logicielle des IHMs

Page 15 IHM > ArchiLog- Eric Lecolinet - ENST Paris

! Limitation de l’envoi de message par appel de méthode

– a) le destinataire et la méthode doivent être connus par avance

– b) pas de distribution (un seul programme sur une seule machine)

– c) pas de vrai parallélisme (un thread de gestion des événements)

! Autres techniques

– langages objets « dynamiques » (Objective C / Cocoa)

– mécanismes de réflexion (Java) :

• capacité des objets à s’auto-décrire

– prise en charge par le système ou le toolkit graphique

• exple: X-Window

Page 16 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Widgets

! Widget = objet graphique

– ou « control » ou « component »

! Exemples de toolkits à widgets

– Smalltalk : MVC (historique)

– Objective C : Next, MacOSX

– Java : AWT, SWT, Swing

– C++ : Visual C++, Borland C++,

Qt, ILOG Views

– C : Motif, Gtk

Page 9: Architecture Logicielle des IHMs

Page 17 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Modèles homogènes / hétérogènes

! Modèle multi-agents = modèle général :

– pas d’indication sur la manière d’organiser un système interactif

! Modèles homogènes

– GUI = graphe de noeuds multi-facettes (ou multi-composantes)

– modèle PAC

– toolkits Motif, Qt, Gtk ...

! Modèles hétérogènes

– GUI = graphe de noeuds spécialisés

– modèle MVC

– toolkits Swing, Amulet, Ubit...

Page 18 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Modèle PAC

(Joelle Coutaz, IMAG)

! Modèle homogène multi-agents

! Objets interactifs multi-facettes

! Structuration PAC

– Présentation

– Contrôle

– Abstraction

Page 10: Architecture Logicielle des IHMs

Page 19 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Modèle MVC

! (voir plus loin)

Page 20 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Outils de spécification d’interfaces

! Grammaires

– langages de description de syntaxe (voir précédemment)

– production de code éventuelle

! Diagrammes de transitions

– avantage : génération d’automates à états finis

• vérification automatique

• mais limitée (cf. ergonomie, visibilité ...)

– problème : rapidement complexes !

– autre technique : réseaux de Pétri

Page 11: Architecture Logicielle des IHMs

Page 21 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Outils de spécif. / génération d’interfaces

! Statecharts

– amélioration des Diagrammes de transition

– simplification par : groupements et factorisation

– intérêt pratique : UML et divers outils qui les utilisent

! Générateurs d’interface

– UIMS (User Interface Management Systems), model-based tools

– objectif : génération automatique du code

• pour partie graphique ET pour contrôle du dialogue

– intérêt limité en pratique:

• applications très spécifiques

– exple bases de données : MS Access, Sybase PowerDesigner

• prototypes de labo

Page 22 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Outils de création d’interfaces

! Outils interactifs de construction d’interfaces

– Interface builders, Application Frameworks

– par programmation visuelle

– avantage:

• prototypage

• utilisables par des non

informaticiens

– inconvénient:

• gèrent essentiellement

la présentation statique

Page 12: Architecture Logicielle des IHMs

Page 23 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Outils de création d’interfaces (...)

! Autres limitations des outils interactifs

– peu de support pour la manipulation directe

– génération de code « one way

– gestion du layout et de la localisation : contraintes ou WYSIWYG ?

Page 24 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Outils de création d’interfaces (...)

! Mockups

– prototypes non opérationnels

– Powerpoint, Flash, Director, etc.

! Langages spécialisés

– prototypes, petits outils, adaptabilité à des plateformes très différentes...

– Tcl/Tk, XML/UIMS, etc.

Page 13: Architecture Logicielle des IHMs

Page 25 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Outils de création d’interfaces (...)

! Toolkits graphiques

– grande flexibilité

– difficulté d’apprentissage : réservés aux professionnels

! Systèmes de fenêtrage

– niveau 0 : « entrailles » du système graphique ...

Page 26 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Toolkits graphiques

! Toolkit

– bibliothèque de techniques d’interaction

– collection de primitives (fonctions et objets)

! Gestion du système de fenêtrage

– fenêtrage, terminal abstrait, graphique de base

– événements

– texte et polices

– éventuellement : son, vidéo, 3D ...

! Gestion du dialogue

– interacteurs : boutons, champs textuels, listes, ascenseurs...

– composition d’objets : fenêtres, menus, conteneurs

Page 14: Architecture Logicielle des IHMs

Page 27 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Exemple de X Window

! Système structuré en couches logicielles

– gestion du poste de travail : Xlib

– gestion du dialogue

• initialement: Intrinsics + Toolkit :

• actuellement: Swing, Qt, Gtk...

Page 28 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Programmation par événements

! Programmation classique

– l’application a le contrôle

– utilisateur est “au service”de l’application

Page 15: Architecture Logicielle des IHMs

Page 29 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Programmation par événements (...)

! Interfaces graphiques : c’est l’inverse

– l’utilisateur garde le contrôle :

• on peut à tout moment sélectionner, cliquer, changer de fenêtre ...

– application “esclave”

de l’utilisateur

– programmation

non modale

– dialogue multi-fils

(multi-threads)simulé par boucle de

gestion des événements

Page 30 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Programmation par événements (...)

! Conséquences

– application toujours prête à réagir

– programmation par événements

! Evénement (ou « message »)

– envoyé à l’application ciblée

– à chaque action élémentaire de l’utilisateur

Page 16: Architecture Logicielle des IHMs

Page 31 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Exemples d’événements

Evénéments X Window de base:

– ButtonPress, ButtonRelease:

– appuyer / relacher un bouton de la souris

– KeyPress, KeyRelease:

– appuyer / relacher une touche du clavier

– MotionNotify:

– bouger la souris (avec un bouton enfoncé)

– EnterNotify, LeaveNotify

– la souris entre dans / sort d’une fenêtre

– Expose:

– rafraîchir la fenêtre (la fenêtre redevient visible)

– ResizeRequest:

– la fenêtre a changé de taille

– MapNotify, UnmapNotify:

– la fenêtre apparaît / disparait de l’ecran

Page 32 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Types d’événements

! Un événement

– est caractérisé par un type

– contient des infos complémentaires:

• par exemple, la position (x, y) de la souris

! Technique très générale

– pas limitée au graphique

– pour la communication entre applications

• éventuellement via un réseau (X-Window)

Page 17: Architecture Logicielle des IHMs

Page 33 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Gestion des événements

! Principe général

– Etape 1 : créer les widgets principaux

– Etape 2 : lancer la boucle de gestion des événements

! L’application se met en attente des événements

– et devient “esclave” de l’utilisateur

Page 34 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Boucle de gestion des événements

! Boucle infinie qui:

– récupère les événements

– appelle les fonctions du programme

! Deux stratégies

– protocole non embarqué

– protocole embarqué (tous les toolkits récents)

Page 18: Architecture Logicielle des IHMs

Page 35 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Protocole non embarqué

! Principe

– le programmeur écrit cette boucle!

– au moins en partie...

while (True) { event = GetNextEvent()

switch(event->type) {

case EVENT_E1 sur window_W1:

foo_E1_W1(); break;

case EVENT_E2 sur window-W2:

foo_E2_W2(); break;

}

......

Page 36 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Protocole non embarqué (...)

! En réalité c’est bien plus complexe !

– car il faut prendre en compte :

• les combinaisons d’événements

• et sur plusieurs widgets !

! A titre d’exemple

– modéliser un bête clic souris

• sur un bouton, un menu, une liste, etc.

! Conclusion

– forte complexité

– forte interdépendance entre objets graphiques

– --> « plat de spaghettis »

Page 19: Architecture Logicielle des IHMs

Page 37 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Protocole embarqué

! Principe

– le contrôle du dialogue est « embarqué » dans les widgets

– la boucle de gestion des événements est prédéfinie

! Le programmeur doit seulement :

– associer des fonctions de callback aux widgets

– appelées automatiquement par la boucle de gestion des événements

Page 38 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Protocole embarqué (...)

! Avantages

– simplicité,

– modularité

! Notion d’objet graphique “réactif”

– protocole embarqué --> orienté objet

! Inconvénients

– moindre contrôle, affichage asynchrone

! Attention

– multi-fils simulé par la boucle de gestion des événements

– conséquence ...?

Page 20: Architecture Logicielle des IHMs

Page 39 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Exemple: Motif en langage C

static void MaFonction(Widget w, XtPointer cld, XtPointer cad) { ....;

}

Widget boite, bouton, ...;

/* creer un objet graphique */

bouton = XmCreatePushButton(boite,”bouton”,NULL,0);

XtManageChild(bouton);

/* y associer un callback (sera appelee quand on clique sur le bouton) */

XtAddCallback(bouton, XmNactivateCallback, MaFonction, NULL);

...etc...

/* lancer la boucle de gestion des evenements */

XtAppMainLoop(app);

/* plus rien n’est exécuté après cette ligne ! */

Page 40 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Contrôle asynchrone

! Principe

– délégation du traitement de la GUI vers le Noyau fonctionnel

! Problème

– l’interface “perd la main” tant que le callback s’exécute

Page 21: Architecture Logicielle des IHMs

Page 41 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Contrôle asynchrone

! Conséquences

– immobilisation, perte de contrôle,

plus de rafraîchissement

– si fonctions de callback longues ou « infinies »

! Exemple

– recherche de pages avec un navigateur Web

– impossible de cliquer sur « stop » !

Page 42 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Contrôle asynchrone

Autres cas problématiques

! Noyau Fonctionnel contrôlé par une boucle infinie

– exemple: serveur de base de données

! Application distribuée

– plusieurs interfaces qui communiquent via un réseau

! Noyau Fonctionnel préexistant

– exemple: gestionnaire de fichiers

Page 22: Architecture Logicielle des IHMs

Page 43 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Contrôle asynchrone (...)

! Solutions

– processus, threads (« vrai » multi-fils)

– plusieurs exécutables

! Problèmes

– synchronisation : toujours délicate

– threads : toolkits pas toujours multi-threads

– processus, plusieurs exécutables : notification du NF vers la GUI

Page 44 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Communication du NF vers la GUI

! Evénements non graphiques

– arrivée d’une donnée sur un pipe, une socket

– traitée comme un événement graphique

– exemples: Qt, X-Window/Motif

! Evénements ad-hoc

– le NF envoie des événements « clients » à la GUI

– exemple: ClientMessage de X-Window

Page 23: Architecture Logicielle des IHMs

Page 45 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Communication du NF vers la GUI

! Partage de données

– variables actives

– zones tampon partagées (clipboard)

– Cut and Paste, Drag And Drop

– également pour synchronisation de programmes

! Cas clinique: Time Outs

– mise à jour à intervalle de temps régulier

– également pour les animations

Page 46 IHM > ArchiLog- Eric Lecolinet - ENST Paris

Conclusions sur les Toolkits

! Avantages

– Portabilité informatique (matérielle, logicielle)

– Souplesse d’utilisation

– Extensibilité, flexibilité

– Intégration de critères ergonomiques

! Inconvénients

– apprentissage

– effort de développement important

– pas d’indication sur l’architecture logicielle

– seul développeur = programmeur

Page 24: Architecture Logicielle des IHMs

Page 47 IHM > ArchiLog- Eric Lecolinet - ENST Paris