Développement d'applications

desktop (JAVA GUI)

1
 Sommaire
+ Introduction à Java GUI
- Introduction aux interfaces graphiques utilisateur (GUI)
- Présentation des bibliothèques GUI de Java : Swing et JavaFX
- Installation et configuration de l'environnement de développement
+ Composants GUI de base
- Utilisation des conteneurs et des composants de base (boutons, champs de texte,
étiquettes, etc.)
- Gestion des événements et des actions utilisateur
+Modèles de conception GUI
- Introduction aux modèles de conception (MVC, Observer, etc.)
- Application des modèles de conception pour concevoir des interfaces utilisateur
extensibles et évolutives
+ Interface utilisateur avancée avec Swing
- Utilisation des composants avancés de Swing (tableaux, arbres, onglets, etc.)
- Création de dialogues et de boîtes de dialogue personnalisées
+ Introduction à JavaFX
- Présentation de JavaFX et comparaison avec Swing
- Création de scènes, de nœuds et de mises en page avec JavaFX
+ Déploiement d'applications Desktop
- Packaging et déploiement d'applications Java en tant qu'applications autonomes
- Distribution et installation d'applications avec Java Web Start 2
 Interface avec l’utilisateur
•La quasi-totalité des programmes informatiques
nécessitent
– l’affichage de questions posées à l’utilisateur
– l’entrée de données par l’utilisateur au
moment de l’exécution
– l’affichage d’une partie des résultats obtenus
par le traitement informatique

•Cet échange d’informations peut s’effectuer avec

une interface utilisateur (UI en anglais) en mode
texte (ou console) ou en mode graphique
3
 Interface graphique
•Une interface graphique est formée d’une ou
plusieurs fenêtres qui contiennent divers composants
graphiques (widgets) tels que
– boutons
– listes déroulantes
– menus
– champ texte
– etc.
• Les interfaces graphiques sont souvent appelés GUI
d’après l’anglais Graphical User Interface

4
 Comment créer une interface graphique ?
Une interface graphique est un système de communication avec l’utilisateur final
utilisant un affichage dans une fenêtre et réagissant aux actions de l’utilisateur tels
que les clics et le clavier.
Côté programmation, cela demande d’interagir avec le système d’exploitation qui
gère les différentes applications et les actions de l’utilisateur.

Java offre plusieurs bibliothèques :

la bibliothèque historique AWT pour “Abstract Window Toolkit” : interfaçage

bas niveau avec le système d’exploitation

la bibliothèque Swing : plus indépendante du système d’exploitation mais qui

réutilise de nombreux composants awt – encore très classique même si un peu
ancienne

la bibliothèque JavaFX : plus récente , architecture plus moderne et plus

adaptée aux nouveaux supports (écrans tactiles par exemple). Nouvelle bibliothèque
par défaut
5
GUI : Interface Graphique Utilisateur
GUI : Graphical user Interface
(WIMP : Window Icon Menu Pointer)
p.ex. Gnome, kde, linux, Macos X, Win*

Photo : gimp

6
 Programmation avec interface
graphique
• L’utilisateur peut interagir à tout moment avec
plusieurs objets graphiques : cliquer sur un
bouton, faire un choix dans une liste
déroulante ou dans un menu, remplir un champ
texte, etc…
• Ces actions peuvent modifier totalement le
cheminement du programme, sans que l’ordre
d’exécution des instructions ne puisse être
prévu à l’écriture du code

7
 Programmation conduite par les
événements
• L’utilisation d’interfaces graphiques impose
une façon particulière de programmer
• La programmation « conduite par les
événements » est du type suivant :
– les actions de l’utilisateur engendrent des
événements qui sont mis dans une file d’attente
– le programme récupère un à un ces événements et
les traite

8
 Boîtes à outils graphiques
• Les boîtes à outils graphiques offrent des
facilités pour utiliser et gérer la file d’attente
des événements
• En particulier pour associer les événements
avec les traitements qu’ils doivent déclencher

9
 La solution Java : les écouteurs
• Le JDK utilise une architecture de type «
observateur - observé » :
– les composants graphiques (comme les boutons)
sont les observés
– chacun des composants graphiques a ses
observateurs (ou écouteurs, listeners), objets qui
s’enregistrent (ou se désenregistrent) auprès de lui
comme écouteur d’un certain type d’événement
(par exemple, clic de souris)

10
 Rôle d’un écouteur
• Il est prévenu par le composant graphique dès
qu’un événement qui le concerne survient sur
ce composant
• Il exécute alors l’action à effectuer en réaction
à l’événement
• Par exemple, l’écouteur du bouton « Exit »
demandera une confirmation à l’utilisateur et
terminera l’application

11
 GUI : Interface Graphique Utilisateur

But : Permettre une interactivité avec un

programme de manière « plus simple » et plus
intuitive.

Elle repose sur trois parties : les entrées, les sorties, le lien

12
 GUI : Interface Graphique Utilisateur

Les entrées :
récupération des informations auprès de l'utilisateur
frappe au clavier, déplacement de la souris, widget, etc.

Les sorties :

l'affichage des données et de l'état du système.

Fenetre, bouton, menu, widget

Le lien:

entre les actions de l'utilisateur et les actions effectives sur le coeur du programme.

Ouvrir un fichier, met le fichier en mémoire

13
 Programmation évènementielle
• La programmation événementielle est un concept différent de
la programmation fonctionnelle ou impérative
• Il s’agit de permettre une interaction non-linéaire, plusieaurs
événements peuvent être produits avec un ordre différent.

exécution

choix

Programmation fonctionnelle Programmation évènementielle14

 Programmation évènementielle

• Les composants d’une applications événementielle

interagissent entre eux et avec l’environnement.

• Il communiquent en réponse à des événements.

• Les événements sont captés par le système et sont transmis

aux « écouteurs » (listener).

• C’est vous qui mettez en place les « écouteurs

».(implements)

15
 Programmation évènementielle

Pour réaliser des interfaces, il est impératif

de programmer de manière événementielle et
donc de prévoir les évènements.

Dans ce but, vous devez connaître les

capacités de votre interface et les événements
qu’elle peut générer.

16
 Comment Concevoir un programme ?
Séparez les classes de la gestion du modèle et celle de l’interface graphique

Java (Swing)

View

Événement (souris, clavier, etc.)

Routines de Control
communication

P.ex. base de données, Model

Java

17
 Modèle-Vue-Contrôleur (MVC)

• Motif de conception pour le développement d'applications

logicielles qui sépare
– le modèle de données,
– l'interface utilisateur et
– la logique de contrôle.

• Ce motif a été mis au point en 1979 par Trygye Reenskang, qui

travaillait alors sur Smalltalk dans les laboratoires de recherche
Xerox PARC.

18
 Modèle-Vue-Contrôleur (MVC)

• la Vue :
correspond à l'interface avec laquelle l'utilisateur interagit.

Les résultats renvoyés par le modèle sont dénués de toute présentation mais sont
présentés par les vues.

Plusieurs vues peuvent afficher les informations d'un même modèle.

La vue n'effectue aucun traitement, elle se contente d'afficher les résultats des
traitements effectués par le modèle, et de permettre à l'utilisateur d'interagir
avec elles.

19
 Modèle-Vue-Contrôleur (MVC)

• Le Modèle :
représente le comportement de
l'application :
• traitements des données,
• interactions avec la base de données,
• etc.
Il décrit les données manipulées par l'application et
définit les méthodes d'accès.

20
 Modèle-Vue-Contrôleur (MVC)
Routines de
communication
• le Contrôleur :

prend en charge la gestion des événements de

synchronisation pour mettre à jour la vue ou le modèle

