C7-Programmation Graphique

Part 7
LA PROGRAMMATION
GRAPHIQUE EN JAVA
Interface utilisateur
 Beaucoup de programmes informatiques nécessitent

 L'affichage de questions posées à l'utilisateur
 L'entrée de données par l'utilisateur
 L'affichage d'une partie des résultats obtenus
 Cet échange d'informations peut s'effectuer avec une interface

utilisateur en mode texte (ou console) ou en mode graphique.
 Une interface graphique est formée d'une ou plusieurs fenêtres
contenant divers composants graphiques (widgets) tels que :
 Boutons, listes déroulantes, menus, champ texte, etc.
 Les interfaces graphiques sont souvent appelées GUI (Graphical User

Interface) ou IHM (Interface Homme Machine)
Prof Asmaa El Hannani ISIC-S1 334
1
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" :

 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.
 Les boîtes à outils graphiques offrent des facilités pour utiliser

et gérer la file d'attente des événements.
L'interface graphique d'une application Java
 Bibliotheque JFC (Java Foundation Classes) :

 AWT (Abstract Windowing Toolkit)
 premiere version, rôle important dans le succes de Java
 composants lourds, c-a-d. apparies avec des composants natifs
 Swing
 construit au-dessus de AWT
 composants bien plus nombreux et perfectionnes
 composants légers, « 100% pur Java »
 Attention aux noms des composants:

 AWT : Frame, Button, Panel...
 Swing : JFrame, JButton, JPanel...
2
Swing ou AWT ?
 Tous les composants de AWT ont leur équivalent dans Swing,

avec plus de fonctionnalités
 Swing offre de nombreux composants qui n'existent pas ans

AWT
 Mais utilise encore le modèle de gestion d'évènements de AWT
 Il est fortement conseillé d'utiliser les composants Swing, dont

nous ferons l'introduction ici.
Paquetages principaux
 AWT : java.awt et java.awt.event
 Swing : javax.swing et javax.swing.event, et tout un

ensemble de sous-paquetages de javax.swing.
3
Principaux composants Swing
 Les composants du package Swing héritent de la classe

JComponent
 Hiérarchie d'héritage
java.lang.Object
+--java.awt.Component
+--java.awt.Container
+--javax.swing.JComponent
Principaux composants Swing

 JFrame : fenêtre
 JPanel : panneau d'ensemble de composants
 JTextField : zone de texte
 JLabel : étiquette
 JCheckBox : case à cocher
 JRadioButton : bouton radio
 JList : zone de liste
 JComboBox : liste déroulante
 JMenu : menu
 JToolBar : barre d’outils
 etc, etc...
4
Créer une interface
La fenêtre JFrame
5
La fenêtre JFrame
Fichier Simple1.java
La fenêtre JFrame
 Attention: la case de fermeture n'est pas opérationnelle

(le cadre disparaît mais l'application ne se termine pas)
6
La fenêtre JFrame
 Une manière pour régler cette affaire de la case de fermeture :

Le panneau JPanel
 Composant rectangulaire capable de recevoir des composants graphiques

et qui permet de définir dans une fenêtre plusieurs zones .
 Pour ajouter le panneau à la fenêtre cadre on utilise:

JPanel p = new JPanel();
cadre.setContentPane(p);
 Par défaut une fenêtre contient un conteneur de classe Container donc

on peut définir un panneau dans la fenêtre courante par
JPanel p = (JPanel)getContentPane();
7
Le panneau JPanel
 Mettons un panneau rouge dans le cadre :
Le panneau JPanel
 Mettons un panneau rouge dans le cadre :
8
Le panneau JPanel
 Quelque chose dans le cadre, une autre approche :
Le panneau JPanel
9
Ajout de composants
 Les composants sont placés dans un panneau.

 Pour placer un composant on l'ajoute au conteneur par la
méthode add de Jpanel.
 Mais la méthode add ajoute toujours le composant au même
endroit dans le conteneur.
 Ainsi lorsqu'on veut ajouter plusieurs composants dans le
panel, seul le dernier composant apparaît.
 Il faut donc répartir les composants!
Répartition des composants
 Pour gérer la disposition des composants

 il faut avoir recours à un gestionnaire de répartition
 qui précise pour chaque conteneur l'organisation des composants
 Les gestionnaires de répartition appartiennent au package

java.awt
 FlowLayout
 GridLayout
 BorderLayout
10
FlowLayout
 Place les composants les uns à la suite des autres ligne par
ligne en passant à la ligne suivante si nécessaire
 Possède 3 constructeurs :
 FlowLayout()
 FlowLayout(int align)
où align est l’alignement ( LEFT, CENTER, RIGHT)
 FlowLayout(int align, int hgap, int vgap)
où hgap est l'espacement horizontal (donc d’une colonne à une
autre) et vgap l'espacement vertical
FlowLayout
Fichier TestFlowLayout.java
11
FlowLayout
GridLayout
 Place les composants dans une grille
 Possède 3 constructeurs :
 GridLayout()
 GridLayout(int rows, int col) où rows est le

