Architecture orientée pattern et dirigée par des modèles ...lounis_h/inf980x/Thesis... ·...
Transcript of Architecture orientée pattern et dirigée par des modèles ...lounis_h/inf980x/Thesis... ·...
1
Soutenance de la thèse de Doctorat
25 Novembre 2008
Mohamed TALEB
Architec ture orientée pattern et dirig ée par des modèles pour les s ys tèmes interac tifs
(Pattern-Oriented and M odel-driven Arc hitec ture for Interac tive S ys tems )
Supervisée par Dr. Alain Abran, Directeur, ÉTS
Et par
Dr. Ahmed Seffah, Co-Directeur, Université Concordia
2
Ordre du jour■ Introduction et motivation■ État de l’art■ Objectif, Limite et Méthodologie■ Architecture proposée : POMA■ Étude de cas ■ Conclusion■ Présentation du prototype■ Bibliographies■ Période de questions
3
Introduction et motivationSystèmes Interactifs (SI) C’est un programme avec lequel l'utilisateur engage une conversation (un dialogue) dans le but
d'accomplir un travail donné. Exemples: Webmail, les ventes au détail en ligne, ventes aux enchères en ligne, les forums de
discussion, les blogs, et bien d'autres.
ArchitecturesSI et IU Plusieurs modèles d’architectures: Seeheim model, Model-View-Controller, Agent Multi-Faceted, Arch/Slinky, Presentation
Abstraction Control (PAC), PAC-Amadeus and Model-View-Presenter (MVP) Améliorer et faciliter le design des systèmes interactifs Faciliter le développement et la maintenance Promouvoir la standardisation, la portabilité et utilisabilité
Patterns■ Remédier à quelques faiblesses des ces architectures ■ Fournir un bon nombre de solutions éprouvées à ces faiblesses récurrentes
Quelques problèmes non résolus par les patterns■ Découplage des divers aspects des systèmes interactifs : la logique de sujet, l'interface utilisateur,
la navigation et l'information ■ Séparation des aspects des plateformes spécifiques des caractéristiques communes à tous les
systèmes interactifs
4
Introduction et motivation (Suite)
Modèles Utilisés pour représenter la fléxibilité des systèmes interactifs complèxes Un modèle est une représentation d’une partie de la fonction, de la structure et/ou du
comportement d’un système (OMG)
Nouvelles générations des plateformes Ordinateur traditionnel, PDA, Téléphone mobile, télévision interactive, Laptop, Palmtop
Techniques d’interaction plus sophistiquées pour interagir avec des services et l'information
L'émergence des systèmes interactifs comme sous-discipline du génie logiciel avec quelques défis spécifiques
Motivation Adapter les patterns et quelques architectures de développement : Pattern-Oriented Design
(POD), Pattern-Supported Approach (PSA), et Model-Driven Architecture (MDA)
Supporter à la fois les utilisateurs novices et experts dans le développement
5
Introduction et motivation (Suite)Sommaire :
N-TierArchitecture:
Seeheim, Arch/Slinky, MVC,MVP, PAC,
PAC-Amodeus
TheProposed
Architecture:
Pattern-Oriented andModel-drivenArchitecture
(POMA)
Patterns
Models
1- Pattern-OrientedDesign(POD),
2- Pattern-SupportedApproach
(PSA)
Model-Driven
Architecture(MDA)
6
État de l’art Patterns permettent:
■ Une meilleure compréhension des données■ Structurer l’information pour une meilleure visualisation
Modèles offrent:■ Une flexibilité des systèmes pour comprendre les problèmes de conception
■ Pourquoi Patterns et modèles?
Problème
Solution Contexte
Pattern
exprime unensemble de forces(buts et contraintes)qui ont lieu dans cecontexte.
Contexte réfère à unensemble de situationsrécurrentes danslesquelles les patternssont appliqués.
Solution réfère à unmodèle pour laconception que l'onpeut appliquer pourrésoudre ces forces
■ Solution est le pattern: 3 élements principaux:
7
État de l’art (Suite)
■ MVC (architecture 3-tier)■ Repose sur une séparation de trois types d'objets suivants:
■ Modèle: pour maintenir les données; ■ Vue : pour afficher tout ou une partie des données; ■ Contrôleur: pour manipuler les événements qui affectent le modèle ou la vue(s).
■ J2EE (architecture 5-tier)■ Proposée par «Sun Microsystem » pour modéliser l'architecture « Core J2EE Patterns ».
■ Architecture N-tier
Brow ser
Presentation
Business Logic
M iddlew are
Persistence(Sun Microsystems, 2002a)
8
■ Zackman (architecture multi-tier)■ Les colonnes classent les réponses à des questions : What (Data), How (Function), Where
(Network), Who (People), When (Time) and Why (Motivation)■ Représentent différents domaines d'intérêts pour chaque perspective ■ Décrivent les dimensions des efforts de développement des systèmes
■ Les lignes classent les perspectives de l’audience: portée (Scope), propriétaire (Owner), concepteurs (designers), constructeurs (Builders), les métiers (trades) et le fonctionnement de l’organisation
État de l’art (Suite)
Presentation
Interaction
Navigation
Visualization
Interoperability
Information
WHY (Motivation)WHEN (Time)
WHO (People)
WHERE (Network)
HOW (Function)
WHAT (Data)
Architectural level and categories of patterns
9
État de l’art (Suite)■ Patterns-Oriented Design (POD)
Structure of patterns
Behavior of patterns
Code
■ Pattern Supported Approach (PSA)
BusinessDomainPattern
BusinessProcessPattern
Task Pattern
SubtaskPattern
SubtaskPattern
Information Pattern
Structure &Navigation
DesignPattern
GUI DesignPattern
UI Design Pattern
SystemDefinition
Task/Useranalysis
User InterfaceArchitecture Design
La motivation de POD est d'aider les concepteurs novices à appliquer des patterns correctement et efficacement.
L'idée principale: les patterns peuvent être documentés selon le cycle de développement.
10
État de l’art (Suite)■ Model-Driven Architecture (MDA) de OMG
Transform
Transform
PIM
PSM
Code
PleinementNonNonNonNonNonOuiPartiellement
OuiMDA
NonPleinementNonNonNonNonOuiPartiellement
NonPSA
NonNonPleinementPleinementNonNonOuiPartiellement
NonPOD
OuiNonOuiOuiNonNonOuiPartiellement
PleinementN-tiers
NonNonNonOuiOuiOuiOuiOuiNonPatterns (n’est pas
une architecture)
ModèlesTâches et Sous-tâches
Technique comporte-mentalle
Technique Structurelle
Composant humain
RelationConcept prouvé
SolutionNiveau Architecturel
Caractéristiques et critèresPatterns et Architectures
■ Sommaire des ces architectures et caractéristiques
L'idée principale: spécifier la logique du sujet sous forme de modèles abstraits.
11
■ But de la recherche■ « Définir une nouvelle architecture pour faciliter le développement et la migration des
systèmes interactifs en améliorant leur utilisabilité et leur qualité ».
■ Objectif de la recherche■ Développer une nouvelle architecture qui s’appelle : « Architecture orientée pattern et dirigée
par des modèles : A Pattern-Oriented and Model-Driven Architecture (POMA) ».■ L’architecture proposée POMA sera basée sur les concepts:
■ Architectures N-tiers (MVC, J2EE et Zachman)■ POD■ PSA■ MDA
■ Limite de la recherche■ Le projet de recherche ne prend pas en compte les règles de génération ni la génération du
code source des systèmes interactifs.
Objectif, Limite et Méthodologie
12
Objectif, Limite et Méthodologie (Suite)Inputs Phases Outputs Outcomes
Design of newarchitecture(Chapter 3)
POMA architecture
Analysis andConstruction of
exploratory casestudy of POMA forInteractive System
(Chapter 6)Prototype programmed
1- Identification ofconstraints and items to
improve2- Identification ofresearch avenues
Elaboration ofbackground and
related work(Chapter 1)
Patterns
Models
Architectures
Background and RelatedWork elaborated aboutPatterns, Models, N-tierarchitecture, POD, PSA,
MDA
Definition of ResearchIssues
(Chapter 2)
Research Issuesdefined
Presentation of thedetailed description of
architectural levelsand categories ofpatterns in POMA
(Chapter 4)
Architectural levels andcategories of patterns in POMA
presented and described
Patterns Composition Rules
Patterns Mapping Rules
Presentation of thedetailed description ofcategories of models
in POMA(Chapter 5)
Categories of models in POMApresented and described
Models Transformation Rules
Exploratory Case StudyAnalyzed
13
Architecture proposée: POMADomain Model[POMA.PIM]
Task Model [POMA.PIM]
Dialog Model[POMA.PIM]
Layout Model [POMA.PIM]
TransformationT1
TransformationT2
TransformationT4
The Symbol Represents an interaction
TransformationT3
PresentarionModel
[POMA.PIM]
Domain Model[POMA.PSM]
Task Model[POMA.PSM]
Dialog Model[POMA.PSM]
Layout Model[POMA.PSM]
TransformationT’1
TransformationT’2
TransformationT’4
TransformationT’3
PresentationModel
[POMA.PSM]
POMA : Pattern-Oriented and Model-driven Architecture
PIM : Platform Independent Model
PSM : Platform Specific Model
GenerationCodeGeneration
rules
Categories ofPatterns
InteractiveSyatem Source
Code
Languageused
NavigationPatterns
InteractionPatterns
VisualizationPatterns
PresentationPatterns
InformationPatterns
InteroperabilityPatterns
Transformationrules
MappingrulesComposition
rules
PatternsComposition
PatternsMapping
Lang
uage
used
14
Architecture proposée: POMA (Suite)Justification de POMA Les architectures N-tier (MVC-3 tier, J2EE-5 tier, Zackman-Multi-tier): concept de niveaux
d’architecture L’architecture POD : concept de techniques de composition L’architecture PSA : concept de catégorisation de patterns L’architecture MDA : concept de transformation des modèles et de mapping
Spécifications et représentation de POMA : XML et UML
Patterns dans POMA Patterns de navigation : décrivent des techniques éprouvées pour la navigation avec un ensemble
de pages et une partie de l'information (Ex. BreadCrumb (Path), Index Browser, etc.) Patterns d’interaction : se focalisent sur les mécanismes d'interaction qui peuvent être utilisés pour
accomplir les tâches et les effets visuels (Ex. Search pattern, etc.) Patterns de présentation : décrivent les solutions pour savoir comment le contenu ou les services
sont organisés, de façon visuelle (Ex. List, Graph, Map, Table, etc.) Patterns de visualisation : décrivent les différentes représentations visuelles de l’information (Ex.
Bookmark, etc.) Patterns d’interopérabilité : décriventt le découplage des niveaux d'un système interactif, en
particulier, entre le contenu, le dialogue et les vues ou la présentation (Ex. patterns de Gamma (Bridge, Adapter, etc.)
Patterns d’information : fournissent des solutions à des questions telles que l'information qui peut ou doit être présentée sur quel périphérique (Ex. Renderer, etc.)
NavigationPatterns
InteractionPatterns
VisualizationPatterns
PresentationPatterns
InformationPatterns
InteroperabilityPatterns
15
■ Similar (X, Y) si et seulement si X et Y peuvent être remplacés par d’autres patterns de la même catégorie.
Patterns dans POMA: Règles de composition (Suite)
Competitor (X, Y) Deux patterns sont compétiteurs si et seulement s’ils sont identiques et interchangeables. ■ Le pattern Index Browsing peut être utilisé comme un raccourci de la barre d'outils qui permet à un utilisateur
d'accéder directement à un ensemble de services communs à partir de n'importe quelle page Web. ■ Le pattern Convenient Toolbar, qui fournit la même solution, est généralement considérée plus appropriée.
Composition des patterns : est le processus de création d’un design de modèles indépendants des plateformes (PIM) à partir d’un ensemble de patterns et de règles de composition. Composition
rules
16
Patterns dans POMA: Règles de composition (Suite) Super-ordinate (X, Y): Un pattern X est un super-ordinate de Y signifie que le pattern Y est utilisé
comme un block de construction pour créer le pattern X. (Exemple: pattern Page d'accueil)
■ Sub-ordinate (X, Y) si et seulement si pattern X est enchassé dans pattern Y. Pattern Y est aussi appelé super-ordonate de pattern X. (Exemple: pattern Convenient Toolbar )
■ Neighboring (X, Y) si pattern X et pattern Y appartiennent à la même catégorie de patterns. ■ Par exemple, les patterns voisins peuvent inclure l'ensemble des patterns pour concevoir une page spécifique
comme une page d'accueil
17
■ Identical (Identique): Pas de changement à la conception originale. Exemple: Menus déroulants ■ Scalable (Dimension ): les changements apportés à la taille de la conception originale ou au
nombre d’items dans la conception originale. Exemple: long menu horizontal réduction le nb d'éléments de menu (PDA)
■ Multiple: Répéter la conception originale, soit simultanément ou séquentiellement. Exemple: Long menu (Laptop) série de petits menus (PDA)
■ Fundamental (Fondamental): changer la nature de la conception originale. Exemple: menus verticaux permanents de gauche (Laptop) menu déroulant (PDA)
Patterns dans POMA: Règles de mappingsMapping des patterns : est le processus de création d’un design de modèles spécifiques des plateformes (PSM) à partir des PIM et de règles de mapping. PIM PSM Mapping
rules
18
Modèles dans POMAModèle de Domaine Encapsule les entités importantes de domaine du système en même temps que leurs attributs,
leurs méthodes et leurs relations Définit les objets et les fonctionnalités accessibles par l'utilisateur via l'interface
Modèle de Tâche Décrit la façon dont les activités peuvent être réalisées pour atteindre les objectifs de
l'utilisateur lors de l'interaction avec le système interactif Est un ensemble de tâches que les utilisateurs ont besoin d’effectuer sur le système interactif
Modèle de Dialogue Fournit des styles de dialogue pour accomplir les tâches Définit la structure de navigation de l'interface utilisateur
Modèle de Présentation Décrit l’apparence visuelle de l’interface utilisateur
Modèle de Layout Définit le « Look-and-Feel » des systèmes interactifs
19
Modèles dans POMA: Règles de transformation (Suite)
Transformation de modèles est le processus de conversion d'un ou plusieurs modèles - appelé modèles sources en modèles cibles d'un même système interactif en tenant compte des règles de transformation. PIM PIM et/ou PSM PSM
Maintenir la trace des structures de toutes les instances de classe
Maintenir la trace des structures pour l’association
Supporter la sémantique de l’état de la machine
Renforcer l’enchaînement des événements
Préserver l'atomicité de l’action
Fournir une transformation pour tous les éléments d’analyse, incluant :
Le domaine et le service du domaine
Classe, Attribut, Association, Héritage, Classe associative, Service de classe
État, Événement, Transition, Super-état, Sous-état
Tous les éléments de la modélisation des actions
20
The Login pattern on the laptop platform The Login pattern on the PDA platform
Login view of the interactive system on the laptop platform Login view of the interactive system on the PDA platform
Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)Modèle de Domaine
21
Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)
Modèle de Tâche
22
Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)Modèle de Dialogue
Login DialogEnter Username
Enter Chain
Enter Password
Provide Feedback
Submit
Close
Close Dialog
Main MenuSelect Data Source
Select Task
Select Subtask
Close
Data SourcegetDataProvider
getDataBroker
getDataUser
TaskgetDoucleClickTask
SubtaskgetSelected Subtask
Presentation Tools
DisplayIndTools
ShowIndResults
Indicators Management
Search
Browse
Environment Patterns
Find Env Patterns
UpdateEnvPatListPossible
Data Management
ShowDataPathWithPathPattern
getDataPath
SelectDataPathActivate Agent
Executive Summary Graph Pattern
Map Pattern
Table pattern
List Pattern
DisplayEnvPatTools
ShowEnvPatResults
Data Management
Indicators Management
Presentation Tools
Environment Patterns
Select Subtask
23
Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)Modèle de Présentation et de Layout
24
ConclusionRésumé■ Proposer une nouvelle architecture de développement orientée pattern et dirigée par des modèles
pour les systèmes interactifs■ Faciliter l'ingénierie des applications multi-plateformes: ordinateur traditionnel, PDA, téléphone
mobile, télévision interactive, laptop et palmtop■ Prise en considération des architectures N-tier (MVC, J2EE, Zackman), POD, PSA, MDA■ Les composants de POMA:
■ Les niveaux architecturaux et les catégories de patterns■ Les modèles PIM et PSM■ Les règles de composition des patterns■ Les règles de mapping des patterns■ Les règles de transformation des modèles■ Les règles de génération du code source (non incluse dans cette recherche)■ Génération de l’application (non incluse dans cette recherche)
Avantage de POMA■ Facilite l’utilisation des patterns par les débutants ainsi que par des experts ■ Supporte l'automatisation des approches à la fois orientée pattern et dirigée par des modèles pour
concevoir des systèmes interactifs■ Supporte la communication et la réutilisation de l'expertise individuelle concernant les bonnes
pratiques de conception■ Peut intégrer toutes les différentes nouvelles technologies: ordinateur traditionnel, laptop,
palmtop, PDA avec ou sans claviers, téléphones mobiles, télévisions interactives
25
Conclusion (Suite)Originalité du projet de recherche■ Une nouvelle architecture appelée POMA■ Règles de composition des patterns■ Règles de mapping des patterns■ Règles de transformation des modèles
Avenues futures■ Standardisation de l'architecture POMA à tous les types de systèmes, non seulement pour la
systèmes interactifs multi-plateformes■ Description d'un processus pour la génération d'un code source à partir de cinq modèles PSM
de POMA■ Développement d'un outil qui automatise l’architecture POMA basée sur le processus
d'ingénierie■ L'assurance qualité des applications produites, à partir d’une architecture orientée pattern
devra également permettre l'encapsulation des attributs de qualité■ Validation générale de la migration, de l’utilisabilité et de la qualté de l’architecture POMA
pour les systèmes interactifs utilisant les différentes méthodes existantes■ Évaluation du temps d’efficacité et d’apprentissage de l’architecture POMA pour les
utilisateurs novices et experts
26
Conclusion: liste des publications (Suite) Articles de conférences■ M. Taleb, H. Javahery and A. Seffah. 2006. Pattern-Oriented Design Composition and Mapping
for Cross-Platform Web Applications. XIII International Workshop on Design, Specification and Verification of Interactive Systems (DSV-IS). July 26-28, 2006. 14 pages. Trinity College Dublin. Ireland. (Publié)
■ M. Taleb, A. Seffah and A. Abran. 2007a. Pattern-Oriented Architecture for Web Applications. 3rd International Conference on Web Information Systems and Technologies (WEBIST). March 3-6, 2007. Barcelona. Spain. (Publié)
■ M. Taleb, A. Seffah and A. Abran. 2007b. Model-Driven Design Architecture for Web Applications. The 12th International Conference on Human Centered Interaction (FIC-HCI). July 22-27, 2007. Beijing International Convention Center. Beijing. P.R. China. (Publié)
■ M. Taleb, A. Seffah and A. Abran. 2007c. Patterns-Oriented Design for Cross-Platform Web-based Information Systems. The 2007 IEEE International Conference on Information Reuse and Integration (IEEE IRI-07). August 13-15, 2007. Las Vegas. USA. (Publié)
■ M. Taleb, A. Seffah and A. Abran. 2008b. Patterns + Personas = A Human-Centric Infrastructure for Web Applications Design. The International World Wide Web Conferences (WWW2009), April 20-24, 2009, Madrid, Spain. (Soumis)
27
Conclusion: liste des publications (Suite)
Articles de journaux■ A. Seffah, M. Taleb, H. Habieb-Mammar and A. Abran. 2008. Reconciling Usability and
Interactive System Architecture Using Patterns. Journal of Software and Systems. (publié)■ M. Taleb, A. Seffah and A. Abran. 2008. Investigating Model-Driven Architecture for Web-
based Interactive Systems. Journal of eMinds. (Soumis)■ M. Taleb, A. Seffah and A. Abran. 2008. POMA: A Pattern-Oriented and Model-Driven
Architecture. Journal of Software - Practice and Experience. (Soumis)■ A. Seffah and M. Taleb. 2008. Tracing the Evolution of Patterns as a Design Tool. Journal of
Pattern Analysis and Applications. (Soumis)
Chapitres de livre■ H. Javahery, A. Deichman, A. Seffah and M. Taleb. 2007. A User-Centered Framework for
Deriving a conceptual design from user experiences: Leveraging personas and patterns to create usable designs. Human-Centered Software Engineering. Volume II. Software Engineering Models. Patterns and Architectures for HCI. Chapter 4. May 28, 2007. John Wiley & Sons. New York. USA. (Publié)
■ M. Taleb, A. Seffah and D. Engelberg. 2007. From User Interface Usability to the Overall Usability of Interactive Systems: Adding Usability in System Architecture. Human-Centered Software Engineering. Volume II. Software Engineering Models. Patterns and Architectures for HCI. Chapter 9. May 28 2007. John Wiley & Sons. New York. USA. (Publié)
Livre (en préparartion)■ A. Seffah, M. Taleb, D. Engelberg. 2008. Patterns in User Interface Engineering. Addison
Wesley Patterns Series.
28
Duyne, D. K. van, J. A. Landay, and J. I. Hong. 2003. The Design of Sites: Patterns, Principles and Processes for Crafting a Customer-Centered Web Experience. Addison Wesley.
Engelberg, D. and Seffah A. 2002. A Design Patterns for the Navigation of Large Information Architectures. 11th Annual Usability Professional Association Conference. Orlando (Florida).USA.
Gamma, E., R. Helm, R. Johnson and J. Vlissides. 1995. Design Patterns: Elements of Reusable Object-Oriented Software. Addison Wesley.
Granlund, Åsa, Daniel Lafrenière and David A. Carr. 2001. A Pattern-Supported Approach to the User Interface Design Process. Proceedings of HCI International 2001 9th International Conference on Human-Computer Interaction. August 5-10, 2001. New Orleans. USA
Buschmann, F. 1996. What is a pattern? Object Expert. Vol. 1(3). PP17-18. Buschmann, F., R. Meunier, Rohnert H., P. Sommerlad and M. Stal. 1996. Pattern-Oriented
Software Architecture: A System of Patterns. John Wiley & Sons Ltd. Coutaz J. 1987. PAC, an implementation Model for dialog Design. Interact’87. pp. 431-436.
Stuttgart. Germany.
Bass, Len, Paul Clements and Rick Kazman. 2003. Software Architecture in Practice. Second Edition. Addison-Wesley Boston: (MA).USA.
Alexander, Christopher, S. Ishikawa, M. Silverstein, M. Jacobson, I. Fiskdahl-King and S. Angel. 1977. A Pattern Language. Oxford University Press. New York. USA.
Alexander, Christopher. 1979. The Timeless Way of Building. Oxford University Press. New York: (NY). USA.
Bibliographies
29
Bibliographies (Suite)
Welie, M.V. 1999. ‘The Amsterdam Collection of Patterns in User Interface Design. Online. <http://www.welie.com/patterns/>. Accessed on September 16th 2005
Yacoub, Sherif and Hany Ammar. 2003. Composition of Design Patterns. Addison Wesley Professional. ISBN 0-201-77640-5. 416 pages. Germany
Zachman, John A. 1987. A Framework for Information Systems Architecture. IBM Systems Journal. Vol. 26. No. 3. IBM Publication. G321-5298
Tidwell, J. Common Ground. 1997. A Pattern Language for Human-Computer Interface Design. Online. <http ://www.mit.edu/~jtidwell/common_ground.html>. Accessed on September 24th 2005
30
Période de questions
MERCI / THANK YOU
31
Choose colors, fonts
Input Fields
Datatype := Datatype(Input Field)
Set of Dialog Views Source Dialog ViewCreator TasksTarget Dialog Views
List Pattern Table Pattern Map Pattern Graph Pattern HomePage Pattern
Search Pattern Browse Pattern Executive Summary Pattern
Adapter Pattern Builder PatternAbstractPresentation Patterns
Path Pattern IndexBrowsing Pattern
Find Patterns
AbstractInteroperability Patterns
n
n
n
nNeighboring / Super-Ordinate / Sub-Ordinate
AbstractInteraction Pattern
n
0
n
0
Neighboring / Super-Ordinate
Wizard<<Dialog>> n
n
n
n
Neighboring
Presentation>> Unambiguous Format
Recursive Activation<<Dialog>>
n1 n1 Neigboring
House Style<<Layout>>
Form<<Presentation>>
n
n
n
n
Neigboring
n
n
n
n
Neigboring
Input Fields Coordinates
Coordinates
Authenticate Fields Coordinates
Feedback
GetFeedback()
<<Features>>Multi-ValueInput
UserName : Character SetChain : Character SetPassWord : Character Set
ShowForm()InputValues()
<<Features>>
Close
CloseForm()
<<Features>>
n1 n1
Neighboring
Submit
SubmitAction()
<<Features>>
1
1
1
1
Neighboring
n
1
n
1
Super-Ordinate
UserListUsername : Character SetChain : Character SetPassword : Character Set
VerifyCoordinates()
n1 n
Neighboring
1
Login
ShowLoginPrompt()
<<Features>>
1
1
1
1
Super-Ordinate
11 11 Neighboring
AbstractNavigation Patterns
n
0
n
0
Neighboring / Super-Ordinate
n0 n0Neighboring / Compititor/ Similar
n
n
n
n
Neighboring
n
1
n
Super-Ordinate / Neighboring
1
Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)Composition des patterns
UML class diagram of a PIM
32P20. House StyleP20. House StyleIdenticalP20. House Style
P19. FormP19. FormIdenticalP19. Form
P18. Unambiguous FormatP18. Unambiguous FormatIdenticalP18. Unambiguous Format
P17. Recursive ActivationP17. Recursive ActivationIdenticalP17. Recursive Activation
P16. WizardP16. WizardIdenticalP16. Wizard
P15. Home PageP15. Home PageIdenticalP15. Home Page
P14. GraphP14. GraphIdenticalP14. Graph
P13. MapP13. MapIdenticalP13. Map
P12. TableP12. TableIdenticalP12. Table
P11. ListP11. ListIdenticalP11. List
P10. BuilderP10. BuilderIdenticalP10. Builder
P9. AdapterP9. AdapterIdenticalP9. Adapter
P8. Drop-down menuP8. Index Browsing IdenticalP8. Index Browsing
- P7.1s. Shorter Bread Crumb Trial- P7.2. Drop-down “History” menu
P7. Path (Breadcrumb)-Identical, Scalable (Laptop)-Scalable or fundamental (PDA)
P7. Path (Breadcrumb)
P6. Find (Search, Browse, Executive Summary)
P6. Find (Search, Browse, Executive Summary
Identical, ScalableP6. Find (Search, Browse, Executive Summary)
P5. CloseP5. CloseIdenticalP5. Close
P4. FeedbackP4.1. PreviousP4.2. Next
P4. FeedbackIdentical, FundamentalP4. Feedback
P3.s. Submit (Smaller button)P3. SubmitScalable or fundamentalP3. Submit
P2. Multi-value InputP2. Multi-value InputIdentical, Scalable, Fundamental
P2. Multi-value Input
P1. LoginP1. LoginIdenticalP1. Login
Replacement patterns for PDA platformReplacement patterns for Laptop platform
Type of MappingPatterns of Microsoft Platform
Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)Mapping : Modèle Domaine, Tâche, Dialog, Présentation et Layout
33
Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)
Mapping : Modèle Domaine, Tâche, Dialog, Présentation et Layout
List Pattern Table Pattern Map Pattern Graph Pattern HomePage Pattern
Search Pattern Browse Pattern Executive Summary Pattern
Adapter Pattern Builder PatternAbstractPresentation Patterns
Path Pattern IndexBrowsing Pattern
Find Patterns
AbstractInteroperability Patterns
n
n
n
n
AbstractInteraction Pattern
n
0
n
0
Wizard<<Dialog>> n
n
n
n
Presentation>> Unambiguous Format
Recursive Activation<<Dialog>>
n1 n1
House Style<<Layout>>
Form<<Presentation>>
n
n
n
n
n
n
n
n
Feedback
GetFeedback()
<<Features>>Multi-ValueInput
UserName : StringChain : StringPassWord : String
ShowForm()InputValues()
<<Features>>
Close
CloseForm()
<<Features>>
n1 n1
Submit
SubmitAction()
<<Features>>
1
1
1
1
n
1
n
1
UserListUsername : StringChain : StringPassword : String
VerifyCoordinates()
n1 n1
Login
ShowLoginPrompt()
<<Features>>
1
1
1
1
11 11
AbstractNavigation Patterns
n
0
n
0n0 n0
n
n
n
n
n
1
n
1
UML class diagram of a PSM for a laptop
34
Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)Mapping : Modèle Domaine, Tâche, Dialog, Présentation et Layout
List Pattern Table Pattern Map Pattern Graph Pattern HomePage Pattern
Search Pattern Browse Pattern Executive Summary Pattern
Adapter Pattern Builder PatternAbstractPresentation Patterns
Find Patterns
Presentation>> Unambiguous Format
Recursive Activation<<Dialog>>
House Style<<Layout>>
Form<<Presentation>>
n
n
n
n
n
n
n
n
UserListUsername : StringChain : StringPassword : String
VerifyCoordinates()
Submit
SubmitAction()
<<Features>>
n1 n1
Multi-ValueInputUserName : StringChain : StringPassWord : String
ShowForm()InputValues()
<<Features>>
n
1
n
1
Close
CloseForm()
<<Features>>
AbstractInteroperability Patterns
n
n
n
n
AbstractInteraction Pattern
n
0
n
0
Wizard<<Dialog>> n
n
n
n
n
1
n
1
AbstractNavigation Patterns
n
0
n
0 n0 n0
n
n
n
n
Login
ShowLoginPrompt()
<<Features>>
1
1
1
1
11 11
n
1
n
1
Previous Next
Feedback
GetFeedback()
<<Features>>
n
1
n
1
1
1
1
1
Shorter Bread Crumb Trial
Drop-down Menu
Path Pattern
UML class diagram of a PSM for a PDA
35
Représentation structurelle des catégories de Patterns de POMA (Suite)
ShortcutPatternBreadCrumbPattern IndexBrowsingPattern
SearchPatternExecutiveSummaryPattern
HomePagePattern ListPattern TablePattern CollectionFavori tePatternBookmarkPattern FrequentlyVisitedPagePattern
NavigableSpacesMapPattern
SequencePattern GridPattern
HierarchyPattern
AdapterPattern
Bui lderPattern
DecoratorPattern
FacadePattern
FactoryPattern MethodPattern MediatorPattern MementoPattern
PrototypePattern
ProxyPattern
SingletonPattern
StatePattern
StrategyPattern
VisitorPattern
BridgePattern
AbstractNavigationPatterns AbstractInteractionPatternsn0
Neighboring and/or Competi tor and /or Similar
AbstractPresentationPatternsn
0
Neighboring
0 n0
nAbstractVisual izationPatterns
n
0
n
0
Neighboring
n0 n0
Neighboring and/or Competi tor and/or Simi lar
AbstractInteroperabil i tyPatternsn
n
n
n
Neighboring and/or Super-ordinate
n
n
n
n
Neighboring and/or Super-ordinate
AbstractInformationPatterns
n
nn
Neighboring and/or Super-ordinate and/or Sub-ordinate
n
36
Structure de classes du Pattern et des Modèles de POMA (Suite)Model
M_Type
getM_Type()setM_Type()
VariableDefVariableDef_IdVD_NameVD_Description
getVariableDef_id()getVD_Name()getVD_Description()setVD_Name()setVD_Description()
TaskTask_IdT_NameT_OrderT_Relationship
getTask_Id()getT_Name()getT_Order()getT_Relationship()setT_Name()setT_Order()setT_Relationship()
SubtaskSubTask_IdST_VariableDefST_OrderST_Relationship
getSubTask_Id()getST_VariableDef_Id()getST_Order()getST_Relationship()setST_Order()setST_Relationship()
1
1
1
1
composed
TaskPatternType
get_Type()AdaptPattern()IntegratePattern()
n
1
n
1
composed
n
1
n
1
composed
PresentationModelPM_Type_Style
getPM_Type_Style()setPM_Type_Style()
LayoutModelLM_Type_Style
getLM_Type_Style()setLM_Type_Style()
StylesS_TypeS_Description
getS_Type()setS_Type()
n
1
n
1
hasn
1
n
1
has
DomainModelDoM_Type_View
getDoM_Type_View()setDoM_Type_View()
TasksModelTM_Type_View
getTM_Type_View()setTM_Type_View()
PatternPattern_IdP_NameP_ContextP_ProblemP_SolutionP_Relationship
getPattern_Id()getP_Name()getP_Context()getP_Problem()getP_Solution()getP_Relationship()setP_Name()setP_Context()setP_Problem()setP_Solution()setP_Relationship()
1..n
1..n
1..n
1..n
Applies
n
n
n
nuse
ViewsV_TypeV_Description
getV_Type()setV_Type()
n
1
n
1
has
n
1
n
1
has
n
n
n
n
use
DialogModelDM_Type_View
getDM_Type_View()setDM_Type_View()
n
1
n
1
has
37
Structure du Pattern du language POMAML (Suite)
38
Quelques définitions■ Système interactif : Un système interactif est un programme avec lequel l'utilisateur engage une conversation (un dialogue) dans le but
d'accomplir un travail donné.■ Partie Logicielle: (application interactive) peut être à son tour divisée en deux sous-parties: l'interface utilisateur et la sous-partie
algorithmique qui constitue la sémantique du système interactif. ■ Partie materielle: composée des périphériques d'entrée et sortie et des différents gestionnaires (pilotes de périphériques) qui fournissent le
support physique à l'exécution de l'application interactive. ■ Interface utilisateur : peut être vue comme un moyen par lequel transitent des données entre l'utilisateur et la machine.■ Modèles d’architecture : « La structure des sous-systèmes et composants d'un système et les relations entre entre eux généralement
représentées dans différentes vues pour montrer les propriétés fonctionnelles et non fonctionnelles pertinentes ». Buschmann et al. (1996)■ Architecture logicielle : « L’architecture logicielle d'un programme ou d'un système informatique est la structure ou les structures du système, qui
comportent des éléments logiciels, les propriétés extérieurement visibles de ces éléments, et les relations entre eux ». (Bass et al., 2003)■ Composition des patterns : est le processus de création d’un design de modèles indépendants des plateformes (PIM) à partir d’un ensemble de
patterns et de règles de composition.■ Mapping des patterns : est le processus de création d’un design de modèles spécifiques des plateformes (PSM) à partir des PIM et de règles de
mapping.■ Transformation des modèles : est le processus de conversion des modèles sources en modèles cibles du même système en tenant compte des
règles de transformation.■ Modèle : Selon OMG, un modèle est une représentation d’une partie de la fonction, de la structure et/ou du comportement d’un système de
différentes nature.■ Dirigée par des modèles : cette approche fournit des moyens pour l’utilisation des modèles pour la compréhension, la conception, la
construction, le déploiement, l’opération, la maintenance et la modification. Ça permet donc d’instancier chaque modèle de l’architecture.■ Orientée pattern : cette approche fournit un catalogue de patterns qui sont utilisées pour produire les différents modèles d’une architecture. Ça
permet donc d’instancier les patterns du catalogue.■ Une tâche est un but accompagné d’un ensemble ordonné de sous-tâches et d'actions qui pourrait la satisfaire dans un contexte approprié.■ Un but est une intention d’accomplir la tâche qui est l'état de l'artefact.■ Une action est un acte qui a pour effet de modifier ou de maintenir l'état de l'artefact.■ Un artefact est un objet essentiel pour une tâche. Sans cet objet, la tâche ne peut pas s’effectuer. L’état de l’artefact est toujours modifié au
cours de la performance d’une tâche. ■ eXtensible Markup Language (XML) : Spécifier et formaliser le language de POMA appelé POMAML pour modéliser les patterns et les
modèles■ Unified Modeling Language (UML) : Spécifier, visualiser, construire et documenter les composants de différents types de systèmes en
particulier le système interactif
39
Seeheim model (Pfaff, 1985) and (Green, 1985) Model-View-Controller (MVC) (Goldberg, 1984) Agent Multi-Faceted (AMF) (Ouadou, 1994) which is an extension of MVC Arch/Slinky (Gram and Cockton, 1996) Presentation Abstraction Control (PAC) Coutaz, 1987) and (Coutaz, 1990) PAC-Amadeus and Model-View-Presenter (MVP) (Bass et al., 2003) Trois éléments principaux pour ses architectures:
(1) Abstraction ou modèle (2) Contrôle ou dialogue (3) Présentation
Leur but est d’améliorer et faciliter le design des systèmes interactifs
Faiblesses Ça n'encourage pas le concepteur à considérer d'autres aspects du dialogue : la gestion de
l'aide et les erreurs. Ça ne facilite pas l'utilisation des contraintes pour la conception et la description de l'interface
tandis qu‘elles sont de grande importance aux yeux du concepteur Les modèles d'architectures sont mal situés par rapport au cycle de vie de l'interface utilisateur Ce qui peut entraîner, en particulier, à des difficultés concernant le passage de l'analyse du
problème (analyse des besoins des utilisateurs), généralement exprimé en termes de tâches et de séquences d'interaction, et les concepts mis de l’avant par ces architectures.
A Propos des architectures
40
A Propos des Patterns Proposés pour remédier certains problèmes présentés par des architectures Introduits par Christopher Alexander
« Chaque pattern décrit un problème qui se manifeste constamment dans notre environnement, et donc décrit le cœur de la solution à ce problème, d’une façon telle que l’on puisse réutiliser cette solution des millions de fois, sans jamais le faire deux fois de la même manière ».
Fournissent un bon nombre de solutions éprouvées à des problèmes récurrents Introduits comme un outil pour
capturer et disséminer la connaissance de conception éprouvée faciliter la conception des systèmes plus utilisables
Visent à capturer et à communiquer les meilleurs pratiques de conception de l’interface utilisateur en mettant l’accent sur l’expérience de l’utilisateur et le contexte de l’utilisation
Avantages Solutions bien établies aux problèmes d’architecture Aident à documenter les décisions de la conception d’architecture Facilitent la communication entre les utilisateurs à l’aide d’un vocabulaire commun Documentent les problèmes et leurs solutions
Quelques problèmes non résolus par les patterns Découpler les différents aspects des systèmes interactifs tels que la logique métier, l'interface utilisateur, la
navigation et l'information Isoler les problèmes des plateformes spécifiques des préoccupations communes à tous les systèmes
interactifs
41
Patterns dans POMA (Suite)Niveau
ArchitecturalCatégorie de Patterns Exemples de
Patterns
Navigation -Shortcut pattern
-Bread Crumb pattern
-Index Browsing pattern
Interaction Patterns d’interactionCette catégorie de patterns se focalise sur les mécanismes d'interaction qui peuvent être utilisés pour accomplir les tâches et les effets visuels.
- Search pattern- Executive Summary pattern- Action Button pattern- Guided Tour pattern- Paging pattern- Pull-down Button pattern- Slideshow pattern- Stepping pattern- Wizard pattern
Présentation - Carrousel pattern- Table Filter pattern- Detail On Demand pattern- Collector pattern- In place Replacement pattern- List Builder pattern- List Entry View pattern- Overview by Detail pattern- Part Selector pattern- Tabs pattern- Table Sorter pattern- Thumbnail pattern- View
Patterns de navigationCette catégorie de patterns décrit des techniques éprouvées pour la navigation avec et / ou entre un ensemble de pages et une partie de l'information.
Patterns de présentationCette catégorie de patterns décrit les solutions pour savoir comment le contenu ou les services sont organisés, de façon visuelle.
42
Patterns dans POMA (Suite)Visualisation Patterns de visualisation
Cette catégorie de patterns décrit les différentes représentations visuelles de l’information. Ils définissent principalement le format et le contenu de la visualisation, c'est-à-dire, de façon graphique.
- Favorite Collection pattern
- Bookmark pattern
- Frequently Visited Page pattern
- Navigation Space Map pattern
Interopérabilité Patterns d’interopérabilitéCette catégorie de patterns décrit le découplage des niveaux d'un système interactif, en particulier, entre le contenu, le dialogue et les vues ou la présentation.
- Adapter pattern- Bridge pattern- Builder pattern- Decorator pattern- Façade pattern- Factory pattern- Method pattern- Mediator pattern- Memento pattern- Prototype pattern- Proxy pattern- Singleton pattern- State pattern- Strategy pattern- Visitor pattern
Information Patterns d’informationCette catégorie de patterns décrit les différents modèles d’architecture et conceptuels pour organiser le contenu à travers plusieurs pages, les serveurs et les ordinateurs. Tels patterns fournissent des solutions à des questions telles que l'information qui peut ou doit être présentée sur quel périphérique.
- Reference Model pattern- Data Column pattern- Cascaded Table pattern- Relational Graph pattern- Proxy Tuple pattern- Expression pattern- Schudler pattern- Operator pattern- Renderer pattern- Production Rule pattern- Camera pattern
43
Introduits par le « Object Management Group (OMG) » en 2001 en proposant une architecture dirigée par des modèles « Model-Driven Architecture (MDA) »
L'idée principale de MDA est de spécifier la logique métier sous forme de modèles abstraits. Ces modèles abstraits sont alors dressés (partiellement automatiquement) selon un ensemble de règles de
transformation à différentes plateformes Les modèles sont habituellement décrits par UML de manière formelle qui effectuent le processus de transformation Un modèle est une description formelle de certains aspects clés et spécifique d'un système interactif Un modèle présente toujours une abstraction de la chose « réelle »Avantages : Plus facile à valider l'exactitude d'un modèle Plus facile à produire des implémentations sur de multiples plates-formes L'intégration / l'interopérabilité entre les plates-formes est mieux défini mappings générique / modèles peuvent être partagés par de nombreux designs Constituent un système interactif de solutions supportées par des outilsFaiblesses : Ne fournissent pas un standard pour les spécifications de mappings Designers doivent prendre en compte une diversitéde plates-formes Les modèles d'architectures sont mal localisés comparés au cycle de vie de l'interface utilisateur. Ce qui peut entraîner, en particulier, à des difficultés concernant le passage de l'analyse du problème (analyse des
besoins des utilisateurs), généralement exprimés en terme de tâches et de séquences d'interaction, et les concepts mis del’avant par ces architectures
3 méthodes pour produire un modèle : Observations, Interviews, Sondages, etc. Modèle de tâche hiérarchique GOMS (Goal, Operator, Method, Selection)3 catégories de modèles : Tâche/ Domaine IU abstraite : Présentation et Dialogue IU concrète : Layout
A Propos des Modèles
44
Architecture N-tier■J2EE (architecture 5-tier)
Brow ser
Presentation
Business Logic
Middleware
Persistence(Sun Microsystems, 2002a)
Ce niveau est souvent composé d’un ou plusieurs patterns.Persistence
Ce niveau de l'architecture couvre les connexions avec les autres patterns de même niveau ou les patterns composés de différents niveaux de patterns.
Middleware
Implémenté sous la forme de Java Beans ou EJB, ce niveau contient l'ensemble des traitements d'une application .
Business Logic
Ce niveau s’occupe de la logique de la navigation et implémente souvent les technologies JSP/Servlets.
Presentation
Ce niveau est très souvent non représentatif d'une architecture qui contient une partie applicative communément appelés «Tests de premier niveau». Le test de premier niveau consiste principalement à la vérification du contenu des formulaires de capture.
Browser
Description (Sun Microsystems, 2002a) Level of Patterns
45
Exemples d’outilsLes «Systèmes de Gestion du Contenu» : Open Source
Web BrowserYesYesYesJavaAlfresco
Web BrowserYesYesYesMidgard add-onAegir (previously Aegir CMS)
Web BrowserYesYesYesAll platformsPhPNuk
Web BrowserYesYesYesAll platformsZope Management Interface
NoYesYesMacOS XGoliath
Console Editor of ChoosingNoYesYesUnix / Linux /
MacOS XCadaver
External Editor ClientFile editor(s) of your choosing (VI, Notepad, PhotoShop, etc.)
NoYesNoWindows / Unix / Linux
External Editor
NoNoNoWindowsFrontPage
Web DriveNoYesYesWindowsMS Office
NoYesYesWindowsWeb Drive
Web DriveNoYesYesWindowsDreamWeaver
Other RequirementsAccess Control
Content Management
Content Creation
PlatformCMS Tools
46
Exemples d’outils (Suite)Les « Model-Based UI Development » et pour les patterns
L’approche basée-Modèle utilise une base de connaissance centrale pour stocker la description de tous les aspetcs d’une conception dìnterface. Une description centrale est un modèle.Idée Identifier les abstractions utiles, qui mettent en lumière les principaux aspects de la conception de l’IU Les aspects sont représentés en utilisant des modèles déclaratifs Le développement de l‘IU basé sur le modèle se focalise sur la recherche de mapping entre les différents modèlesAvantages Les décisions du Design sont prises au niveau conceptuel Plus facile à comprendre le système pour la maintenanceLimites
Complexité des modèles et leurs notations Manque d’outils de support Manque de réutilisation
47
Les « Model-Based UI Development » et pour les patternsExemples d’outils (Suite)
YesPartiallyYesYesYesNoTIDE 2
YesNoNoYesYesYesRATIONAL ROSE
PartiallyNoYesYesYesYesECLIPSE
NoNoYesYesYesNoVTMB
NoNoYesYesYesYesDIANE
NoNoYesYesYesYesTAMOT
NoNoYesYesYesYesISODE
NoNoYesNoNoYesCTTE
NoNoYesYesYesYesU-TEL
NoNoYesYesYesYesCRITIQUE
NoNoYesYesYesYesLTSA-WS
Model-Based
Pattern-Oriented
Open source
Generation code
Designing Models
Analyzing Models
Criteria Tools
Processus MB-UI ð Construction Transformation Génération / Rendering