12-Les Interfaces Graphiques

Les interfaces graphiques
Branches SRT et ISI Unit de valeur LO02

Guillaume Doyen
Contact : guillaume.doyen@utt.fr
LO02 Les interfaces graphiques
Plan du cours
Introduction
La programmation par vnement
Gestion des vnements Swing : une
premire approche
Le patron de conception Model-ViewControler
Tour d'horizon des composants Swing
Plan du cours
Introduction
premire approche
Que fait-on avec Swing ?
Source : Java Sun/Oracle tutorial (http://download.oracle.com/javase/tutorial/)
Plan du cours
Introduction
premire approche
La programmation par
vnement
Problmatique
Comment un objet A peut tre tenu au courant des changements
survenus au sein dun autre objet B ?
Deux classes de solutions

Polling
L'objet A interroge intervalles rguliers l'objet B pour savoir s'il a chang
d'tat.
L'objet A est toujours actif. Par extension si B est surveill par plusieurs
objets, tous ces objets le surveilleront activement aussi.
L'intervalle de polling dtermine la prcision temporelle de l'information de
changement d'tat
Notification
Lorsque l'objet B change d'tat, il envoie une notification l'objet A.
L'objet A ne surveille plus activement. Si B est surveill par plusieurs objets,
les objets seront aussi passifs.
La notification est immdiate.
vnements
Gnralits
La programmation vnementielle repose sur la notification
On distingue
Les objets qui sont observs. Ils sont dit observables.
Les objets qui observent, appels des observateurs (Observer en
anglais)
Principe
Un objet observateur s'enregistre auprs d'un objet qu'il observe.
Ensuite ds qu'un changement dans l'objet observ survient,
l'observateur est notifi du changement d'tat.
Proprits
L'objet observ peut tre observ par plusieurs observateurs
L'observateur peut observer plusieurs objets
L'objet observ possde la matrise de la notification. C'est lui qui
dtermine quand notifier ses observateurs.
vnements
Le patron de conception Observer
Vue gnrale
la version implmente par Java est plus riche que le diagramme
Plusieurs variantes du patron existent mais elles reposent

toutes sur ce principe
10
Mise en uvre de la
programmation par vnements
Cas gnral
L'interface Observer
public interface Observer {
// o est la source de la notification
// arg est un objet qui reprsente l'vnement
public void update(Observable o, Object arg);
}
Tout objet qui veut observer d'autres objets doit implmenter

linterface Observer
Lorsqu'un changement survient dans l'objet observ, la mthode
update est automatiquement appele
La classe Observable
Cf. transparent suivant
11
Mise en uvre de la
Cas gnral (cont.)
public class Observable {
// Gestion des observateurs
public void addObserver (Observer o);
public void deleteObserver (Observer o);
public void deleteObservers ();
public int countObservers();
// Gestion du changement
protected void clearChanged();
protected void setChanged();
public boolean hasChanged();
// Notification des observateurs
public void notifyObservers();
public void notifyObservers(Object arg);
}
12
Mise en uvre de la
Cas des interfaces graphiques
Les interfaces graphiques utilisent la programmation par vnements
pour rcuprer des informations sur les changements survenus dans
les objets graphiques
Clic de souris sur un bouton
Saisie de texte

Le principe repose sur la notification

Les objets qui rcuprent ces vnements sont appels des couteurs
(Listeners en anglais)
L'interface racine des couteurs est l'interface java.util.EventListener
L'vnement produit est retranscrit sous forme d'un objet

La classe racine pour les vnements est la classe
java.util.EventObjet
13
Mise en uvre de la
Evnement
Source
Listener
Mthode
ActionEvent
JButton,
JCheckBoxMenuItem, JComboBox,
JFileChooser,
JList,
JRadioButtonMenuItem, JTextField,
JToogleButton
ActionListener
actionPerformed()
MouseEvent
Tous les
composants
MouseListener
mouseClicked(),
mousePressed(),
mouseReleased(),
mouseEntered(),
mouseExited()
MouseMotionListener mouseDragged(),
mouseMoved()
KeyEvent
KeyListener
keyTyped(),
keyPressed(),
keyReleased()
14
Mise en uvre de la
Evnement
FocusEvent
Source
Tous les
composants
TextEvent
WindowEvent
Jdialog, JFrame,
JWindow
Listener
Mthode
FocusListener
focusGained(),
focusLost()
TextListener
textValueChanged()
WindowListener
windowOpened(),
windowClosing(),
WindowClosed(),
windowIconified(),
windowDeiconified(),
windowActivated(),
windowDesactivated()
15
Les adaptateurs
Problmatique
Les couteurs sont des interfaces qui spcifient plusieurs
mthodes. Toutefois, on peut tre intress que par
l'implantation d'un sous-ensemble de ces mthodes.
Les adaptateurs
Les adaptateurs fournissent une implantation vide des
mthodes des diffrentes interfaces des couteurs. Le
programmeur peut ainsi :
Implanter un couteur qui hrite de son adaptateur
Redfinir seulement les mthodes qui l'intresse
On trouve ainsi
MouseAdapter, KeyAdapter, FocusAdapter,
WindowAdapter
16
Plan du cours
Introduction
premire approche
17
La classe compteur
public class Compteur {
}
}
public final static int