Il n'effectue aucun traitement, ne modifie aucune donnée, il

analyse la requête du client et se contente d'appeler le
modèle adéquat et de renvoyer la vue correspondant à la
demande

21
 Modèle-Vue-Contrôleur (MVC)

• Résumé :
– lorsqu'un client envoie une requête à
l'application:
• celle-ci est analysée par le contrôleur
• ce contrôleur demande au modèle approprié
d'effectuer les traitements,
• puis renvoie la vue adaptée

22
 Concevoir une interface
Routines de
communication

Vue Modèle
Control

1) Il faut connaître le modèle et son fonctionnement

2) Définir le contrôle que l’on veut faire (ouvrir, fermer, afficher, etc.) sur
le modèle
3) Faire un croquis de l’interface pour définir les widgets (menu, bouton,
label, etc.) à utiliser et leurs caractéristiques (nom, position, etc.)

23
 Interface Graphique avec Java

JAVA, langage de programmation de SUN utilise deux

bibliothèques pour vous aider à développer des interfaces
graphiques :

●AWT (ne s'utilise plus)

●SWING

Spinner

Buttons

Menu

24
 Interface Graphique avec Java

Les applications SWING se développent de la même manière que

toutes les applications JAVA en utilisant les classes de la bibliothèque
SWING:
objets, classes, héritages

Programmer une interface n'est pas donc pas différent que

programmer un ensemble de classe comme la classe
« Cercle », p.ex.

25
Concevoir l’interface: 1ère partie (Vue)

Java (Swing)

Vue

Événement (souris, clavier, etc.)

Routines de
communication Control

Modèle

Java

26
 Interface Graphique avec Java
1) Écrire le code java
FenetreView.java
import java.awt.*; 2) compilation
import javax.swing.*;
public class FenetreView extends JFrame {
public FenetreView(String nom)
{
super(nom);
3) Exécution
Container pan = this.getContentPane();

pan.setLayout(new GridBagLayout());

JLabel label;
label = new JLabel("Hello ESTIA");
pan.add(label);

this.pack();
this.setVisible(true);
}

public static void main(String s[])

{
FenetreView f = new FenetreView("simple");
}
27

}
 Interface Graphique avec Java
1) Écrire le code java
FenetreView.java
import java.awt.*; Importation
import javax.swing.*;
public class FenetreView extends JFrame {
public FenetreView(String nom)
{
super(nom);

Container pan = this.getContentPane();

pan.setLayout(new GridBagLayout()); Constructeur

JLabel label;
label = new JLabel("Hello YNOV");
pan.add(label);

this.pack();
this.setVisible(true);
}

public static void main(String s[]) Instanciation de l’objet

{
FenetreView f = new FenetreView("simple");
}
28

}
 Les API
•2 bibliothèques :
– AWT (Abstract Window Toolkit, JDK 1.1)
– Swing (JDK/SDK 1.2)
• Swing et AWT font partie de JFC (Java Foundation
Classes) qui offre des facilités pour construire des
interfaces graphiques
• Swing est construit au-dessus de AWT
– même gestion des événements
– les classes de Swing héritent des classes de AWT

29
 Swing ou AWT ?

•Tous les composants de AWT ont leur équivalent

dans Swing
– en plus joli
– avec plus de fonctionnalités
• Swing offre de nombreux composants qui
n’existent pas dans AWT Il est fortement conseillé
d’utiliser les composants Swing

30
 Paquetages principaux

• AWT : java.awt et java.awt.event

• Swing : javax.swing, javax.swing.event, et tout un
ensemble de sous-paquetages de javax.swing dont les
principaux sont
– liés à des composants ; table, tree, text (et ses sous-
paquetages), filechooser, colorchooser
– liés au look and feel général de l’interface (plaf =
pluggable look and feel) ; plaf, plaf.basic, plaf.metal,
plaf.windows, plaf.motif
31
 Conteneurs et composants
• Une interface graphique en Java est un assemblage conteneurs
(Container) et de composants (Component).
• Un composant est une partie "visible" de l'interface utilisateur
Java.
 C’est une sous-classes de la classe abstraite java.awt.Component.
 Exemple : les boutons, les zones de textes ou de dessin, etc.
• Un conteneur est un espace dans lequel on peut positionner
plusieurs composants.
 Sous-classe de la classe java.awt.Container
 La classe Container est elle-même une sous-classe de la classe
Component
 Par exemple les fenêtres, les applets, etc.

32
 Conteneurs et composants

Object Hiérarchie d’héritage

Button
(from l a ng )
des principaux éléments des
interfaces graphiques en Java
Canvas Component

Ch ec kbox

Container
Choice

Label
Panel W indow

Scrollbar List

Dial og Frame
Applet
TextComponent
(fro m ap p le t)

FileDialog
TextArea TextField

33
 Conteneurs et composants
• Les deux conteneurs les plus courants sont le Frame et le
Panel.
• Un Frame représente une fenêtre de haut niveau avec un
titre, une bordure et des angles de redimensionnement.
 La plupart des applications utilisent au moins un Frame
comme point de départ de leur interface graphique.
• Un Panel n'a pas une apparence propre et ne peut pas être
utilisé comme fenêtre autonome.
 Les Panels sont créés et ajoutés aux autres conteneurs de la
même façon que les composants tels que les boutons
 Les Panels peuvent ensuite redéfinir une présentation qui leur
soit propre pour contenir eux-mêmes d'autres composants.

34
 Conteneurs et composants
• On ajoute un composant dans un conteneur, avec la
méthode add() :
Panel p = new Panel();
Button b = new Button();
p.add(b);

• De manière similaire, un composant est retirer de son

conteneur par la méthode remove() :
p.remove(b);

• Un composant a (notamment) :
 une taille préférée que l’on obtient avec getPreferredSize()
 une taille minimum que l’on obtient avec getMinimunSize()
 une taille maximum que l’on obtient avec getMaximunSize()

35
 Conteneurs et composants

import java.awt.*;
Création d’une fenêtre
public class EssaiFenetre1
(un objet de la classe
{
Frame) avec un titre
public static void main(String[] args)
{
Frame f =new Frame("Ma première fenêtre"); Création du bouton ayant
Button b= new Button("coucou"); pour label « coucou »
f.add(b);
f.pack(); Ajout du bouton dans la
f.show(); fenêtre
}
On demande à la fenêtre
}
de choisir la taille
minimum avec pack() et
de se rendre visible avec
show()

36
 Gestionnaire de présentation
• A chaque conteneur est associé un gestionnaire de
présentation (layout manager)
• Le gestionnaire de présentation gère le
positionnement et le (re)dimensionnement des
composants d’un conteneur.
• Le réagencement des composants dans un conteneur a
lieu lors de :
 la modification de sa taille,
 le changement de la taille ou le déplacement d'un des composants.
 l'ajout, l'affichage, la suppression ou le masquage d'un composant.
• Les principaux gestionnaires de présentation de
l'AWT sont : FlowLayout, BorderLayout,
GridLayout, CardLayout, GridBagLayout

37
 Gestionnaire de présentation
• Tout conteneur possède un gestionnaire de présentation par
défaut.
 Tout instance de Container référence une instance de
LayoutManager.
 Il est possible d'en changer grâce à la méthode setLayout().
• Les gestionnaires de présentation par défaut sont :
 Le BorderLayout pour Window et ses descendants (Frame,
Dialog, …)
 Le FlowLayout pour Panel et ses descendants (Applet, etc.)

• Une fois installé, un gestionnaire de présentation fonctionne

"tout seul" en interagissant avec le conteneur.

38
 FlowLayout
