Soutenance de la thèse de Doctorat - A rc hitec ture orientée pa ttern et dirig ée pa r des - Réseau LABUNIX.

La page est créée Aurélien Daniel
 
CONTINUER À LIRE
Soutenance de la thèse de Doctorat - A rc hitec ture orientée pa ttern et dirig ée pa r des - Réseau LABUNIX.
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

                                                                 1
Soutenance de la thèse de Doctorat - A rc hitec ture orientée pa ttern et dirig ée pa r des - Réseau LABUNIX.
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

                                     2
Soutenance de la thèse de Doctorat - A rc hitec ture orientée pa ttern et dirig ée pa r des - Réseau LABUNIX.
Introduction 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

                                                                                                             3
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

                                                                                                  4
Introduction 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                                                                                                  10
Objectif, 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.

                                                                                                       11
Objectif, 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)                                                                      12
Architecture 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
                                                                                                                                                                           13
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
                                                                                                                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.)
                                                                                                                                 14
Patterns 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.

                                                                                                                                   15
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

                                                                                                                               16
Patterns 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)

                                                                                                                    17
Modè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

                                                                                                    18
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

                                                                                                     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

                                                                         23
Conclusion
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
                                                                                                    24
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

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

                                                                                                   26
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.
                                                                                                   27
Bibliographies
   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

                                                                                                      28
Bibliographies (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

                                                                                                29
Pé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                    34
Repré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

                                                                                                                                                                                                               35
Structure 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()

                                                                                                                                                             36
Structure du Pattern du language POMAML (Suite)

                                                  37
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

                                                                                                                                                        38
A 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.
                                                                                                     39
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

                                                                                                                      40
Patterns 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
                                                                                                                       41
Patterns 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                    42
A 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
                                                                                                                       43
Architecture 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.
                                                                                                                           44
Exemples 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

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

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

                                                                                        47
Vous pouvez aussi lire