Laboratoire I3S Ecole d’Ingénieur en Sciences Informatiques (ESSI)

Présentation au sujet: "Laboratoire I3S Ecole d’Ingénieur en Sciences Informatiques (ESSI)"— Transcription de la présentation:

1 Laboratoire I3S Ecole d’Ingénieur en Sciences Informatiques (ESSI)
Composition d’IHM Laboratoire I3S Ecole d’Ingénieur en Sciences Informatiques (ESSI)

2 IHM sur supports mobiles
Complexification de la conception ergonomique et logicielle 13/10/2018

3 IHM sur supports mobiles
Complexification de la conception ergonomique et logicielle 13/10/2018

4 IHM sur supports mobiles
Complexification de la conception ergonomique et logicielle 13/10/2018

5 Les enjeux de la mutation
De nouveaux problèmes à résoudre prendre en compte le contexte dans l'interaction Perception/modélisation/adaptation Des solutions à des problèmes anciens à revoir les techniques d'interaction : windows, icons, menus, pointing Des problèmes classiques prennent une importance particulière concevoir pour plusieurs plates-formes Ingénierie au cas par cas insuffisante Coûts de développement et de maintenance Cohérence ergonomique entre versions 13/10/2018

6 Les travaux actuels De “simples” traducteurs (W3C)
La prise en compte de la plasticité (IMAG) La prise en compte du contexte La mise en oeuvre d’architectures (CONCERTO,…) L’approche orientée composants (I3S Rainbow) 13/10/2018

7 Traducteurs XML et XSL pour la présentation, UIML, Xforms ….(SUNML et RIML…) XSL HTML XML VoiceML WML 13/10/2018

8 Langage de description d’interfaces
13/10/2018

9 Plasticité des interfaces
Un peu d’histoire … Introduction du terme à Interact’99 Capacité d’une interface à s’adapter à son contexte d’usage dans le respect de son utilisabilité Contexte d’usage Plate-forme Environnement Utilisateur (2001) 13/10/2018

10 Plasticité des interfaces : une nécessité
Problème ? Exemple SI la batterie du PC faiblit ALORS passer sur PDA SI condition ALORS action Action  Réaction 13/10/2018

11 Espace problème 13/10/2018

12 Espace problème Domaine de plasticité Seuil de plasticité
Contexte couvert par l’IHM C2 Contexte non couvert 13/10/2018

13 Environnement : phase “conception”
“Spécifier 1 fois -> N Interfaces”  approche par modèles ARTStudio D. Thevenin Modèles archétypes Domaine Concepts Tâches Contexte User Plate-forme Environment Adaptation Evolution Transition Modèles ontologiques Config 1 Modèle Tâches et Concepts Modèle Tâches et Concepts Config 2 Concepts Concepts Tâches Tâches IHM abstraite IHM abstraite User User Plate-forme Plate-forme IHM concrète IHM concrète Environment Environment Evolution Evolution IHM finale IHM finale Transition Transition Réification, Factorisation, Traduction, Abstraction / Reconception, Crossing, Intervention Humaine 13/10/2018

14 Cadre de référence : phase “conception”
13/10/2018 Cadre de référence : phase “conception” Config 1 Tâches & Concepts IHM abstraite IHM concrète IHM finale 13/10/2018

15 Cadre de référence : phase “exécution”
Identification du Identification Reconnaissance de situation changement de Des solutions Calcul d’une réaction contexte candidates Détection de Selection d’une solution candidate changement de contexte Capture du Exécution du contexte prologue Execution de Execution de la Exécution de la réaction L’épilogue reaction 13/10/2018

16 Approche par composants

17 Problématiques Problèmes de composition
A chaque composant métier est associé un composant d’IHM Composants métiers composables dynamiquement Vers de la programmation “légo” Intégration plus aisée de composants externes et hétérogènes Fusion des IHMs Réutilisation d’IHMs Héritage, IHM générique Adaptabilité des IHMs Aux supports matériels, aux OS, aux langages Pour éviter de maintenir plusieurs versions d’IHMs (HTML, Swing, ...) Accessibilité des IHMs... 13/10/2018

