Construire Une Interface Graphique en Java

Construire une
interface
graphique en Java
Introduction
à Java Swing
© Sofia Zaidenberg CNRS Mai 2007 1

Avertissement
Avertissement
L’objectif de ce cours est de présenter les différentes techniques concernant la
construction d’une interface graphique en JAVA.
La conception d’interfaces graphiques étant loin d’être triviale, et les packages proposés
pour cela par le JDK étant parmi les plus « complexes » (29 packages) nous n’avons pas
la prétention d’être exhaustif. Il s’agit de donner les éléments de bases qui vous
permettront ensuite d’aller plus loin dans la création d’interfaces utilisateur.
Une partie de ce cours est basée sur un exemple tiré du chapitre 4 du livre « Java La Synthèse, 2ème
edition » de G. Clavel, N. Mirouze, S. Moucherot, E. Pichon et M. Soukal (InterEditions).
Certains éléments concernant la gestion des événements sont directement inspirés du cours « Swing
Crash course » de Matthias Hauswirth http://www.isbiel.ch/I/Resources/Comp/Sun/Java/Swing/
D'autres sont inspirés du cours « Graphical User Interface in Java » de Jonas Kvarnström
On pourra également se référer à

- « JAVA in a Nutshell » , chapitre 7, David Flanagan, 2nd Ed. O'Reilly 1997
- « Java Foundation Classes in a nutshell » , David Flanagan, Ed. O'Reilly 1999
- « Swing la synthèse » , Valérie Berthié, Jean-Baptiste Briaud, Ed. Dunod 2001

API
API graphique
graphique pour
pour les
les applications
applications
Java
Java
 Java : un langage indépendant des plateformes (cross-platform language)

 un même programme doit pouvoir être utilisé dans des environnements
(matériel et OS) différents sans recompilation.
 Nécessité d'offrir une API pour les interfaces graphiques indépendante elle
aussi des plateformes
 Classes et interfaces java
 Modèle de gestion des événements
 Exemple : une classe TextField pour définir un champ de saisie de texte
TextField(String content)
TextField()
void setText(String content)
String getText()
...

API
API Java
Java et
et systèmes
systèmes de
de fenêtrage
fenêtrage
 Problème : les systèmes de gestion d'interface utilisateur (GUI Graphical
User Interface systems) sont très différents les uns des autres :
 X Window + motif
 X Window + gtk
 MacOS X
API GUI cible
 MS Windows
 ...
API Java Adaptater GUI cible
Application
Java
Adaptater GUI cible
 Deux stratégies possibles :

 faire une utilisation maximale du système graphique cible
 faire une utilisation minimale du système graphique cible

API
API Java
Java pour
pour GUI
GUI
 Utilisation maximale du système graphique sous-jacent
 L'objet TextField délègue la plupart de ses tâches à un composant natif.
Le programmeur java utilise un objet TextField
L’objet TextField délègue à une classe adaptateur dépendant de l'OS :
MotifTextField, GTKTextField, WindowsTextField, MacOSTextField ....

Le système graphique natif réalise le plus gros du travail
 Avantages / désavantages
(+) apparence et le comportement (look and feel) des interfaces Java identique à celui
d'applications « ordinaires »
(+) pas besoin de réimplémenter des composants existants
(-) ne permet de ne fournir que les composants disponibles sur toutes les plateformes
(-) difficile de garantir un comportement identique sur toutes les plateformes
 Choix adopté par JAVA AWT

 AWT Abstract Window Toolkit
 packages java.awt.* présents dans Java depuis version 1.0.
 conception pas toujours très judicieuse (cf les évolutions de awt entre version 1.0 et 1.1 de Java)

Composants
Composants graphiques
graphiques de
de AWT
AWT
 palette de composants fournies par awt ne contient que des composants simples
seuls les composants standard existants dans tous les systèmes d’exploitation peuvent être présents dans awt
Classe abstraite
TextField décrit caractéristiques
Object
communes à tous les composants pouvant
Choice composants contenir d’autres
composants
List Component
Canvas Button CheckBox Choice Container
List TextComponent ScrollBar Label
Label Button
Checkbox TextField TextArea Window Panel ScrollPane
Frame Dialog
Frame Panel
FileDialog

API
API Java
Java pour
pour GUI
GUI
 Utilisation minimale du système graphique sous-jacent

 Utiliser des éléments natifs uniquement pour les opérations de base
 Ouvrir une fenêtre, dessiner des lignes/du texte, gestion primitive des événements
 Réaliser tout le reste en Java
 L'objet TextField s'affiche en dessinant des lignes, ...
 Avantages / désavantages
 (+) facilité d'éviter les différences entre plateformes
 (+) n'importe quel nouveau composant d'interface est immédiatement disponible
sur toutes les plateformes

(-) besoin de réimplémenter tous les composants d'interface
(-) les applications java n'ont pas le même look and feel que les applications
« ordinaires »
(-) lenteur ?
 C'est le choix adopté par SWING

 packages javax.swing.* dans JDK depuis version 1.2

Swing
Swing et
et JFC
JFC
 Swing s'intègre aux JFC (Java Fundation Classes lancées par SUN en 97 pour la création
d’interfaces graphiques plus élaborées que AWT et intégré depuis version 2 de Java (1.2) )
 JFC = Java 2D API + copier coller inter-applications + Swing + AWT
 Swing
Composants légers (lightweight) 100% java
– Prennent en charge leur affichage sans passer par des objets « Peers » gérés par le
système
– multiplication des composants plus riches en fonctionnalités (listes arborescentes, grilles….)
– aspect de l’IHM : Motif, Windows, Métal, Mac, ...

– modèle MVC (Model View Controler)

Composants
graphiques Swing
Swing
 Hiérarchie très partielle des classes couvrant les
