Les Interfaces Graphiques

Introduction
●
Afin de faciliter l’interaction avec l’utilisateur, java propose un
ensemble d’outils permettant de développer des interfaces
graphiques (appelée aussi GUI pour Graphical User Interface)
●
L’utilisation d’une GUI permet de créer des applications accessibles à
un plus large nombre d’utilisateurs n’ayant pas des connaissances
poussées en informatique
●
De plus, coté ergonomie (design), il est plus agréable d’utiliser des
GUI que du texte

2
Introduction
●
Une GUI comme nous la connaissons peut comporter des
– zones de saisie de texte
– menus déroulants
– cases à cocher
– boutons
– …….
●
Une GUI réagit aux comportements de l’utilisateur
– clic avec la souris (bouton droit, bouton gauche, double clic,..)
– appuyer sur une touche du clavier,
– …..
3
Introduction
●
Le package javax.swing de java comporte toutes les classes
nécessaires pour concevoir des GUI.
– Les composants d’une GUI sont des objets instanciés à partir des
classes prédéfinies dans la bibliothèque swing.
●
Le réaction de l’interface aux actions (comportement) de l’utilisateur
sont définies à travers les classes prédéfinies dans le package
java.awt.event
– Les évènements (clic de souris, touche clavier, déplacement de la
souris,…) sont captés et le développeur peut définir le
comportement de l’interface en réaction à ces évènements.
4
 La bibliothèque SWING
●
La bibliothèque SWING fournit les composants nécessaires à la conception de GUI
puissantes
●
Qu’est qu’un GUI ? Avant de définir une GUI nous définissons d’abord une UI (User
Interface)
– Une UI est une interface permettant de :
●
Recevoir des données en entrée de la part de l’utilisateur
●
Faire des traitements sur ces données
●
Afficher des données et/ou des résultats des traitements

Exemple d’une UI

5
 La bibliothèque SWING
●
Une GUI à le même rôle qu’une UI. De plus, elle offre des outils d’interaction avec
l’utilisateur plus développés. Ces outils sont un ensemble de composants graphiques tels
que les zones de texte, les boutons,….

Exemple d’une GUI

6
 La bibliothèque SWING
●
La bibliothèque SWING comporte des classes permettant de concevoir des GUI.
Une GUI avec SWING est composée de
– Conteneurs (containers) :
●
Top-level-containers : JFrame, JWindow, JDialogBox,...
●
Simple-containers : JPanel, ...
– Composants (components) : JTextField, JButton, JLabel, ...
●
Un conteneur est un objet graphique destiné à contenir d’autres conteneurs ou des
composants graphiques
●
Un composant graphique doit appartenir à un conteneur

7
 Hiérarchie de package

java javax

awt … swing

event [classes] … import java.awt.*;

N’importe pas event.*

[classes] … import java.awt.event.*;

La bibliothèque SWING
Les Conteneurs

●
Top-level-containers : ce sont des conteneur de haut niveau qui
représentent des types de fenêtres. Ils peuvent contenir des simple-
containers ou des composants
●
Simple containers : ce sont des conteneurs destinés à contenir d’autres
simple-cantainers ou des composants.

9
La bibliothèque SWING
Les Conteneurs
Exemple de hiérarchie de conteneurs

10
Top-level-container : JFrame

●
L’un des Top-level-container qui représente une fenêtre simple est
JFrame. 
●
un JFrame est composé par plusieurs simple-containers (par défaut)
– RootPane
●
LayeredPane
– MenuBar
– ContentPane
– GlassPane
11
Top-level-container : JFrame

12
Top-level-container : JFrame
import javax.swing.*;
public class DisplayFrame {
public static void main (String[] args) {
JFrame f = new JFrame("FrameDemo");
//… components are added to its content frame.
f.setSize(300,200);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}

13
Top-level-container : Jframe (Afficher une interface)
Importer le package (les classes)
Les classes sont regroupées en package
Importer un package = importer toutes les classes du package
import javax.swing.*;
Créer une fenêtre graphique (JFrame, …)
Définir les paramètres (taille, …)
Afficher
Différence:
import java.awt.*; //les classes dans awt
import java.awt.event.*; //les classes dans event
import javax.swing.*;

14
 Les objets graphiques
• 3 niveaux
– Haut niveau
• Définir une fenêtre
• JApplet, JDialog, JFrame, JWindow
– Niveau intermédiaire
• Pour composer la fenêtre
• JPanel, JScrollPane, JSplitPane, …
– Niveau inférieur
• Les éléments de base
• JButton, JCheckBox, JTextField, JTextArea, …
 Insérer des éléments dans la
fenêtre
• Composition d’une fenêtre JFrame
 Ajouter des composants dans une fenêtre
import javax.swing.*;
public class DisplayFrame {
public static void main (String[] args) {
JFrame f = new JFrame("FrameDemo"); Haut niveau
JLabel label = new JLabel("Hello World");
JPanel p = (JPanel)f.getContentPane(); Composante
de base
p.add(label);
f.setSize(300,200); //alternative: f.pack(); Niveau
intermédiaire
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}
 Composer une fenêtre
• Créer une fenêtre (1)
• Créer un ou des composants intermédiaires (2)
– Pour JFrame, un JPanel est associé implicitement
(ContentPane)
• Créer des composants de base (3)

• Insérer (3) dans (2)

• Insérer (2) dans (1) (s’ils ne sont pas déjà associés)

• Afficher
 Composants intermédiaires
• Utilisés pour organiser ou positionner d’autres
composants (de base)
– JPanel utilisé pour regrouper d’autres composants
– JScrollPane fournir une vue avec scroll bars
– JSplitPane divise en 2 composants
– …
 Exemple d’organisation des
composants
• Ajouter 2 boutons dans un Panel

JPanel p = new JPanel();

p.add(new JButton("on"));
p.add(new JButton("off"));

• Ce Panel contient maintenant 2 boutons