• Le FlowLayout est le plus simple des
managers de l'AWT
• Gestionnaire de présentation utilisé par défaut
dans les Panel si aucun LayoutManager n'est
spécifié.
• Un FlowLayout peut spécifier :
une justification à gauche, à droite ou centrée,
un espacement horizontal ou vertical entre deux
composants.
Par défaut, les composants sont centrés à
l'intérieur de la zone qui leur est allouée.
39
 FlowLayout
• La stratégie de disposition du FlowLayout est la
suivante :
 Respecter la taille préférée de tous les composants
contenus.
 Disposer autant de composants que l'on peut en faire
tenir horizontalement à l'intérieur de l'objet
Container.
 Commencer une nouvelle rangée de composants si on
ne peut pas les faire tenir sur une seule rangée.
 Si tous les composants ne peuvent pas tenir dans
l'objet Container, ce n'est pas géré (c'est-à-dire que
les composants peuvent ne pas apparaître).

40
 FlowLayout

OK Ouvrir Redimensionnement Ouvrir Fermer

OK
Fermer

plus visible

OK Ouvrir Redimensionnement
OK Ouvrir Fermer
Fermer

41
 FlowLayout

Redimensionnement

Redimensionnement

42
FlowLayout

Redimensionnement

Redimensionnement

43
 FlowLayout
• Le FlowLayout cache réellement et effectivement les
composants qui ne rentrent pas dans le cadre.
• Le FlowLayout n'a d'intérêt que quand il y a peu de
composants.
• L'équivalent vertical du FlowLayout n'existe pas
• La présentation FlowLayout positionne les composants ligne
par ligne.
 Chaque fois qu'une ligne est remplie, une nouvelle ligne est
commencée.
• Le gestionnaire FlowLayout n'impose pas la taille des
composants mais leur permet d'avoir la taille qu'ils préfèrent.

44
 BorderLayout
• BorderLayout divise son espace de travail en
cinq zones géographiques : North, South, East,
West et Center.
• Les composants sont ajoutés par nom à ces
zones (un seul composant par zone).
Exemple
add("North", new Button("Le bouton nord !"));
Si une des zones de bordure ne contient rien, sa
taille est 0.

45
 BorderLayout
• Division de l’espace avec le BorderLayout

NORTH

WEST CENTER EAST

SOUTH

46
 BorderLayout
import java.awt.*;

public class EssaiBorderLayout extends Frame

{
private Button b1,b2,b3,b4, b5;
public EssaiBorderLayout() {
setLayout(new BorderLayout());
b1 = new Button ("Nord"); b2 = new Button ("Sud");
b3 = new Button ("Est"); b4 = new Button ("Ouest");
b5 = new Button ("Centre");
this.add(b1, BorderLayout.NORTH);
this.add(b2 , BorderLayout.SOUTH);
this.add(b3, BorderLayout.EAST);
this.add(b4, BorderLayout.WEST);
this.add(b5, BorderLayout.CENTER);
}
public static void main (String args []) {
EssaiBorderLayout essai = new EssaiBorderLayout();
essai.pack (); essai.setVisible(true) ;
}}

47
 BorderLayout
• Stratégie de disposition du BorderLayout
 S'il y a un composant dans la partie placée dans la partie NORTH, il récupère sa
taille préférée, respecte sa hauteur préférée si possible et fixe sa largeur à la
totalité de la largeur disponible de l'objet Container.
 S'il y a un composant dans la partie placée dans la partie SOUTH, il fait pareil
que dans le cas de la partie NORTH.
 S'il y a un composant dans la partie placée dans la partie EAST, il récupère sa
taille préférée, respecte sa largeur préférée si possible et fixe sa hauteur à la
totalité de la hauteur encore disponible.
 S'il y a un composant dans la partie placée dans la partie WEST, il fait pareil
que dans le cas de la partie EAST.
 S'il y a un composant dans la partie CENTER, il lui donne la place qui reste, s'il
en reste encore.

48
 BorderLayout
• Lors du redimensionnement, le composant est
lui-même redimensionné en fonction de la
taille de la zone, c-à-d :
les zones nord et sud sont éventuellement élargies
mais pas allongées.
les zones est et ouest sont éventuellement
allongées mais pas élargies,
la zone centrale est étirée dans les deux sens.

49
 BorderLayout

N N
Redimensionnement
O C E
O C E
S

50
BorderLayout

Redimensionnement

Redimensionnement

51
 GridLayout
• Le GridLayout dispose les composants dans
une grille.
Découpage de la zone d'affichage en lignes et en
colonnes qui définissent des cellules de
dimensions égales.
Chaque composant à la même taille
quand ils sont ajoutés dans les cellules le remplissage
s ’effectue de gauche à droite et de haut en bas.
Les 2 paramètres sont les rangées et les colonnes.
nombre de lignes nombre de colonnes
Construction d'un GridLayout : new GridLayout(3,2);

52
 GridLayout

import java.awt.*;
public class AppliGridLayout extends Frame
{
public AppliGridLayout()
{
super("AppliGridLayout");
this.setLayout(new GridLayout(3,2));
for (int i = 1; i < 7; i++)
add(new Button(Integer.toString(i)));
this.pack();
this.show();
}

public static void main(String args[])

{
AppliGridLayout appli = new AppliGridLayout();
}
}
53
 GridLayout
• Lors d’un redimensionnement les composants
changent tous de taille mais leurs positions
relatives ne changent pas.

1 2 1 2
Redimensionnement
3 4 4
3
5 6
5 6

54
 GridLayout

Redimensionnement

55
 CardLayout
• Le CardLayout n'affiche qu'un composant à la fois :
 les composants sont considérées comme empilées, à la façon d'un
tas de cartes.
• La présentation CardLayout permet à plusieurs composants de
partager le même espace d'affichage de telle sorte que seul l'un
d'entre eux soit visible à la fois.
• Pour ajouter un composant à un conteneur utilisant un
CardLayout il faut utiliser add(String cle, Component
monComposant)
• Permet de passer de l ’affichage d ’un composant à un autre en
appelant les méthodes first, last, next, previous ou show

56
 GridBagLayout
• Le gestionnaire GridBagLayout fournit des fonctions de
présentation complexes
 basées sur une grille dont les lignes et les colonnes sont de taille
variables.
 permet à des composants simples de prendre leur taille préférée
au sein d'une cellule, au lieu de remplir toute la cellule.
 permet aussi l'extension d'un même composant sur plusieurs
cellules.
• Le GridBagLayout est compliqué à gérer.
 Dans la plupart des cas, il est possible d’éviter de l’utiliser en
associant des objets Container utilisant des gestionnaires
différents.
• Voir la doc

57
 Mise en forme complexe

super("AppliComplexeLayout");
setLayout(new BorderLayout());
Panel pnorth = new Panel();
pnorth.add(b1); pnorth.add(b2);
pnorth.add(b3); pnorth.add(b4);
this.add(pnorth,BorderLayout.NORTH);

Panel pcenter = new Panel();

pcenter.setLayout(new GridLayout(2,2));
pcenter.add(gr1); pcenter.add(gr2);
pcenter.add(gr3); pcenter.add(gr4);
this.add(pcenter,BorderLayout.CENTER);

Panel psouth = new Panel();

psouth.setLayout(new FlowLayout());
psouth.add(ch); psouth.add(tf);
this.add(psouth, BorderLayout.SOUTH);

58
 D’autres gestionnaires?
• On peut imposer à un objet « container » de
n’avoir pas de gestionnaire en fixant son
LayoutManager à la valeur null
 Frame f = new Frame(); f.setLayout(null);
A la charge alors du programmeur de positionner
chacun des composants « manuellement » en
indiquant leur position absolue dans le repère de
la fenêtre.
C’est à éviter, sauf dans des cas particuliers,.
• Il est possible d’écrire ses propres
LayoutManager…

