Composition d’applications multi-
modèles dirigée par la composition
des interfaces graphiques
Christian Brel
28 Juin 2013...
Utilisation simultanée d’applications
2 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthès...
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...
Maps
• Obtenir le trajet entre son hôtel et le cinéma choisi
• Lister les principales intersections du trajet
4 / 58
Intro...
Problèmes liés à l’utilisation simultanée d’applications
• Manipulations nombreuses
• Perte d’informations
• Risque d’erre...
Problèmes des éditeurs d’applications
6 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthès...
Besoins liés aux problèmes de l’utilisateur et de l’éditeur
• Construire rapidement de nouvelles applications dans un but ...
Développement d’une application en GL et en IHM
Interface graphique (IG)
Noyau Fonctionnel (NF)
Arbre de tâches
[CRF]
T
T ...
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...
Une composition cohérente d’applications
Extraction de sous-parties cohérentes
Modélisation d’une application cohérente pa...
Plan
• Contexte et enjeux de la composition d’applications
• Etat de l’art: Composition d’applications
• Modèles de descri...
ETAT DE L’ART:
COMPOSITION D’APPLICATIONS
- Composition au niveau graphique
- Composition au niveau fonctionnel
- Composit...
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élec...
Point d’entrée pour la composition:
l’interface graphique
IG 1 IG 2
[ComposiXML]
[WinCuts]
[UI Façades]
[COTS-UI]
Nouveau ...
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
[Se...
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
...
Synthèse de l’état de l’art
• Perte de la cohérence globale de l’application
Risque d’application non exécutable
Risque ...
MODÈLES DE DESCRIPTION D’UNE
APPLICATION - Modèle de l’Interface Graphique
- Modèle du noyau fonctionnel
- Modèle de l’arb...
Modèle pour l’Interface Graphique
19 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse P...
Modèle hiérarchique
Element d'IG
Element d'IGElement d'IG
Element d'IGElement d'IG Element d'IG
SunML
UIML
MARIA
UsiXML
XA...
Positionnement des éléments de l’interface
Element d'IG
Element d'IGElement d'IG
Element d'IGElement d'IG Element d'IG
isB...
Modèle de l’Interface Graphique
Maps
MapsInterface
MainContainer
CheckPointsList
ZoomSlider VisualizationMap
MapContainer
...
Modèle architectural pour l’interface graphique
et le noyau fonctionnel : Modèle à composants
Element
d'application
Elemen...
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaContainer
Port Requis
Port Four...
Modèle pour l’Arbre de tâches:
Modèle « CTT »
HTA
UAN
GOMS
CTT
[ ] Task
(Abstract)
Task
(Interaction)
Task
(Abstract)
Task...
Arbre de tâches
Cinema
Cinema
TaskTree
(Abstract)
GetClosestMovie
Theaters
(Abstract)
Retrieve closest movie
theaters from...
Cohérence globale de l’application:
Correspondances entre les parties
C
C
CC C
C
Composants
Interface Graphique
Arbre de t...
CheckPointsList
ZoomSlider VisualizationMap
ZoomSlider
CheckPoints
List
Controller
psInterface
MainContainer MapContainer
...
CheckPointsList
ZoomSlider VisualizationMap
AddressAInput
AddressBInput
RouteCalculButton
RouteCalcul
Controller
RouteMap
...
Maps
TaskTree
(Abstract)
Zoom on Map
(Abstract)
Trigger
Zoom
(Interaction)
Calcul
Zoom
(System)
Update Map and slider
(Int...
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'...
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
...
SÉLECTION
- Sélection cohérente
- Illustration de la sélection
INTERACT’11
WEBIST’11
IHM’11
HCSE’10
{ }
33 / 58
Introducti...
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
...
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
Introdu...
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
...
Application à l’étude de cas: Cinéma
37 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthès...
CinemaInterface
CinemaContainer
GetClosestMovie
TheatersButton
AddressContainer
AddressInput
isBelowOf
isOnTheRightOf
Movi...
Cinema
TaskTree
(Abstract)
GetClosestMovie
Theaters
(Abstract)
Retrieve closest movie
theaters from given
address
(System)...
Cinema
TaskTree
(Abstract)
GetClosestMovie
Theaters
(Abstract)
Retrieve closest movie
theaters from given
address
(System)...
Considération de l’exécution
GetClosestMovie
Theaters
Controller
GetClosestMovie
Theaters
Service
CinemaInterface CinemaCo...
CinemaInterface
CinemaContainer
GetClosestMovie
TheatersButton
AddressContainer
AddressInput
isBelowOf
isOnTheRightOf
Movi...
CinemaInterface
CinemaContainer
GetClosestMovie
TheatersButton
AddressContainer
AddressInput
isBelowOf
isOnTheRightOf
Movi...
COMPOSITION PAR SUBSTITUTIONS
- Substitutions entre 2 éléments d’Interface Graphique
- Substitutions entre 2 éléments d’ap...
Principe des substitutions
45 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspect...
CheckPointsList
ZoomSlider VisualizationMap
AddressBInput
RouteCalculButton
RouteCalcul
Controller
RouteMap
Service
ZoomSl...
CheckPointsList
AddressAInput
AddressBInput
RouteCalculButton
RouteCalcul
Controller
CheckPoints
List
Controller
Positions...
VALIDATION À TRAVERS UN PROTOTYPE
ET DES TESTS UTILISATEURS
- OntoCompo: Outil de composition d’applications
- Tests Utili...
Compréhension et pertinence des extensions – Apport des tâches et liens entre modèles
Tests Utilisateurs:
Objectifs et Dér...
Utilisateurs et Environnement de test
• 9 développeurs-informaticiens répartis en 2 groupes
– 4 n’ayant jamais manipulé d’...
Résultats
Compréhension et pertinence des extensions – Apport des tâches et liens entre modèles
Compréhension du processus...
SYNTHÈSE ET PERSPECTIVES
52 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspectiv...
Modélisation multi-niveaux d’une application
cohérente par des correspondances entre modèles
– Extraction de sous-parties ...
Suite des tests utilisateurs:
Déterminer la représentation des modèles
GetClosestMovie
Theaters
Controller
GetClosestMovie...
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)...
Obtention des modèles d’une application
CheckPointsList
ZoomSlider VisualizationMap
AddressAInput
AddressBInput
RouteCalcu...
Composition menée par l’utilisateur final
57 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Sy...
Merci de votre attention!
58 / 58
Introduction Etat de l'art Modèles Sélection Substitutions Validation Synthèse Perspecti...
Prochain SlideShare
Chargement dans…5
×

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

912 vues

Publié le

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
912
Sur SlideShare
0
Issues des intégrations
0
Intégrations
127
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • En vacances, à mon hôtel, et je veux aller au cinéma.
  • Les manipulations vont être nombreuses et les aller-retour entre les applications se multiplient assez vite.Il y a un risque de perdre des informations durant ces manipulations et surtout une copie d'informations est nécessaire pour réaliser la tâche que nous nous sommes fixée.Dans le meilleur des cas, nous arrivons à effectuer un copier-coller correct et la tâche sera atteinte correctement.Dans le moins bon des cas, la copie s'effectue en introduisant des erreurs qui peuvent conduire à un résultat erronée et à un échec de la tâche fixée.
  • Ils sont confrontés alors à différents problèmes qui sont la recherche de la ou les bonnes API pour ajouter de nouvelles fonctionnalités à leur application, et surtout la bonne API permettant de répondre aux besoins des utilisateurs, qui vont avoir des buts à atteindre potentiellement différents. Puis lorsque le choix de l'API est effectué, il faut alors l'intégrer à son application et ici, hors mis les problèmes liés à cette intégration en terme d'interopérabilité avec l'existant, il faut aussi construire l'interface graphique afin que ces nouvelles fonctionnalités soient utilisables dans l'application.
  • Pour définir une telle application, si nous regardons le développement d'une application en GL et en IHM, nous pouvons constater qu'une application est constituée de trois parties. Les deux parties exécutables de l'application sont la partie visible de l'application qui est son interface graphique et la partie cachée de l'application qui le noyau fonctionnel. Du côté du GL, après avoir capturé les besoins, le noyau fonctionnel est développé puis l'interface graphique de l'application est développé et liée à sa partie fonctionnelle. En IHM, le cycle part de l'expression des besoins à travers un arbre de tâches de l'application, puis par raffinement de cet arbre, l'interface graphique de l'application est obtenue. Enfin, le noyau fonctionnel est alors développé et liée à l'interface graphique de l'application.
  • 3 parties qui vont être l'arbre de tâches de l'application, qui va permettre de décrire l'ensemble des fonctionnalités disponibles dans l'application et comment elles se réalisent, l'interface graphique de l'application et son noyau fonctionnel pour la partie opérationnelle de l’application.
  • [Composantsde tâches] => G. Bourguin, A. Lewandowski, JC. Tarby (TMDUID, 2007)=> A. Lewandowski, S. Lepreux, G. Bourguin (HCI, 2007)
  • Nous pouvons alors établir une synthèse sur ces travaux en composition d'applications. La cohérence globale de l'application telle que nous l'avons définie n'est pas maintenue. Effectivement, les travaux s'appuient sur une seule partie de l'application pour effectuer la composition, et sont ammenés à générer tout une partie de l'application. Les liens entre les différentes parties ne sont pas préservées qui se traduit par un manque en terme d'utilisabilité de l'application ou par une lacune en terme d'exécution. Cependant, chacun des ses travaux s'appuient sur des modèles permettant d'effectuer ces compositions et pour certains mettent déjà en place des liens entre certaines parties de l'application.
  • Donner plus d’explications (cf Question Jean)
  • Bien positionner à l’oral! => Granularité, positionnement entre AUI et CUIOn n’a pas d’infos sur les MODALITES!!!!
  • Après ce slide: ma contrib mettre les liens entre modèles
  • Titre : Hypothèse (point de vue + cohérence) ; thèse : la modélisation pour la composition
  • Parler arbre / graphe
  • Partir du bouton
  • Revoir discours
  • Justifier substitutions!Union, juxtaposition => pas de pb, et pas ce que je veux obtenirEntrelacer les entrées/sortiesEntrelacer complètement au niveau code (pas dans mon hypothèse)
  • Accès  Point d’entrée
  • 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

    ×