Comment se compose une interface graphique ?

22/10/2002 Interfaces graphiques 1

Modèle Vue Controleur

•Le Design Pattern MVC

•MVC de Swing

•Evènement et MVC

•Les Renderer22/10/2002 Interfaces graphiques 2

Pourquoi le MVC ?

◆ Décomposer une interface graphique en trois parties

distinctes

◆ Schéma calqué sur le traitement classique d'un

programme

Traitement

donnée entrée

Programme

Traitement

donnée sortie

Controleur Modèle Vue22/10/2002 Interfaces graphiques 3

C'est quoi le MVC ?

◆ Les trois parties du MVC sont :

◆ Contrôleur : agit sur demande de l'utilisateur et

modifie le modèle.

◆ Modèle : contient les données du programme sous

une forme compréhensible par la vue, notifie la vue

des changements.

◆ Vue : composant graphique affichant le modèle.

Controleur Modèle Vue22/10/2002 Interfaces graphiques 4

Avantage du MVC

◆ Séparation claire entre les données du programme et

la partie graphique affichant les données.

• Le modèle montre les données à la vue.

• La vue est le composant graphique.

◆ Evite le stockage des données à plusieurs endroits

(syndrome Visual Basic).

◆ Possibilité pour le modèle d'informer la vue

des modifications incrémentalement.

(par exemple, ajout d'une ligne dans une table).22/10/2002 Interfaces graphiques 5

Le MVC de swing

◆ Pour un modèle, il peut y avoir plusieurs vues et

plusieurs contrôleurs.

◆ La notification des changements d'état

• entre le modèle et les vues et

• entre la vue et les contrôleurs

se font de façon asynchrone (par listener)

Controleur

Modèle

Vue

modifie

affiche

notifie

asynchrone

synchrone

active22/10/2002 Interfaces graphiques 6

Un exemple en Swing

◆ Afficher une liste d'employée

Controleur

Modèle

Vue

ActionListener

FirmListModel

Firm

Employee

Employee

Employee

Employee

actionPerformed

addEmployee

getSize()

getElementAt(index)

intervalAdded

Classes métiers22/10/2002 Interfaces graphiques 7

Relation entre les vues et le modèle

◆ Pour un modèle, il peut y avoir plusieurs vues.

◆ Lors de la création de la vue, celle-ci s'enregistre en

tant que listener du modèle.

SpinnerNumberModel model=new SpinnerNumberModel(0,0,100,1);

JPanel panel=new JPanel(null);

BoxLayout layout=new BoxLayout(panel,BoxLayout.Y_AXIS);

panel.setLayout(layout);

for(int i=0;i<5;i++) {

JSpinner spinner=new JSpinner(model);

panel.add(spinner);

}

JFrame frame=new JFrame();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setContentPane(panel);

frame.setSize(400,300);

frame.setVisible(true);22/10/2002 Interfaces graphiques 8

Relation entre les vues et le modèle (2)

◆ Ici chaque vue partage le même modèle.

◆ Chaque vue reçoit un évènement (notification)

indiquant que le modèle a changé.

◆ Les vues peuvent alors demander au modèle les

valeurs ayant changées

SpinnerNumberModel

Vues22/10/2002 Interfaces graphiques 9

Implanter un modèle

◆ Un modèle pour Swing est une interface que

l'on peut implanter pour mettre des données

sous une certaine forme.

◆ Exemple :

• ListModel pour les listes,

• TreeModel pour les arbres,

• TableModel pour les tableaux (feuille de calcul),

• ButtonModel

...