59
 Récapitulatif
• FlowLayout
 Flux : composants placés les uns derrière les autres
• BorderLayout
 Ecran découpé en 5 zones (« North », « West »,
« South », « East », « Center »)
• GridLayout
 Grille : une case par composant, chaque case de la
même taille
• CardLayout
 « Onglets » : on affiche un élément à la fois
• GridBagLayout
 Grille complexe : plusieurs cases par composant

60
 Les événements graphiques
• L'utilisateur effectue
 une action au niveau de l'interface utilisateur (clic
souris, sélection d'un item, etc)
 alors un événement graphique est émis.
• Lorsqu'un événement se produit
 il est reçu par le composant avec lequel l'utilisateur
interagit (par exemple un bouton, un curseur, un
champ de texte, etc.).
 Ce composant transmet cet événement à un autre
objet, un écouteur qui possède une méthode pour
traiter l’événement
 cette méthode reçoit l’objet événement généré de façon à
traiter l'interaction de l'utilisateur.

61
 Les événements graphiques
• La gestion des événements passe par l'utilisation
d'objets "écouteurs d'événements" (les Listener) et
d'objets sources d'événements.
 Un objet écouteur est l'instance d'une classe
implémentant l'interface EventListener (ou une
interface “fille”).
 Une source d'événements est un objet pouvant
recenser des objets écouteurs et leur envoyer des
objets événements.
• Lorsqu'un événement se produit,
 la source d'événements envoie un objet événement
correspondant à tous ses écouteurs.
 Les objets écouteurs utilisent alors l'information
contenue dans l'objet événement pour déterminer leur
réponse.

62
 Les événements graphiques
import java.awt.*;
import java.awt.event.*;

class MonAction implements ActionListener {

public void actionPerformed (ActionEvent e) {
System.out.println ("Une action a eu lieu") ;}
}

public class TestBouton {

public TestBouton(){
Frame f = new Frame ("TestBouton");
Button b = new Button ("Cliquer ici");
f.add (b) ;
f.pack (); f.setVisible (true) ;
b.addActionListener (new MonAction ());}

public static void main(String args[]) {

TestBouton test = new TestBouton();}
}

63
 Les événements graphiques
• Les écouteurs sont des interfaces
• Donc une même classe peut implémenter
plusieurs interfaces écouteur.
 Par exemple une classe héritant de Frame
implémentera les interfaces MouseMotionListener
(pour les déplacements souris) et MouseListener (pour
les clics souris).
• Chaque composant de l’AWT est conçu pour être
la source d’un ou plusieurs types d'événements
particuliers.
 Cela se voit notamment grâce à la présence dans la
classe de composant d'une méthode nommée
addXXXListener().

64
 Les événements graphiques
• L’objet événement envoyé aux écouteurs et
passé en paramètres des fonctions
correspondantes peut contenir des paramètres
intéressants pour l'application.
Par exemple, getX() et getY() sur un MouseEvent
retournent les coordonnées de la position du
pointeur de la souris.
Une information généralement utile quelques soit
le type d’événement est la source de cet
événement que l’on obtient avec la méthode
getSource().

65
Les événements graphiques

66
 Catégories d'événements graphiques
• Plusieurs types d'événements sont définis dans
le package java.awt.event.
• Pour chaque catégorie d'événements, il existe
une interface qui doit être définie par toute
classe souhaitant recevoir cette catégorie
d’événements.
Cette interface exige aussi qu'une ou plusieurs
méthodes soient définies.
Ces méthodes sont appelées lorsque des
événements particuliers surviennent.
67
Catégories d'événements graphiques

Catégorie Nom de l’interface Méthodes

Action ActionListener actionPerformed (ActionEvent)
Item ItemListener itemStateChanged (ItemEvent)
Mouse MouseMotionListener mouseDragged (MouseEvent)
mouseMoved (MouseEvent)
Mouse MouseListener mousePressed (MouseEvent)
mouseReleased (MouseEvent)
mouseEntered (MouseEvent) (MouseEvent)
mouseExited
mouseClicked
Key KeyListener keyPressed (KeyEvent)
keyReleased (KeyEvent)
keyTyped (KeyEvent)
Focus FocusListener focusGained (FocusEvent)
focusLost (FocusEvent)

68
 Catégories d'événements graphiques

Adjustment AdjustmentListener adjustmentValueChanged

(AdjustmentEvent)
Component ComponentListener componentMoved
(ComponentEvent)componentHiddent
(ComponentEvent)componentResize
(ComponentEvent)componentShown
(ComponentEvent)
Window WindowListener windowClosing (WindowEvent)
windowOpened (WindowEvent)
windowIconified (WindowEvent
windowDeiconified (WindowEvent)
windowClosed (WindowEvent)
windowActivated (WindowEvent)
windowDeactivated (WindowEvent)
Container ContainerListener componentAdded (ContainerEvent)
componentRemoved(ContainerEvent)
Text TextListener textValueChanged (TextEvent)

69
 Catégories d'événements graphiques
• ActionListener
 Action (clic) sur un bouton, retour chariot dans une zone de texte, « tic
d’horloge » (Objet Timer)
• WindowListener
 Fermeture, iconisation, etc. des fenêtres
• TextListener
 Changement de valeur dans une zone de texte
• ItemListener
 Sélection d’un item dans une liste
• FocusListener
 Pour savoir si un élément a le "focus"
• KeyListener
 Pour la gestion des événements clavier
70
 Catégories d'événements graphiques
• MouseListener
 Clic, enfoncement/relâchement des boutons de la
souris, etc.
• MouseMotionListener
 Déplacement de la souris, drag&drop avec la souris,
etc.
• AdjustmentListener
 Déplacement d'une échelle
• ComponentListener
 Savoir si un composant a été caché, affiché …
• ContainerListener
 Ajout d'un composant dans un Container

71
 Catégories d'événements graphiques

import java.awt.*;
import java.awt.event.*;
public class EssaiActionEvent1 extends Frame
implements ActionListener Implémentation de
{ l'interface ActionListener
public static void main(String args[])
{EssaiActionEvent1 f= new EssaiActionEvent1();} On enregistre
public EssaiActionEvent1() l’écouteur d’evt action
{ auprès de l’objet
super("Utilisation d’un ActionEvent"); source "b"
Button b = new Button("action");
b.addActionListener(this); Lorsque l'on clique
add(BorderLayout.CENTER,b);pack();show(); sur le bouton dans
} l ’interface, le titre de
public void actionPerformed( ActionEvent e ) la fenêtre change
{
setTitle("bouton cliqué !");
}}

72
 Catégories d'événements graphiques

public class EssaiActionEvent2 extends Frame

implements ActionListener
{ private Button b1,b2;
public static void main(String args[])
Les 2 boutons ont le
{EssaiActionEvent2 f= new EssaiActionEvent2();}
même écouteur (la
public EssaiActionEvent2(){
fenêtre)
super("Utilisation d’un ActionEvent");
b1 = new Button("action1"); e.getSource()" renvoie
b2 = new Button("action2"); l'objet source de
b1.addActionListener(this); l’événement. On
b2.addActionListener(this); effectue un test sur
add(BorderLayout.CENTER,b1); les boutons (on
add(BorderLayout.SOUTH,b2); compare les
pack();show(); } références)
public void actionPerformed( ActionEvent e ) {
if (e.getSource() == b1) setTitle("action1 cliqué");
if (e.getSource() == b2) setTitle("action2 cliqué");
}}

73
 Catégories d'événements graphiques

import java.awt.*; import java.awt.event.*;

public class WinEvt extends Frame
implements WindowListener
{ Implémenter cette
public static void main(String[] args) { interface impose
WinEvt f= new WinEvt();} l’implémentation de
public WinEvt() { bcp de méthodes
super("Cette fenêtre se ferme");
addWindowListener(this); La fenêtre est son
pack();show();} propre écouteur
public void windowOpened(WindowEvent e){}
public void windowClosing(WindowEvent e) WindowClosing() est
{System.exit(0);} appelé lorsque l'on
public void windowClosed(WindowEvent e){} clique sur la croix de
public void windowIconified(WindowEvent e){} la fenêtre
public void windowDeiconified(WindowEvent e){} "System.exit(0)"
public void windowActivated(WindowEvent e){} permet de quitter une
public void windowDeactivated(WindowEvent e){} } application java

74
 Les adapteurs
• Les classes « adapteur » permettent une mise en
œuvre simple de l'écoute d'événements
graphiques.
 Ce sont des classes qui implémentent les écouteurs
d'événements possédant le plus de méthodes, en
définissant un corps vide pour chacune d'entre elles.
 Plutôt que d'implémenter l'intégralité d'une interface
dont une seule méthode est pertinente pour résoudre
un problème donné, une alternative est de sous-classer
l'adapteur approprié et de redéfinir juste les méthodes
qui nous intéressent.
 Par exemple pour la gestion des événements fenêtres...

75
 Les adapteurs

Solution en implémentant l’interface

class Terminator implements WindowListener
{
public void windowClosing (WindowEvent e) {System.exit(0);}
public void windowClosed (WindowEvent e) {}
public void windowIconified (WindowEvent e) {}
public void windowOpened (WindowEvent e) {}
public void windowDeiconified (WindowEvent e) {}
public void windowActivated (WindowEvent e) {}
public void windowDeactivated (WindowEvent e) {}
}

Solution en utilisant un WindowAdapter

class Terminator extends WindowAdapter
{
public void windowClosing (WindowEvent e) {System.exit(0);}
}

76
 Les adapteurs
• Il existe 7 classes d'adapteurs (autant que
d'interfaces d'écouteurs possédant plus d'une
méthode) :
ComponentAdapter
ContainerAdapter
FocusAdapter
KeyAdapter
MouseAdapter
MouseMotionAdapter
WindowAdapter
77
 Les composants graphiques