TEMPORISATION = 500;
protected int compteur;
protected boolean compte;
public void arreter() {

this.compte = false;
}
public Compteur () {
this.compteur = 0;
this.compte = false;
}
public void compter() {
this.compte = true;
while (compte) {
compteur++;
this.attendre();
public int getValeur() {

return this.compteur;
}
protected void attendre() {
// Dans un bloc try/catch
Thread.sleep(
Compteur.TEMPORISATION);
}
}
18
Intgration du compteur dans

une interface graphique
Solution intuitive
Crer une classe qui hrite de la classe
Compteur
Ajouter les composants graphiques
Redfinir la mthode compter()
19
public class CompteurGraphique extends Compteur {

private JFrame fenetre;
private JLabel texte;
private JButton demarrer;
public CompteurGraphique () {
super();
texte = new JLabel("Compteur : " + super.getValeur());
demarrer = new JButton("Demarrer");
fenetre = new JFrame ("Un compteur");
Container reservoir = fenetre.getContentPane();
reservoir.add(texte, BorderLayout.NORTH);
reservoir.add(demarrer, BorderLayout.SOUTH);
fenetre.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
fenetre.pack();
fenetre.setVisible(true);
// Suite du constructeur sur le prochain slide
20
// Controleur du bouton : classe anonyme qui redfinit

// la mthode actionPerformed
demarrer.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event) {
compter();
}
});
}
// On redfinit ici la mthode compter()
while (super.compte) {
super.compteur++;
texte.setText("Compteur : " + super.getValeur());
super.attendre();
}
}
}
21
Intgration du compteur dans

une interface graphique
Limites de cette approche
Comment changer d'interface graphique sans changer l'implantation
du compteur ?
Comment rendre visible le compteur par plusieurs interfaces en mme
temps ?
Comment changer le comportement de l'interface graphique sans

changer le compteur ?
Est-ce que le code respecte les bases de la POO ?
Une classe reprsente une fonctionnalit atomique et pas un agrgat de
fonctions htrognes
En conclusion
On ne dploie JAMAIS une interface graphique selon cette approche
On essaie TOUJOURS de sparer les diffrents composants de
l'application pour accroitre la modularit, l'extensibilit, la lisibilit du
code
22
Plan du cours
Introduction
premire approche
23
Le modle de conception MVC

Qu'est ce que le pattern MVC ?
Modle de conception orient-objet qui dfinit le rle et la
communication entre les diffrents lments d'une
application graphique
Modle de programmation reconnu comme un standard
pour la programmation des interfaces graphiques
Dploy dans les GUI
Dploy dans les applications web
Simplifie la comprhension du code

Swing supporte parfaitement ce modle
24