nombre de lignes et col le nombre de colonnes
 GridLayout(int rows, int col, int hgap,
int vgap)idem au précédent plus hgap qui représente
l'espacement horizontal (donc d’une colonne à une autre) et
vgap l'espacement vertical
12
GridLayout
Fichier TestGridLayout.java
GridLayout
13
BorderLayout
 Ce gestionnaire découpe l'écran en 5 régions

 south north east west center
 Il n'y a qu'un seul composant par région
 Répartition NORTH
 La largeur l’emporte pour le Nord et le Sud
 La hauteur l’emporte pour l’Est et l’Ouest WEST CENTER EAST
 Le centre occupe tout ce qui reste SOUTH

 Utilisation
 add(unBouton, BorderLayout.NORTH)
 new BorderLayout(int, int)
 Intervalles horizontal et vertical entre les éléments
BorderLayout
Fichier TestBorderLayout.java
14
BorderLayout
Positionnement absolu
 Pour placer les composants à un endroit précis, il faut indiquer

qu'on utiliser pas de LayoutManager
ObjetConteneur.setLayout(null);
 Et on indique les coordonnées et la taille de chaque composant

Composant.setBounds(x, y, larg, haut);
x est le déplacement par rapport à la gauche du conteneur
y est le déplacement par rapport au haut du conteneur
15
Positionnement absolu
 Exemple de positionnement absolu

// positionnement absolu
c.setLayout(null);
bouton1.setBounds(0,0,100,150);
c.add(bouton1);
text1.setBounds(0,150,100,150);
c.add(text1);
label1.setBounds(0,300,100,150);
c.add(label1);
 Mais les composants ne sont pas redimensionnés en cas de

modification de la taille de la fenêtre
Comment répartir ?
 Pour concevoir une interface graphique

 on la découpe en parties, chaque partie étant un conteneur
Jpanel géré par un gestionnaire de répartition
 les différents panneaux seront ajoutés au conteneur implicite de
la fenêtre
 Exemple: Comment obtient-on les interfaces usuelles avec ces

quelques gestionnaires; TestLayoutComplexe.java
16
Layout Complexe
Layout Complexe
17
Layout Complexe
Layout Complexe
18
Les évènements
La gestion des évènements

 Certains composants du GUI doivent pouvoir réagir à des
interventions de l'utilisateur.
 Une action de l'utilisateur est traduite par un objet évènement.
 La gestion de l'évènement est déléguée à un écouteur

d'évènement (event listener) qui active le traitement
associé.
19
 Les objets événements:
 xxxEvent
 Contiennent la description et les caractéristiques d’un événement
 Les objets écouteurs:

 xxxListener ou xxxAdapter
 Concrétisent des méthodes définies dans les Interfaces
 Indiquent leur réaction en réponse aux événements
 Sont des interfaces implémentables dans les classes
 Peuvent être implémentés par les sources d’événements elles
mêmes (Une source d’événements peut « s’écouter » elle-même)

 Evénements
 ActionEvent, AdjustmentEvent, ComponentEvent, KeyEvent,
ContainerEvent, FocusEvent, ItemEvent, MouseEvent,
TextEvent, WindowEvent
 Les Interfaces Ecouteurs
 ActionListener, AdjustmentListener, ComponentListener,
ContainerListener, FocusListener, ItemListener,
KeyListener, MouseListener, MouseMotionListener,
WindowListener
 Les Adapteurs correspondants
 ActionAdapter, WindowAdapter, KeyAdapter, MouseAdapter,
etc.
 Les Sources d’événements
 Button, List, MenuItem, TextField, ScrollBar, CheckBox,
Component, Container, Window
20
Ecouteur et évènements
Description Interface d'écouteur Adaptateur Type événement
Actions sur un
ActionListener ActionEvent
composant
Ajustement d'une
AdjustementListener AdjustementEvent
barre de défilement
Sélection d'un élément ItemListener ItemEvent
Le composant reçoit
FocusListener FocusAdapter FocusEvent
ou perd le focus
Actions au clavier KeyListener KeyAdapter KeyEvent
Actions sur la souris MouseListener MouseAdapter MouseEvent
Actions de la souris MouseMotionAd
MouseMotionListener MouseEvent
sur un composant apter
Actions sur la fenêtre WindowListener WindowAdapter WindowEvent
Changement d'une
TextListener TexdEvent
zone de texte
Principe
 Le modèle événementiel fait intervenir trois catégories d'objets

 les objets sources (ex un bouton JButton) envoient aux objets
