Soutenance de la thèse de Doctorat - A rc hitec ture orientée pa ttern et dirig ée pa r des - Réseau LABUNIX.
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Soutenance de la thèse de Doctorat
A rc hitec ture orientée pa ttern et dirig ée pa r des
m odèles pour les s ys tèm es intera c tifs
(P a ttern-O riented a nd M odel-driven A rc hitec ture
for I ntera c tive S ys tem s )
Supervisée par Dr. Alain Abran, Directeur, ÉTS
Et par
Dr. Ahmed Seffah, Co-Directeur, Université Concordia
25 Novembre 2008
Mohamed TALEB
1Ordre 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
2Introduction et motivation
Systè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.
Architectures
SI 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
3Introduction 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
4Introduction et motivation (Suite)
Sommaire :
1- Pattern-
Oriented
Design
(POD),
Patterns The
2- Pattern- Proposed
N-Tier Supported Architecture:
Architecture: Approach
(PSA) Pattern-
Seeheim, Arch/ Oriented and
Slinky, MVC, Model-driven
MVP, PAC, Architecture
PAC-Amodeus (POMA)
Models Model-
Driven
Architecture
(MDA)
5État de l’art
■
Pourquoi Patterns et modèles?
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
■
Solution est le pattern: 3 élements principaux:
Pattern
exprime un
Problème ensemble de forces
(buts et contraintes)
qui ont lieu dans ce
contexte.
Solution réfère à un Contexte réfère à un
modèle pour la
conception que l'on
Solution Contexte ensemble de situations
récurrentes dans
peut appliquer pour lesquelles les patterns
résoudre ces forces sont appliqués.
6État de l’art (Suite)
■
Architecture N-tier
■
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 ».
B row ser
P resentation
B usiness L ogic
M iddlew are
P ersistence
(Sun Microsystems, 2002a)
7État de l’art (Suite)
■
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
Architectural level and WHAT HOW WHERE WHO WHEN WHY (Motivation)
categories of patterns (Data) (Function) (Network) (People) (Time)
Information
Interoperability
Visualization
Navigation
Interaction
Presentation
8État de l’art (Suite)
■
Patterns-Oriented Design (POD)
La motivation de POD est d'aider les
Structure of patterns concepteurs novices à appliquer des
patterns correctement et efficacement.
Behavior of patterns
Code L'idée principale: les patterns
peuvent être documentés selon le cycle
de développement.
■
Pattern Supported Approach (PSA)
Information Pattern UI Design Pattern
Task Pattern Structure &
Business Business Navigation GUI Design
Domain Process Design Pattern
Pattern Pattern Pattern
Subtask Subtask
Pattern Pattern
System Task/User User Interface
Design
Definition analysis Architecture
9État de l’art (Suite)
■
Model-Driven Architecture (MDA) de OMG
L'idée principale: spécifier la logique
PIM du sujet sous forme de modèles
abstraits.
Transform
PSM
Transform
Code
■
Sommaire des ces architectures et caractéristiques
Patterns et
Architectures Caractéristiques et critères
Niveau Solution Concept Relation Composant Technique Technique Tâches et Modèles
Architecturel prouvé humain Structurelle comporte- Sous-
mentalle tâches
Patterns Non Oui Oui Oui Oui Oui Non Non Non
(n’est pas
une
architecture)
N-tiers Pleinement Partiellemen Oui Non Non Oui Oui Non Oui
t
POD Non Partiellemen Oui Non Non Pleinement Pleinement Non Non
t
PSA Non Partiellemen Oui Non Non Non Non Pleinement Non
t
MDA Oui Partiellemen Oui Non Non Non Non Non Pleinement
t 10Objectif, Limite et Méthodologie
■
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.
11Objectif, Limite et Méthodologie (Suite)
Inputs Phases O utputs O utcom es
Patterns Background and Related
Elaboration of Work elaborated about
Models background and Patterns, Models, N-tier
related work architecture, POD, PSA,
Architectures (Chapter 1) MDA
Definition of Research Research Issues
Issues defined
(Chapter 2)
Design of new
POMA architecture
architecture
(Chapter 3)
Architectural levels and
categories of patterns in POMA
Presentation of the
presented and described
detailed description of
architectural levels
and categories of Patterns Composition Rules
patterns in POMA
(Chapter 4)
Patterns Mapping Rules
Presentation of the Categories of models in POMA
detailed description of presented and described
categories of models
in POMA
Models Transformation Rules
(Chapter 5)
Analysis and Exploratory Case Study 1- Identification of
Construction of Analyzed constraints and items to
exploratory case improve
study of POMA for 2- Identification of
Interactive System Prototype programmed research avenues
(Chapter 6) 12Architecture proposée: POMA
D o mai n M o d el D o mai n M o d el
[POM A . PI M ] T r an sfo r mati o n [POM A . PSM ]
r u l es
T r an sfo r mati o n T r an sfo r mati o n
T1 T ’1
T ask M o d el T ask M o d el
[POM A . PI M ] [POM A . PSM ]
T r an sfo r mati o n T r an sfo r mati o n
T2 T ’2
N avi g ati o n
Patter n s
I n ter acti o n
e
Patter n s
uag
sed
D i al o g M o d el D i al o g M o d el
ang
[POM A . PI M ] [POM A . PSM ]
u
Vi su al i z ati o n
L
Patter n s
M ap p i n g
C o mp o si ti o n r u l es
Pr esen tati o n r u l es
Patter n s T r an sfo r mati o n T r an sfo r mati o n
T3 T ’3
Patterns
I n ter o p er ab i l i ty Patterns
Patter n s Composition Mapping
I n fo r mati o n Pr esen tati o n
Pr esen tar i o n
Patter n s M o d el M o d el
[POM A . PSM ]
[POM A . PI M ]
Categories of
Patterns
T r an sfo r mati o n
T4 T r an sfo r mati o n
T ’4
L ayo u t M o d el
L ayo u t M o d el [POM A . PSM ]
[POM A . PI M ]
L an g u ag e
u sed
Code Gen er ati o n
Gen er ati o n
r u l es
POM A : Patter n -Or i en ted an d M o d el -d r i ven A r ch i tectu r e
I n ter acti ve
PI M : Pl atfo r m I n d ep en d en t M o d el Syatem So u r ce
PSM : Pl atfo r m Sp eci fi c M o d el Code
T h e Symb o l R ep r esen ts an i n ter acti o n
13Architecture 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
N avig atio n
de pages et une partie de l'information (Ex. BreadCrumb (Path), Index Browser, etc.) Pattern s
Patterns d’interaction : se focalisent sur les mécanismes d'interaction qui peuvent être utilisés pour Interactio n
Pattern s
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 Visu alizatio n
Pattern s
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. Presen tatio n
Bookmark, etc.) Pattern s
Patterns d’interopérabilité : décriventt le découplage des niveaux d'un système interactif, en
In tero perab ility
particulier, entre le contenu, le dialogue et les vues ou la présentation (Ex. patterns de Gamma (Bridge, Pattern s
Adapter, etc.)
Patterns d’information : fournissent des solutions à des questions telles que l'information qui peut In fo rmatio n
Pattern s
ou doit être présentée sur quel périphérique (Ex. Renderer, etc.)
14Patterns dans POMA: Règles de composition (Suite)
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. C o m p o si ti o n
r u l es
■
Similar (X, Y) si et seulement si X et Y peuvent être remplacés par d’autres patterns de la même catégorie.
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.
15Patterns 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
16Patterns dans POMA: Règles de mappings
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. PIM PSM M ap p i n g
r u l es
■
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)
17Modèles dans POMA
Modè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
18Modè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
19Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)
Modèle de Domaine
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
20Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)
Modèle de Tâche
21Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)
Modèle de Dialogue
Login Dialog
Enter Username
Enter Chain
Enter Password Close Dialog
Submit
Close
Provide Feedback
Main Menu
Select Data Source
Select Task
Select Subtask
Close
Subtask
Task getSelected Subtask
Data Source getDoucleClickTask Data Management
getDataProvider Indicators Management
Select Subtask
getDataBroker Presentation Tools
Environment Patterns
getDataUser
Data Management Indicators Presentation Environment
Management Tools Patterns
ShowDataPathWithPathPattern Search List Pattern Find Env Patterns
getDataPath
Browse Table pattern
UpdateEnvPatListPossible
SelectDataPath
Activate Agent Map Pattern
DisplayEnvPatTools
Executive Summary Graph Pattern
ShowEnvPatResults
DisplayIndTools
ShowIndResults
22Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)
Modèle de Présentation et de Layout
23Conclusion
Ré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
24Conclusion (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
25Conclusion: 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)
26Conclusion: 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.
27Bibliographies
Alexander, Christopher. 1979. The Timeless Way of Building. Oxford University Press. New
York: (NY). 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.
Bass, Len, Paul Clements and Rick Kazman. 2003. Software Architecture in Practice. Second
Edition. Addison-Wesley Boston: (MA).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.
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
28Bibliographies (Suite)
Tidwell, J. Common Ground. 1997. A Pattern Language for Human-Computer Interface
Design. Online. . Accessed on
September 24th 2005
Welie, M.V. 1999. ‘The Amsterdam Collection of Patterns in User Interface Design. Online.
. 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
29Période de questions
MERCI / THANK YOU
30Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)
Composition des patterns
Login
Coordinates
Close
1 1 Neighb oring 1
ShowLoginPrompt() CloseForm()
1
Super-Ordinate
1 Input Fields Coordinates
Multi-ValueInput
UserName : Charact er Set
Neighb oring
Chain : Character Set Feedback
PassWord : Charact er Set 1 n
Get Feedback()
ShowForm() 1
Input Values()
1 Neighb oring
Super-Ordinate
Super-Ordinate / Neighb oring Authenticate Fields Coordinates
1
n UserList
Username : Charact er Set
Neighb oring
Submit Chain : Character Set
Password : Character Set
1 n
SubmitAct ion()
VerifyCoordinates()
n
AbstractNavigation Pat terns Neighb oring / Compititor/ Similar AbstractInt eract ion Pat tern n
0 n
0 0
n
Neighb oring / Super-Ordinate
Pat h Patt ern IndexBrowsing Find Patt erns
Pat tern
Search Patt ern Browse Patt ern Executive Summary
Pat tern
Neighb oring / Super-Ordinate
n n
Neighb oring AbstractInt eroperabilit y Pat terns
n
Neighb oring / Super-Ordinate / Sub -Ordinate
n
AbstractPresent ation Patt erns Adapter Pat tern Builder Patt ern
List Pat tern Table Pat tern Map Patt ern Graph Patt ern HomePage Patt ern
Neighb oring
Se t of Dia log Vie w s Source Dia log Vie w
n Cre a tor Ta sks
Ta rge t Dia l og Vie ws
W izard Recursive Activation
n Neigb oring
1 n
n
Neigb oring
n
Input Fie lds
Form
n
Da ta type := Da ta type (Input Fie ld)
Neigb oring Present ation>>
Unambiguous Format
Choose colors, fonts
House St yle
n
UML class diagram of a PIM 31Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)
Mapping : Modèle Domaine, Tâche, Dialog, Présentation et Layout
Patterns of Microsoft Platform Type of Mapping Replacement patterns for Laptop Replacement patterns for PDA platform
platform
P1. Login Identical P1. Login P1. Login
P2. Multi-value Input Identical, Scalable, P2. Multi-value Input P2. Multi-value Input
Fundamental
P3. Submit Scalable or fundamental P3. Submit P3.s. Submit (Smaller button)
P4. Feedback Identical, Fundamental P4. Feedback P4. Feedback
P4.1. Previous
P4.2. Next
P5. Close Identical P5. Close P5. Close
P6. Find (Search, Browse, Identical, Scalable P6. Find (Search, Browse, P6. Find (Search, Browse, Executive
Executive Summary) Executive Summary Summary)
P7. Path (Breadcrumb) -Identical, Scalable (Laptop) P7. Path (Breadcrumb) - P7.1s. Shorter Bread Crumb Trial
-Scalable or fundamental - P7.2. Drop-down “History” menu
(PDA)
P8. Index Browsing Identical P8. Index Browsing P8. Drop-down menu
P9. Adapter Identical P9. Adapter P9. Adapter
P10. Builder Identical P10. Builder P10. Builder
P11. List Identical P11. List P11. List
P12. Table Identical P12. Table P12. Table
P13. Map Identical P13. Map P13. Map
P14. Graph Identical P14. Graph P14. Graph
P15. Home Page Identical P15. Home Page P15. Home Page
P16. Wizard Identical P16. Wizard P16. Wizard
P17. Recursive Activation Identical P17. Recursive Activation P17. Recursive Activation
P18. Unambiguous Format Identical P18. Unambiguous Format P18. Unambiguous Format
P19. Form Identical P19. Form P19. Form
P20. House Style Identical P20. House Style P20. House Style
32Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)
Mapping : Modèle Domaine, Tâche, Dialog, Présentation et Layout
< < Features> > < < Features> >
Login Clos e
1 1 1
ShowLoginProm pt() Clos eForm()
1
1
< < Features> >
Multi-ValueInput
Us erName : St ring >
Chain : String Feedbac k
Pas s W ord : St ring 1 n
Get Feedbac k ()
ShowForm () 1
Input Values ()
1
1
n Us erLis t
< < Features> > Us ernam e : St ring
Submit Chain : String
Pas s word : String
1 n
SubmitAc t ion()
Verify Coordinates ()
n
Abs trac tNavigation Pat terns Abs trac tInt erac t ion Pat tern n
0 n
0 0
n
Pat h Patt ern Index Browsing Find Patt erns
Pat tern
Searc h Patt ern B rows e Patt ern Ex ec utive Summary
Pat tern
n n
Abs trac tInt eroperabilit y Pat terns
n
n
Abs trac tPres ent ation Patt erns Adapter Pat tern Builder Patt ern
Lis t Pat tern Table P at tern Map Patt ern Graph Patt ern HomePage Patt ern
< < Dialog> > n < < Dialog> >
W iz ard Rec urs ive Ac tivation
n 1 n
n
n
< < Present ation> >
Form
n
Present ation> >
Unambiguous Format
n < < Lay out > >
Hous e St y le
UML class diagram of a PSM for a laptop
33Étude de cas: Système Interactif de Gestion de l’Environnement (Suite)
Mapping : Modèle Domaine, Tâche, Dialog, Présentation et Layout
Login Close
1 1 1
ShowLoginPrompt() CloseForm()
1
1
Feedback
Multi-ValueInput GetFeedback()
n
UserName : String 1
Chain : String 1
PassW ord : String
ShowForm() Previous Next
InputValues()
1
1
n UserList
Username : String
Submit Chain : String
Password : String
1 n
SubmitAction()
VerifyCoordinates()
n
AbstractNavigation Patterns AbstractInteraction Pattern n
0 n
n 0
0
Path Pattern Find Patterns
Search Pattern Browse Pattern Executive Summary
Shorter Bread Drop-down Pattern
Crumb Trial Menu
n
n
AbstractInteroperability Patterns
n
n
AbstractPresentation Patterns Adapter Pattern Builder Pattern
List Pattern Table Pattern Map Pattern Graph Pattern HomePage Pattern
n
W izard
n
1
n
Recursive Activation
n
n
Form
n
Presentation>>
Unambiguous Format
n
House Style
UML class diagram of a PSM for a PDA 34Représentation structurelle des catégories de Patterns de POMA (Suite)
Neighboring and/or Competitor and /or Similar
AbstractNavigationPatterns AbstractInteractionPatterns
0 n
0 0
ExecutiveSummaryPattern
ShortcutPattern Neighboring SearchPattern Neighboring
BreadCrumbPattern IndexBrowsingPattern
n n
Neighboring and/or Competitor and/or Similar
AbstractPresentationPatterns AbstractVisualizationPatterns
0 n
n n
HomePagePattern ListPattern TablePattern CollectionFavoritePattern NavigableSpacesM apPattern
BookmarkPattern FrequentlyVisitedPagePattern
Neighboring and/or Super-ordinate
Neighboring and/or Super-ordinate
n n
AdapterPattern AbstractInteroperabilityPatterns VisitorPattern
n
BridgePattern StrategyPattern
StatePattern
BuilderPattern
SingletonPattern
DecoratorPattern
Neighboring and/or Super-ordinate and/or Sub-ordinate
ProxyPattern
FacadePattern
MementoPattern
FactoryPattern MethodPattern MediatorPattern n
AbstractInformationPatterns
PrototypePattern
HierarchyPattern
SequencePattern GridPattern
35Structure de classes du Pattern et des Modèles de POMA (Suite)
Model
M_Type
getM_Type()
setM_Type()
DomainModel
TasksModel DialogModel PresentationModel LayoutModel
DoM_Type_View
TM_Type_View DM_Type_View PM_Type_Style LM_Type_Style
getDoM_Type_View()
setDoM_Type_View() getTM_Type_View() getDM_Type_View() getPM_Type_Style() getLM_Type_Style()
setTM_Type_View() setDM_Type_View() setPM_Type_Style() setLM_Type_Style()
1 1 1
1 1
has has has
has
has n
n n
n
Views n Styles
V_Type S_Type
V_Description S_Description
getV_Type() getS_Type()
setV_Type() setS_Type()
n
n
use
use
Pattern n
n Pattern_Id
P_Name
P_Context
P_Problem
P_Solution
P_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
Applies
1..n
TaskPattern
Type
get_Type()
AdaptPattern()
IntegratePattern()
1 1
composed composed
n n
Task Subtask
Task_Id SubTask_Id
T_Name ST_VariableDef
T_Order ST_Order
T_Relationship ST_Relationship
getTask_Id() getSubTask_Id()
getT_Name() getST_VariableDef_Id()
getT_Order() getST_Order()
getT_Relationship() getST_Relationship()
setT_Name() setST_Order()
setT_Order() setST_Relationship()
setT_Relationship() 1
composed
1
VariableDef
VariableDef_Id
VD_Name
VD_Description
getVariableDef_id()
getVD_Name()
getVD_Description()
setVD_Name()
setVD_Description()
36Structure du Pattern du language POMAML (Suite)
37Quelques 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
38A Propos des architectures
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.
39A 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
40Patterns dans POMA (Suite)
Niveau Catégorie de Patterns Exemples de
Architectural Patterns
-Shortcut pattern
Navigation Patterns de navigation
Cette catégorie de patterns décrit des techniques éprouvées -Bread Crumb pattern
pour la navigation avec et / ou entre un ensemble de pages et
une partie de l'information. -Index Browsing pattern
- Search pattern
Interaction Patterns d’interaction - Executive Summary pattern
Cette catégorie de patterns se focalise sur les mécanismes - Action Button pattern
d'interaction qui peuvent être utilisés pour accomplir les tâches - Guided Tour pattern
- Paging pattern
et les effets visuels. - Pull-down Button pattern
- Slideshow pattern
- Stepping pattern
- Wizard pattern
Présentation Patterns de présentation - Carrousel pattern
- Table Filter pattern
Cette catégorie de patterns décrit les solutions pour savoir - Detail On Demand pattern
comment le contenu ou les services sont organisés, de façon - Collector pattern
visuelle. - 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
41Patterns dans POMA (Suite)
Visualisation Patterns de visualisation - Favorite Collection pattern
Cette catégorie de patterns décrit les différentes représentations - Bookmark pattern
visuelles de l’information. Ils définissent principalement le
format et le contenu de la visualisation, c'est-à-dire, de façon - Frequently Visited Page pattern
graphique. - Navigation Space Map pattern
Interopérabilité - Adapter pattern
Patterns d’interopérabilité - Bridge pattern
Cette catégorie de patterns décrit le découplage des - Builder pattern
niveaux d'un système interactif, en particulier, entre le - Decorator pattern
contenu, le dialogue et les vues ou la présentation. - Façade pattern
- Factory pattern
- Method pattern
- Mediator pattern
- Memento pattern
- Prototype pattern
- Proxy pattern
- Singleton pattern
- State pattern
- Strategy pattern
- Visitor pattern
- Reference Model pattern
Information Patterns d’information - Data Column pattern
Cette catégorie de patterns décrit les différents modèles - Cascaded Table pattern
d’architecture et conceptuels pour organiser le contenu à travers - Relational Graph pattern
plusieurs pages, les serveurs et les ordinateurs. Tels patterns - Proxy Tuple pattern
fournissent des solutions à des questions telles que l'information qui - Expression pattern
- Schudler pattern
peut ou doit être présentée sur quel périphérique.
- Operator pattern
- Renderer pattern
- Production Rule pattern
- Camera pattern 42A Propos des Modèles
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 outils
Faiblesses :
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
43Architecture N-tier
J2EE (architecture 5-tier)
■
B row ser
P resen tation
B u sin ess L ogic
M id d lew are
P ersisten ce
(Sun Microsystems, 2002a)
Level of Patterns Description (Sun Microsystems, 2002a)
Browser 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.
Presentation Ce niveau s’occupe de la logique de la navigation et implémente souvent les technologies
JSP/Servlets.
Business Logic Implémenté sous la forme de Java Beans ou EJB, ce niveau contient l'ensemble des traitements
d'une application .
Middleware 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.
Persistence Ce niveau est souvent composé d’un ou plusieurs patterns.
44Exemples d’outils
Les «Systèmes de Gestion du Contenu» : Open Source
CMS Tools Platform Content Content Access Other Requirements
Creation Management Control
DreamWeaver Windows Yes Yes No Web Drive
Web Drive Windows Yes Yes No
MS Office Windows Yes Yes No Web Drive
FrontPage Windows No No No
External Editor External Editor
Client
Windows / Unix / File editor(s) of your
No Yes No
Linux choosing (VI,
Notepad,
PhotoShop, etc.)
Cadaver Unix / Linux / Console Editor of
Yes Yes No
MacOS X Choosing
Goliath MacOS X Yes Yes No
Zope
Management All platforms Yes Yes Yes Web Browser
Interface
PhPNuk All platforms Yes Yes Yes Web Browser
Aegir (previously
Midgard add-on Yes Yes Yes Web Browser
Aegir CMS)
Alfresco Java Yes Yes Yes Web Browser
45Exemples 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èles
Avantages
Les décisions du Design sont prises au niveau conceptuel
Plus facile à comprendre le système pour la maintenance
Limites
Complexité des modèles et leurs notations
Manque d’outils de support
Manque de réutilisation
46Exemples d’outils (Suite)
Les « Model-Based UI Development » et pour les patterns
Criteria Analyzing Designing Generation Open Pattern- Model-
Tools Models Models code source Oriented Based
LTSA-WS Yes Yes Yes Yes No No
CRITIQUE Yes Yes Yes Yes No No
U-TEL Yes Yes Yes Yes No No
CTTE Yes No No Yes No No
ISODE Yes Yes Yes Yes No No
TAMOT Yes Yes Yes Yes No No
DIANE Yes Yes Yes Yes No No
VTMB No Yes Yes Yes No No
ECLIPSE Yes Yes Yes Yes No Partially
RATIONAL ROSE Yes Yes Yes No No Yes
TIDE 2 No Yes Yes Yes Partially Yes
Processus MB-UI Construction Transformation Génération / Rendering
47Vous pouvez aussi lire