Object
composants des swings
Classe abstraite
awt Component décrit caractéristiques
communes à tous les
contrôles Swings
Container Button ...
Window Panel JComponent Box ...
Frame Dialog JWindow AbstractButton JColorChooser ... JLabel JPanel
JFrame JDialog JButton JToggleButton JMenuItem
JRadioButton JCheckBox JMenu ...

Swing
Swing :: démos
démos et
et tutoriaux
tutoriaux
 jdk1.5.0_06/demo/jfc/SwingSet2
 Java tutorial consacré aux swing

 http://java.sun.com/docs/books/tutorial/uiswing/
 En particulier l’index visuel des composants swing

 http://java.sun.com/docs/books/tutorial/uiswing/components/components.html
Penser à étudier des programmes sources pour apprendre à se servir des swing

Java
Java Fundation
Fundation Classes
Classes
 packages awt et swing tous les deux présents dans la plateforme Java
 Quel package utiliser : AWT ou Swing ???
« Swing provides many benefits to programmers and end users.

Unless you have a good reason not to convert (and use AWT),
we urge you to convert to Swing as soon as possible. »
M. Campione - K. Walrath « the Java Tutorial »
Puisqu’elles le disent si gentiment, allons-y…
 Si Swing et AWT ne sont plus vraiment en concurrence, un troisième

larron a fait son apparition : SWT (Standard Window ToolKit)
développé par IBM – Eclipse
 approche similaire à AWT,
 beaucoup plus ambitieux, nombreux composants, modèle MVC (JFace)
 windows, motif, gtk, Mac OS X

Introduction
Introduction à
à Swing
Swing
 composants de base
 conteneurs
 fenêtres
 placement des composants (layout managers)
 gestion de l'interaction (événements)

Exemple
Exemple développé*
développé*
 Construction d’un éditeur graphique simple
 Créer une fenêtre
 Gérer un menu
 Gérer différents composants d’interaction simples (boutons, champ de saisie de
texte…)
 Dessiner dans une fenêtre
*d'après « Java La Synthèse , 2ème edition » de G. Clavel, N. Mirouze, S. Moucherot, E. Pichon et M. Soukal (InterEditions).

Structure
Structure de
de l’interface
l’interface graphique
graphique
 La création de l’interface graphique passe forcément par une instance

de la classe JFrame
 Du point de vue du système d’exploitation cette fenêtre représente
l’application
 La fenêtre joue le rôle de « conteneur » dans lequel vont être disposés
les différents éléments constitutifs (composants) de l’interface

graphique de l’application (boutons, listes déroulantes, zone de saisie…)
 ces éléments sont désignés sous les termes de
 contrôles (IHM)
 composants (components en JAVA)
 widgets (Xwindow-Motif)

Composants
graphiques Swing
Swing JLabel
JLabel
 Usage : afficher du texte statique et/ou une image JComponent

 Ne réagit pas aux interactions de l’utilisateur
 Définition du texte du label JLabel

 Dans le constructeur JLabel lb = new JLabel("un label");
 Par la méthode setText
lb.setText("un autre texte pour le label");

 Méthode symétrique lb.getText()
 Définition d’une icône :

 Par défaut pas d’image
 Dans le constructeur
 Par la méthode setIcon
lb.setIcon(new ImageIcon("info.gif"));
 Spécification de la position du texte par rapport à l’icône
lb.setVerticalTextPosition(SwingConstants.BOTTOM);
lb.setHorizontalTextPosition(SwingConstants.CENTER);
 Mise en forme du texte
 setText supporte HTML
lb.setText("<html>ce texte est en <B>gras</B></HTML>")
attention : si texte HTML est incorrect, exception levée à l’exécution

Composants
graphiques Swing
Swing JTextField
JTextField
 Usage : présente un champ de saisie de texte
 Création d’un JTextField

 JTextField jtf = new JTextField();
 JTextField jtf = new JTextField("un texte");
 JTextField jtf = new JTextField(20);
 Modification du texte
 Par interaction de l’utilisateur
 jtf.setText("le texte");
 Récupérer le texte
JComponent
 jtf.getText();
 Copier / Coller
 jtf.copy() ou jtf.cut() JTextComponent
JTextField a des frères
 jtf.paste();
 Interdire saisie
JTextArea JTextField JEditorPane
 jtf.setEditable(false);
et des fils
Saisie de Saisie avec
JPasswordField JFormattedField vérification d'un
mot de passe
format
Composants
graphiques Swing
Swing JButton
JButton
 Usage : un bouton permettant de déclancher une action
 Création d’un JButton

 JButton jbt = new JButton("Titre");
 JButton jbt = new JButton("Titre", icon);
 Association d'une icône

 à l'instanciation
 méthodes setIcon(), setRollOverIcon(), setPressedIcon(),
setDisabledIcon()
 Association d'un raccourci clavier
 jbt.setMnemonic('b'); // Alt + b
 Enlever / ajouter la bordure JComponent

 jbt.setBorder(false);
Définit toutes ces
 Enlever le cadre indiquant le focus AbstractButton méthodes car
 jbt.setFocusPainted(false); JButton a des
frères
 Simuler un clic utilisateur
 jbt.doClick(); JButton

Composants
graphiques Swing
Swing JToggleButton
JToggleButton
 Usage : un bouton à deux états. Utilisé lorsque l'aspect visuel JComponent

