Les interfaces graphiques en Java
Chapitre 3 :
Les interfaces graphiques en Java
(avec Swing)
1. Présentation de Swing
Swing : une bibliothèque de création des interfaces graphiques.
Swing existe depuis Java 1.1
Deux packages sont utilisées pour créer les interfaces graphiques : java.awt , javax.swing
La construction des interfaces graphiques est basée sur 4 éléments :
-
Les composants : des boutons, des textes, des images, …
Les conteneurs : sont des composants qui sont capables d’accueillir d’autres
composants (des fenêtres)
Le gestionnaire de positionnement : permet de gérer le positionnement des
composants dans l’interface graphique
Le gestionnaire des évènements : sert à gérer les actions des utilisateurs sur
l’interface qui peuvent modifier le comportement du programme.
2. Les composants de Swing
Les composants de Swing héritent tous de la classe JComponent.
Les méthodes les plus utiles de la classe JComponent sont :
-
add : utilisée pour ajouter un composant à un conteneur
setLocation : permet de positionner le composant graphique dans l’écran
setSize : fixe la taille d’un composant
setToolTipText : affiche un texte qui présente le rôle du composant.
Exemple de JToolTip (les infobulles) :
JButton bouton = new JButton("Valider") ;
bouton.setToolTipText(" En cliquant sur le bouton, vous validez
les informations saisies");
1
Les interfaces graphiques en Java
2.1. Les conteneurs primaires
Un conteneur primaire représente le cadre de l’interface.
Un conteneur primaire doit exister dans toute interface graphique.
On s’intéresse à 3 types de conteneurs primaires : JWindow, JFrame et JDialog.
JWindow :
Une fenêtre basique sans aucune bordure et aucun bouton (pas de bouton de fermeture ou de
redimensionnement).
Exemple 1 :
JWindow window = new
JWindow(); window.setSize(300,
200); window.setVisible(true);
JFrame :
Une fenêtre qui contient une bordure, une barre de titre, un bouton de fermeture, un bouton de
redimensionnement et un bouton pour la réduire.
Exemple 2 :
JFrame fenetre = new JFrame();
fenetre.setSize(300 ,300);
fenetre.setTitle("ma fenêtre");
fenetre.setVisible( true);
fenetre.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
;
Remarque 1 :
Lors du lancement de l’application, une fenêtre qui est créée n’est pas affichée par défaut, elle
est lancée en arrière plan (cachée). Pour l’afficher à l’écran, il faut utiliser la méthode
setVisible(true).
Remarque 2 :
Lorsqu’on clique sur l’icône de fermeture d’une fenêtre, celle-ci n’est pas fermée mais cachée
(comme si on a appelé setVisible(false)). Pour fermer la fenêtre, on fait appel à l’instruction
suivante :
fenetre.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Les boites de dialogues :
C’est une boite de dialogue qui permet de communiquer rapidement avec l’utilisateur.
Généralement, on les utilise pour afficher un message à l’utilisateur. La classe JOptionPane
2
Les interfaces graphiques en Java
permet de créer plusieurs types de boites de dialogues. On distingue 3 types de boites de
dialogue :
-
Les dialogues de messages :
Elles contiennent un message sous forme de texte et un bouton de confirmation.
Exemple 3 :
JOptionPane.showMessageDialog(null,"Problème
de réseau","Connexion au réseau
impossible.",JOptionPane.WARNING_MESSAGE);
-
Les dialogues de confirmation/question :
Elles servent à demander un renseignement à l’utilisateur.
Exemple 4 :
JOptionPane.showConfirmDialog(fenetre,"Aimez
vous Java ?");
-
Les dialogues de saisie :
Elles comprennent une entrée de saisie et des boutons de validation.
Exemple 5 :
String rep = JOptionPane.showInputDialog(null,"
Entrez votre nom d’utilisateur");
2.2. Les conteneurs secondaires
Ces composants servent à regrouper d’autres composants. Les principaux panneaux secondaires
sont :
Le panneau : JPanel
C’est le conteneur le plus simple de Swing. Pour utiliser un panneau, il faut l’inclure dans une
fenêtre (un JFrame par exemple).
Pour ajouter un composant à un JPanel, on utilise la méthode add.
Pour enlever un composant du JPanel, on utilise la méthode remove.
Exemple 6 :
JPanel panel = new JPanel();
JLabel label = new JLabel("mon
bouton"); panel.add(label);
3
Les interfaces graphiques en Java
Remarque :
Une fenêtre se compose d’une barre de menu (JMenuBar) et d’un panneau conteneur
(ContentPane). Le ContentPane est de type JPanel. Les composants graphiques sont ajoutés dans
le ContentPane.
Figure 1 : Structure d'un JFrame
Pour ajouter des composants à une fenêtre, on défini un nouveau ContentPane (de type JPanel),
on y place les composants, puis on utilise la méthode setContentPane de la classe JFrame en lui
entrant le JPanel ainsi créé.
Exemple 7 :
JFrame fenetre=new JFrame();
JPanel panel=new JPanel();
JButton bouton = new JButton("Mon bouton");
panel.add(bouton);
fenetre.setContentPane(panel);
Le panneau à défilement : JScrollPane
JScrollPane permet d’afficher une partie du contenu (par exemple, si on a un texte long ou une
image de grande taille). Ce conteneur ne peut contenir qu’un seul composant.
Exemple 8 :
JFrame fenetre=new JFrame();
fenetre.setSize(400 ,300);
JLabel monImage = new JLabel();
monImage.setIcon(new ImageIcon("image.jpg"));
JScrollPane panel=new JScrollPane(monImage);
fenetre.setContentPane(panel);
Le panneau à onglets : JTabbedPane
Il permet de créer des interfaces en utilisant des onglets. La méthode addTab permet d’ajouter
un composant dans un nouvel onglet. Généralement, on ajoute un conteneur JPanel à chaque
onglet.
4
Les interfaces graphiques en Java
Exemple 9 :
JFrame fenetre=new JFrame();
fenetre.setSize (400 ,300);
JPanel panel1=new JPanel();
JPanel panel2=new JPanel();
JTabbedPane tabbedpane=new JTabbedPane();
tabbedpane.addTab("onglet1", panel1);
tabbedpane.addTab("onglet2", panel2);
fenetre.setContentPane(tabbedpane)
; fenetre.setVisible(true);
2.3. Les composants atomiques
Ce sont les composants élémentaires de Swing : les boutons, les labels, les zones de texte, …
Les boutons : JButton
Pour créer un bouton, on appelle le constructeur JButton :
JButton bouton = new JButton("mon bouton");
Les labels : JLabel
Un label est une simple chaine de caractère. La construction d’un label se fait comme ceci :
JLabel label = new JLabel("mon label");
Les champs de saisie : JTextField
Ils sont utilisés pour saisir une seule ligne de texte. On peut fixer la largeur du champ de saisie
par appel de la méthode setColumns(int).
JTextField champ = new JTextField();
champ.setColumns(10);
Les zones de texte : JTextArea
Sert à afficher un texte sur plusieurs lignes. Pour remplir la zone de texte, on utilise la méthode
setText.
JTextArea zone_texte = new JTextArea();
zone_texte.setText("Texte long..........................\n ....................................\n
................................. \n....................................\n");
Les cases à cocher : JCheckBox
JCheckBox présente une case à cocher. Grâce à ce composant, l’utilisateur peut cocher plusieurs
cases en même temps (plusieurs choix possibles). La méthode setSelected(true) permet de
mettre la case cochée dès sa création.
5
Les interfaces graphiques en Java
JCheckBox chBox1=new JCheckBox("choix
JCheckBox chBox2=new JCheckBox("choix
chBox2.setSelected(true);
1");
2");
Les boutons radio : JRadioButton
Les boutons radio sont des boutons à choix exclusif (un seul choix en même temps). La création
des boutons radio se fait comme suit :
JRadioButton rBouton1 = new JRadioButton("Un bouton radio"); JRadioButton
rBouton2 = new JRadioButton("Un autre bouton radio", true);
Pour garantir un choix exclusif entre les boutons radio, ceux-ci doivent être regroupés dans un
ButtonGroup.
ButtonGroup group=new ButtonGroup();
group.add(rBouton1);
group.add(rBouton2);
Les listes de choix : JList
Ce composant permet de choisir un ou plusieurs éléments parmi un ensemble prédéfini.
String[] lesElements = {"Orange", "Tunisie Telecom", "Ooredoo",
"Elissa"}; JList opérateurs = new JList(lesElements);
Les boites combo : JComboBox
Le composant JComboBox permet de choisir un seul élément parmi une liste d’éléments
proposés.
String[] lesElements = {"Orange", "Tunisie Telecom", "Ooredoo",
"Elissa"}; JComboBox opérateurs = new JComboBox(lesElements);
Les menus : JMenuBar, JMenu, JMenuItem
Il est possible d’ajouter une barre de menu (composant JMenuBar) à une fenêtre à l’aide de la
méthode setJMenuBar. À une barre de menu, on peut ajouter assez de menus que l’on veut
(composant JMenu). Et chaque menu (JMenu) comporte plusieurs éléments (JMenuItem).
JMenu
JMenuBar
JMenuItem
6
Les interfaces graphiques en Java
7
JFrame fenetre = new JFrame();
JMenuBar menubar=new JMenuBar();
JMenu menu1=new JMenu("Fichier");
JMenu menu2=new JMenu("Edition");
JMenuItem menuFichierNouveau = new JMenuItem(" Nouveau
"); JMenuItem menuFichierOuvrir = new JMenuItem(" Ouvrir
"); menu1.add(menuFichierNouveau);
menu1.add(menuFichierOuvrir);
JMenuItem menuEditionCouper = new JMenuItem(" Couper
"); JMenuItem menuEditionCopier = new JMenuItem("
Copier "); JMenuItem menuEditionColler = new
JMenuItem(" Coller "); menu2.add(menuEditionCouper);
menu2.add(menuEditionCopier);
menu2.add(menuEditionColler);
menubar.add(menu1);
menubar.add(menu2);
fenetre.setJMenuBar(menubar);
Exemple d’interface graphique :
JLabel
JTextField
JComboBox
JRadioButto
JTextArea
JCheckBox
JList
JButton
Les interfaces graphiques en Java
3. Le gestionnaire de placement
Le gestionnaire de placement permet de gérer le positionnement des composants graphiques
dans un conteneur.
Un gestionnaire de placement implémente l’interface LayoutManager. On s’intéresse dans ce
cours à 3 gestionnaires : FlowLayout, GridLayout et BorderLayout.
À chaque conteneur est associé un gestionnaire de placement par défaut. Pour modifier le
gestionnaire de placement d’un conteneur, on utilise la méthode setLayout(). On met un
gestionnaire de type LayoutManager ou d’une de ses sous-classes comme argument de la
méthode setLayout().
Exemple :
JPanel panel=new JPanel();
FlowLayout fl=new FlowLayout();
panel.setLayout(fl);
Le gestionnaire par défaut de JPanel est FlowLayout. Le gestionnaire par défaut de JFrame est
BorderLayout.
3.1. FlowLayout
Il place les composants de gauche à droite et de haut en bas. Donc, il remplit une ligne, puis
passe à la suivante.
Exemple 10 :
JPanel panel=new JPanel();
FlowLayout fl=new FlowLayout();
panel.setLayout(fl);
panel.add(new
panel.add(new
panel.add(new
panel.add(new
panel.add(new
panel.add(new
JButton("un"));
JButton("deux"));
JButton("trois"));
JButton("quatre"));
JButton("cinq"));
JButton("six"));
3.2. BorderLayout
Ce gestionnaire divise le conteneur en 5 zones : le centre (CENTER), le haut (NORTH), le bas
(SOUTH), la droite (EAST) et le gauche (WEST). La figure ci-dessous présente l’emplacement de
ces zones.
8
Les interfaces graphiques en Java
Exemple 11 :
JPanel panel=new JPanel();
BorderLayout bl=new BorderLayout();
panel.setLayout(bl);
JButton
JButton
JButton
JButton
JButton
un=new JButton("Un");
deux=new JButton("Deux");
trois=new JButton("Trois");
quatre=new JButton("Quatre");
cinq=new JButton("Cinq");
panel.add(un, BorderLayout.NORTH);
panel.add(deux, BorderLayout.SOUTH);
panel.add(trois, BorderLayout.EAST);
panel.add(quatre, BorderLayout.WEST);
panel.add(cinq, BorderLayout.CENTER);
Remarque :
Il n’est pas obligatoire d’utiliser les cinq zones ; les zones qui ne sont pas utilisées seront
ignorées.
Exemple 12 :
JPanel panel=new JPanel();
BorderLayout bl=new BorderLayout();
panel.setLayout(bl);
JButton un=new JButton("Un");
JButton trois=new JButton("Trois");
JButton cinq=new JButton("Cinq");
panel.add(un, BorderLayout.NORTH);
panel.add(trois, BorderLayout.EAST);
panel.add(cinq, BorderLayout.CENTER);
3.3. GridLayout
Ce gestionnaire place les composants sur une grille définie par un nombre de lignes et un
nombre de colonnes. Par exemple, si on appelle le constructeur new GridLayout(3,2), on
obtient une grille de 3 lignes et 2 colonnes.
9
Les interfaces graphiques en Java
10
Exemple 13 :
JPanel panel=new JPanel();
GridLayout gl=new GridLayout(3,2);
panel.setLayout(gl);
JButton
JButton
JButton
JButton
JButton
un=new JButton("un");
deux=new JButton("deux");
trois=new JButton("trois");
quatre=new JButton("quatre");
cinq=new JButton("cinq");
panel.add(un);
panel.add(deux);
panel.add(trois);
panel.add(quatre);
panel.add(cinq);
4. La gestion des évènements
4.1. Principe de la gestion des évènements
Les actions de l’utilisateur sur l’interface graphique peuvent générer des évènements. Par
exemple, un clic sur un bouton, la sélection d’un menu, …
Le composant qui subit une action de l’utilisateur déclenche un évènement. Ce composant
s’appelle la source de l’évènement. Il envoie l’objet évènement à un ou plusieurs objets
(récepteurs d’évènements). Ceux-ci s’appellent auditeurs ou écouteurs (en anglais listeners).
Pour utiliser les évènements et les écouteurs, on importe les deux packages : java.awt.event et
javax.swing.event .
2
L’utilisateur agit sur
un composant
1
Composant
Source d’évènement
4
3
s’enregistre auprès de
Récepteur d’évènement
(XXXListener)
envoie un évènement
6
déclenche un évènement
le récepteur traite l’évènement
5
détermine la source de l’évènement
L’évènement
(XXXEvent)
(getSource())
Les interfaces graphiques en Java
11
Le mécanisme de gestion des évènements est :
1.
L’auditeur (listener) doit s’enregistrer auprès de la source afin de pouvoir écouter
l’évènement. Pour cela,
a. Cet objet doit être défini comme listener. Il doit alors implémenter l’interface
XXXListener où XXX est le type de l’évènement.
b. Il doit être enregistré auprès du composant source en utilisant la méthode
addXXXListener().
2. (et 3 et 4) Lorsque l’évènement se produit (action de l’utilisateur sur un composant), un
objet de type XXXEvent est crée et envoyé au récepteur
5. Le récepteur utilise la méthode getSource() pour savoir quel est l’objet source de
l’évènement.
6. Selon le type de la source, le récepteur réagit à l’évènement (il possède une méthode
pour traiter l’évènement)
En général, l’écouteur de l’évènement d’un composant est souvent le conteneur de ce
composant.
L’écouteur implémente une interface listener. Il existe plusieurs types d’interfaces listener.
Chaque interface listener correspond à un type d’événement. Par exemple: dans le cas d’un clic
de bouton, l’évènement est de type ActionEvent et l’interface listener utilisée est ActionListener.
Le listener peut recevoir des évènements provenant de plusieurs sources. Donc, pour distinguer
la source de l’évènement, on appelle la méthode getSource().
4.2. Différents types d’évènements
Type
d’évènement
ActionEvent
ItemEvent
Action de l’utilisateur
clic sur un bouton, clic sur un
élément d’un menu
sélection d’un élément dans une
liste déroulante, ou dans un
groupe de boutons radio ou de
cases à cocher
ListSelectionEvent Sélection d’un élément dans une
JList
ChangeEvent
Un composant a changé d’état
Composant source d’évènement
Bouton : JButton, JCheckBox, JRadioButton
Menu : JMenu, JMenuItem
Texte : JTextField
JComboBox
JRadioButton
JCheckBox
JList
Bouton : JRadioButton, JCheckBox
Menu : JMenuItem
…
4.3. Les écouteurs correspondants aux évènements
Une interface écouteur permet de recevoir un évènement d’un type spécifique. Par exemple,
l’interface ActionListener permet de recevoir des évènements de type ActionEvent. Chaque
interface écouteur possède des méthodes qui doivent être implémentées afin de pouvoir traiter
l’évènement reçu. Par exemple, l’interface ActionListener possède une seule méthode
actionPerformed().
Les interfaces graphiques en Java
12
Le tableau suivant récapitule les différentes interfaces listener correspondant aux différents
types d’évènements. On donne aussi, à chaque interface, les méthodes qu’elle possède.
Objet
Interface
évènement
Listener
Méthode du listener
ActionEvent
ActionListener
actionPerformed(ActionEvent e)
ItemEvent
ItemListener
itemStateChanged(ItemEvent e)
ListSelection
Event
ListSelectionList
ener
ChangeEvent
ChangeListener
valueChanged(ListSelectionEvent
e)
stateChanged(ChangeEvent e)
Enregistrement du listener
Source.addActionListener(écoute
ur)
Source.addItemListener(écouteu
r)
Source.addListSelectionListener(
écouteur)
Source.addChangeListener(écout
eur)
4.4. Applications
4.4.1. Exemple 1 : clic sur un bouton
Soit l’interface graphique suivante, qui possède une zone label et deux boutons :
Lorsqu’on clique sur le bouton Bouton1, le text « bouton 1 cliqué » sera écrit dans le label.
Lorsqu’on clique sur le bouton Bouton2, le text « bouton 2 cliqué » sera écrit dans le label.
Un clic sur les boutons Bouton1 et Bouton2 génère un évènement de type ActionEvent.
Les 2 boutons sont des sources d’évènement.
La fenêtre qui contient les boutons est l’auditeur (listener). Elle implémente
l’interface ActionListener.
La méthode addActionListener(ActionListener l) permet d’enregistrer l’écouteur auprès des
2 boutons.
La méthode qui permet de traiter l’évènement est actionPerformed().
1) La fenêtre doit implémenter l’interface ActionListener
public class MaFenetre extends JFrame implements ActionListener{
JLabel l1;
JButton b1, b2;
public MaFenetre(){
setSize(200,100);
setTitle("Exercice1");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel panel=new JPanel();
Les interfaces graphiques en Java
...
l1=new JLabel();
b1=new JButton("Bouton1");
b2=new JButton("Bouton2");
...
setVisible(true);
}
@Override
public void actionPerformed(ActionEvent e)
{ // TODO Auto-generated method stub
}
}
2) L’écouteur doit être enregistré auprès du composant qui est source d’évènement
b1=new JButton("Bouton1");
b1.addActionListener(this);
b2=new JButton("Bouton2");
b2.addActionListener(this);
3) La méthode actionPerformed() de l’interface ActionListener doit être implémentée
public void actionPerformed(ActionEvent e) {
}
if(e.getSource()==b1)
l1.setText("bouton 1 cliqué");
if(e.getSource()==b2)
l1.setText("bouton 2 cliqué");
4.4.2. Exemple 2 : sélection d’un élément dans une liste déroulante
On désire réaliser une interface graphique qui contient une liste déroulante dont les éléments
sont les noms de pays. Lorsqu’on choisit un élément de la liste, le nom du pays sélectionné
s’affiche dans un label.
L’évènement généré dans ce cas est de type ItemEvent. La source de l’évènement est la liste
déroulante JComboBox. La fenêtre qui contient la liste déroulante est l’auditeur (listener). Elle
implémente l’interface ItemListener.
La méthode addItemListener(ItemListener l) permet d’enregistrer l’écouteur auprès du
composant source (JComboBox).
13
Les interfaces graphiques en Java
La méthode qui permet de traiter l’évènement (sélection d’un élément) est itemStateChanged().
1) La fenêtre doit implémenter l’interface ItemListener.
Cette fenêtre contient un élément de type JComboBox et un Label pour afficher le
résultat.
Public class MaFenetre2 extends Jframe implements ItemListener{
JLabel resultat;
JComboBox cb1;
public MaFenetre2(){
setSize(200,170);
setTitle("Exercice2");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel panel=new JPanel();
...
String[] country={"India","USA","France"};
resultat=new JLabel();
cb1=new JComboBox(country);
...
setVisible(true);
}
@Override
public void itemStateChanged (ItemEvent e)
{ // TODO Auto-generated method stub
}
}
2) L’écouteur doit être enregistré auprès du composant qui est source d’évènement
cb1=new JComboBox(country);
cb1.addItemListener(this);
3) La méthode itemStateChanged() de l’interface ItemListener doit être implémentée
public void itemStateChanged(ItemEvent e) {
resultat.setText("Country = "+cmb.getSelectedItem());
}
14