18 Spécificités des applications et contraintes IHMs
13/10/2018 Spécificités des applications et contraintes IHMs Changement du contexte d'exécution du composant (d’utilisation de fonctionnalités) d'une station à un PDA, un téléphone portable … "Reconfiguration" du composant Retrait / ajout de composants (demande de fonctionnalités, de services) Composition de composants Comment réutiliser une IHM existante sur un support différent ? Comment composer les IHMs des composants métiers ? Déporter le composant prise de commande sur un PDA pour le consultant sur site Ajouter dynamiquement le service de gestion de stock pour informer du délai… 13/10/2018

19 Proposition : modèle de composants et abstraction
13/10/2018 Proposition : modèle de composants et abstraction Composer les IHMs des composants métiers Réutiliser des composants métiers Spécification d ’ IHM indépendantes du support Un modèle de composant + ISL + SUNML Un modèle de composants qui découple composant métier et composants d ’IHM. Composition de composants métiers par interactions Règles de composition adaptées aux IHMs Fusion de règles vérifiant la cohérence de la composition Atelier de composition La communication entre composants IHM et métier est exprimée par des interactions Un langage abstrait de description structurelle des IHMs : SUNML dans la lignée de XForms, RIML,... (inspiré de UIML) 13/10/2018

20 Les différentes étapes de développement
13/10/2018 Les différentes étapes de développement Décrire chaque composant : Client, Facture … Avec la(les) description(s) de son(ses) IHM(s) en SUNML Et la liste des interactions Interaction de contrôle : Métier – IHM Interaction technique : Métier-Service Interaction avec d’autres composants ex : Facture – Article Enfin le fichier de déploiement lors du lancement de l’application Ajout/modification/retrait dynamique d’interactions : service d’assemblage (serveur d’interactions) d’IHMs : service d’assemblage d’IHMs (UIService) 13/10/2018

21 13/10/2018 Pourquoi SUNML ? Un langage à balises permettant la composition pour expérimenter SUNML Découpage structurelle similaire à UIML (structure / style / …) Partie structure simplifiée et abstraite -> meilleure adaptabilité Composition abstraite des IHMs 13/10/2018

22 Adaptabilité des IHMs : aspect Traductiion
Adaptation au contexte d’exécution Nomadisme Utilisateur nomade vs composant nomade Exemple de l’agenda Contenu dépend de la complexité du support (PDA, PC) Langues Styles par utilisateur par support, … 13/10/2018

23 Les éléments de SUNML Widgets de base :
Element : véhicule l'information Type: string, int, double... Editable ou non éditable Ex : Label, TextField Link: lien pour exécuter une action Ex : Button, Menu item List: regroupe des widgets Ex : List, Array, Grid, Table Dialog: Ex : Panel Interface: Ex : Frame 13/10/2018

24 SUNML vers Java Swing Champ non-éditable Champ éditable Bouton Liste
<link name=“button” value=“OK”/> Champ non-éditable <element type=“string” mode=“read” value=“what…”/> Liste <list name="list1"> <element type= "string"/> </list> <element type=“string” mode=“read-write” value=“the…”/> Champ éditable Panneau <dialog name="panel"> <element type="string"/> <list name="list"> <link name="button"> <element type="string">OK</element> </link> </dialog> 13/10/2018

25 Fichier SUNML du composant d’IHM
13/10/2018 Fichier SUNML (Spécification) <sunml> <interface id="FicheClient"> <structure> <dialog id="MainDialog" sequence="true"> ... <field id="LabelFieldNom" mode="read"> <element type="String">Nom :</element> </field> <field id="FieldNom" mode="read-write"> <element type="String">Toto</element> </field> ... </dialog> </structure> </interface> </sunml> Exemple en Swing 13/10/2018

26 SUNML + IHM abstraite => IHM concrète
13/10/2018 SUNML + IHM abstraite => IHM concrète Fichier SUNML (Spécification) IHM abstraite (Exécution) <sunml> <interface id="FicheClient"> <structure> <dialog id="MainDialog" sequence="true"> ... <field id="LabelFieldNom" mode="read"> <element type="String">Nom :</element> </field> <field id="FieldNom" mode="read-write"> <element type="String">Toto</element> </field> ... </dialog> </structure> </interface> </sunml> FicheClient HMI Réification MainDialog Dialog ... LabelFieldNom FieldNom Field Field ? ? Projection IHM concrète (Exécution) JFrame1 JFrame ? JPanel1 JPanel durand ... JLabel1 JField1 Composant métier (Exécution) Légende JLabel JTextField 13/10/2018 Instance