du bouton doit refléter état (ON/OFF) d'une fonctionnalité
(exemple boutons dans une barre d'outils).
AbstractButton
ON JToggleButton JButton
OFF
 Association d'une icône aux états

 jtbt.setIcon(icon1) état "non sélectionné"
 jtbt.setSelectedIcon(icon2) état "sélectionné"
 Forcer l'état
 jtbt.setSelected(true)
 Consulter l'état
 jtbt.isSelected()  true ou false

JCheckBox
JCheckBox et
Composants
graphiques Swing
Swing et
JRadioButton
JRadioButton
 Usage : JComponent
 cases à cocher (états indépendants)
ButtonGroup
 et boutons radio
AbstractButton
(états dépendant au sein d'un groupe
de boutons)
JToggleButton JButton
JCheckBox cb1 = new JCheckBox("Chin");
JCheckBox cb2 = new JCheckBox("Glasses");
JCheckBox cb3 = new JCheckBox("Hair");
JCheckBox cb4 = new JCheckBox("Teeth"); JRadioButton JCheckBox
ButtonGroup groupe = new ButtonGroup();

JRadioButton b1 = new JRadioButton("Bird");
JRadioButton b2 = new JRadioButton("Cat");
...
JRadioButton b5 = new JRadioButton("Pig");
b5.setSelected(true);
groupe.add(b1);
groupe.add(b2);
...
groupe.add(b5);

Composants
graphiques Swing
Swing JComboBox
JComboBox
 Usage : liste déroulante dans laquelle l'utilisateur peut choisir un item JComponent
 Indiquer les items à afficher
 en passant en paramètre du constructeur
JComboBox
un tableau d'objets ou un java.util.Vector
Object[] items = { "lundi", "mardi",
"mercredi", "jeudi",
"vendredi", "samedi" };
JComboBox cb = new JComboBox(items);
 en passant par addItem(Object)
cb.addItem("dimanche");
 Combo box éditable
 le champ qui représente le texte sélectionné
est éditable (c'est un JTextField)
Vector pays = new Vector();
pays.add("Angleterre");
...
JComboBox cb = new JComboBox(pays);
cb.setEditable(true);
 Récupération de l'item sélectionné
 getSelectedIndex()  int
 getSelectedItem()  Object
Composants
graphiques Swing
Swing JList
JList
 Usage : liste dans laquelle l’utilisateur peut choisir un item
 à préférer à une combo box lorsque JComponent
le nombre d'éléments de la liste est grand

 permet une sélection multiple JList
 indiquer les éléments à afficher

 en passant en paramètre un tableau d'objets ou un java.util.Vector
Object[] data = { "lundi", "mardi",
"mercredi", "jeudi","vendredi", "samedi" };
 dans le constructeur : JList jl = new JList(data);
 par la méthode setData : jl.setData(data);
 définir le mode de sélection

 setSelectionMode(int)
ListSelectionModel.SINGLE_SELECTION SINGLE_INTERVAL_SELECTION MULTIPLE_INTERVAL_SELECTION
 définir l'arrangement des éléments

 setLayoutOrientation(int)
 récupérer la sélection List.VERTICAL HORIZONTAL_WRAP VERTICAL_WRAP
 getSelectedIndex()  int, getSelectedIndices()  int[]

 getSelectedValue()  Object, getSelectedValues()  Object[]
Capacités
Capacités communes
communes àà tous
tous les
les composants
composants
 Activation / désactivation du composant (le composant réagit ou non aux
interactions avec l'utilisateur)
 setEnabled(boolean);
 isEnabled()  boolean
 Visibilité / invisibilité d'un composant

 setVisible(boolean);
 isVisible()  boolean
 Apparence du curseur (changement de l'apparence du curseur en
fonction du composant qu'il survole)

 setCursor(java.awt.Cursor)
bt.setCursor(Cursor.getPredefinedCursor(Cursor.WAIT_CURSOR));
 Bulles d’aide (« tooltips »)
 setToolTopText(String)
possibilité d'utiliser HTML pour formater le texte d'aide
 Couleur
 setBackGroundColor(java.awt.Color)
 setForeGroundColor(java.awt.Color)
 …

Container
Container
Object
Container : composant
awt particulier dont le rôle est
Component de contenir d'autres
composants
swing
Window Panel JComponent Box ...
Frame Dialog JWindow AbstractButton JColorChooser ... JLabel JPanel
JFrame JDialog JButton JToggleButton JMenuItem
JRadioButton JCheckBox JMenu ...

Container
Container
Object
 Container est un composant
0..*  un container peut contenir
Component d'autres containers
 permet de créer des
Container arborescences de composants
int ncomponents
Component[] component
...
Component add(Component)
Component add(Component, int)
...
void remove(int)
void remove(Component)
...
int getComponentCount()
Component getComponent(int)

Arborescence
Arborescence de
de containers
containers
 Construction d’une interface : élaborer une arborescence de composants
à l'aide de containers jusqu'à obtenir l'interface souhaitée
composant bouton 1
qui affiche
du texte
bouton 2
fenêtre
contient
panneauGauche.add(composantTexte);
panneau gris foncé
panneauDroite.add(bouton1);
panneauDroite.add(bouton2);
panneau gauche panneau droite
panneauGris.add(panneauGauche);
panneauGris.add(panneauDroite);
composant texte bouton1 bouton2
fenêtre.add(panneauGris);

Top
Top Level
Level Containers
Containers
 Pour apparaître sur l'écran,
tout composant doit se
trouver dans une hiérarchie
de "conteneurs"
 À la racine de cette
hiérarchie se trouvent les
fenêtres (top level container) Object
awt Component
Window Panel Fenêtre sans bordure ni titre

Ni déplaçable, ni redimensionable
Utilisée pour « splash screen » au
lancement d’une application
Frame Dialog JWindow

B modale par rapport à A si
Fenêtre secondaire Peut être l’affichage de la fenêtre B
Fenêtre principale JFrame JDialog modale par rapport à un autre
empêche l’accès à fenêtre A
JDialog ou JFrame
Fenêtres
Fenêtres Comportement
Comportement
 new JFrame(...) ou new JDialog(...) crée un objet fenêtre
mais ne provoque pas son affichage
 setVisible(true) (show()) affiche la fenêtre

 setVisible(false) (hide()) cache la fenêtre, mais ne la détruit pas.
 l'objet fenêtre et son contenu existent toujours en mémoire
 la fenêtre peut être réaffichée ultérieurement
 dispose() permet de libérer les ressources natives utilisées par le système pour afficher
la fenêtre et les composants qu'elle contient
 Par défaut à la fermeture d'une fenêtre, elle est simplement rendue invisible
 on verra plus tard comment définir nos propres comportements
 possibilité d'associer un comportement choisi parmi un ensemble de comportements
prédéfinis
 setDefaultCloseOperation(int operation)
WindowConstants.HIDE_ON_CLOSE
WindowConstants.DO_NOTHING_ON_CLOSE
WindowConstants.EXIT_ON_CLOSE
WindowConstants.DISPOSE_ON_CLOSE
Fenêtre
Fenêtre d’application
d’application
 Toute fenêtre d’application est représentée par une classe dérivant
ou utilisant la classe JFrame du package javax.swing
import javax.swing.JFrame; • se comporte comme toute
public class MyFrame extends JFrame {
fenêtre du système
d’exploitation :
final static int HAUTEUR = 200; • peut être redimensionnée,
final static int LARGEUR = 300; déplacée, …
public MyFrame() {
an
setTitle("Ma première Fenêtre");
e la f en ê tre à l’écr
setSize(LARGEUR,HAUTEUR); • affich n
t h rea d » d’exécutio
• lance un « ractions sur cette
setVisible(true);
} r inte
pour gére
fenêtre
public static void main(String[] args) {
new MyFrame();
do {
System.out.println("dans le thread principal");
System.out.println("voulez vous poursuivre le thread • par défaut la fermeture de
principal ?"); la fenêtre la rend simplement
} while (LectureClavier.lireOuiNon()); invisible elle ne termine pas
System.out.println("fin thread principal"); son thread d'exécution !
}
}
• L’exécution du programme principal ne se termine que lorsque le « thread »

lié à la fenêtre se termine lui aussi
Fenêtres
Fenêtres Comportement
Comportement
 setSize(int largeur, int hauteur) fixe la taille de la fenêtre
 setLocation(int x, int y) fixe la position de la fenêtre (son coin supérieur gauche)

sur l'écran
 java.awt.Toolkit permet d'obtenir la taille de l'écran

Toolkit tk = Toolkit.getDefaultToolkit();
Dimension dimEcran = tk.getScreenSize();
 setResizable(boolean) autorise ou non le redimensionnement de la fenêtre par

l'utilisateur
 setTilte(String) définit le contenu de la barre de titre de la fenêtre
 toFront(), toBack() fait passer la fenêtre au premier plan ou à l'arrière plan

Fenêtres
Fenêtres
 Les composants qui seront visibles dans la fenêtre seront placés dans un
conteneur particulier associé à celle-ci : Content Pane
 pour récupérer ce conteneur :
getContentPane()  Container
 La fenêtre peut contenir de manière optionnelle une barre de menus (qui

n'est pas dans le content pane)

Ajout
Ajout d’un
d’un composant
composant à
à une
une fenêtre
fenêtre
Avec AWT Avec les Swings
import javax.swing.*;
import java.awt.*;
public class MyFrame extends Frame {
final static int HAUTEUR = 200;
final static int LARGEUR = 300;
public MyFrame() {
public MyFrame() {
setSize(LARGEUR,HAUTEUR);
Button b = JButton b =
new Button("Mon 1er composant"); new JButton("Mon 1er composant");
add(b); this.getContentPane().add(b);
show();
setVisible(true);
}
}
}
}
Un composant ne peut être directement inséré

1) Création du composant dans une JFrame, mais à son « content pane »
2) ajout au « conteneur » qui doit être récupéré au préalable

Fenêtres
Fenêtres Création
Création d’un
d’un menu
menu
 Ajouter à l’application un menu rudimentaire
Classes utilisées :
JMenuBar : représente
la barre de menu d’une
fenêtre Fichier Aide
Nouveau A propos
Quitter
JMenu : options
visibles dans la barre
de menu
JMenuItem : Items qui déclencheront par leur

sélection des actions définies par le programmeur JComponent
AbstractButton
JFrame
JMenuItem
0..1
JMenuBar JMenu

Fenêtres
Fenêtres Création
Création d’un
d’un menu
menu
Classes utilisées :
JMenuBar : représente la barre de menu d’une fenêtre
JMenu : options visibles dans la barre de
import java.swing.*; menu
JMenuItem : Items qui déclencheront par leur sélection
public class MenuEditeur extends JMenuBar { des actions définies par le programmeur
JMenuItem quitter, nouveau, aPropos;
public MenuEditeur() { Fichier

JMenu menuFichier = new JMenu("Fichier"); 1) création des Nouveau
nouveau = new JMenuItem("Nouveau"); éléments du menu
quitter = new JMenuItem("Quitter"); Quitter
menuFichier.add(nouveau);
menuFichier.addSeparator();
2) association des
Fichier
menuFichier.add(quitter); Nouveau
objets JMenuItem dans
JMenu menuAide = new JMenu("Aide"); un objet Menu Quitter
aPropos = new JMenuItem("A propos");
menuAide.add(aPropos);
3) ajout des objets Fichier Aide
this.add(menuFichier);
JMenu dans l’objet Nouveau A propos
this.add(menuAide);
JMenuBar (this) Quitter
}
} // MenuEditeur