Dfinitions
Le modle
Dtient les donnes et la logique de l'application
La vue
Donne une prsentation du modle
Le contrleur
Rcupre les oprations de l'utilisateur et les traduit
sur le modle
25

Relations entre les composants
Le contrleur
1. L'utilisateur
agit sur la vue
2. Les donnes ou
l'tat du modle
changent
3. L'tat de la vue
est mise jour

public final static int TEMPORISATION = 500;
4. La vue est mise

jour
La vue
5. La vue
interroge le
modle
this.compteur = 0;
}
// ...
}
Le modle
26

Relations entre les composants
Le contrleur
On dit aussi
que le
contrleur
suit le modle
de stratgie
Le contrleur
coute la
vue : c'est un
couteur
La vue
Le modle et
la vue sont
lis par une
relation
d'observation

public final static int TEMPORISATION = 500;
this.compteur = 0;
}
// ...
}
Le modle
27

Le compteur comme modle
public class CompteurMVC extends Observable {
// Code identique la classe Compteur (attributs,
// constructeur getValeur, attendre, ...
while (compter) {
compteur++;
setChanged();
notifyObservers();
this.attendre();
}
}
}
28

L'interface graphique : la vue
class VueCompteur implements Observer {
private
private
private
private
Compteur compteur;
JFrame fenetre;
JLabel texte;
JButton demarrer;
public VueCompteur (Compteur c) {

compteur = c;
compteur.addObserver(this);
texte = new JLabel("Compteur : " + c.getValeur());
demarrer = new JButton("Demarrer");
fenetre = new JFrame ("Un compteur");
29
reservoir.add(texte, BorderLayout.NORTH);
reservoir.add(demarrer, BorderLayout.SOUTH);
demarrer.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event) {
compteur.compter();
}
});
L'interface graphique : la vue (cont.)
fenetre.pack();
}
public void update(Observable o, Object arg) {
texte.setText("Compteur : " + compteur.getValeur());
}
public static void main(String[] args) {
Compteur c = new Compteur();
VueCompteur vc = new VueCompteur(c);
}
}
30

Quelques conclusions
Le patron MVC dcouple le cur d'une application de son
interface graphique
On peut changer l'interface sans changer le coeur
Le comportement de l'interface est donn par le

contrleur
La vue de s'occupe que des lments graphiques pas du
comportement associ
On parle alors de stratgie (un autre patron de conception)
Le modle n'a aucune connaissance de ses interfaces

Il notifie juste ses observateurs en cas de changement
31
Plan du cours
Introduction
premire approche
32
Prambule
Ce que contient le cours Swing
L'explication des concepts cls pour la conception
d'interfaces graphiques
Ce qu'il ne contient pas

Une liste exhaustive de tous les composants Swing
Une srie de cookbook pour raliser ses interfaces
Le tutorial Sun/Oracle est une excellente source pour ce genre
d'information
De nombreux ouvrages traitent de ce sujet
Vous tes capables d'accder cette information par vous mme
33
L'lment de base : la fentre

La classe JFrame
Reprsente une fentre
Contient une barre de menus
Contient un panneau dans lequel des composants
graphiques peuvent tre insrs
Gre les boutons de gestion de la fentre
Rduction, agrandissement, fermeture
fenetre = new JFrame ("Titre de la fentre");
fenetre.pack();
34
Les conteneurs
Les conteneurs
Contiennent un ensemble de composants
La classe JPanel reprsente un conteneur
La classe JComponent reprsente un composant
Un conteneur est lui-mme un composant

Un conteneur donc peut contenir d'autres conteneurs
Il suit le patron de conception Composite
Problmatique Swing
Comment placer les composants graphiques dans la fentre ?
En fonction de la taille de la fentre ?
Les gestionnaires de contenu (Layout)

Dfinissent une stratgie de placement des composants graphiques
dans un panneau
35
Les gestionnaires de contenu

