La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

1. 2 Patterns de conception dIHM Jean-Bernard Crampes et Laurent Nonne IUT de Blagnac.

Présentations similaires


Présentation au sujet: "1. 2 Patterns de conception dIHM Jean-Bernard Crampes et Laurent Nonne IUT de Blagnac."— Transcription de la présentation:

1 1

2 2 Patterns de conception dIHM Jean-Bernard Crampes et Laurent Nonne IUT de Blagnac

3 3 PLAN 3 : Patterns de conception dIHM 1 : Introduction 2 : Modélisation de lIHM 4 : Conclusion

4 4 Introduction 1 1 Modélisation de lIHMConclusionPatterns de conception dIHM Introduction

5 5 Nécessité de concevoir lIHM Permettre une bonne capture des besoins utilisateurs en modélisant la logique d'enchaînement des fonctions de l'application (analyse). Décliner cette logique denchaînement en modèles plus proches du développement (traçabilité entre analyse, conception et développement). Permettre une estimation de la charge de développement de lIHM (nb jours/homme par fenêtre ou page Web). Avoir une vision densemble de lIHM de lapplication (communication, maintenance…). Modélisation de lIHMConclusionPatterns de conception dIHM Introduction

6 6 Constat UML propose de nombreux modèles mais aucun nest véritablement adapté à la modélisation des IHM. Les concepts UML (objet, classe, état, message…) ne sont pas des concepts adaptés aux IHM. Justification de modèles complémentaires à UML pour modéliser lIHM… Modélisation de lIHMConclusionPatterns de conception dIHM Introduction

7 7 Modélisation de lIHM 2 2 ConclusionPatterns de conception dIHMIntroduction

8 8 Les modèles dIHM de la méthode MACAO Modèle Conceptuel dIHM (MCI) Modèle Logique dIHM (MLI) Modélisation de lIHM ConclusionPatterns de conception dIHMIntroduction

9 9 Le Schéma Navigationnel d'IHM (SNI) Le SNI permet de concevoir et de modéliser la logique d'enchaînement des fonctions de l'application en fonction du comportement supposé de l'utilisateur. Le SNI est purement conceptuel (MCI) il est indépendant du type d'interface utilisé (texte, graphique, web…) il fait abstraction de tout aspect matériel (clavier, écran, souris...) il ne représente pas les traitements réalisés dans l'application Modélisation de lIHM ConclusionPatterns de conception dIHMIntroduction

10 10 Les Unités de Dialogue On appellera "Unité de Dialogue" (UD) l'ensemble des fonctions offertes à l'utilisateur de façon simultanée (sur un même écran, dans une même fenêtre, dans une même page) Chaque UD est représentée par un ou plusieurs symboles dans le SNI Une UD élémentaire = un seul symbole Une UD composée = plusieurs symboles Modélisation de lIHM ConclusionPatterns de conception dIHMIntroduction

11 11 Les UD élémentaires Saisie de données Affichage simple (un objet ou un résultat)Affichage dune liste dobjets Message (erreur, avertissement, information) Proposition doptions Opt1Opt2Opt3Opt4Opt5 Modélisation de lIHM ConclusionPatterns de conception dIHMIntroduction

12 12 Les UD composées par juxtaposition Modification de données Suites à donner à un affichage simple Opt1Opt2Opt3Opt4Opt5 Suites à donner à une liste Opt1 : indépendamment des objets Opt2 : pour un objet sélectionné Opt3 : pour N objets sélectionnés Opt1Opt2Opt3 1 N Modélisation de lIHM ConclusionPatterns de conception dIHMIntroduction

13 13 Les UD composées par boîte de groupage Modélisation de lIHM ConclusionPatterns de conception dIHMIntroduction Affichage simultané dun objet et dune liste dobjets ObjetListe Affichage simultané de deux objets Objet 1Objet 2

14 14 Nécessité de disposer dune méthodologie de conception Besoin de « Patterns de conception » pour faciliter et standardiser la réalisation de lIHM Construction du SNI ? Modélisation de lIHM ConclusionPatterns de conception dIHMIntroduction

15 15 Patterns de conception dIHM 3 3 Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

16 16 L'architecture fonctionnelle Cas dutilisation Droits d'accès L'architecture fonctionnelle Cas dutilisation Droits d'accès Le diagramme des classes métier Classes et attributs Relations (associations, généralisations) Le diagramme des classes métier Classes et attributs Relations (associations, généralisations) Le SNI est construit en utilisant : Construction du Schéma Navigationnel d'IHM (SNI) Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

17 17 Méthode de construction du SNI Mise en évidence de cinq patrons dIHM à partir du diagramme des classes : 1 – Racine (classes ciblées) 2 – Détail (sélection dun objet dans une liste dobjets) 3 – Liaison (association entre deux classes) 4 – Aiguillage (généralisation) 5 – Administration (mise à jour, création, suppression dobjets) Adoption du principe OBJET ACTION Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

