Introduction Design patterns

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

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

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

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

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

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

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, …)

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

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

Interface graphique Attentes d’une interface graphique ?

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

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

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

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 ?

Votre approche ?

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

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

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

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

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

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); }

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

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

MAIS …. ??? …

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

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

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 ?

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

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 ?

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 ?

Design observateur

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

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

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

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

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

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

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

Mise en oeuvre

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

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

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

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

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

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

Main pour tout créer public class test { /** 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

Resultat Mise a jour automatique de la vue

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

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

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

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