Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Composition d'applications multi-modèles dirigée par la composition des interfaces graphiques

966 views

Published on

  • Be the first to comment

Composition d'applications multi-modèles dirigée par la composition des interfaces graphiques

  1. 1. Composition d’applications multi- modèles dirigée par la composition des interfaces graphiques Christian Brel 28 Juin 2013 • Gaëlle Calvary - Professeur, INP Grenoble • Jean Vanderdonckt - Professeur, Université Catholique de Louvain • Sophie Lepreux - Docteur, Université de Valenciennes et du Hainaut-Cambrésis • Mireille Blay-Fornarino - Professeur, Université Nice Sophia Antipolis • Michel Riveill - Professeur, Université Nice Sophia Antipolis (Co-Directeur) • Philippe Renevier-Gonin - Docteur, Université Nice Sophia Antipolis (Co-Directeur) Jury
  2. 2. Utilisation simultanée d’applications 2 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  3. 3. Cinéma • Obtenir les cinémas les plus proches de son hôtel • Visualiser les séances de film d’un cinéma sélectionné 3 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  4. 4. Maps • Obtenir le trajet entre son hôtel et le cinéma choisi • Lister les principales intersections du trajet 4 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  5. 5. Problèmes liés à l’utilisation simultanée d’applications • Manipulations nombreuses • Perte d’informations • Risque d’erreur de copies d’informations • Obtenir les cinémas les plus proches de son hôtel • Obtenir le trajet entre son hôtel et le cinéma choisi 5 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  6. 6. Problèmes des éditeurs d’applications 6 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  7. 7. Besoins liés aux problèmes de l’utilisateur et de l’éditeur • Construire rapidement de nouvelles applications dans un but fixé • Réutiliser l’existant – Exploiter les fonctionnalités existantes – Exploiter l’usage existant des fonctionnalités – Exploiter l’intégration de ces fonctionnalités dans une interface graphique existante • Obtenir une application cohérente: – Du point de vue utilisateur: utilisable et exécutable 7 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  8. 8. Développement d’une application en GL et en IHM Interface graphique (IG) Noyau Fonctionnel (NF) Arbre de tâches [CRF] T T T T T T C C CC C C [UML] Cas d’utilisations 8 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  9. 9. Cohérence: du point de vue logiciel Interface graphique (IG) Noyau Fonctionnel (NF) Arbre de tâches T T T T T T C C CC C C C C C • Cohérence: – Pouvoir atteindre un but – A travers une interface graphique – Couplée à la partie fonctionnelle 9 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  10. 10. Une composition cohérente d’applications Extraction de sous-parties cohérentes Modélisation d’une application cohérente par des correspondances entre plusieurs modèles C C CC C C C C CC C C C C CC C C T T T T T T T T T T T T T T T T T T Interconnexions des sous parties extraites 10 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  11. 11. Plan • Contexte et enjeux de la composition d’applications • Etat de l’art: Composition d’applications • Modèles de description d’une application • Sélection • Composition par substitutions • Validation à travers un prototype et des tests utilisateurs • Synthèse et perspectives Processus de composition 11 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  12. 12. ETAT DE L’ART: COMPOSITION D’APPLICATIONS - Composition au niveau graphique - Composition au niveau fonctionnel - Composition au niveau tâches 12 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  13. 13. Composition d’applications: Trois points d’entrées T T T T T T C C CC C C 13 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  14. 14. Point d’entrée pour la composition: l’interface graphique IG 1 IG 2 [ComposiXML] [WinCuts] [UI Façades] [COTS-UI] Nouveau NF IG 3 = IG 1 + IG 2 C C CC C C 14 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  15. 15. Point d’entrée pour la composition: le noyau fonctionnel NF 1 NF 2 NF 3 = NF 1 + NF 2 C C CC C C C C CC C C C C CC C C [ServFace] [ALIAS] [BPEL] [BPEL4WS] Nouvelle IG 15 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  16. 16. Point d’entrée pour la composition: les tâches T T T T T T T T T T T T Tâches 1 Tâches 2 Tâches 3 = Tâches 1 + Tâches 2 T T T T T T [Composants de tâches] [Compose] [ServFace] C C CC C C Nouveau NF Nouvelle IG 16 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  17. 17. Synthèse de l’état de l’art • Perte de la cohérence globale de l’application Risque d’application non exécutable Risque d’application non utilisable Utilisation de modèles pour chaque partie de l’application Mise en évidence de correspondances entre ces modèles 17 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  18. 18. MODÈLES DE DESCRIPTION D’UNE APPLICATION - Modèle de l’Interface Graphique - Modèle du noyau fonctionnel - Modèle de l’arbre de tâches - Liaisons entre modèlesINTERACT’11 WEBIST’11 IHM’11 HCSE’10 { } 18 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  19. 19. Modèle pour l’Interface Graphique 19 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  20. 20. Modèle hiérarchique Element d'IG Element d'IGElement d'IG Element d'IGElement d'IG Element d'IG SunML UIML MARIA UsiXML XAML SWING [ ] • Cohérence graphique « de contenance » 20 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  21. 21. Positionnement des éléments de l’interface Element d'IG Element d'IGElement d'IG Element d'IGElement d'IG Element d'IG isBelowOf isOnTheRightOfisOnTheRightOf Situé Au dessus à gauche de (uie1) Situé Au dessus de (uie1) Situé Au dessus à droite de (uie1) Situé A gauche de (uie1) Elément de référence (uie1) Situé A droite de (uie1) Situé En dessous à gauche de (uie1) Situé En dessous de (uie1) Situé En dessous à droite de (uie1) • Cohérence graphique « de proximité » 21 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  22. 22. Modèle de l’Interface Graphique Maps MapsInterface MainContainer CheckPointsList ZoomSlider VisualizationMap MapContainer Label "Position A" Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer isOnTheLefOf isBelowOf isBelowOf isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf isOnTheRightOf 22 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  23. 23. Modèle architectural pour l’interface graphique et le noyau fonctionnel : Modèle à composants Element d'application Element d'application Port Requis Port Fourni Lien Opérationnel SCA SLCA FRACTAL[ ] C C CC C C C C C • Cohérence « opérationnelle » 23 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  24. 24. GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer Port Requis Port Fourni Lien Opérationnel AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList Modèle à composants Cinema 24 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  25. 25. Modèle pour l’Arbre de tâches: Modèle « CTT » HTA UAN GOMS CTT [ ] Task (Abstract) Task (Interaction) Task (Abstract) Task (System) Task (User) [] []>> (User) (System) (Interaction) (Abstract) Tâche Utilisateur Tâche Système Tâche d'Interaction Tâche Abstraite [] >> []>> ||| choix activation séquence-transfert parallélisme LOTOS [ ] T T T T T T • Cohérence « intentionnelle » 25 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  26. 26. Arbre de tâches Cinema Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System) Update movies list (Task)[]>> []>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> 26 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  27. 27. Cohérence globale de l’application: Correspondances entre les parties C C CC C C Composants Interface Graphique Arbre de tâches T T T T T T 27 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  28. 28. CheckPointsList ZoomSlider VisualizationMap ZoomSlider CheckPoints List Controller psInterface MainContainer MapContainer RouteContainer MainContainer CheckPointsList ZoomSlider VisualizationMap MapContainer Label "Position A" Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer isOnTheLefOf isBelowOf isBelowOf isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf isOnTheRightOf CheckPointsList ZoomSlider VisualizationMap ZoomSlider Controller CheckPoints List Controller MapsInterface MainContainer MapContainer RouteContainer MainContainer CheckPointsList ZoomSlider VisualizationMap MapContainer Label "Position A" Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer isOnTheLefOf isBelowOf isBelowOf isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf isOnTheRightOf Encapsulation: Correspondance Interface Graphique – Composants 28 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  29. 29. CheckPointsList ZoomSlider VisualizationMap AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller RouteMap Service Fill Position A (Interaction) Fill Position B (Interaction) Update Map and Checkpoints list (Interaction) ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Update Checkpoints List (Interaction) ||| Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> ZoomSlider Controller Visualization Map Controller CheckPoints List Controller MapsInterface MainContainer MapContainer PositionsContainer RouteContainer CheckPointsList ZoomSlider VisualizationMap AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller RouteMap Service Fill Position A (Interaction) Fill Position B (Interaction) Update Map and Checkpoints list (Interaction) ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Update Checkpoints List (Interaction) ||| Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> ZoomSlider Controller Visualization Map Controller CheckPoints List Controller MapsInterface MainContainer MapContainer PositionsContainer RouteContainer Port Requis Port Fourni Lien Opérationnel Réalisation (métier et interaction) d’une tâche: Correspondance Tâches – Composants 29 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  30. 30. Maps TaskTree (Abstract) Zoom on Map (Abstract) Trigger Zoom (Interaction) Calcul Zoom (System) Update Map and slider (Interaction)[]>> []>> Highlight a checkpoint (Interaction) Retrieve a Route (Abstract) >>[] Select a checkpoint (Interaction) Hig checkpo (Inte []>> Fill Position A (Interaction) Fill Position B (Interaction) Upd Che (I ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> MapsInterface MainContainer CheckPointsList VisualizationMap ontainer Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer LefOf isBelowOf isBelowOf isBelowOf isBelowOf isOnTheRightOf isOnTheRightOf Maps TaskTree (Abstract) Zoom on Map (Abstract) Trigger Zoom (Interaction) Calcul Zoom (System) Update Map and slider (Interaction)[]>> []>> Highlight a checkpoint (Interaction) Retrieve a Route (Abstract) >>[] Select a checkpoint (Interaction) H checkp (In []>> Fill Position A (Interaction) Fill Position B (Interaction) Up C ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> MapsInterface MainContainer CheckPointsList VisualizationMap ontainer Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer efOf isBelowOf isBelowOf isBelowOf isBelowOf isOnTheRightOf isOnTheRightOf Réalisation (interaction) d’une tâche: Correspondance Interface Graphique - Tâches 30 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  31. 31. C C CC C C Ma proposition Interface Graphique Arbre de tâches T T T T T T Composants C C C 31 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  32. 32. Processus de composition C C CC C C C C CC C C C C CC C C T T T T T T T T T T T T 1) Sélection cohérente des sous-parties 2) Composition par substitutions 3) Placement des éléments graphiques dans la nouvelle interface 32 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  33. 33. SÉLECTION - Sélection cohérente - Illustration de la sélection INTERACT’11 WEBIST’11 IHM’11 HCSE’10 { } 33 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  34. 34. Sélection cohérente C C CC C C T T T T T T 1) Cohérence globale de la sélection 2) Expression des intentions utilisateurs 34 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  35. 35. Exploitation des capacités de chaque modèle: expression des intentions utilisateurs T T T T T T C C CC C C 35 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  36. 36. Sélection cohérente C C CC C C T T T T T T 1) Cohérence globale de la sélection 2) Expression des intentions utilisateurs 3) Considération de l’exécution 36 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  37. 37. Application à l’étude de cas: Cinéma 37 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  38. 38. CinemaInterface CinemaContainer GetClosestMovie TheatersButton AddressContainer AddressInput isBelowOf isOnTheRightOf MovieTheatersInfo Container Movies In Selected Cinema ClosestMovie TheatersList isOnTheRightOf GetClosestMovie Theaters Controller CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller MoviesList CinemaInterface CinemaContainer GetClosestMovie TheatersButton AddressContainer AddressInput isBelowOf isOnTheRightOf MovieTheatersInfo Container Movies In Selected Cinema ClosestMovie TheatersList isOnTheRightOf Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) []>> Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> Select Movie Theater (Interaction) Trigge search movie (Interact || Cohérence globale: Répercussion sur tâches et composants 38 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  39. 39. Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System)[]>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> Exploitation du modèle de tâches 39 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  40. 40. Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System) Update movies list (Task)[]>> []>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList Cohérence globale: répercussion sur les composants 40 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  41. 41. Considération de l’exécution GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList 41 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  42. 42. CinemaInterface CinemaContainer GetClosestMovie TheatersButton AddressContainer AddressInput isBelowOf isOnTheRightOf MovieTheatersInfo Container Movies In Selected Cinema ClosestMovie TheatersList isOnTheRightOf GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList Cohérence globale: Répercussion sur l’Interface Graphique 42 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  43. 43. CinemaInterface CinemaContainer GetClosestMovie TheatersButton AddressContainer AddressInput isBelowOf isOnTheRightOf MovieTheatersInfo Container Movies In Selected Cinema ClosestMovie TheatersList isOnTheRightOf Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System) Update movies list (Task)[]>> []>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList Sélection d’une sous-partie cohérente de l’application 43 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  44. 44. COMPOSITION PAR SUBSTITUTIONS - Substitutions entre 2 éléments d’Interface Graphique - Substitutions entre 2 éléments d’application - Substitutions entre 2 ports ICSEA’12 SEAA’12 SEDE’12 IDM’11 { } 44 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  45. 45. Principe des substitutions 45 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  46. 46. CheckPointsList ZoomSlider VisualizationMap AddressBInput RouteCalculButton RouteCalcul Controller RouteMap Service ZoomSlider Controller Visualization Map Controller CheckPoints List Controller MainContainer MapContainer PositionsContainer RouteContainer MapsInterface MainContainer CheckPointsList ZoomSlider VisualizationMap MapContainer Label "Position A" Label "Position B" AddressBInput RouteCalculButton RouteContainer PositionsContainer isOnTheLefOf isBelowOf isBelowOf isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf isOnTheRightOf AddressAInput Port Requis Port Fourni Lien Opérationnel AddressAInput Application "Maps" Application "Cinema" CinemaInterface CinemaContainer GetClosestMovie TheatersButton AddressContainer isBelowOf isOnTheRightOf MovieTheatersInfo Container Movies In Selected Cinema ClosestMovie TheatersList isOnTheRightOf GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList AddressInput AddressInput Substitutions d’éléments d’application 46 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  47. 47. CheckPointsList AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller CheckPoints List Controller PositionsContainer RouteContainer GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer GetClosestMovie TheatersButton adapter adapter Port Requis Port Fourni Lien Opérationnel Application "Maps" Application "Cinema" CheckPointsList AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller CheckPoints List Controller PositionsContainer RouteContainer Port Requis Port Fourni Lien Opérationnel GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer GetClosestMovie TheatersButton adapter Application "Maps" Application "Cinema" CheckPointsList AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller CheckPoints List Controller PositionsContainer RouteContainer Port Requis Port Fourni Lien Opérationnel GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer AddressInput AddressContainer GetClosestMovie TheatersButton Application "Maps" Application "Cinema" Succession de substitution de ports 47 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  48. 48. VALIDATION À TRAVERS UN PROTOTYPE ET DES TESTS UTILISATEURS - OntoCompo: Outil de composition d’applications - Tests UtilisateursINTERACT’11 IHM’11{ } 48 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  49. 49. Compréhension et pertinence des extensions – Apport des tâches et liens entre modèles Tests Utilisateurs: Objectifs et Déroulement Phase « d’apprentissage » Sélection et substitutions sans aide Ajout de l’aide à travers les extensions de sélection Présentation des différents modèles Entretien de fin de tests Etude rapide du code généré pour une substitution Compréhension du processus de composition « Sélection – Substitution - Placement » Aptitude à effectuer la composition à l’aide du prototype Suffisance des informations fournies (accès uniquement à l’Interface Graphique) 49 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  50. 50. Utilisateurs et Environnement de test • 9 développeurs-informaticiens répartis en 2 groupes – 4 n’ayant jamais manipulé d’outils de composition d’applications – 5 ayant utilisé au moins un outil Pas de différence significative • Environnement de test Développeur Testeur Observateur 50 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  51. 51. Résultats Compréhension et pertinence des extensions – Apport des tâches et liens entre modèles Compréhension du processus de composition « Sélection – Substitution - Placement » Aptitude à effectuer la composition à l’aide du prototype Suffisance des informations fournies (accès uniquement à l’Interface Graphique) Bonne appréhension du processus Réussite dans la concrétisation des intentions… mais des difficultés Extensions: Compréhension difficiles – Utilité comprise  Utilisation principalement de l’extension utilisant les tâches  Modèle de tâches: le plus intuitif pour effectuer les sélections  Modèle à composants: celui qui convient pour effectuer les substitutions 51 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  52. 52. SYNTHÈSE ET PERSPECTIVES 52 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  53. 53. Modélisation multi-niveaux d’une application cohérente par des correspondances entre modèles – Extraction de sous-parties cohérentes – Interconnexions des sous parties extraites  OntoCompo: un prototype pour la composition  Des expérimentations Composition d’applications dirigée par la composition des Interfaces Graphiques C C CC C C C C CC C C C C CC C C T T T T T T T T T T T T T T T T T T 53 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  54. 54. Suite des tests utilisateurs: Déterminer la représentation des modèles GetClosestMovie Theaters Controller GetClosestMovie Theaters Service CinemaInterface CinemaContainer Port Requis Port Fourni Lien Opérationnel AddressInput AddressContainer ClosestMovie TheatersList GetClosestMovie TheatersButton MovieTheatersInfo Container GetMovies Controller GetMovies Service MoviesList Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System) Update movies list (Task)[]>> []>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> CheckPointsList ZoomSlider VisualizationMap AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller RouteMap Service ZoomSlider Controller Visualization Map Controller CheckPoints List Controller MapsInterface MainContainer MapContainer PositionsContainer RouteContainer Port Requis Port Fourni Lien Opérationnel Maps TaskTree (Abstract) Zoom on Map (Abstract) Trigger Zoom (Interaction) Calcul Zoom (System) Update Map and slider (Interaction)[]>> []>> Highlight a checkpoint (Interaction) Retrieve a Route (Abstract) >>[] Select a checkpoint (Interaction) Highlight checkpoint on Map (Interaction) []>> Fill Position A (Interaction) Fill Position B (Interaction) Update Map and Checkpoints list (Interaction) ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Update Checkpoints List (Interaction) ||| Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> 54 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  55. 55. C C CC C C C C CC C C C C CC C C « Algèbre » d’applications Cinema TaskTree (Abstract) GetClosestMovie Theaters (Abstract) Retrieve closest movie theaters from given address (System) Update movie theaters list (Interaction)[]>> []>>Fill Address (Interaction) Trigger search for closest movie theaters (Interaction) []>> GetMovies (Abstract) Get movies (System) Update movies list (Task)[]>> []>> Select Movie Theater (Interaction) Trigger search for movies (Interaction) || >> Maps TaskTree (Abstract) Zoom on Map (Abstract) Trigger Zoom (Interaction) Calcul Zoom (System) Update Map and slider (Interaction)[]>> []>> Highlight a checkpoint (Interaction) Retrieve a Route (Abstract) >>[] Select a checkpoint (Interaction) Highlight checkpoint on Map (Interaction) []>> Fill Position A (Interaction) Fill Position B (Interaction) Update Map and Checkpoints list (Interaction) ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Update Checkpoints List (Interaction) ||| Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> 55 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  56. 56. Obtention des modèles d’une application CheckPointsList ZoomSlider VisualizationMap AddressAInput AddressBInput RouteCalculButton RouteCalcul Controller RouteMap Service Maps TaskTree (Abstract) Zoom on Map (Abstract) Trigger Zoom (Interaction) Calcul Zoom (System) Update Map and slider (Interaction)[]>> []>> Highlight a checkpoint (Interaction) Retrieve a Route (Abstract) >>[] Select a checkpoint (Interaction) Highlight checkpoint on Map (Interaction) []>> Fill Position A (Interaction) Fill Position B (Interaction) Update Map and Checkpoints list (Interaction) ||| Fill begin and arrival positions (Interaction) Update Map (Interaction) Update slider (Interaction) ||| Update Map (Interaction) Update Checkpoints List (Interaction) ||| Route Calcul (System) Trigger Route Calcul (Interaction) []>> []>> []>> ZoomSlider Controller Visualization Map Controller CheckPoints List Controller MapsInterface MainContainer MapContainer PositionsContainer RouteContainer Port Requis Port Fourni Lien Opérationnel MapsInterface MainContainer CheckPointsList ZoomSlider VisualizationMap MapContainer Label "Position A" Label "Position B"AddressAInput AddressBInput RouteCalculButton RouteContainer PositionsContainer isOnTheLefOf isBelowOf isBelowOf isBelowOf isBelowOfisOnTheRightOf isOnTheRightOf isOnTheRightOf UI UI UI UI UI UI UI UI UI UI UI Component UI Component UI Component UI Component Input Input Input Input Input Input Input Input Input Output Output Output Output Output Output Output Output Output Output Trigger Trigger Trigger Trigger Trigger Trigger Trigger Trigger Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input Input 56 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  57. 57. Composition menée par l’utilisateur final 57 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives
  58. 58. Merci de votre attention! 58 / 58 Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectives

×