Les gestionnaires de contenu existants
BorderLayout
Organise les donnes selon leur orientation gographique
Nord, sud, est, ouest et centre
FlowLayout
Place les composants graphiques les uns la suite des autres
LO02 Les interfaces graphiques Sources : Java Sun/Oracle tutorial (https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html)

36
Les gestionnaires de contenu

Les gestionnaires de
contenu existants (cont.)
BoxLayout
Place les composants
graphiques les uns la suite
des autres selon un axe dfini
(X ou Y)
GridLayout
Permet de dfinir une grille
paramtrable qui va contenir
des composants
LO02 Les interfaces graphiques Sources : Java Sun/Oracle tutorial (https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html)

37
Swing et les threads

Problmatique
Dans un contexte multithreads, la gestion de la vue doit tre
effectue dans un thread ddi, spar des threads du modle
Swing propose un thread unique pour la gestion des composants
graphiques
Event dispatching thread
Gre une file d'attente unique pour les oprations graphiques effectuer
On peut forcer l'excution d'une portion de code s'effectuer dans le

Event dispatching thread
public class SwingUtilities {
public static void invokeLater(Runnable doRun);
public static void invokeAndWait(Runnable doRun);
public static boolean isEventDispatchThread();
}
38
Swing et les threads

Pour plus d'infos sur ce point
http://java.sun.com/products/jfc/tsc/articles/threads/
threads1.html
39

12-Les Interfaces Graphiques

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

12-Les Interfaces Graphiques

Загружено:

Авторское право:

Доступные форматы

Les interfaces graphiques

Branches SRT et ISI Unit de valeur LO02

LO02 Les interfaces graphiques

LO02 Les interfaces graphiques

LO02 Les interfaces graphiques

Que fait-on avec Swing ?

LO02 Les interfaces graphiques

Source : Java Sun/Oracle tutorial (http://download.oracle.com/javase/tutorial/)

Que fait-on avec Swing ?

LO02 Les interfaces graphiques

Source : Java Sun/Oracle tutorial (http://download.oracle.com/javase/tutorial/)

Que fait-on avec Swing ?

LO02 Les interfaces graphiques

Source : Java Sun/Oracle tutorial (http://download.oracle.com/javase/tutorial/)

LO02 Les interfaces graphiques

Deux classes de solutions

Plusieurs variantes du patron existent mais elles reposent

LO02 Les interfaces graphiques

Tout objet qui veut observer d'autres objets doit implmenter

Le principe repose sur la notification

L'vnement produit est retranscrit sous forme d'un objet

LO02 Les interfaces graphiques

LO02 Les interfaces graphiques

LO02 Les interfaces graphiques

public final static int

public void arreter() {

public int getValeur() {

Intgration du compteur dans

LO02 Les interfaces graphiques

public class CompteurGraphique extends Compteur {

// Controleur du bouton : classe anonyme qui redfinit

LO02 Les interfaces graphiques

Intgration du compteur dans

Comment changer le comportement de l'interface graphique sans

LO02 Les interfaces graphiques

LO02 Les interfaces graphiques

Le modle de conception MVC

Simplifie la comprhension du code

LO02 Les interfaces graphiques

Le modle de conception MVC

LO02 Les interfaces graphiques

Le modle de conception MVC

public class Compteur {

4. La vue est mise

Le modle de conception MVC

LO02 Les interfaces graphiques

public class Compteur {

Le modle de conception MVC

Le modle de conception MVC

public VueCompteur (Compteur c) {

Le modle de conception MVC

L'interface graphique : la vue (cont.)

Le modle de conception MVC

Le comportement de l'interface est donn par le

Le modle n'a aucune connaissance de ses interfaces

LO02 Les interfaces graphiques

LO02 Les interfaces graphiques

Ce qu'il ne contient pas

LO02 Les interfaces graphiques

L'lment de base : la fentre

Un conteneur est lui-mme un composant

Les gestionnaires de contenu (Layout)

Les gestionnaires de contenu

LO02 Les interfaces graphiques Sources : Java Sun/Oracle tutorial (https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html)