• Button
• Canvas (zone de dessin)
• Checkbox (case à cocher)
• CheckboxGroup
• Label
• Choice (Sélecteur)
• List
• Scrollbar (barre de défilement)
• TextField (zone de saisie d’1 ligne)
• TextArea (zone de saisie multilignes)

78
 Les composants graphiques
• Button
 C'est un composant d'interface utilisateur de base de
type "appuyer pour activer".
 Il peut être construit avec une étiquette de texte (un
label) précisant son rôle à l'utilisateur.
 Un objet de la classe Button est une source
d’ActionEvent
 Les écouteurs associés à des objets de la classe Button
doivent implémenter interface ActionListener
 Il n’y a qu’une méthode dans l’interface
ActionListener, c ’est la méthode public void
actionPerformed(ActionEvent e).
Button b = new Button ("Sample") ;
add (b) ;
b.addActionListener (...) ;
79
 Les composants graphiques
• CheckBox
La case à cocher fournit un dispositif d'entrée
"actif / inactif" accompagné d'une étiquette de
texte.
La sélection ou la déselection est notifiée par un
ItemEvent à un écouteur implémentant l’interface
ItemListener.
la méthode getStateChange() de ItemEvent retourne
une constante : ItemEvent.DESELECTED ou
ItemEvent.SELECTED.
le méthode getItem() de ItemEvent renvoie la chaîne
contenant l'étiquette de la case à cocher considérée.
Checkbox one = new Checkbox("One", false);
add(one);
one.addItemListener(...); 80
 Les composants graphiques
• CheckboxGroup
On peut regrouper des cases à cocher dans un
CheckboxGroup pour obtenir un comportement de
type boutons radio
On ne peut sélectionner qu’une seule case du groupe
de cases à cocher en même temps.
Sélectionner une case fera que toute autre case
précédemment cochée sera désélectionnée
CheckboxGroup cbg = new CheckboxGroup();
Checkbox one = new Checkbox("One", cbg, false);
...
add(one);
...

81
 Les composants graphiques
• Choice
Ce composant propose une liste de choix.
On ajoute des éléments dans l’objet Choice avec la
méthode addItem(String nomItem).
La chaîne passée en paramètre sera la chaîne
visible dans la liste
On récupère la chaîne de caractère correspondant à
l’item actuellement sélectionné avec la méthode String
getSelectedItem()
Cet objet est source de ItemEvent, l’écouteur
correspondant étant un ItemListener
Choice c = new Choice();
c.addItem("First");
c.addItem("Second");
...
82
c.addItemListener (...);
 Les composants graphiques
• Label
Un Label affiche une seule ligne de texte
(étiquette) non modifiable.
En général, les étiquettes ne traitent pas
d'événements.
Label l = new Label ("Bonjour !");
add(l);

83
 Les composants graphiques
• List
Un objet de la classe List permet de présenter à
l'utilisateur plusieurs options de texte parmi
lesquelles il peut sélectionner un ou plusieurs
éléments.
Source d’ActionEvent et d’ItemEvent
méthode String getSelectedItem() et String[]
getSelectedItems() pour récupérer des items.
List l =new List (4, false);
l.add("item1");

nombre d'items visibles sélections multiples possibles ou non.

(ici 4 éléments seront Ici, avec la valeur false, non possible
visible en même temps) 84
 Les composants graphiques
• TextField
 Le champ de texte est un dispositif d'entrée de texte sur
une seule ligne.
 Il est source d’ActionEvent
 On peut définir un champ de texte comme étant éditable
ou non.
 Méthodes void setText(String text) et String getText() pour
mettre ou retirer du texte dans le TextField

TextField f = new TextField ("Une ligne seulement ...", 30);

add(f);

Texte par défaut mis Nombre de caractères visibles

dans le TextField dans le TextField
85
 Les composants graphiques
• TextArea
 La zone de texte est un dispositif d'entrée de texte multi-lignes, multi-
colonnes avec éventuellement la présence ou non de « scrollbars »
(barres de défilement) horizontal et/ou vertical.
 Il peut être ou non éditable.
 Méthode setText(), getText() et append() (pour ajouter du texte à la fin
d ’un texte existant déjà dans le TextArea)

TextArea t = new TextArea ("Hello !", 4, 30,TextArea.SCROLLBARS_BOTH);

add(t);

Valeur constante
Texte par défaut mis précisant la
dans le TextArea présence ou
Nombre de colonnes l’absence de
Nombre de lignes (en nbre de caractères) « scrollbar »

86
 Les composants graphiques
• Menu :
menu déroulant de base, qui peut être ajoutée à
une barre de menus (MenuBar) ou à un autre
menu.
Les éléments de ces menus sont
des MenuItem
ils sont rajoutés à un menu
En règle générale, ils sont associés à un
ActionListener.
des CheckBoxMenuItem, ie. des éléments de menus à
cocher
ils permettent de proposer des sélections de type
"activé / désactivé " dans un menu.

87
 Les composants graphiques
• PopupMenu
des menus autonomes pouvant s'afficher
instantanément sur un autre composant.
Ces menus doivent être ajoutés à un composant parent
(par exemple un Frame), grâce à la méthode add(...).
Pour afficher un PopupMenu, il faut utiliser la
méthode show(...).

88
 Les composants graphiques
