Introduction Design patterns. Introduction Plein de problèmes recurrents –Interface graphique –Conteneurs –Iterateurs Plutôt que réinventer la roue –Réutiliser.

Présentation au sujet: "Introduction Design patterns. Introduction Plein de problèmes recurrents –Interface graphique –Conteneurs –Iterateurs Plutôt que réinventer la roue –Réutiliser."— Transcription de la présentation:

1 Introduction Design patterns

2 Introduction Plein de problèmes recurrents –Interface graphique –Conteneurs –Iterateurs Plutôt que réinventer la roue –Réutiliser solutions éprouvées

3 Definition Un design pattern –Manière standardisée de résoudre un problème recurrent –Domaine de l'Architecture logicielle Ce n'est pas –Une brique tout est à construire –Une règle specifie pas comment faire, à adapter –Une méthode pas une demarche generale

4 A quel niveau ? Différents niveaux de granularité –Code machine –Langage –Concept (oriente objet,..) Patrons –Indépendant du langage –Procèdes de conception generaux –Niveaux d'abstraction élevés Exprimé en UML

5 Patron et design Synonymes –Patron –Design de conception –Motif de conception Formalisme –Nom du patron –Description du probleme à résoudre –Description de la solution –Consequence et utilisation du patron

6 Pour vous donner une idee 3 types de patron –Creational pattern Abstraction des processus de création –Structural pattern Abstraction de l’assemblage d’objets –Behavioural pattern Abstraction de comportements

7 Quelques implementations 3 types de patron –Creational pattern Factory : une classe qui construit les objets, permet de limiter le nombre d'instances –Structural pattern construction d'objets composites Ex : noeud et feuilles –Behavioural pattern Iterator : parcourir de maniere abstraite sans devoiler la structure interne

8 Conclusion Un pattern c'est –Une Solution éprouvée exprimée à Niveau d’abstraction élevé Interviendra plus tard dans vos études ou votre travail –Juste pour vous dire que ca existe Pour le moment, deux pistes possibles –Chercher un pattern : Pour un probleme identifié –parcourir les patterns : Solution elegantes à regarder Une reference : « design patterns » (Erich Gamma, Richard Helm, …)

9 Interface graphique (cf JAVA 4) Une première approche

10 Interface graphique Problème –J’ai une application compliquée … (ex carte) –Comment faire une interface graphique ? Votre solution ?

11 Interface graphique Attentes d’une interface graphique ?

12 Interface graphique Attentes d’une interface graphique ? –Afficher quelque chose

13 Interface graphique Attentes d’une interface graphique ? –Afficher quelque chose –Contrôler quelque chose

14 Interface graphique Attentes d’une interface graphique ? –Afficher quelque chose –Contrôler quelque chose Idéal : Développer indépendamment –Modèle : gère les données –Vue : gère affichage –Contrôleur: gère le contrôle

15 Un exemple Une balle –De couleur variable –De taille variable Contrôle à partir d’une interface graphique ? Comment faites vous ? –Quelles classes ? –Liens entre les classes ?

16 Votre approche ?

17 Démarche MVC Construire 1. Modèle gestion des données 2. Vue : Affichage des données 3. Controleur Modification des données

18 Construire le modèle Objectif : –Gestion des données Définir la classe balle –Attributs –Constructeur –Méthodes –Indépendamment de toute interface graphique Méthodes utiles –Changer couleur –Changer taille