écouteurs des objets évènements.
 les objets écouteurs (ex ActionListener) déterminent
l'action à mener grâce à l'information contenue dans les objets
évènements qu'ils reçoivent.
 les objets événements (ex ActionEvent) sont des instances de
différentes classes évènements qui héritent de OjectEvent.
21
Démarche
 Le composant doit s’inscrire auprès d’un objet écouteur pour

chaque classe d’événements à traiter
composant.addXXXListener(objetEcouteur);
 Il faut indiquer que la classe de l’objet écouteur implémente

l’interface écouteur
 Puis redéfinir la ou les méthodes de l’interface écouteur pour
les événements à gérer comme par exemple la méthode
actionPerformed si l'interface est ActionListener
Détecter l'action sur un bouton pour changer la couleur du JPanel
Fichier TestEventBouton1.java
22
Détecter l'action sur un bouton pour
changer la couleur du JPanel
Lorsqu’on clique sur Rouge Lorsqu’on clique sur Vert
Détecter l'action sur un bouton pour changer le contenu d’un JLabel
Fichier TestEventBouton2.java
23
Détecter l'action sur un bouton pour changer
le contenu d’un JLabel
Lorsqu’on clique sur OK Lorsqu’on clique sur Vert
Les adaptateurs
 Rappel: une classe qui implémente une interface doit redéfinir

toutes les méthodes de l’interface
 Or certaines interfaces listener ont beaucoup de méthodes,

ce qui oblige à redéfinir des méthodes dont on n’a aucune
utilité.
 Pour remédier à cela Java propose des classes Adapter pour

certaines interfaces listener.
24
Les adaptateurs
 Au lieu d’implémenter l’interface il suffira d’hériter de la

classe Adapter.
 Dans ce cas le développeur ne redéfinit que les méthodes qui
l'intéresse.
 Java propose ainsi un ensemble de classe Adapter.
 Le principe de nommage est simple: une classe nommée
XXXAdapter correspond à l’interface écouteur
XXXListener .
Exemple:
 Réalisation d’une petite calculatrice basique :

Calculatrice.java
25
Autres composants
Les boîtes de dialogue standard
 On utilise la classe JOptionPane pour les boîtes de

dialogue standard prêtes à l'emploi.
 Quatre types de boîtes

 MessageDialog pour afficher un message
 ConfirmDialog pour une réponse de l'utilisateur avec Yes, No et
Cancel
 InputDialog pour une invite de saisie
 OptionDialog qui rassemble les caractéristiques des 3 autres types
de boîtes de dialogue
26
MessageDialog
Exemples:
 Utilisation d'une fenêtre de dialogue pour avoir un simple avertissement:

Dialogue1.java
 Utilisation d'une fenêtre de dialogue pour poser une question et récupérer la
réponse parmi YES, NO et CANCEL: Dialogue2.java
 Utilisation d'une fenêtre de dialogue pour poser une question et récupérer la
réponse dans un choix libre: Dialogue3.java
 Utiliser une fenêtre de dialogue pour saisir une chaîne de caractères:
Dialogue5.java
 Une fenêtre de dialogue pour choisir une couleur : JColorChooser:
Couleurs.java
 Une fenêtre de dialogue pour choisir un fichier : JFileChooser :
EssaiChoixFichier.java
27
Les menus
 Il existe plusieurs classes pour créer des menus en Java

 JMenu qui sert à créer un menu
 JMenubar sert à créer une barre de menus
 JPopup sert à créer un menu déroulant
 JMenuItem est un item d’un menu.
 JCheckBoxMenuItem est un item d’un menu que l’on peut cocher
 JRadioButtonMenuItem est un item avec un puce Radio
Exemple
 Exemple: Menu1.java
28
Graphisme 2D
 Tout ce qui est nécessaire aux graphismes en 2D est fourni par

la classe Graphics
 Chaque composant est toujours doté d’un objet de ce type
 Graphics g
 On peut donc invoquer, sur cet objet graphique « g », toutes

les méthodes de graphisme:
 g.drawLine(int, int, int, int)
 g.drawRect(int, int, int, int)
 g.fillOval(int, int, int, int)
 g.setColor(Color)
 Etc.
