Cours Ihm Afdel
Cours Ihm Afdel
Cours Ihm Afdel
1- Introduction
Dans ce cours nous intéresser à la mise en œuvre
d’interfaces graphiques en Java.
Comme nous allons le voir, il vous est possible de créer
toutes sortes d'interfaces, et d'y inclure tous types de
composants : des boutons, des cases à cocher, des zones
de saisie de texte, ...etc.
Ou peut y inclure des composants plus complexes : des
menus, des arbres déroulant, des list, des boîtes de
dialogue pour choisir des fichiers, des couleurs;
Mais avant d'aller plus loin il nous faut être capable de
faire un choix. En effet, deux API de définition
d'interface graphique vous sont proposées : l'Abstract
Window Toolkit (l'AWT) et Swing.
Chaque fois que l'utilisateur interagit avec un composant, un
événement est envoyé à l'application
Différents événements sont envoyés à différentes parties de
l'application
1.1 L'Abstract Window Toolkit (l'AWT)
L'Abstract Window Toolkit AWT est historiquement la première
qui vous fut proposée. Dès le JDK 1.0, vous pouviez déjà l'utiliser.
La contrainte de l'AWT, ou l'avantage (c'est à double tranchants),
c'est que Java fait appel au système d'exploitation sous-jacent
pour afficher les composants graphiques.
Pour cette raison, l'affichage de l'interface utilisateur d'un
programme peut diverger sensiblement : chaque système
d'exploitation dessine à sa manière un bouton. Attention, l'AWT
garantie que la fonctionnalité recherchée sera dans tous les cas
fournie (mais présentée différemment).
Or Java se veut être 100% indépendant de la plate-forme utilisée !
Pas 99%.
Pour cette raison, une nouvelle API (Swing)fut définie. Mais
hormis ce détail d'affichage, l'AWT présente un avantage
indéniable : en utilisant les objets graphiques de l'OS.
1.2 Swing
SWING fut donc mis en place pour assurer 100% de portabilité (même un pixel
doit avoir la même couleur).
Le pari est gagné, mais à un coup non forcément négligeable : pour assurer
cette portabilité, un bouton (au tout autre composant graphique) est dessiner
non plus par l'OS, mais par Java (ce qui en terme de temps d'exécution à un
prix).
En fait, SWING est présenté comme étant écrit uniquement en Java. Bien
entendu, il y a une petite triche : en effet, Java doit au moins être capable
d'interagir avec l'OS pour pouvoir tracer un point (il faut donc autre chose que
du 100% Java). Or c'est ce que font les classes de base de l'AWT (telles que
Component, Container, ...). En conséquence, tous les composants de SWING
dérive d'une classe de l'AWT.
Note !!!
les mécanismes de gestion d'événements et de positionnent des composants de
l'AWT restent utilisable avec SWING. Donc, certaines clàsses déjà utilisées avec
l'AWT sont donc toujours d'actualité.
En terme d'importation de package, cela implique qu'un programme SWING
doit malgré tout importer certains packages de l'AWT.
Swing est bien plus riche que l'AWT (même si un composant n'existe pas en
natif sur l'OS, rien n'empêche de complètement le redessiner)
13-L'Abstract Window Toolkit a'AWT)
Commencant par étudier l'un des packages les plus apprécié de Java : le
package java.awt.
Ce package propose un certain nombre de fonctionnalités qui vont vous
permettre de créer très simplement des interfaces graphiques.
D’autres mécanisais mis à notre disposition pour gérer les événements
tel un clic souris par exemple.
Les diverses natures d'objets graphiques
Nous avons à notre disposition principalement trois types d'objets :
les Components qui sont des composants graphiques,
Les Containers qui contiennent les Components (attention un Container
est aussi un Component)
Les Layouts qui sont en fait des stratégies de placement de Components
pour les Containers.
Conteneurs
Tous les conteneurs dérivent de la classe Container. Nous y trouvons
notamment les classes :
Panel,
Frame
Applet.
Un Panel est un conteneur que l'on peut placer dans un autre conteneur. Une
Frame est une fenêtre à part entière. Nous reviendrons sur la classe Applet dans
le chapitre suivant.
On trouve notamment les méthodes add et remove qui permettent d'ajouter et
de supprimer des composants d'un conteneur.
L’exemple suivant créer une Frame dans laquelle on place un bouton.
comment savoir qu'un événement a e u lieu, et comment allions nous pouvoir y répondre?
1-définir un écouteur,
2- enregistrer ce dernier sur un objet susceptible de déclencher un événement. Ainsi, si l'événement
apparaît, il pourra être traité par l'écouteur.
Plusieurs types d'écouteurs, donc plusieurs types d'interfaces. Toutes ces interfaces ont un nom se
terminant par Listener (par exemple ActionListener, WindowListener, ...). Selon l'interface, il y a une ou
plusieurs méthodes à implémenter.
A titre d'exemple :
considérons l'événement ActionEvent : cet événement est déclenché dès lors que l'on action un bouton
(par exemple) soit en cliquant dessus avec la souris soit en utilisant le clavier. Pour être capable d'écouter
et de traiter un tel événement, un objet écouteur se doit d'implémenter une
interface nommée ActionListener. Si vous êtes curieux et que vous étudier l'interface ActionListener,
vous remarquerez qu'elle ne contient qu'une unique méthode à implémenter : actionPerformed. Cette
méthode doit donc contenir le code à exécuter si jamais vous cliquez sur votre bouton.
chaque écouteur doit être enregistré auprès des objets qu'il est censé écouter (un écouteur peut écouter
plusieurs sources d'événements - une source d'événement peut alerter plusieurs écouteurs).
L'exemple suivant enregistre l'écouteur à une source d'événements.
import j ava.awt.* ;
import j ava.awt.event.* ;
public class TestEvent implements ActionListener { Qu'a permit de faire la
Button bl=newButton("Enregistrer"); méthode addActionListener ?
Button b2=newButton("Anuuler"); 1 - Rajouter un écouteur au
Button b3=newButton("Quiter");
bouton.
Label mes=new Label("Etat de clic ");
2 - A chaque fois que le bouton
public TestEvent () {
Frame f = new Frame("Ma fenêtre"); est actionné, il cherche
f.setBounds(10,10,4 00,4 00 ) ; maintenant à invoquer la
f.setLayout(new FlowLayout()); méthode actionPerformed sur
chacun de ses écouteurs.
bl.addActionListener(this);
b2.addActionListener(this);
b3.addActionListener(this);
MouseListener
Clic, enfoncement/relâchement des boutons de la souris, etc.
MouseMotionListener
Déplacement de la souris, drag&drop avec la souris, etc.
AdjustmentListener
Déplacement d'une échelle
ComponentListener
Savoir si un composant a été caché, affiché …
ContainerListener
Ajout d'un composant dans un Container
Catégories d'événements graphiques (6)
FocusListener
Pour savoir si un élément a le "focus"
KeyListener
Pour la gestion des événements clavier
Catégories d'événements graphiques (7)
import java.awt.*;
import java.awt.event.*;
public class EssaiActionEvent1 extends Frame
implements ActionListener Implémentation de
{ l'interface ActionListener
public static void main(String args[])
{EssaiActionEvent1 f= new EssaiActionEvent1();}
On enregistre l’écouteur
public EssaiActionEvent1()
d’evt action auprès de
{ l’objet source "b"
super("Utilisation d’un ActionEvent");
Button b = new Button("action");
b.addActionListener(this); Lorsque l'on clique sur le
add(BorderLayout.CENTER,b);pack();show(); bouton dans l ’interface,
} le titre de la fenêtre
public void actionPerformed( ActionEvent e ) change
{
setTitle("bouton cliqué !");
}}
Catégories d'événements graphiques (8)
public class EssaiActionEvent2 extends Frame
implements ActionListener
{ private Button b1,b2;
public static void main(String args[])
Les 2 boutons ont le
{EssaiActionEvent2 f= new EssaiActionEvent2();}
même écouteur (la
public EssaiActionEvent2(){
fenêtre)
super("Utilisation d’un ActionEvent");
b1 = new Button("action1"); e.getSource()" renvoie
b2 = new Button("action2"); l'objet source de
b1.addActionListener(this); l’événement. On
b2.addActionListener(this); effectue un test sur
add(BorderLayout.CENTER,b1); les boutons (on
add(BorderLayout.SOUTH,b2); compare les
pack();show(); } références)
public void actionPerformed( ActionEvent e ) {
if (e.getSource() == b1) setTitle("action1 cliqué");
if (e.getSource() == b2) setTitle("action2 cliqué");
}}
Catégories d'événements graphiques (9)
plus visible
OK Ouvrir Redimensionnement
OK Ouvrir Fermer
Fermer
FlowLayout (4)
Redimensionnement
Redimensionnement
FlowLayout (5)
Redimensionnement
Redimensionnement
FlowLayout (6)
Le FlowLayout cache réellement et effectivement les composants
qui ne rentrent pas dans le cadre.
Le FlowLayout n'a d'intérêt que quand il y a peu de composants.
L'équivalent vertical du FlowLayout n'existe pas
La présentation FlowLayout positionne les composants ligne par
ligne.
Chaque fois qu'une ligne est remplie, une nouvelle ligne est
commencée.
Le gestionnaire FlowLayout n'impose pas la taille des composants
mais leur permet d'avoir la taille qu'ils préfèrent.
Gestionnaire de présentation : BorderLayout
NORTH
SOUTH
BorderLayout (3)
import java.awt.*;
N N
Redimensionnement
O C E
O C E
S
S
BorderLayout (7)
Redimensionnement
Redimensionnement
Gestionnaire de présentation : GridLayout (1)
Le GridLayout dispose les composants dans une grille.
Découpage de la zone d'affichage en lignes et en colonnes
qui définissent des cellules de dimensions égales.
Chaque composant à la même taille
quand ils sont ajoutés dans les cellules le remplissage
s ’effectue de gauche à droite et de haut en bas.
Les 2 paramètres sont les rangées et les colonnes.
Construction d'un GridLayout :
new GridLayout(3,2);
1 2 Redimensionnement 1 2
3 4 3 4
5 6 5 6
GridLayout (5)
Redimensionnement
Mise en forme complexe (1)
super("AppliComplexeLayout");
setLayout(new BorderLayout());
Panel pnorth = new Panel();
pnorth.add(b1); pnorth.add(b2);
pnorth.add(b3); pnorth.add(b4);
this.add(pnorth,BorderLayout.NORTH);
FlowLayout
Flux : composants placés les uns derrière les autres
BorderLayout
Ecran découpé en 5 zones (« North », « West », « South », « East »,
« Center »)
GridLayout
Grille : une case par composant, chaque case de la même taille
Hiérarchie de la librairie AWT
AWT et Swing 60
AWT et Swing 61
Conteneurs spécifiques
AWT et Swing 62
Fenêtres
AWT et Swing 63
AWT et Swing 64
Boites de dialogues spécifiques
AWT et Swing 65
Applets
AWT et Swing 66
Menus
AWT et Swing 67
La Classe JComponent
Les Frames « Fenêtres »
Classe javax.swing.JFrame
Le conteneur principal d’ une application Swing est la classe JFrame•
JRootPane (Panneau Racine) lui même est un conteneur de plusieurs •
panneaux enfants
Le JRootPane contient les éléments suivants :
•glassPane (un JPannel par défaut)
•layeredPane (un JLayeredPane)
•contentPane (un JPannel par défaut)
•menuBar (un JMenuBar null par défaut)
setActionCommand(String) et addActionListener(ActionEvent)
peuvent être utiliser pour prendre en compte des actions
évènements.
Création d’objets boutons Radio
SexeMasculin = new JRadioButton("Male", true );
SexeFeminin = new JRadioButton("Female", false );
JListe prend ses données dans un ListModel. Un vecteur en est un, mais
tout tableau d’objets (Object [ ]) est accepté dans un constructur.
JPanel lsPanel=new JPanel(New FlowLayout(FlowLayout.LEFT);
String[] donnees=
{"Motif","AWT","Windows","Swing","Xwindows","Gnome"};
JList ls=new JList(donnees);
lsPanel.add(new JScrollPane(ls));
getContentPane().add( lsPanel );
Ajouter et Supprimer dans une liste
On ajoute au modèle
Jlist ls ….
ls.getModel().addElement(string);// ajout à la fin de la liste
Ls.getModel().add(position, string);
On recherche du modèle:
Jlist ls….
ls.getModel().remove(position);
On récupère les positions sélectionnées par :
Int [] position =ls.getSelectionIndices();
Int position = ls.getSelectedIndex();
Objet [] values=ls.getSelectionValues();
Objet value=ls.getSelectedValue();
Boutons à cocher