 Construire GUI: Méthode générale
• Utiliser JPanel comme un outil de décomposition de fenêtre
– Une technique standard
– Permet plus de flexibilités
– JPanel peut être ajouté à d’autres structures pour modifier
ou étendre l’application
• Construire une vue de l’application dans un JPanel, et ajouter
JPanel à ContentPane de JFrame
 Hiérarchie des classes pour composants
graphiques
• AWT (Abstract Windowing Toolkit)

Object

Component MenuComponent Layout Event Peer

• Utilisé dans JDK1.0 et JDK1.1

• JDK2 utilise plutôt Swing (mais continue à supporter
AWT)
Hiérarchie des composants
graphiques: Swing
 Container de haut niveau
• N’est pas contenu dans d’autre Container
• Fournir une fenêtre dans laquelle les autres
composants peuvent s’afficher
– JApplet, JDialog, JFrame, JWindow
 Haut niveau (1): JFrame
• c’est une fenêtre avec un titre, des bordures, optionnellement
elle peut contenir un menu bar and user-specified components.
• Elle peut être déplacée, redimensionnée, lui attribuer une
icône.
• Ce n’est pas une sous classe de JComponent.
• Elle laisse la responsabilité de gestion des composants
utilisateur à contentPane, qui est une instance de JPanel.
– getContentPane()
 JFrame: Composer
• Ajouter un composant dans Content Pane de JFrame
JFrame f = new JFrame("A Frame");
JButton b = new JButton("Press");
JPanel cp = (JPanel)f.getContentPane();
cp.add(b)
JFrame f = new JFrame("A Frame");
JButton b = new JButton("Press");
ou
f.getContentPane().add(b)
JFrame f = new JFrame("A Frame");
JButton b = new JButton("Press");
ou f.add(b)
 Composant de base (pour obtenir des
données)
• JButton
• JCheckBox a toggled on/off button displaying state to user.
• JRadioButton a toggled on/off button displaying its state to user.
• JComboBox a drop-down list with optional editable text field. The
user can key in a value or select a value from drop-down list.
• Jlist allows a user to select one or more items from a list.
• Jmenu popup list of items from which the user can select.
• Jslider lets user select a value by sliding a knob.
• JTextField area for entering a single line of input.
• …..
 Composants de base pour afficher
l’information
• JLabel contains text string, an image, or both.
• JProgressBar communicates progress of some work.
• JToolTip describes purpose of another component.
• JTree a component that displays hierarchical data in outline form.
• JTable a component user to edit and display data in a two-
dimensional grid.
• JTextArea, JTextPane, JEditorPane
– define multi-line areas for displaying, entering, and editing text.
Swing components: Illustration
La bibliothèque SWING
Les Composants - JComponent
Tous les composants (excepté les conteneurs de haut niveau) héritent de
la bibliothèque SWING héritent de la classe JComponent
●
Les composants ont, par conséquent, plusieurs méthodes en commun
tels que :
– void setVisible(boolean aFalg)
– void setEnabled(boolean aFalg)
– void setMaximumSize(Dimension d)
– …..(généralement des méthodes d’affichage en commun)
30
La bibliothèque SWING
Les Composants - JLabel

●
Utilisé comme étiquette : c’est une zone d’affichage d’un texte qui peut
être une indication ou un résultat à afficher
●
Constructeurs principaux : JLabel() et JLabel(String s)
●
Méthodes très utilisées :
– void setText(String s)
– String getText()

31
La bibliothèque SWING
Les Composants - JButton

●
Représente un objet graphique qui permet de réaliser une fonctionnalité
particulière de l’application. Un texte est affiché sur le bouton indiquant la
fonctionnalité qu’il réalise.
●
Hérite de la classe AbstractButton qui hérite elle même de JComponent
●
Constructeurs JButton() et JButton(String s)
●
Méthodes récurrentes :
– void setText(String) , String getText(), boolean isSelected(), void setIcon(Icon i)

32
La bibliothèque SWING
Les Composants - JTextField

●
Représente un objet graphique qui représente une zone de texte de saisie. Elle Peut
être aussi utilisée pour l’affichage
●
Hérite de la classe JTextComponent qui hérite elle même de Jcomponent.
●
D’autres classes représente des zone de texte comme JTextArea, JEditorPane
●
Constructeurs JTextField() et JTextField(String s)
●
Méthodes récurrentes :
– void setText(String) , String getText(), String getSelectedText(), boolean
isEditable() , void cut(), void copy()
33
La bibliothèque SWING
Les Composants - JComboBox

●
Représente une liste déroulante d’Item dont un peut être sélectionné par
l’utilisateur.
●
Constructeurs JComboBox() et JComboBox(Vector<E> items)
●
Méthodes récurrentes :
– void addItem(E item) , String insertItemAt(int p), int itemCount(), int
getSelectedItemIndex(), E getSelectedItem(), boolean isEditable()

34
La bibliothèque SWING
Les Composants

●
Il existe plusieurs autres composants tels que :
– JCheckBox
– JRadioButton
– JButtonGroup
– JTable
– JPasswordField

35
 Événement et composants
• Les événements sont des objets
• Sous-classes de la class abstraite java.awt.AWTEvent.
• Les composants génèrent des événements
• Événements: chaque interaction de l’utilisateur sur un
composant génère un événement
– Bouger la souris
– Cliquer sur un bouton
– Fermer une fenêtre
– …
• Un événement contient des informations: source, type
d’événement, …
public Object getSource();
– Utile pour détecter d’où provient l’événement
 Propagation et traitement des événements
Composant a: Objet b qui capte
Génère un e l’événement de
événement e l’objet a, du type T:
du type T Traitement de e
• Les événements sont générés et propagés
• Certains autres objets sont capables de capter des événements des types spécifiés,
provenant de ces composants
– b écoute les événements du type T venant de a
– b est un listener de a
• On peut activer le traitement suite à la capture d’un événement
– Le traitement lancé par l’objet b

• Programmation par événement

– Le programme réagit aux événements
 Listener et Event handler: donner la capacité
d’entendre un événement
• Listener: Un objet est intéressé à écouter l’événement produit (être signalé
quand il y a un événement)
• Listener doit implanter l’interface EventListener interface associée à chaque
type d’événement.
• Event Handler: le programme qui lance un traitement suite à un événement
• Exemple
public class Capteur implements ActionListener
{
public void actionPerformed(ActionEvent e) { … }
}
 Donner la capacité d’écoute
class <class_name> implements <EventListener>
{
<attributes / methods of the class>
<implementation of all the required methods >
}

La classe est capable de capter les événements du type

<EventListener>
Exemple
public class Capteur implements ActionListener
{
public void actionPerformed(ActionEvent e) { … }
}
 public PlayBalloon() {
setTitle("Balloon");
Un autre exemple setLayout(new FlowLayout());

grow = new Button("Grow");

add(grow);
grow.addActionListener(this);
import java.awt.*;
import java.awt.event.*; shrink = new Button("Shrink");
add(shrink);
public class PlayBalloon extends Frame shrink.addActionListener(this);
implements ActionListener,
WindowListener exit = new Button("Exit");
{ add(exit);
private Button grow, shrink, exit; exit.addActionListener(this);
private Balloon myBalloon;
myBalloon = new Balloon(20, 50, 50);
public static void main(String[] args) {
PlayBalloon f = new PlayBalloon(); this.addWindowListener(this);
f.setSize(300, 300);
f.setVisible(true); } // fin constructeur PlayBalloon
}
public void actionPerformed(ActionEvent event) {
if (event.getSource() == grow) class Balloon {
myBalloon.changeSize(10); private int diameter;
Réactions Ballon private int xCoord, yCoord;
if (event.getSource() == shrink)
myBalloon.changeSize(-10);
repaint(); Balloon (int initialDiameter, int
initialX, int initialY) {
if (event.getSource() == exit) diameter = initialDiameter;
System.exit(0); xCoord = initialX;
} yCoord = initialY;
public void windowClosing(WindowEvent event) { }
System.exit(0);
} public void changeSize (int
public void windowIconified(WindowEvent event) {} change) {
public void windowOpened(WindowEvent event) {} diameter = diameter+change;
public void windowClosed(WindowEvent event) {} }
public void windowDeiconified(WindowEvent event) {}
public void windowActivated(WindowEvent event) {} public void display (Graphics g) {
public void windowDeactivated(WindowEvent event) {} g.drawOval (xCoord, yCoord,
diameter, diameter);
public void paint (Graphics g) { }
myBalloon.display(g); }
}
}
Conception des GUI – Les IDE

●
Tout ça est très compliqué !! Heureusement il y a les IDE (Intergrated
Developpement Envirenement) tels que Netbeans, Eclipse, IntelliJ, …
●
Ces IDE fournissent une interface de conception qui génère le code
nécessaire pour la conception des GUI ce qui rend la tâche beaucoup
plus facile au développeur.

42