27 De l’IHM abstraite vers l’IHM concrète
13/10/2018 Séparation du composant d’IHM du composant métier Expression des communications possibles entre ces composants avec ISL Adaptation des composants suivant le contexte d’exécution FicheClient Controleur IHM abstraite durand JFrame1 Composant métier SwingEvents IHM concrète Légende Instance 13/10/2018 interaction

28 Exemple de Contrôleur Une spécification du composant :
13/10/2018 Une spécification du composant : Schéma d’interactions Contrôleur (ISL) Implémentation : Classe d’interactions ControleurImpl Exécution : Objet d’interactions ControleurImpl controleur interaction Controleur (ClientInt c, IHMInt h) { this.init() -> h.getWidget("FieldNom").setData(c.getNom()) // h.getWidget("FieldCA").setData(this.convertString(c.getCA())) c.setNom(string nom) -> _call; h.getWidget("FieldNom").setData(nom) c.setCA(double ca) -> _call; h.getWidget("FieldCA").setData(this.convertString(ca)) } ControleurImpl init() destroy() IO[] getParticipants() Rule[] getRules() … controleur durand FicheClient Légende Classe 13/10/2018 Instance

29 Exemple de Contrôleur Une spécification du composant :
13/10/2018 interaction Controleur (ClientInt c, IHMInt h) { this.init() -> h.getWidget("FieldNom").setData(c.getNom()) // h.getWidget("FieldCA").setData(this.convertString(c.getCA())) c.setNom(string nom) -> _call; h.getWidget("FieldNom").setData(nom) c.setCA(double ca) -> _call; h.getWidget("FieldCA").setData(this.convertString(ca)) } Une spécification du composant : Schéma d’interactions Contrôleur (ISL) Implémentation : Classe d’interactions ControleurImpl Exécution : Objet d’interactions ControleurImpl controleur ControleurImpl init() destroy() IO[] getParticipants() Rule[] getRules() … controleur durand FicheClient Légende Classe 13/10/2018 Instance

30 Composition d’IHMs Composants Composite
Composants indépendants, composables Mais interactions possibles Composants Composite 13/10/2018

31 Composition d’IHMs Fusion d’éléments redondants (e.g. menus)
13/10/2018

32 Composition d’IHMs Composition d’éléments simples => composite complexe (liste) Construction automatique du composite Sélection d’un sous-ensemble d’attributs Référence entre le composite et le composant 13/10/2018

33 Exemple de Liste de Clients
13/10/2018 Composition Représentant – Client (1-n) : Liste de clients Fichier SUNML (spécification) <sunml> <interface id="ListeClients"> <structure> <dialog id="MainDialog" sequence="true"> <list id="ListeClients" reference="FicheClient" select="Field[FieldNom]"/> </list> </structure> </interface> </sunml> Exemple en Swing 13/10/2018

34 Architecture type de composition
13/10/2018 Composant métier SwingEvents IHM concrète durand JFrame1 durand durand IHM abstraite FicheClient Controleur Composition 1-n (clientelle) ListeClients ListeClients IHM abstraite représentant JFrame2 Composant métier IHM concrète Légende Instance 13/10/2018 interaction

35 Conclusion Nos compétences : plate-forme à composants
13/10/2018 Nos compétences : plate-forme à composants assemblage (dynamique) de composants adaptation de composants On a besoin de compétences sur : Plasticité des IHMs : Ergonomie et l’utilisabilité des IHMs résultantes de l’assemblage … Contextes : Interactions Homme Machine Un langage à balises plus complet RIML  Ce que l’on vise : Une infrastructure de composition dynamique Un atelier de composition (WYSIWYG, WISIWYS) 13/10/2018

36 Exemple d’atelier… Démo
13/10/2018