Fenêtres
Fenêtres Création
Création d’un
d’un menu
menu
 Seule une instance de la classe JFrame (ou JDialog) peut héberger
un menu
import java.swing.*;

public MyFrame() {
setJMenuBar(new MenuEditeur());
setVisible(true);
} setJMenuBar prend en paramètre une instance de la
classe JMenuBar :
• soit une instance directe de JMenuBar qui aura été
public static void main(String[] args) modifiée grâce aux méthodes add(…)
{ • soit une instance d’une classe dérivée de JMenuBar
new MyFrame(); comme dans le cas présent
}
}

Autres
Autres types
types de
de containers
containers
 JFrame et JDialog containers racines (top level containers)

JScrollPane:
 Containers de type noeud lorsque le composant
qu'il contient n'est pas
affichable dans sa totalité
JPanel :
Aspect réduit au minimum :
rectangle invisible dont on peut
fixer la couleur de fond
Utilisé pour regrouper des
composants dans une fenêtre
JSplitPane:
permet de séparer son
contenu en deux zones
distinctes dont les surfaces
respectives peuvent varier
dynamiquement
JToolBar:
barre d'outils (regroupe JTabbedPane:
des boutons) tableau à onglets

Encore
Encore d'autres
d'autres containers
containers
JLayeredPane:
fournit une troisième dimension
(z : profondeur) pour positionner
les composants qu'il contient
JDesktopPane:
permet de définir des
fenêtres internes
dans une fenêtre