• Canvas
 Il définit un espace vide
 Sa taille par défaut est zéro par zéro (Ne pas oublier de la
modifier avec un setSize(...) ) et il n’a pas de couleur.
pour forcer un canvas (ou tout autre composant) à
avoir une certaine taille il faut redéfinir les
méthodes getMinimumSize() et
getPreferredSize().
 On peut capturer tous les événements dans un Canvas.
 Il peut donc être associé à de nombreux écouteurs :
KeyListener, MouseMotionListener, MouseListener.
 On l’utilise en général pour définir une zone de dessin

89
 Les composants graphiques

class Ctrait extends Canvas implements MouseListener

{
Point pt;
public Ctrait() { addMouseListener(this); }
public void paint(Graphics g)
{g.drawLine(0,0,pt.x,pt.y);
g.setColor(Color.red);
g.drawString("("+pt.x+";"+pt.y+")",pt.x,pt.y+5);}
public Dimension getMinimumSize()
{return new Dimension(200,100);}
public Dimension getPreferredSize()
{return getMinimumSize();}
public void mouseClicked(MouseEvent e){}
public void mousePressed(MouseEvent e){}
public void mouseReleased(MouseEvent e)
{pt=e.getPoint();repaint();}
public void mouseEntered(MouseEvent e){}
public void mouseExited(MouseEvent e){}}

90
 Les composants graphiques

import java.awt.*; Utilisation de la classe précédente

import java.awt.event.*; (Ctrait) par une autre classe.
public class Dessin extends Frame Voir le fichier Dessin.java pour
{ voir la manière exacte dont les 2
public static void main(String[] args) classes sont définies et utilisées.
{
Dessin f= new Dessin();
}
public Dessin()
{
super("Fenêtre de dessin");
Ctrait c= new Ctrait();
add(BorderLayout.CENTER,c);
pack();
show();
}
}

91
 Les composants graphiques
• Contrôle des couleurs d'un composant
 Deux méthodes permettent de définir les couleurs d'un
composant
 setForeground (Color c) : la couleur de l’encre avec
laquelle on écrira sur le composant
 setBackground (Color c) : la couleur du fond
 Ces deux méthodes utilisent un argument instance de
la classe java.awt.Color.
 La gamme complète de couleurs prédéfinies est listée dans
la page de documentation relative à la classe Color.
 Il est aussi possible de créer une couleur spécifique
(RGB) int r = 255, g = 255, b = 0 ;
Color c = new Color (r, g, b) ;
92
 Les composants graphiques
• Contrôle des polices de caractères
La police utilisée pour afficher du texte dans un
composant peut être définie avec setFont(...) avec
comme argument une instance de java.awt.Font.
 Font f = new Font ("TimesRoman", Font.PLAIN, 14) ;

Les constantes de style de police sont en réalité

des valeurs entières, parmi celles citées ci-après :
 Font.BOLD
 Font.ITALIC
 Font.PLAIN
 Font.BOLD + Font.ITALIC

Les tailles en points doivent être définies avec une

valeur entière.

93
 Conteneurs particuliers
• Dialog
 Un objet Dialog ressemble à un objet Frame mais ne sert
qu'à afficher des messages devant être lus par l'utilisateur.
 Il n'a pas de boutons permettant de le fermer ou de l'iconiser.
 On y associe habituellement un bouton de validation.
 Il est réutilisable pour afficher tous les messages au cours de
l'exécution d'un programme.
 Un objet Dialog dépend d'un objet Frame (ou héritant de
Frame)
 ce Frame est passé comme premier argument au constructeur).
 Un Dialog n'est pas visible lors de sa création. Utiliser la
méthode show() pour la rendre visible (il existe une
méthode hide() pour la cacher).

94
 Conteneurs particuliers
• FileDialog
 C’est une sous-classe de Dialog ; par défaut elle n’est pas
visible.
 C'est un dispositif de sélection de fichier : on peut préciser
si c’est en vue d’une sauvegarde ou du chargement d’un
fichier
 Un FileDialog ne gère généralement pas d'événements.
 Comme pour un objet Dialog, un FileDialog dépend d’un
objet Frame
 Un FileDialog est une fenêtre modale : à partir du moment
ou la fenêtre a été rendue visible par la méthode show(...),
la main n’est rendu à l’utilisateur que quand un fichier a
été sélectionné.

95
Swing

96
 Introduction à Swing
• La bibliothèque Swing est une bibliothèque de composants
graphiques pour Java.
 Swing est intégré à Java 1.2.
 Swing peut être téléchargé séparément pour une utilisation avec des
versions de Java antérieures (1.1.5+)
• Cette bibliothèque s'ajoute à celle qui était utilisée jusqu'alors
(AWT) pour des raisons de compatibilité.
 Swing fait cependant double emploi dans beaucoup de cas avec AWT.
 L'ambition de Sun est que, progressivement, les développeurs réalisent
toutes leurs interfaces avec Swing et laissent tomber les anciennes API
graphiques.

97
 Atouts de Swing
• Plus de composants, offrant plus de
possibilités.
• Les composants Swing dépendent moins de la
plate-forme :
Il est plus facile d'écrire une application qui
satisfasse au slogan "Write once, run everywhere"
Swing peut pallier aux faiblesses (bogues ?) de
chaque gestionnaire de fenêtre.

98
 Conventions de nommage
• Les composants Swing sont situés dans le
paquetage javax.swing et ses sous paquetages.
 Un certain nombre de paquetages d'extensions du
langage java 1.1 (par opposition aux paquetages
standards java) sont regroupés sous javax.
 Cette convention permet de télécharger ces paquetages dans
un environnement navigateur avec une machine virtuelle
java 1.1. Ces navigateurs ne sont, en effet, pas autorisés à
télécharger des paquetages dont le nom commence par
java.
• Ils portent des noms similaires à leurs
correspondants de AWT précédés d'un J.
 JFrame, JPanel, JTextField, JButton, JCheckBox,
JLabel, etc.

99
 Architecture Swing - version objet
java.lang.Object

CheckboxGroup Component MenuComponent

Button Canvas Checkbox Choice Container Label List Scrollbar TextComponent

JComponent Scrollpane Panel Window

AbstractButton JLabel JList JPanel JScrollpane Applet Dialog Frame

JButton JApplet JDialog JFrame

java.awt.* javax.swing.* 100

 Interface Graphique avec Java
1) Écrire le code java
FenetreView.java
import java.awt.*; 2) compilation
import javax.swing.*;
public class FenetreView extends JFrame {
public FenetreView(String nom)
{
super(nom);
3) Exécution
Container pan = this.getContentPane();

pan.setLayout(new GridBagLayout());

JLabel label;
label = new JLabel("Hello ESTIA");
pan.add(label);

this.pack();
this.setVisible(true);
}

public static void main(String s[])

{
FenetreView f = new FenetreView("simple");
}
101

}
 Interface Graphique avec Java
1) Écrire le code java
FenetreView.java
import java.awt.*; Importation
import javax.swing.*;
public class FenetreView extends JFrame {
public FenetreView(String nom)
{
super(nom);

Container pan = this.getContentPane();

pan.setLayout(new GridBagLayout()); Constructeur

JLabel label;
label = new JLabel("Hello ESTIA");
pan.add(label);

this.pack();
this.setVisible(true);
}

public static void main(String s[]) Instanciation de l’objet

{
FenetreView f = new FenetreView("simple");
}
102

}
 SWING : création
Elle se fait principalement en 5 étapes :

1. Création d’une fenêtre (par héritage)

JFrame

2. Récupération du container
Layout
3. Modification du Layout
Container
4. Insertion des widgets dans le
conteneur
5. Arranger les composantes

Widget

103
 SWING: étape 1
Création de la fenêtre par l’héritage de JFrame