18 18 Le patron « racine » Objets-C1 (a1C1, a2C1) Objets-C3 (a1C3, a2C3) C1C3 Application Ciblage des classes Mettre en évidence les classes prépondérantes, dont les objets seront présentés au premier niveau de lIHM C2C3 a1C3 a2C3 a1C2 a2C2 C1 a1C1 a2C1... Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

19 19 Le patron « détail » Objets-C1 (a1C1, a2C1, a1C2) C1 Application 1 Détail Attributs de C1 Attributs de C2 0.. C1C2 a1C2 a2C2... a1C1 a2C Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

20 20 Le patron « aiguillage » : détail dune généralisation C Attributs de C Super-classe R SC1 Attributs de SC1 SC2 Attributs de SC2 TypeObjet R1 R2 Sous-classes [ TypeObjet = T1 ] Attributs de C + Attributs de SC1 RR1 Attributs de C + Attributs de SC2 [ TypeObjet = T2 ] RR2 Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction Liste C (Attributs de C TypeObjet) C 1 R Détail

21 21 Le patron « liaison » Objets-C1 (a1C1, a2C1) Objets-C3 (a1C3, a2C3) C1C3 Application 1 objets-C3 liés Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction C1C3 a1C3 a2C3... a1C1 a2C1... * lier 1..* 1 objets-C1 liés

22 22 Le patron « liaison » : cas particulier dune composition Objets-C1 (a1C1, a2C1) C1 Application 1 Détail Attributs de C1 C2 (...) C1C2 a1C2 a2C2... a1C1 a2C1... * Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

23 23 Le patron « administration » ConfirmationConfirmation N N Supprimer Objet-C1Objet-C1 1 Détail ConfirmationConfirmation Supprimer Modifier ErreurErreur Objet-C1Objet-C1 ErreurErreur Nouveau Objet-C1 Objet-C1 C1 (a1C1, a2C1) [ Administrateur ] Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

24 24 Exemple : Gestion de comptes bancaires TypeCpte codeType libellé * 1 Clients codeCli nom adresse * Comptes num / solde calculSolde () Ciblage des classes Compte Chèque decouvAutorise dateCmdeCheq calculAgios( ) Compte Epargne tauxInterets calculInterets( ) Prélèvement Automatique date libellé montant destinataire * 1 Opérations date libellé montant 1.. * Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

25 25 Mise en oeuvre du patron « racine » Clients (codeCli, nom) Comptes (num, type) Gestion bancaire ClientsComptes Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

26 26 Mise en oeuvre des patrons « détail » et « composition » Comptes (Num, Type) Client 1 1 Détail client Gestion bancaire Clients Clients (codeCli, nom) Comptes Comptes (num, type) Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

27 27 Mise en oeuvre du patron « aiguillage »... Client Compte (num, solde, decouvAutorise, dateCdeCheq) Opérations Prélèvements Automatiques Prélèvements automatiques Client Compte (num, solde, tauxInterets) Opérations [ type = Epargne ][ type = Chèque ] Détail 1 Comptes (num, type) Gestion bancaire Comptes Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction...et du patron « liaison »

28 28 Mise en oeuvre du patron « administration » Confirmation N N Supprimer Client 1 Détail Confirmation Supprimer Modifier Erreur Client Erreur Nouveau Client Clients (codeCli, nom) [ Administrateur ] Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

29 29 Complément du SNI avec le diagramme dUC Calculer les Agios Calculer les Intérêts Chef dagence bancaire (C.A.) Comptes (num, type) Gestion bancaire Comptes 1 1 Détail Calcul des agios [ C.A. ] Calcul des intérêts [ C.A. ] Modélisation de lIHMConclusionIntroductionModélisation de lIHMPatterns de conception dIHM Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

30 Conclusion Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction

31 31 Le SNI permet une conception de lIHM en liaison avec 2 des principaux diagrammes dUML: Diagramme des Classes Diagramme dUC Le SNI permet une conception de lIHM en liaison avec 2 des principaux diagrammes dUML: Diagramme des Classes Diagramme dUC Des Patterns de conception dIHM permettent une modélisation facilitée du SNI. Des Patterns de conception dIHM permettent une modélisation facilitée du SNI. Le SNI comble un manque dUML en matière de modélisation dinterface Le SNI comble un manque dUML en matière de modélisation dinterface Modélisation de lIHMConclusionPatterns de conception dIHMIntroduction Conclusion

32 32 MERCI DE VOTRE ATTENTION


Télécharger ppt "1. 2 Patterns de conception dIHM Jean-Bernard Crampes et Laurent Nonne IUT de Blagnac."

Présentations similaires


Annonces Google