Imbrication
Imbrication des
des composants
composants
 Pour structurer l’interface graphique utilisation de JPanels
 Exemple : ajout d’une barre d’outils à l’éditeur graphique
import java.awt.*;
public class BarreOutils extends JPanel {
public BarreOutils() { JButton JPanel
String[] libelleCouleurs = {"Bleue",

"Rouge", "Jaune", "Vert"}; JComboBox
Color[] couleurs = { Color.blue, import javax.swing.*;

Color.red, Color.yellow, Color.green };
this.setBackground(Color.lightGray); final static int HAUTEUR = 200;
JComboBox listeCouleurs = new JComboBox();
for (int i = 0; i < libelleCouleurs.length; i++) public MyFrame() {
listeCouleurs.addItem(libelleCouleurs[i]); setTitle("Ma première Fenêtre");
this.add(listeCouleurs);
this.add(new JButton("Défaire")); Container content=this.getContentPane();
this.add(new JButton("Tout effacer")); content.add(new BarreOutils());
this.add(new JButton("Quitter"));
setVisible(true);
} }
} // BarreOutils }

Placement
Placement des
des composants
composants
 Dans les exemples précédents les composants se sont placés automatiquement
 Pour la barre d’outils au centre du JPanel
 Mécanismes par défaut
 Possibilité de les adapter aux besoins particulier de l’application
 LayoutManager objet associé à un Container

 se charge de gérer la disposition des composants appartenant à celui-ci
Par exemple Layout par défaut pour les JPanels
– composants placés les uns après les autres dans leur ordre d’ajout
– le tout doit être centré
 réordonnancement automatique des composants lorsque la fenêtre est redimensionnée

Placement
Placement des
des composants
composants
 5 gestionnaires de mise en forme implémentant l’interface LayoutManager sont
prédéfinis dans awt :
 BorderLayout
 FlowLayout
 GridLayout
 CardLayout
 GridBagLayout
North three
one one
two two three
West Center East
four four five six

five
South
java.awt.BorderLayout java.awt.FlowLayout java.awt.GridLayout
add(Component,String) add(Component) add(Component, index)
 D’autres sont définis dans les swings (BoxLayout, SpringLayout….)

 Il est aussi possible de définir ses propres gestionnaires

Placement
Placement des
des composants
composants :: exemple
exemple
GridLayout
GridLayout
 Définition de la barre d’état
de l’application
import java.awt.*; JPanel
JLabel
public class BarreEtat extends JPanel { GrigLayout : 1 ligne, 2 colonnes
private JLabel coord, info;
Associe un GridLayout en
public BarreEtat() { spécifiant le nombre de
this.setBackground(Color.darkGray); lignes et colonnes
this.setLayout(new GridLayout(1,2));
this.add(info = new JLabel());
this.add(coord = new JLabel());
} Ajout des composants dans
les différentes cellules
public void afficheCoord(int x, int y) définies par le layout
{
coord.setText("x : " + x + " y : " + y);
}
public void afficheInfo(String message)

{
info.setText(message);
}
}

Placement
Placement des
des composants
composants :: exemple
exemple
BorderLayout
BorderLayout
 Ajout d’une zone de dessin et d’une barre d’état à la fenêtre de l’application
ContentPane
BorderLayout
BarreOutils FlowLayout (par défaut)

« North »
Zone dessin
« Center »
GridLayout (1 ligne, 2 colonnes)
BarreEtat
« South»
public MyFrame () {
BarreEtat barreEtat;
Associe un BorderLayout en setTitle("Ma première Fenêtre");
spécifiant espacement entre setSize(LARGEUR,HAUTEUR);
les composants this.getContentPane().setLayout(new BorderLayout(2,2));
this.getContentPane().add(new BarreOutils(),"North");
this.getContentPane().add(new ZoneGraphique(),"Center");
Ajout des composants dans this.getContentPane().add(barreEtat = new BarreEtat(),"South");
les différentes régions barreEtat.afficheCoord(0,0);
définies par le layout barreEtat.afficheInfo("coordonnées du cruseur");
setVisible(true);
}

Comment
Comment dimensionner
dimensionner les
les
composants
composants ??
 Jusqu’à présent nous ne nous sommes pas préoccupés de la taille des
composants
 Dans la barre d’outils les boutons n’ont pas tous la même taille (fixée
automatiquement par le layout manager).

 Possibilité d’indiquer une taille avec les méthodes setPreferredSize,
