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

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

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

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

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

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

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

Langage de description d’interfaces 13/10/2018

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

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

Espace problème 13/10/2018

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

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

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

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

Approche par composants

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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