Graphisme 2D: Classe Rectangle
 Classe fournie dans le package java.awt

 Idéale pour servir de squelette à la plupart des objets graphiques
 On peut inscrire toutes les formes dans un rectangle
 Attributs publics:
 int x,y, width, height
 Méthodes publiques
 contains(int x, int y)
 Renvoie true si les coordonnées sont contenues dans le rectangle
 contains(Rectangle r)
 Renvoie true si le rectangle r est contenu dans le rectangle en cours
 intersects(Rectangle r)
 Renvoie true si le rectangle r touche le rectangle en cours
 …
29
Exemple
 Dans l’exemple: Clics.java, vous dessinez, en cliquant un petit

cercle ou un disque de couleur aléatoire.
 Essayez les trois boutons de la souris, et appuyez aussi en

même temps sur la touche "shift". Vous devez constater une
différence.
Documentation
 Pour plus de détails et exemples visitez:

http://docs.oracle.com/javase/tutorial/uiswing
30

C7-Programmation Graphique

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

C7-Programmation Graphique

Uploaded by

Copyright:

Available Formats

Part 7

 Beaucoup de programmes informatiques nécessitent

 Cet échange d'informations peut s'effectuer avec une interface

 Les interfaces graphiques sont souvent appelées GUI (Graphical User

Prof Asmaa El Hannani ISIC-S1 334

 L'utilisation d'interfaces graphiques impose une façon

 La programmation "conduite par les événements" :

 Les boîtes à outils graphiques offrent des facilités pour utiliser

Prof Asmaa El Hannani ISIC-S1 335

L'interface graphique d'une application Java

 Bibliotheque JFC (Java Foundation Classes) :

 Attention aux noms des composants:

Prof Asmaa El Hannani ISIC-S1 336

 Tous les composants de AWT ont leur équivalent dans Swing,

 Swing offre de nombreux composants qui n'existent pas ans

 Il est fortement conseillé d'utiliser les composants Swing, dont

Prof Asmaa El Hannani ISIC-S1 337

 AWT : java.awt et java.awt.event

 Swing : javax.swing et javax.swing.event, et tout un

Prof Asmaa El Hannani ISIC-S1 338

 Les composants du package Swing héritent de la classe

Prof Asmaa El Hannani ISIC-S1 339

Principaux composants Swing

Prof Asmaa El Hannani ISIC-S1 340

Prof Asmaa El Hannani ISIC-S1 342

Prof Asmaa El Hannani ISIC-S1 343

 Attention: la case de fermeture n'est pas opérationnelle

Prof Asmaa El Hannani ISIC-S1 344

 Une manière pour régler cette affaire de la case de fermeture :

Prof Asmaa El Hannani ISIC-S1 345

 Composant rectangulaire capable de recevoir des composants graphiques

 Pour ajouter le panneau à la fenêtre cadre on utilise:

 Par défaut une fenêtre contient un conteneur de classe Container donc

Prof Asmaa El Hannani ISIC-S1 346

Prof Asmaa El Hannani ISIC-S1 347

 Mettons un panneau rouge dans le cadre :

Prof Asmaa El Hannani ISIC-S1 348

Prof Asmaa El Hannani ISIC-S1 349

Prof Asmaa El Hannani ISIC-S1 350

 Les composants sont placés dans un panneau.

Prof Asmaa El Hannani ISIC-S1 351

Répartition des composants

 Pour gérer la disposition des composants

 Les gestionnaires de répartition appartiennent au package

Prof Asmaa El Hannani ISIC-S1 352

Prof Asmaa El Hannani ISIC-S1 353

Prof Asmaa El Hannani ISIC-S1 354

Prof Asmaa El Hannani ISIC-S1 355

 GridLayout(int rows, int col) où rows est le

Prof Asmaa El Hannani ISIC-S1 356

Prof Asmaa El Hannani ISIC-S1 357

Prof Asmaa El Hannani ISIC-S1 358

 Ce gestionnaire découpe l'écran en 5 régions

 Le centre occupe tout ce qui reste SOUTH

Prof Asmaa El Hannani ISIC-S1 359

Prof Asmaa El Hannani ISIC-S1 360

Prof Asmaa El Hannani ISIC-S1 361

 Pour placer les composants à un endroit précis, il faut indiquer

 Et on indique les coordonnées et la taille de chaque composant

Prof Asmaa El Hannani ISIC-S1 362

 Exemple de positionnement absolu

 Mais les composants ne sont pas redimensionnés en cas de

 Pour concevoir une interface graphique