setMinimumSize.
public BarreOutils() {
JComboBox listeCouleurs;
String[] libelleCouleurs = {"Bleue", "Rouge", "Jaune", "Vert"};
Color[] couleurs = { Color.blue, Color.red, Color.yellow, Color.green };
this.setBackground(Color.lightGray); Indique les dimensions

souhaitées, elles ne
listeCouleurs = new JComboBox(); pourront pas toujours
for (int i = 0; i < libelleCouleurs.length; i++) être respectées selon
listeCouleurs.addItem(libelleCouleurs[i]);
les contraintes et la
this.add(listeCouleurs); politique de placement
JButton b; du LayoutManager
this.add(b= new JButton("Défaire"));
b.setPreferredSize(new Dimension(130,25));
this.add(b = new JButton("Tout effacer"));
this.add(b = new JButton("Quitter"));
}

Comment
Comment dimensionner
dimensionner les
les
composants
composants ??
 Prise en compte des dimensions souhaitées selon le layout
Layout Hauteur Largeur
FlowLayout oui oui
BorderLayout (East, West) non oui
BorderLayout (North, South) oui non
BorderLayout(Center) non non
GridLayout non non
 Possibilité de se passer des services des LayoutManager et de placer les

composants « à la main » en indiquant des positions et dimensions
exprimées en pixels (setBounds, setSize)
 plus de souplesse
 mais attention lorsque redimensionnement des conteneurs (attention à la
portabilité de l’interface graphique)

Gérer
Gérer les
les événements
événements
 Pour le moment les interactions de l’utilisateur avec les différents composants

de l’interface graphique ne provoquent aucune action
 Les applications comportant une interface graphique sont dirigées par les
événements (event-driven)
 elles ne font rien jusqu'à ce que l'utilisateur bouge la souris, clique un bouton
ou appuie sur une touche…
 Le cœur de toute application comportant une interface graphique est le code de

traitement des événements.
 un programme dirigé par les événements est structuré autour d'un modèle
de traitement des événements. Bien comprendre ce modèle est important

pour une bonne programmation.
 dans JAVA, le modèle de gestion des événements par délégation a

radicalement (et heureusement) changé entre la version 1.0 et la version 1.1
(nous n’aborderons pas ici le modèle du JDK 1.0)

Modèle
Modèle événementiel
événementiel du
du JDK
JDK 1.1
1.1
 Objectifs de conception
 simple et facile à apprendre
 séparation nette entre code applicatif et code de l’interface utilisateur
 faciliter l’écriture de code robuste pour la gestion des événements (« strong
compile time checking »)

 suffisamment flexible pour autoriser selon les applications des modèles
différents pour le flot et la propagation des événements

 pour les concepteurs d’outils visuels permettre de découvrir à l’exécution
 les événements qu’un composant peut générer
 les événements qu’il peut observer
 supporter une compatibilité binaire avec l’ancien modèle
 Ce nouveau modèle est utilisé par AWT, Swing et sert également dans de
nombreuses API Java (servlets, SAX, java BEANS, …)

Modèle
Modèle événementiel
événementiel du
du JDK
JDK 1.1
1.1
 Le modèle événementiel de JDK 1.1 se compose :
 D’objets sources d’événements
 D’objets événements
 D’objets récepteurs d’événements
 Ces objets interagissent de façon standard en invoquant des méthodes

pour permettre le déclenchement et la gestion des événements
actionPerformed(unEvnt) JButton
Récepteur Source
MonBouton d’événements
d’événements unObjet
2
Activer
getSource()
3 1 new ActionEvent()
ActionEvent
unEvnt

Objets
Objets Evénement
Evénement
 Un objet événement encapsule une information spécifique à une instance
d’événement
 exemple : un événement représentant un clic souris contient la position du
pointeur souris
 Les différents types d’événements sont représentés par des classes différentes
 ActionEvent, MouseEvent …
 Toute classe d’événement est sous classe de la classe java.util.EventObject
Object
EventObject
les différents types d’événements
liés à AWT héritent de AWTEvent
EventObject(Object source) sont rangés dans le package
Object getSource( ) java.awt.event
AWTEvent
Permet d’identifier plusieurs types
int id d’événements dans une même classe
Définit 7 types d’événements

MOUSE_CLICKED, MOUSE_DRAGGED
ActionEvent MouseEvent MOUSE_ENTERED, MOUSE_EXITED,
... MOUSE_MOVED, MOUSE_PRESSED,
String getCommand() int getX(), int getY() MOUSE_RELEASED
La
La hiérarchie
hiérarchie des
des événements
événements
 Une partie de la hiérarchie des événements AWT
EventObject
AWTEvent • Composant a été déplacé, affiché, caché

Evénements sémantiques : ou sa taille a été modifiée
Expriment ce que fait l’utilisateur
ActionEvent AdjustmentEvent ComponentEvent ItemEvent TextEvent

• Clic sur un bouton • Déplacement du curseur • Sélection dans un groupe • Modification du contenu
•Sélection d’un élément de menu dans une barre de défilement de cases à cocher ou dans d’un champ ou d’une zone
ou de liste une liste texte
•Touche entrée sur zone texte
Evénements de bas niveau
ContainerEvent FocusEvent InputEvent WindowEvent

• Ajout ou suppression
• Un composant a obtenu • Fenêtre activée, désactivée
d’un composant dans
ou perdu la focalisation iconifiée, réouverte ou fermée
un conteneur
KeyEvent MouseEvent
• Une touche du clavier • Clic souris, déplacement
a été pressée ou relâchée du pointeur de la souris

Récepteurs
Récepteurs d’événements
d’événements
 Un récepteur d’événements est un objet qui doit être prévenu (« notified ») par la
source lorsque certains événements se produisent
 Les notifications d’événements se font en invoquant des méthodes de l’objet à
l’écoute, l’objet événement étant transmis en paramètre

 La source d’événements doit savoir quelle méthode du récepteur doit être appelée
 pour chaque classe d’événements une interface spécifique définit les méthodes
à appeler pour notifier les événements de cette classe
 exemple : interface ActionListener pour les ActionEvent