19 Classe Balle - Modèle /** classe balle**/ public class Balle { public int taille; public Color c; public Balle() { taille=10; c=new Color(0,0,0); } public void changeCouleur(Color t) { if (t!=null) c=t; } public void changeTaille(int t) { if (t>0) taille=t; }

20 Construire la Vue Objectif : –Afficher la balle Besoins –Disposer d'un JPanel pour l'affichage –Connaître l’objet à afficher –Définir une méthode paint() utilisant l’objet Approche –Hériter de JPanel –Lien vers un objet de type Balle Attribut de type Balle

21 Classe Vue public class VueBalle extends JPanel { Balle balleAAfficher; public VueBalle(Balle b) { super(); balleAAfficher=b; setPreferredSize(new Dimension(200,200)); setSize(200,200); } public void paint(Graphics arg0) { super.paint(arg0); arg0.setColor(balleAAfficher.c); arg0.fillOval(0, 0, balleAAfficher.taille*10,balleAAfficher.taille*10); } } Lien vers la balle Constructeur Afficher la balle

22 Encore mieux … Limiter l’accès aux attributs de balle La classe balle sait s’afficher La vue appelle la méthode affiche de balle public void affiche(Graphics arg0) { arg0.setColor(c); arg0.fillOval(0, 0, taille*10,taille*10); } public void paint(Graphics arg0) { super.paint(arg0); balleAAfficher.affiche(arg0); }

23 Contrôler le modèle Objectif : –Appliquer des méthodes à l’objet Besoins –Accéder l’objet Différents types d’interface : –Texte –Graphique

24 Classe Contrôleur public class controleur { public static void main(String [] args) { System.out.println("debut"); Balle b=new Balle(); VueBalle v=new VueBalle(b); JFrame toto=new JFrame(); toto.setSize(200,200); toto.add(v); toto.setVisible(true); int a=Clavier.lireInt(); b.changeTaille(100); } Créer modèle Créer vue Modifier Modèle

25 MAIS …. ??? …

26 Probleme ? Exemple d’exécution L'objet initial L'objet n'est pas modifié Pourquoi ? On appuie sur entree

27 Probleme ? On déplace l'objet partiellement derriere des fenetres

28 Réponse Il faut penser à mettre à jour l'affichage –Appel explicite à repaint() Sinon aucun changement Sauf quand JAVA redessine des morceaux Reafficher la fenetre –on peut mieux faire –Comment ?

29 Réponse Il faut penser à mettre à jour l'affichage –Appel explicite à repaint() Sinon aucun changement Sauf quand JAVA redessine des morceaux Reafficher la fenetre –On peut mieux faire –Le modèle sait qu'il a été modifié !!!!

30 Bilan Avantage –Independance vue/modele –Independance modele/controleur Problèmes restant –Repaint dans le controleur ==>Controleur doit connaître la vue … –Plusieurs afficheurs ? –Changer d’afficheurs ?

31 Extension ? Problème –J’ai la même application compliquée … Questions –Comment changer d’interface graphique ? –Comment en proposer plusieurs ? –Comment eviter le lien Controleur/Vue ? Votre solution ?

32 Design observateur

33 Proche des classes precedentes Proche –Modele Connaît toutes les vues Previens les vues qu’il est modifie –Vue Connaît le modele Affiche le modele –Controleur Connaît le modele Modifie le modele

34 Proche des classes precedentes Proche –Modele Connaît toutes les vues Previens les vues qu’il est modifie –Vue Connaît le modele Affiche le modele –Controleur Connaît le modele Modifie le modele Design observateur

35 Diag de classe Observateur Sujet Attache(Observateur) Detache (Observateur) Notifie() Observateur MiseAjour() Pour tout observateur o O->MiseAjour()

36 Diag classes Observateur Sujet Attache(Observateur) Detache (Observateur) Notifie() Observateur MiseAjour() Sujet concret AcqEtat() EtatSujet Return EtatSujet ObservateurConcret MiseAjour() EtatObservateur sujet Pour tout observateur o O->MiseAjour()

37 Diag sequences Observateur unSujetConcretunObserveateurConcret unautreObserveateurConcret Notify() MiseAjour() acqEtat() MiseAjour() acqEtat()

38 Observateur en JAVA Observateur –Une vue –Interface Observer Méthodes à redéfinir –Void update(Observable o, Object arg) Observateur MiseAjour()

39 Observable en JAVA Sujet –Contient les données –Classe Observable Méthodes pré-écrites –Void addObserver(Observer o) –Void deleteObserver(Observer o) –Void notifyObservers() –Void setChanged() Sujet Attache(Observateur) Detache (Observateur) Notifie() Appel explicite

40 Mise en oeuvre

41 modèle Extends la classe Observable –Ajout de nouvelles methodes par heritage Ajouter une vue Notifier les vues –Appel de méthode setChanged() notify()

42 Classe balle import java.awt.Color; import java.util.Observable; /** classe balle**/ public class Balle extends Observable{ public int taille; public Color c; public Balle() { taille=10; c=new Color(0,0,0); } public void changeCouleur(Color t) { if (t!=null) { c=t; setChanged(); } notifyObservers(); } public void changeTaille(int t) { if (t>0) { taille=t; setChanged(); } notifyObservers(); } notify Herite d'Observable

43 Vue Utilise JPanel Implements Observer –Methode update() à ecrire

44 Classe Vue import java.awt.Dimension; import java.awt.Graphics; import java.util.Observable; import java.util.Observer; import javax.swing.JPanel; public class VueBalle extends JPanel implements Observer{ Balle balleAAfficher; public void paint(Graphics arg0) { super.paint(arg0); arg0.setColor(balleAAfficher.c); arg0.fillOval(0, 0, balleAAfficher.taille*10,balleAAfficher.taille*10); } public void update(Observable arg0, Object arg1) { balleAAfficher=(Balle)arg0; repaint(); } } Observer Paint() Update

45 Contrôleur Pas de lien direct avec la vue Exemple : –Un slider pour modifier la taille

46 Exemple de la balle import java.util.Observer; import javax.swing.JSlider; import javax.swing.event.ChangeEvent; import javax.swing.event.ChangeListener; public class Controle extends JSlider{ Balle modele; //constructeur public Controle(Balle b) { super(); //lien avec le modele modele=b; //initialisation du Slider setMaximum(100); setMinimum(1); //ajout d'un listener pour suivre l'evolution du curseur addChangeListener(new ChangeListener(){ public void stateChanged(ChangeEvent arg0) { modele.changeTaille(getValue()); } }); } Pas de lien avec la vue

47 Main pour tout créer public class test { /** * @param args */ public static void main(String[] args) { //creer une balle Balle b=new Balle(); //creer une vue VueBalle vue=new VueBalle(); //attacher la vue au modele b.addObserver(vue); vue.setPreferredSize(new Dimension(200,200)); //creer le controleur Controle c=new Controle(b); c.setPreferredSize(new Dimension(100,50)); //ranger tout dans une frame JFrame frame=new JFrame(); frame.setLayout(new BorderLayout()); frame.getContentPane().add(vue,BorderLayout.NORTH); frame.getContentPane().add(c,BorderLayout.SOUTH); frame.pack(); frame.setSize(new Dimension(300,300)); //frame.pack(); frame.setVisible(true); b.changeTaille(10); c.setValue(10); } Creation modele Creation vue Ajout vue Creation controleur Creation frame

48 Resultat Mise a jour automatique de la vue

49 Conclusion MVC et design Introduction aux designs patterns Montré le design Observateur –Modele MVC lié –Implémentation JAVA : Observable / Observer Modele MVC tres pratique –Independance données/affichage –Independance affichage/controle –Independance interface/modèle

50 Conclusion MVC et design Conséquence –Facile de créer un modele (JAVA classique) –Approche systematique pour Graphique Avantage –Etapes distinctes Developpement modele et Vue/controle –Capacité de changer la/les vue(s) –Tres simple d'utilisation

51 Bilan de ce chapitre Nous avons vus –Ce qu'est un design pattern –Un rappel sur les interfaces graphiques Un moyen de faire des interface Le modele MVC –Le design observateur Les classes JAVA implementent –La mise en oeuvre du design observateur Pour faire des modeles MVC

52 Bilan Tutorés parce que c'est bientot... Mais pas que... Ps: ceci vaut aussi pour le reste du module Assertions Genericité JUNIT !!! ==> tres pratique et efficace / peu couteux Pensez y dans vos projets !!