import java.awt.*;
import javax.swing.*;
public class FenetreView extends JFrame {
JFrame public FenetreView(String nom)
{
super(nom);
Layout

Container pan = this.getContentPane();

Container

pan.setLayout(new GridBagLayout());

JLabel label;
label = new JLabel("Hello ESTIA");
pan.add(label);
Widget

this.pack();
this.setVisible(true);
}

public static void main(String s[])

{
FenetreView f = new FenetreView("simple");
}
104

}
 SWING : JFrame

JFrame est un composant de haut niveau, il contiendra toute l’application, c’est la

première brique de l’interface. Pour l’utiliser et simplifier le code, on implémente
une nouvelle classe qui hérite de JFrame. Une JFrame possède un conteneur par
défaut.

Pour hériter de JFrame :

- on crée une nouvelle classe (ici Fenetre) qui hérite (extends) de JFrame.
- Toujours créer un constructeur pour pouvoir insérer les éléments dans cette
fenêtre.

105
 Composants SWING

JFrame
Frame

Container

Layout

Dialog
Widget

Applet

106
 SWING: étape 1
Appel du constucteur de la classe mère

import java.awt.*;
import javax.swing.*;
public class FenetreView extends JFrame {
JFrame public FenetreView(String nom)
{
super(nom);
Layout

Container pan = this.getContentPane();

Container

pan.setLayout(new GridBagLayout());

JLabel label;
label = new JLabel("Hello ESTIA");
pan.add(label);
Widget

this.pack();
this.setVisible(true);
}

public static void main(String s[])

{
FenetreView f = new FenetreView("simple");
}
107

}
 SWING : création
Elle se fait principalement en 5 étapes :

1. Création d’une fenêtre (par héritage)

JFrame

2. Récupération du container
Layout
3. Modification du Layout
Container
4. Insertion des widgets dans le
conteneur
5. Arranger les composantes

Widget

108
 SWING: étape 2
Extraction du “container” de la fenetre (JFrame)
import java.awt.*;
import javax.swing.*;
public class FenetreView extends JFrame {
JFrame public FenetreView(String nom)
{
super(nom);
Layout

Container pan = this.getContentPane();

Container

pan.setLayout(new GridBagLayout());

JLabel label;
label = new JLabel("Hello ESTIA");
pan.add(label);
Widget

this.pack();
this.setVisible(true);
}

public static void main(String s[])

{
FenetreView f = new FenetreView("simple");
}
109

}
 SWING : Conteneur
Layout

Container

• Le conteneur est l’objet en Java qui permet d’afficher plusieurs objets graphiques.

• On peut insérer un ou plusieurs objets dans un même conteneur.

• Les objets sont placés dans le conteneur suivant les règles imposées par le layout
(voir suite).

• Par la suite, pour réaliser des interfaces plus complexes, on insère des conteneurs
dans d’autres conteneurs pour spécifier plusieurs politiques de placement.

• Les conteneurs les plus souvent utilisés sont les JPanels.

110
 SWING : JPanel
● Le panneau est un conteneur intermédiaire invisible.
● Il a pour finalité de positionner d’après son “layout” les composants, boutons et
les labels (JScrollPane, JTabbedPane).
● Son layout par défaut est un FlowLayout.

Classe JPanel : déclaration et instanciation :

JPanel panel = new JPanel();

111
 Composants SWING
JFrame

Container

Layout

Widget
Tabbed pane
Panel

Tool bar
Scroll pane Split pane

112
 SWING : création
Elle se fait principalement en 5 étapes :

1. Création d’une fenêtre (par héritage)

JFrame

2. Récupération du container
Layout
3. Modification du Layout
Container
4. Insertion des widgets dans le
conteneur
5. Arranger les composantes

Widget

113
 SWING: étape 3