package java.awt.event;
import java.util.EventListener;
public interface ActionListener extends EventListener {
/** Invoked when an action occurs.*/
public void actionPerformed(ActionEvent e);
}
 toute classe désirant recevoir des notifications d’un événement donné devra
implémenter cette interface
 un récepteur d’ActionEvent doit implémenter l’interface ActionListener

Interfaces
Interfaces
d’écoute
d’écoute d’événements
d’événements
 Toutes les interfaces d’écoute d'événements héritent de
java.util.EventListener
 Par convention toutes les interfaces des récepteurs d’événements ont des noms de
la forme <EventType>Listener
 exemple : les événements de AWT et les interfaces correspondantes pour les
récepteurs
Classe d’événement Interface d’écoute

ActionListener
ActionEvent
AdjustmentEvent
ComponentEvent AdjustmentListener
ContainerEvent ComponentListener
FocusEvent ContainerListener
ItemEvent FocusListener
KeyEvent ItemListener
MouseEvent KeyListener
MouseListener
TextEvent MouseMotionListener
WindowEvent TextListener
WindowListener

Interfaces
Interfaces
d’écoute
d’écoute d’événements
d’événements
 Une interface d’écoute d’événements peut contenir un nombre quelconque
de méthodes, chacune correspondant à un événement différent
< interface >
MouseEvent définit 7 types MouseListener
d’événements
void mouseClicked(MouseEvent)
MOUSE_CLICKED void mouseEntered(MouseEvent)
MOUSE_ENTERED void mouseExited(MouseEvent)
MOUSE_EXITED void mousePressed(MouseEvent)
void mouseReleased(MouseEvent)
MOUSE_PRESSED
MOUSE_RELEASED
< interface >

MOUSE_DRAGGED MouseMotionListener
MOUSE_MOVED
void mouseMoved(MouseEvent)
void mouseDragged(MouseEvent)
 Les méthodes définies dans les interfaces d’écoute doivent se conformer au schéma standard :
void <eventOccurenceMethodName>(<EventObjectType> evt);
où
 eventOccurenceMethodName décrit clairement l’événement qui sera déclenché
 EventObjectType est le type de l’événement déclenché et dérive obligatoirement de
java.util.EventObject
Sources
Sources d’événements
d’événements
 Événements générés par des sources d’événements (« event sources »)
 Source d’événements, un objet capable de :
 Déterminer quand un événement « intéressant » s’est produit
 D’avertir (« notify ») des objets récepteurs (« event listeners ») de
l’occurrence de cet événement
 Pour être averti des événements produits par une source un récepteur doit
se faire enregistrer auprès de la source
1 addActionListener(unObjet)
actionPerformed(unEvnt ) 2 JButton
Récepteur Source
MonBouton
d’événements unObjet ... d’événements
Activer
actionPerformed(unEvnt ) 3
4 removeActionListener(unObjet)

Sources
Sources d'événements
d'événements
 Plusieurs récepteurs peuvent être à l’écoute d’une même source d’événements

1
add
Acti
onL
iste
n e r(
unO
Récepteur actio bjet
unObjet nPe )
d’événements rform
ed(u
nEv
acti nt)
onP
erfo 2
r me
d(un
E vn
t) JButton Source
4 MonBouton d’événements
3 bjet)
e r( unAutreO
en
ionList Activer
addAct
5
t)
( unE vn
Récepteur ed
unAutreObjet er form
d’événements t i onP
ac
Lorsqu’un événement se produit il se

déclenche vers tous les récepteurs
d'événements (multicast)

Sources
d’événements
 Un récepteur peut être à l’écoute de plusieurs sources différentes
new ActionEvent( )
ActionEvent
e () unEvnt
rc 4 JButton
u Source
t So bouton2
ge 5 d’événements
6 t)
(u nEvn DesActiver
rfo r med
nPe
actio
Récepteur
d’événements unObjet
actio
n Perfo
r med
(u nEvn
3 t) JButton
2 Source
bouton1
ge
d’événements
tS
ou
Activer
r ce
()
1
new ActionEvent( )
ActionEvent
unEvnt

Sources
d’événements
 Une source d’événements pour une interface d’écoute d’événements propose
une méthode d’enregistrement dont la signature a la forme suivante :
public void add<ListenerType>(<ListenerType> listener)
 À tout moment un objet récepteur d’événements peut annuler sa demande de

notification
 Une source d’événements pour une interface d’écoute d’événements

propose une méthode d’annulation de notification dont la signature a la forme
suivante :
public void remove<ListenerType>(<ListenerType> listener)

Exemple
Exemple de
de gestion
gestion
des
des événements
événements
 Afficher les coordonnées de la souris lorsqu’elle se déplace sur la zone de

dessin.

Type d’événements : MouseEvent (MOUSE_MOVED, MOUSE_DRAGGED)
 Source d’événements : la zone de dessin
 Interface d’écoute : MouseMotionListener
 Récepteur d’événements ?
 Devra modifier l’affichage de la barre d’état
 Plusieurs solutions sont possibles. Prenons le cas où le récepteur est la
zone graphique elle même

 elle devra s’enregistrer auprès d’elle même pour être à l’écoute des
MouseMotionEvent générés sur elle

 elle devra avoir connaissance de l’objet gérant la barre d’état (la
référence de celui-ci sera passée en paramètre du constructeur de la

zone graphique)

Exemple
Exemple de
de gestion
gestion
des
des événements
événements
 Code de la classe représentant la zone de dessin
import java.awt.*;
import java.awt.event.*;
public class ZoneDessin extends JPanel implements MouseMotionListener {

private BarreEtat be;
L’objet zone graphique va être à
public ZoneDessin(BarreEtat be) { 1
l’écoute des événements
setBackground(Color.white); MouseEvent de type MouseMotion
setCursor(new Cursor(Cursor.CROSSHAIR_CURSOR));
this.be = be;
this.addMouseMotionListener(this); L’objet zone graphique s’enregistre
} 3 lui même comme récepteur des
événements MouseEvent de type
public void mouseMoved(MouseEvent e) { MouseMotion qu’il est susceptible de
be.afficheCoord(e.getX(),e.getY()); générer
}
L’objet zone graphique utilise les
public void mouseDragged(MouseEvent e) { 2 informations contenues dans l’objet
be.afficheCoord(e.getX(),e.getY()); MouseEvent qui lui est transmis pour
} mettre à jour la barre d’état.
} // ZoneGraphique

Exemple
Exemple de
de gestion
gestion
des
des événements
événements
 Code de la classe lançant l’application

public MyFrame7() { L’objet zone de dessin a
connaissance de l’objet barre d’état
BarreEtat barreEtat = new BarreEtat(); pour pouvoir agir sur lui lors de la
réception des MouseEvent
this.getContentPane().add(new BarreOutils(),"North");
this.getContentPane().add(new ZoneDessin(barreEtat),"Center");
this.getContentPane().add(barreEtat,"South");
barreEtat.afficheInfo("coordonnées du cruseur");
setVisible(true);
}
public static void main(String[] args)

{
new MyFrame();
}
} // MyFrame
Pour
Pour conclure
conclure (momentanément)
(momentanément)
 Pour gérer les événements il faut :
 Identifier l’objet à l’origine des événements (souvent un composant)
 Identifier le type de l’événement que l’on veut intercepter.
 Pour découvrir les types d’événements qu’est capable d’émettre un
