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




Path Pattern IndexBrowsing Pattern

Find Patterns


n

n

n

n


n

0

n

0

Wizard<<Dialog>> n

n

n

n



n1 n1



n

n

n

n

n

n

n

n

Feedback

GetFeedback()

<<Features>>Multi-ValueInput

UserName : StringChain : StringPassWord : String


<<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


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




Find Patterns





n

n

n

n

n

n

n

n

UserListUsername : StringChain : StringPassword : String

VerifyCoordinates()

Submit

SubmitAction()

<<Features>>

n1 n1

Multi-ValueInputUserName : StringChain : StringPassWord : String


<<Features>>

n

1

n

1

Close

CloseForm()

<<Features>>


n

n

n

n


n

0

n

0

Wizard<<Dialog>> n

n

n

n

n

1

n

1


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

architecture orientée pattern et dirigée par des modèles ...lounis_h/inf980x/thesis... ·...

Documents