Mise en place d’un gestionnaire de placement :
import java.awt.*;
import javax.swing.*;
public class FenetreView extends JFrame {
JFrame
public FenetreView(String nom)
{
Layout
super(nom);

Container Container pan = this.getContentPane();

pan.setLayout(new GridBagLayout());

JLabel label;
label = new JLabel("Hello ESTIA");
Widget pan.add(label);

this.pack();
this.setVisible(true);
}

public static void main(String s[])

{
FenetreView f = new
FenetreView("simple"); 114
}
 SWING : Layout
● Les « layout » permettent de positionner les élèments avec une
politique de placement des objets.
● Les layouts sont toujours liès aux conteneurs (JPanels, Tabbed
pane).

115
Composants SWING
JFrame

Container

Layout

Widget

116
 SWING : Layout
Il sont par défaut dans tous les composants (JFrame, JPanel). Il existe 7 types : FlowLayout,
BorderLayout, GridLayout, BoxLayout, GridBagLayout, SpringLayout et le
CardLayout.
Chaque layout est une classe Java :
Pour créer un layout : déclaration puis instanciation
FlowLayout flo = new FlowLayout();
● Les composants utilisent souvent par défaut un BorderLayout (JFrame, JDialog, JApplet).
Les Layouts sont utilisés surtout avec les panneaux (JPanel) et les fenêtres :
● On peut affecter un layout dans un panneau au moment de l’instanciation :
JPanel panel = new JPanel(new BorderLayout());
● Affectation d'un layout dans le conteneur d’une fenêtre "frame":
Container pan = frame.getContentPane();
pan.setLayout(new FlowLayout());

117
 SWING : Layout
Le même code donnera des résultats différents suivant le Layout utilisé.
import java.awt.*; case 6:
import javax.swing.*; System.out.println("création avec SpringLayout");
setLayout(new SpringLayout());
public class JPanel5Boutons extends JPanel { break;
private static String [] layout={"BoxLayout","GridLayout","GridBagLayout", case 7:
System.out.println("création avec CardLayout");
"FlowLayout","BorderLayout","SpringLayout","CardLayout"};
setLayout( new CardLayout(5,3));
public JPanel5Boutons(String type) for(i=0; i < 5; i++)
{
{ JButton button = new JButton(text[i]);
super(); add(button,text[i]);
int i=0; }
int nbLayout = 7; break;
String [] text={"Button 1","Button 2","Button 3","Long-Named Button 4","Button 5"};
default:
for(i=0; i < 7; i++) System.out.println("Type non reconnu : " + type);
if(type.equals(layout[i])) nbLayout = i+1; }

if(nbLayout!=7)
switch(nbLayout) for(i=0; i < 5; i++)
{ {
case 1: JButton button = new JButton(text[i]);
System.out.println("création avec BoxLayout"); add(button);
setLayout(new BoxLayout(this,BoxLayout.Y_AXIS)); }
break; }
case 2:
public static void main(String[] args) {
System.out.println("création avec GridLayout"); JFrame.setDefaultLookAndFeelDecorated(true);
setLayout(new GridLayout(2,3)); //Create seven windows.
break; for(int i=0; i < 7; i++)
case 3: {
System.out.println("création avec GridBagLayout"); JFrame frame = new JFrame(layout[i]);
GridBagLayout g = new GridBagLayout();
setLayout(g); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
break; //Set up the content pane.
case 4: frame.setContentPane(new
System.out.println("création avec FlowLayout"); JPanel5Boutons(layout[i]));
setLayout(new FlowLayout());
break; //Display the window.
case 5: frame.pack();
System.out.println("création avec BorderLayout"); frame.setVisible(true);
setLayout(new BorderLayout()); }
break; }
}
 SWING : BorderLayout
Le BorderLayout possède 5 zones déterminées par les
points cardinaux (north, south, east, west) et le centre
(center).
 SWING : BoxLayout
● Il positionne tous les composants sur une colonne ou
une ligne.
● Il aligne les composants et respecte la taille maximun.
 SWING : FlowLayout
C'est le « layout » par défaut des « JPanel ». Les
composants sont insérerés de gauche à droite. Si la
largeur est trop petite, il passe à la ligne suivante.
 SWING : GridLayout

Il positionne les composants dans une grille (ligne,

colonne) et adapte la taille des boutons au plus
grand composant.
 SWING : création
Elle se fait principalement en 5 étapes :

1. Création d’une fenêtre (par héritage)

JFrame

2. Récupération du container
Layout
3. Modification du Layout
Container
4. Insertion des widgets dans le
conteneur
5. Arranger les composantes

Widget

123
 SWING: étape 4
Insertion d’un widget dans le panneau avec la politique
définie par le layout:
import java.awt.*;
import javax.swing.*;
public class FenetreView extends JFrame {
JFrame public FenetreView(String nom)
{
super(nom);
Layout

Container pan = this.getContentPane();

Container

pan.setLayout(new GridBagLayout());

JLabel label;
label = new JLabel("Hello ESTIA");
pan.add(label);
Widget

this.pack();
this.setVisible(true);
}

public static void main(String s[])

{
FenetreView f = new FenetreView("simple");
}
124

}
 Composants SWING (4/4)
JFrame

Container

Layout

Buttons List
Combo box
Widget

Spinner
Slider Text field

Menu

125
 SWING : création
Elle se fait principalement en 5 étapes :

1. Création d’une fenêtre (par héritage)

JFrame

2. Récupération du container
Layout
3. Modification du Layout
Container
4. Insertion des widgets dans le
conteneur
5. Arranger les composantes

Widget

126
 SWING: étape 5
Insertion d’un widget dans le panneau avec la politique
définit par le layout:
import java.awt.*;
import javax.swing.*;
public class FenetreView extends JFrame {
JFrame public FenetreView(String nom)
{
super(nom);
Layout

Container pan = this.getContentPane();

Container

pan.setLayout(new GridBagLayout());

JLabel label;
label = new JLabel("Hello ESTIA");
pan.add(label);
Widget

this.pack();
this.setVisible(true);
Arranger les composantes }

public static void main(String s[])

{
FenetreView f = new FenetreView("simple");
}
127

}
 SWING: mise en page plus complexe
import java.awt.*;
import javax.swing.*;
public class FenetreView extends JFrame {
public FenetreView(String nom)
{
super(nom);
Container pan = this.getContentPane();
pan.setLayout(new GridBagLayout()); pan
JPanel pan1 = new JPanel();
pan1.setLayout(new BoxLayout(pan1,BoxLayout.Y_AXIS));
JPanel pan2 = new JPanel();
pan2.setLayout(new BoxLayout(pan2,BoxLayout.X_AXIS));
JButton button1 = new JButton("bouton 1"); pan1 pan2
JButton button2 = new JButton("bouton 2");
JButton button3 = new JButton("bouton 3");
JButton button4 = new JButton("bouton 4");
pan1.add(button1);
pan1.add(button2);
button2.setText("nouveau nom");
pan2.add(button3);
pan2.add(button4);
pan.add(pan1);
pan.add(pan2);

this.pack();
this.setVisible(true);
}
}

128
 Concevoir un programme

Vue

Événement (souris, clavier, etc.)

Routines de
communication Control

Model

129
 L’événement et l’action

Les évènements sont les interventions de l’utilisateurs sur l’interface graphique à l’aide
des périphériques (par exemple : clavier, souris)
-Frappe au clavier
-Clic de souris
-Mouvement de la souris
L’action est la traduction par un composant (widget, bouton) de l’évènement. Elle peut
être traitée ou pas par le programme. Swing propose des interfaces (au sens Génie
logiciel) à implémenter pour traiter les évènements en fonction des composants. C’est
vous qui choisissez les événements à traiter…

130
 L’évènement et l’action

Exemple pour un Bouton :

Evènement : appuyer Evènement : appuyer

sur le bouton (géré par sur le bouton (géré par
Swing) Swing)

Action : actionPerformed
Action : aucune
Après action Après action
sur le bouton sur le bouton

Traitement : Changement
de nom
(géré par le programmeur)

Chaque bouton a « son » action !!

131
 Gestion des événements

Après avoir créé la partie visible de l’interface (Vue), il faut lier

les actions réalisées avec le modèle.
Il faut gérer les évènements (souris, clavier, etc.) :
- les « intercepter » : lier une action à un composant
(bouton, list, tableau, etc.)
- les « interpréter » : implémenter l’interface
correspondant

●Avec Swing, vous devez implémenter une interface pour

chaque signal.

● Par exemple pour actionner un bouton :

l'interface est ActionListener dont la seule méthode est
actionPerformed.

●Rappel : Utilisation du mot clef « implements », et vous

devez implémenter toutes les méthodes de l'interface. 132
 Liste des interfaces

Evénement et leurs “écouteurs” (listener) associés

Interface écouteur Evénement méthode

L’utilisateur a relaché le bouton de la souris mouseReleased

Le pointeur de la souris est entré dans le composant mouseEntered

Le pointeur de la souris est sorti du composant mouseExited

MouseListener
Clic complet de la souris (pression et relachement sans mouseClicked
mouvement entre les deux)

L’utilisateur a appuyer sur un bouton de la souris mousePressed

ActionListener Utilisateur clique sur un bouton, presse “enter” dans un actionPerfomed

champ texte ou sélectionne un champ dans un menu

KeyListener Utilisateur clique sur une touche keyPressed

Utilisateur relâche une touche keyReleased

Autres interfaces écouteurs : ItemListener, TextListener, MouseMotionListener, WindowListener

133
 Concevoir une interface

Nous voulons réaliser une fenêtre avec un bouton, qui affiche « bonjour »
sur la sortie standard.

Evènement : bouton enfoncé

Action : afficher le message à l’écran

134
 Gestion des événements
Gestion de l’action sur un bouton :

1) Création du bouton :

JButton button;

button = new JButton("Click Me");

2) On attache la gestion de l’événement (Listener Type) à ce bouton (cf Tableau

précédent) :

button.addActionListener(new FenetreEvent());
bouton.addActionListener(…..);
// syntaxe addXXX(); où XXX est l’interface écouteur

3) Implémentation de l'interface : public class MyClass implements ActionListener

Une classe portant le nom de l'évènement implémente la classe liée

(Implements ActionListener) (plus propre et « Génie logiciel »)

135
Concevoir l’interface:

Vue

Événement (souris, clavier, etc.)

Routines de
communication Control

Model

136
Concevoir l’interface

évènement traitement
Vue Control Modèle

Affiche bonjour à
l’écran

137
 Utillisation d’un Controleur
Le modèle MVC permet d’avoir une séparation plus importante entre le
modèle et l’interface et facilite la gestion des événements.
Le controleur permet de gérer des programmes plus complexes de manière
plus simple.
Il connaît l’état de tous les éléments de l’application à tous moments, il peut
être assimilé à un « superviseur ».

138
Concevoir l’interface

Modèle Le modèle est un programme classique en java qui ne doit contenir

aucun appel à la bibliothèque de swing. Il doit pouvoir être utilisable
sans interface graphique.
Par exemple, la gestion d’un stock, on crée toutes les méthode
permettant de gérer le stock (ajouter, enlever, compter, etc.) :
- On peut l’utiliser dans une fonction main classique
- Ou l’utiliser via une interface

139
 Concevoir une interface

évènement traitement
Vue Control Modèle

-Vous devez respecter la séparation de chaque partie

(surtout ne pas mettre de code de la biliothèque Java-Swing dans le modèle)
-Vous devez garder une cohérence dans l’interface graphique (c-à-d bon
positionnement des widgets, ne pas faire un bouton « ouvrir » qui ferme
l’application ;-) )

140
141