composant, lister dans sa classe toutes les méthodes de type

addXXXListener
 Créer une classe qui implémente l’interface associée à l’événement que l’on
veut gérer
le choix de cette classe n’est pas neutre
– celle du composant (ou du conteneur du composant) à l’origine de l’événement

(« facilité » d’implémentation)
– une classe indépendante qui détermine la frontière entre l’interface graphique
(émission des événements) et ce qui représente la logique de l’application
(traitement des événements). Une bonne séparation permet de faciliter
l’évolution du logiciel.
 Implémenter dans cette classe la (les) méthode(s) associées à l’événement.
L’événement passé en paramètre contient des informations qui peuvent être
utiles (position du curseur, état du clavier, objet source de l’événement).

Construire Une Interface Graphique en Java

Загружено:

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

Оригинальное название

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

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

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

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

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

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

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

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

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

Construire Une Interface Graphique en Java

Загружено:

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

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

Construire une

© Sofia Zaidenberg CNRS Mai 2007 1

On pourra également se référer à

- « Java Foundation Classes in a nutshell » , David Flanagan, Ed. O'Reilly 1999

- « Swing la synthèse » , Valérie Berthié, Jean-Baptiste Briaud, Ed. Dunod 2001

© Sofia Zaidenberg CNRS Mai 2007 2

 Java : un langage indépendant des plateformes (cross-platform language)

(matériel et OS) différents sans recompilation.

 Modèle de gestion des événements

 Exemple : une classe TextField pour définir un champ de saisie de texte

void setText(String content)

© Sofia Zaidenberg CNRS Mai 2007 3

Adaptater GUI cible

 Deux stratégies possibles :

 faire une utilisation minimale du système graphique cible

© Sofia Zaidenberg CNRS Mai 2007 4

MotifTextField, GTKTextField, WindowsTextField, MacOSTextField ....

(-) difficile de garantir un comportement identique sur toutes les plateformes

 Choix adopté par JAVA AWT

© Sofia Zaidenberg CNRS Mai 2007 5

Canvas Button CheckBox Choice Container

List TextComponent ScrollBar Label

© Sofia Zaidenberg CNRS Mai 2007 6

 Utilisation minimale du système graphique sous-jacent

sur toutes les plateformes

 C'est le choix adopté par SWING

© Sofia Zaidenberg CNRS Mai 2007 7

– aspect de l’IHM : Motif, Windows, Métal, Mac, ...

© Sofia Zaidenberg CNRS Mai 2007 8

Window Panel JComponent Box ...

Frame Dialog JWindow AbstractButton JColorChooser ... JLabel JPanel

JFrame JDialog JButton JToggleButton JMenuItem

JRadioButton JCheckBox JMenu ...

© Sofia Zaidenberg CNRS Mai 2007 9

 Java tutorial consacré aux swing

 En particulier l’index visuel des composants swing

© Sofia Zaidenberg CNRS Mai 2007 10

« Swing provides many benefits to programmers and end users.

M. Campione - K. Walrath « the Java Tutorial »

Puisqu’elles le disent si gentiment, allons-y…

 Si Swing et AWT ne sont plus vraiment en concurrence, un troisième

 beaucoup plus ambitieux, nombreux composants, modèle MVC (JFace)

 windows, motif, gtk, Mac OS X

© Sofia Zaidenberg CNRS Mai 2007 11

 placement des composants (layout managers)

 gestion de l'interaction (événements)

© Sofia Zaidenberg CNRS Mai 2007 12

© Sofia Zaidenberg CNRS Mai 2007 13

 La création de l’interface graphique passe forcément par une instance

les différents éléments constitutifs (composants) de l’interface

 composants (components en JAVA)

© Sofia Zaidenberg CNRS Mai 2007 14

 Usage : afficher du texte statique et/ou une image JComponent

 Définition du texte du label JLabel

 Par la méthode setText

lb.setText("un autre texte pour le label");

 Définition d’une icône :

 Par la méthode setIcon

lb.setText("<html>ce texte est en <B>gras</B></HTML>")

attention : si texte HTML est incorrect, exception levée à l’exécution

 Usage : présente un champ de saisie de texte

 Création d’un JTextField

 JTextField jtf = new JTextField("un texte");