TP Ihm

TP IHM
Interaction Homme Machine

3ème Année Licence (SI et ISIL)
1
Introduction
 IHM: Interaction Homme Machine est généralement réalisée à travers des interfaces graphiques
(GUI: Graphical User Interface) permettant d’assurer la communication entre l’humain et la machine.
 L’implémentation des interfaces graphiques s’appuie sur la programmation événementielle basée sur:
 La création de composants graphiques (boutons, menus, champs de saisie, …) sur une interface;
 La gestion des événements déclenchés par un utilisateur sur ces composants
Exemples:
• Clic bouton pour quitter,
• Saisie du nom sur une zone texte pour la stocker dans une BDD,
• Choix des produits à acheter par sélection sur des cases à cocher, …
 La programmation événementielle peut être réalisée avec n’importe quel langage de programmation
en utilisant des librairies graphiques, par exemples :
 Java : - AWT (Abstract Windowing Toolkit); - Swing ; - SWT(Standard Widget Toolkit);
 C++ : Qt ;
Python : - TKinter
2
IHM en JAVA
 Java comprenait dans sa première version (1.0), seule la librairie AWT pour implémenter des
interfaces graphiques.
• L’utilisation des composants de AWT est considérée lourde puisque la création et la gestion de ces
composants sont fortement liées au système d’exploitation :
- Par exemple: l’instanciation d’un objet par Button de AWT fait appel au composant bouton du
système d’exploitation (bouton windows sous windows).
 Inconvénients de AWT:
• Problèmes de compatibilité, à titre d’exemples:
• La gestion de dispositions des composants graphiques diffèrent d’un système à un autre;
• Certains composants se comportent différemment d’un système à un autre.
 La librairie Swing:
• La librairie Swing fut apparue dans la version java (1.2) pour résoudre les problèmes liés à AWT.
• L’implémentation des interfaces graphiques avec Swing repose sur des composants purement
java, qui sont légers et simples à utiliser.
3
La librairie Swing
 Tous les composants de Java Swing descendent de la même classe => JComponent
 JComponent descend elle-même de la classe Container de AWT.
 Cette hiérarchisation permet de mettre en œuvre facilement les composants et d’en créer d’autre à
l’aide de l’héritage (proposer des méthodes communes à tous les composants).
 Tous les composants de Swing commencent par la lettre J, et se trouvent dans le paquage javax.swing.*.
4
La librairie Swing
5
La librairie Swing
 La création d’une interface graphique, avec Java Swing, repose sur les
quatre éléments principaux suivants:
 Une fenêtre (Frame) : qui est créée en utilisant la classe JFrame;
 Des panneau (Panel) : contenant tous les boutons, les champs textuels et
autres composants. Ils sont créés à l’aide de la classe JPanel.
 Des composants graphiques : tels que les boutons (JButton), une zone
de texte (JTextField), …etc. Les interactions sur ces composants sont
gérées et contrôlées via des méthodes prédéfinies ou créées (Gestion des
événements).
 Des gestionnaire de disposition (LayoutManager): permettent

d’organiser tous les composants graphiques sur un panneau (panel)
6
La classe JFrame
 Les applications graphiques sont principalement construites à partir de la classe
de base JFrame. Cette dernière permet de construire une fenêtre comportant une
bordure, un titre, une taille et une localisation sur ecran.
 Les méthodes de la classe Jframe permettent de choisir les propriétés de la
fenêtre:
Exemples:
 Ajouter le titre de la fenêtre: setTitle(String title);
 Dimensionner la fenêtre(x, y: taille en pixel): setSize(int x, int y);
 Interdire ou autoriser le redimensionnement de la fenêtre selon la valeur de
x (true ou false ): setResizable(boolean x);
 Positionner la fenêtre au centre de l'écran
setLocationRelativeTo(null);
 Visualiser ou cacher la fenetre: setVisible(boolean x);
 Arreter le processus d'exectution en fermant la fenêtre par la croix:
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
7
La classe JFrame
 Remarque:
 Pour situer la fenêtre sur une position bien définie de l’écran, il suffit
d’appliquer la méthode setLocation(int X, int Y).
 Les coordonnées (x,y), exprimées en pixels, sont basées sur un repère,
dont O l'origine est représentée par le coin supérieur gauche.
- les valeurs de X positives déplacent la fenêtre vers la

droite tandis que les négatives la font sortir de l'écran
par la gauche.
- Les valeurs positives de Y font descendre la fenêtre
depuis l'origine tandis que les négatives la font sortir
par le haut de l'écran.
8
La classe JFrame
 Exemple 1:
import javax.swing.JFrame;
public class MyFrame extends JFrame{ //Etendre la classe JFrame
public MyFrame() {
this.setTitle("Titre de la fenêtre ");
this.setSize(800, 600);
this.setResizable(false);
this.setLocationRelativeTo(null);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setVisible(true);
public static void main(String[] str){

MyFrame fenetre1 =new MyFrame();
}
} 9
La classe JFrame
 Exemple 2:
import javax.swing.* ;
public class MyFrame {
public static void main(String args[]){
JFrame fenetre1 = new JFrame() ;
fenetre1.setTitle("Titre de la fenêtre ");
fenetre1.setSize(800, 600);
fenetre1.setResizable(false);
fenetre1.setLocationRelativeTo(null);
fenetre1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
fenetre1.setVisible(true);
}
}
10
La classe JFrame
 Résultat
11
La classe JFrame
Ajouter un contenu
 Les éléments de l’IHM sont placés dans des panneaux (Jpanel de Swing)
 Nous pouvons utiliser le panneau par défaut d’une fenêtre JFrame (pour
le récupérer, appeler la méthode getContentPane() de la classe JFrame ,
pour le remplir, appeler la méthode add() de la classe JPanel)
 Il est possible d’instancier la classe JPanel qui a pour but d'accueillir

d'autres objets (boutons, cases à cocher…)
12
La classe JFrame
 Exemple 1: (utiliser le panneau par défaut)
public static void main(String args[])){
JLabel texte = new JLabel("Hello World");
fenetre1.getContentPane().add(texte); /* ajouter texte

dans le panneau par défaut */
}
} 13
La classe JFrame
 Résultat
14
La classe JFrame
 Exemple 2: (Instancier la classe JPanel)
public static void main(String args[]){
JLabel texte = new JLabel("Hello World");

JPanel panel = new JPanel();
panel.setBackground(Color.ORANGE);
panel.add(texte);
fenetre1.setContentPane(panel);
} 15
La classe JFrame
 Résultat
16
Les principaux composants graphiques
JLabel
 La classe JLabel peut afficher du texte, une image ou les deux.
Constructeurs de la classe
Principales méthodes
Constructeur Description
Crée une instance JLabel sans image Méthodes Description
JLabel()
et avec une chaîne vide pour le titre.
Renvoie le texte que
Crée une instance JLabel avec l'image String getText()
JLabel(Icon image) l'étiquette affiche.
spécifiée.
void setText(String text) Définit le texte à afficher.
Crée une instance JLabel avec le texte
JLabel(String text)
spécifié.
JLabel(String text, Icon Crée une instance de JLabel avec le
icon, int texte, l'image et l'alignement
horizontalAlignment) horizontal spécifiés.
17
JLabel
 Exemple:
Font font1 = new Font ("Garamond", Font.ITALIC, 25); //Définir police+style

JLabel label=new JLabel(); //Instanciation d'un objet par JLabel
label.setFont(font1); //Lui Associer le Font
label.setForeground(Color.black); //Couleur de l’écriture
label.setPreferredSize(new Dimension(50,25)); //Redimensionner la taille
label.setText("Message"); //Le texte de libellé
label.setHorizontalAlignment(JLabel.CENTER);//AlignementHorizontale centrée
18
JButton
 La classe JButton est une implémentation d'un bouton poussoir. Ce composant a
une étiquette et génère un événement lorsqu'il est pressé. Il peut également
avoir une image.
JButton() Crée un bouton sans texte ni icône.
JButton(Icon icon) Crée un bouton avec une icône.
JButton(String text) Crée un bouton avec un texte.
JButton(String text, Icon icon) Crée un bouton avec un texte et une icône.
19
JButton
 Exemple:
private JButton bouton=new JButton("OK");

bouton.setPreferredSize(new Dimension(100,50)); //redimensionner le bouton
bouton.setToolTipText("Appuyez sur OK"); //InfoBulle
bouton.setMnemonic('o'); //Raccourcis clavier (alt+'o')
20
JCheckBox
 La classe JCheckBox est une implémentation d'une case à cocher - un élément qui peut être
sélectionné ou désélectionné, et qui affiche son état à l'utilisateur.
JCheckBox() Crée une case à cocher sans texte ni icône.
JCheckBox(Icon icon) Crée une case à cocher avec une icône.

Crée une case à cocher avec une icône et spécifie si elle est initialement
JCheckBox(Icon, boolean)
sélectionnée ou non.
JCheckBox(String) Crée une case à cocher avec du texte.
Crée une case à cocher avec un texte et spécifie s'il est initialement
JCheckBox(String, boolean)
sélectionné ou non.
JCheckBox(String, Icon) Crée une case à cocher avec le texte et l'icône spécifiés.
Crée une case à cocher avec du texte et une icône et spécifie si elle est
JCheckBox(String, Icon, boolean)
initialement sélectionnée ou non.
21
JCheckBox
 Exemple:
JCheckBox jCheckBox1 = new JCheckBox("Produit1");

jCheckBox1.setMnemonic('p');
jCheckBox2.setMnemonic('r');
jCheckBox3.setMnemonic('d');
22
JRadioButton
 La classe JRadioButton est une implémentation d'un bouton radio - un élément qui
peut être sélectionné ou désélectionné, et qui affiche son état à l'utilisateur.
JRadioButton() Crée un bouton radio sans texte.
JRadioButton(Icon) Crée un bouton radio avec l'image spécifiée mais sans texte
Crée un bouton radio avec l'image et l'état de sélection spécifiés, mais pas de
JRadioButton(Icon, boolean)
texte.
JRadioButton(String, boolean) Crée un bouton radio avec le texte et l'état de sélection spécifiés.
Crée un bouton radio contenant le texte et l'image spécifiés et qui est
JRadioButton(String, Icon)
initialement désélectionné.
JRadioButton(String, Icon, Crée un bouton radio qui a le texte, l'image et l'état de sélection spécifiés.
boolean)
23
JRadioButton
 Exemple:
JRadioButton jRadioButton1 = new JRadioButton("Produit1", true);
JRadioButton jRadioButton2 = new JRadioButton("Produit2");
JRadioButton jRadioButton3 = new JRadioButton("Produit3");
jRadioButton1.setMnemonic('p');
jRadioButton2.setMnemonic('r');
jRadioButton3.setMnemonic('d');
//Group the radio buttons.

ButtonGroup group = new ButtonGroup();
group.add(jRadioButton1);
24
JComboBox
 La classe JComboBox est un composant qui combine un bouton ou champ
éditable et une liste déroulante.
Crée une JComboBox avec un modèle de données par
JComboBox()
défaut.
Crée un JComboBox qui contient les éléments du tableau
JComboBox(Object[] items)
spécifié.
25
JComboBox
Méthode Description
int getItemCount() Renvoie le nombre d'éléments de la liste.
int getSelectedIndex() Renvoie l‘indice de l’élément actuellement sélectionné.
Object getSelectedItem() Renvoie l'élément actuellement sélectionné.
void setEditable(boolean aFlag) Détermine si le champ JComboBox est modifiable.
void setEnabled(boolean b) Active le ComboBox afin que les éléments puissent être sélectionnés.
void setSelectedIndex(int anIndex) Sélectionne l'élément à l'index anIndex.
Définit l'élément sélectionné dans la zone d'affichage ComboBox sur
void setSelectedItem(Object anObject)
l'objet dans l'argument.
26
JComboBox
 Exemple:
DefaultComboBoxModel specialite = new DefaultComboBoxModel();
specialite.addElement("SI");
specialite.addElement("ISIL");
specialite.addElement("LPDWI");
specialite.addElement("TI");
JComboBox specialiteCombo = new JComboBox(specialite);
specialiteCombo.setSelectedIndex(0);
27
JTextField
 La classe JTextField est un composant qui permet l'édition d'une seule ligne de texte.
Constructor & Description

JTextField() Crée un nouveau TextField.
JTextField(int columns) Crée un nouveau TextField vide avec le nombre de colonnes spécifié.
JTextField(String text) Crée un nouveau TextField initialisé avec le texte spécifié.
JTextField(String text, int columns) Crée un nouveau TextField initialisé avec le texte et les colonnes spécifiés.
String getText() Renvoie le texte contenue dans le champ JTextField.
void setText(String text) Définit le texte à afficher.
void setFont(Font f) Définit la police.

28
JTextField
 Exemple
JTextField textField = new JTextField(15);

textField.setText("Algérie"); // Ajouter un text
textField.setHorizontalAlignment(JTextField.CENTER); //Aligner l'écriture au centre
29
JPasswordField
 La classe JPasswordField est un composant spécialisé dans la gestion de la fonctionnalité de mot
de passe et permettant l'édition d'une seule ligne de texte.
JPasswordField() Construit un nouveau JPasswordField, avec un texte nulle et une largeur de 0.
JPasswordField(int columns) Construit un nouveau JPasswordField vide avec le nombre de colonnes spécifié.
JPasswordField(String text) Construit un nouveau JPasswordField initialisé avec le texte spécifié.
JPasswordField(String, int) Construit un JPasswordField initialisé avec le texte et les colonnes spécifiés.
char[] getPassword() Renvoie le texte contenu dans ce champs.
String getText() Obsolète. À partir de la plate-forme Java 2 v1.2, remplacé par getPassword.
30
JTextArea
 La classe JTextArea est une zone multiligne pour afficher du texte.
JTextArea() Construit un nouveau TextArea.
Construit un nouveau TextArea vide avec le nombre spécifié de
JTextArea(int rows, int columns)
lignes et de colonnes.
JTextArea(String text) Construit un nouveau TextArea avec le texte spécifié affiché.
Construit un nouveau TextArea avec le texte spécifié et le nombre
JTextArea(String text, int rows, int columns)
de lignes et de colonnes.
void setColumns(int columns) Définit le nombre de colonnes pour ce TextArea.
void setFont(Font f) Définit la police.

void setRows(int rows) Définit le nombre de lignes pour ce TextArea.
31
Exercice:
 En utilisant les composants vues précédemment, créez une interface graphique qui permet à un
étudiant d’introduire ses informations pour une inscription
32
LayoutManager
Les Gestionnaires de disposition
33
LayoutManager
 Layout fait référence à l'arrangement des composants dans le conteneur, i.e. préciser comment placer les
composants à une position particulière à l'intérieur du conteneur.
 L'arrangement des composants est effectuée automatiquement par le gestionnaire de disposition (LayoutManager).
 Le gestionnaire de disposition positionne automatiquement tous les composants dans le conteneur. Même si vous
n'utilisez pas le gestionnaire de disposition, les composants sont toujours positionnés par le gestionnaire de
disposition par défaut.
 Java fournit divers gestionnaires de disposition pour positionner les composants. Les propriétés varient d'un
gestionnaire à l'autre. Lorsque la taille de la fenêtre change, la taille, la forme et la disposition des composants
changent également, c'est-à-dire que les gestionnaires de disposition s'adaptent aux dimensions de la fenêtre ( ce
qui assure la portabilité de l’IHM lors de l’affichage dans différents systèmes).
 Les principaux gestionnaires de disposition sont : FlowLayout, BorderLayout, BoxLayout, GridLayout, GridBagLayout
 Le gestionnaire de disposition est associé à chaque conteneur.
 Il est possible de positionner manuellement les composants, pour cela, il suffit de mettre le gestionnaire de
disposition d’un conteneur à null, puis ajouter les composants au conteneur en spécifiant leur position absolue
et leur taille voulue. Par exemple:
Panel.setLayout(null);
JButton ok = newJButton("OK");
ok.setBounds(x, y, width, height);
LayoutManager - FlowLayout
FlowLayout
 Est le gestionnaire de mise en forme par défaut de JPanel
 Il aligne horizontalement les composants dans un flux directionnel de gauche à droite tout en réservant leur taille
 Lorsque la ligne est atteinte (remplie), les composants suivants sont placés à la ligne suivante
Exemple:
LayoutManager - FlowLayout
import java.awt.*;
import javax.swing.*;
public class Fenetre_FlowLayout extends JFrame {
private JLabel label=new JLabel("NOM : ");
private JTextField entrée = new JTextField(10);
private JButton bouton1 = new JButton("Boutton1");
private JButton bouton2 = new JButton("Boutton2");
public Fenetre_FlowLayout(){ /**Définir un conteneur suivant la disposition FlowLayout**/
JPanel panel=new JPanel();
FlowLayout disposition=new FlowLayout();
panel.setLayout(disposition); //associer la disposition FlowLayout au conteneur panel
/** création des composants graphiques sur le conteneur**/
panel.add(label);
panel.add(entrée);
panel.add(bouton1);
panel.add(bouton2);
this.setTitle("Fenêtre avec FlowLayout");
. . .
this.setContentPane(panel); /**Associer à la fenêtre le conteneur panel***/
}
public static void main(String[]args){
Fenetre_FlowLayout fen=new Fenetre_FlowLayout ();
fen.setVisible(true);
}
36
}
LayoutManager - BorderLayout
 BorderLayout
 Est un gestionnaire qui décompose le conteneur en 5 région : Centre, Nord, Sud, Est, Ouest.
 Chaque région ne peut contenir qu'un seul composant et chaque composant dans chaque région est identifié
par les constantes NORTH, SOUTH, EAST, OUEST et CENTER correspondantes.
 C’est un gestionnaire de mise en forme par défaut des JFrame;
 Un composant est placé sur un conteneur en précisant la zone de son emplacement (exemple NORTH pour le
mettre dans la zone nord).
 Ce gestionnaire modifie la taille des composants afin qu’ils prennent tout l’espace possible;
 En cas de redimensionnement, seul le centre est redimensionner en hauteur et largeur.
LayoutManager - BorderLayout
import java.awt.*;
public class Fenetre_BorderLayout extends JFrame {
private JButton bouton1 = new JButton("NORD");
private JButton bouton2 = new JButton("OUEST");
private JButton bouton3 = new JButton("CENTRE");
private JButton bouton4 = new JButton("EST");
private JButton bouton5 = new JButton("SUD");
public Fenetre_BorderLayout(){/**Définir un conteneur suivant la disposition BorderLayout**/
BorderLayout disposition=new BorderLayout();
panel.setLayout(disposition);
bouton3.setPreferredSize(new Dimension(100,100));
panel.add(bouton3, BorderLayout.CENTER);
panel.add(bouton1, BorderLayout.NORTH);
panel.add(bouton2, BorderLayout.WEST);
panel.add(bouton4, BorderLayout.EAST);
panel.add(bouton5, BorderLayout.SOUTH);
this.setTitle("Fenêtre avec BorderLayout");
. . .
this.setContentPane(panel);
}
public static void main(String[]args){
Fenetre_BorderLayout fen=new Fenetre_BorderLayout ();
fen.pack(); // pour l’ajustement selon le contenu
fen.setVisible(true);
} 38
}
LayoutManager - GridLayout
GridLayout
 Il arrange les composants sur une grille dont on spécifie le nombre de cases (cellules)
horizontales et verticales.
 Les cellules sont de taille identique.
 Les composants sont ajoutés ligne par ligne à partir de la cellule du coin supérieur gauche.
39
LayoutManager - GridLayout
import java.awt.*;
public class Fenetre_GridLayout extends JFrame {
private JButton bouton1 = new JButton("(1)");
public Fenetre_GridLayout(){ /**Définir conteneur suivant la disposition GridLayout**/
GridLayout disposition=new GridLayout(2,3);
disposition.setHgap(10);//10 pixels d'espace entre les colonnes (H :Horizontal)
disposition.setVgap(10);//10 pixels d'espace entre les lignes (V: Vertical)
panel.setLayout(disposition); //associer la disposition au conteneur panel
bouton1.setPreferredSize(new Dimension(100,100));
panel.add(bouton1);
panel.add(bouton2);
panel.add(bouton3);
panel.add(bouton4);
panel.add(bouton5);
this.setTitle("Fenêtre avec GridLayout");
. . .
this.setContentPane(panel);
} 40
}
LayoutManager - GridBagLayout
GridBagLayout
 Est un gestionnaire qui place les composants dans une grille évoluée, dont les cellules sont de taille différentes
(contrairement à GridLayout). Ainsi, les composants peuvent occuper plusieurs cellules, se répartir l’espace
restant,... etc.
 La classe GridBagLayout fonctionne en collaboration avec la classe GridBagConstraints pour définir les
contraintes et les attributs de chaque cellule de la grille.
 Toutes les contraintes d'une cellule doivent être positionnées avant de placer un composant dans la cellule. Par
exemple :
 les attributs de contraintes gridx et gridy permettent de définir la position où placer le composant (gridx=0
et gridy=1 représente la cellule (0,1)).
 l’attribut gridwidth de rendre une cellule aussi large que d’autres (gridwidth=2 i.e la le composant prend
place de cellules adjacentes).
(0,0) (1,0) (2,0) (3,0)

(0,1) (1,1) (2,1) (3,1)
(0,2) (1,2) (2,2) (3,2)
41
 L’exemple suivant propose une disposition de cinq boutons à partir d’un GridBagLayout :
(0,0) (1,0) (2,0)
(0,1) (1,1) (2,1)
(0,2) (1,2) (2,2)
42
import java.awt.*;
public class Fenetre_GridBagLayout extends JFrame {

private JButton Bouton1 = new JButton("Un");
private JButton Bouton2 = new JButton("Deux");
private JButton Bouton3 = new JButton("Troix");
private JButton Bouton4 = new JButton("Quatre");
private JButton Bouton5 = new JButton("Cinq");
public Fenetre_GridBagLayout(){/**Définir un conteneur suivant la disposition GridBagLayout**/
GridBagLayout disposition=new GridBagLayout();
panel.setLayout(disposition); //associer la disposition GridBagLayout au conteneur panel
//Définir les contraintes des cellules de la grille
GridBagConstraints contraintes = new GridBagConstraints();
contraintes.fill = GridBagConstraints.BOTH;//remplissage horizontale et verticale)
//Laisser les contours entre composants 10 H, B, L, R
contraintes.insets = new Insets(10, 10, 10, 10);
contraintes.gridx =0; //cellule (0,0) de gridBag
contraintes.gridy =0;
contraintes.gridwidth=1;
panel.add(Bouton1, contraintes);
43
contraintes.gridx =1;//cellule (1,0) de gridBag
contraintes.gridheight=2;//avec une hauteur de 2
contraintes.gridheight=1;
panel.add(Bouton5,contraintes);
panel.add (new JButton (" Six"),contraintes);
this.setContentPane(panel); ...
} 44
Exercice
 Implémentation d’une fenêtre avec : 2Labels + 3 Zones de textes + 2 Boutons

=> Proposition : le Gestionnaire de disposition est GridBagLayout
45
Gestion des évènements
46
 Le langage Java propose un mécanisme qui repose sur la notion de "Listener" (écouteurs)
pour le traitement d'évènements
 Ce mécanisme n'est pas directement rattaché à une quelconque composant d'interface
graphique.
 Il nous faut définir un écouteur, puis 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.
 Un écouteur :
 est un objet destiné à recevoir et à gérer les événements
 Il possède au moins une méthode qui pourra être invoquée si l'évènement attendu apparaît.
 Il doit implémenter une interface.
 Plusieurs types d'interfaces par exemple ActionListener, KeyListener, MouseListener,
TextListener, ...). Selon l'interface, il y a une ou plusieurs méthodes à implémenter.
47
ActionListener
 ActionEvent est un évènement déclenché lorsque on action un bouton (par exemple)
soit en cliquant dessus avec la souris soit en utilisant le clavier.
 Pour écouter et traiter l’évènement «ActionEvent», un objet écouteur doit implémenter
l’interface ActionListener.
 ActionListener est une interface qui contient une méthode unique à implémenter
« actionPerformed».
 La méthode actionPerformed doit contenir le code à exécuter si vous cliquez sur votre
bouton.
48
ActionListener
Exemple:
 Un programme qui affiche le nombre de click sur un bouton (figure ci-dessous)
 3 méthodes possibles
49
Exemple - méthode 1:
 L’écouteur (Listener):
import java.awt.event.*;
public class MyListener implements ActionListener {

int nb = 0;
public MyListener(){}
@Override
public void actionPerformed(ActionEvent event) {
nb++;
System.out.println("Nbre de Click: "+nb);
}
}
50
Exemple - méthode 1 (suite): L’IHM
public class Exemple_CLICK {
public Exemple_CLICK() {
JFrame frame = new JFrame("exemple");/* fenêtre principale */
frame.setBounds(300, 100, 300, 100);
JButton bouton = new JButton("Click"); // nouveau bouton

JPanel pane = new JPanel(); // nouveau panneau
/* ajouter au bouton un écouteur d‘évènement, une instance de la classe

MyListener */
bouton.addActionListener(new MyListener());
pane.add(bouton);
frame.setContentPane(pane);
frame.setVisible(true);
}
public static void main(String[] args) { Exemple_CLICK ec=new Exemple_CLICK(); }
} 51
public class Exemple_CLICK {
frame.setBounds(300, 100, 300, 100);
/* Créer et ajouter un écouteur d‘évènement */
bouton.addActionListener(new ActionListener() {
int nb = 0;
@Override
public void actionPerformed(ActionEvent e) {
nb++;
System.out.println("Nbre de Click: "+nb);}
});
pane.add(bouton);
}
52
}
public class Exemple_CLICK implements ActionListener {
int nb;
nb = 0;
frame.setBounds(300, 100, 300, 100);
/* Ajouter l’écouteur d‘évènement */
bouton.addActionListener(this);
pane.add(bouton);
}
@Override
public void actionPerformed(ActionEvent e) { nb++;
System.out.println("Nbre de Click: "+nb);}

53
}
 MouseListener
 Une autre interface qui gère les évènement de la souri.
 Elle définit cinq méthodes prenant toutes en paramètre un objet de type MouseEvent:
mouseClicked, mouseEntered, mouseExited, mousePressed et mouseReleased.
54
Exemple :
import java.awt.event.*; // pour MouseEvent et MouseListener
public class Exemple_MouseEVT implements MouseListener {

public Exemple_MouseEVT(){
JFrame frame=new JFrame();
frame.setTitle("Gestion de clics");
frame.setBounds(10, 20, 300, 200);
frame.addMouseListener(this);
}
@Override public void mouseClicked(MouseEvent ev){
System.out.println("clic dans fenetre x = "+ev.getX()+" y = "+ev.getY());}
@Override public void mousePressed(MouseEvent ev) { }
@Override public void mouseReleased(MouseEvent ev) { }
@Override public void mouseEntered(MouseEvent ev) { }
@Override public void mouseExited(MouseEvent ev) { }
public static void main(String args[]) {
Exemple_MouseEVT fen = new Exemple_MouseEVT();}
} 55
 TextListener :
 qui permet de répondre à un changement de contenu d'une zone de saisie de texte.
 Elle définie une seule méthode : textValueChanged avec un paramètre de type TextEvent.
 Un TextListener s'enregistre après d'un TextComponent (dont dérivent les classes TextArea et
TextField).
56
Exemple :
import java.awt.TextField;
import javax.swing.*; // pour JFrame
import java.awt.event.*; // pour MouseEvent et MouseListener
public class Exemple_TextEVT implements TextListener {

public Exemple_TextEVT(){
JFrame frame=new JFrame();
frame.setTitle("Gestion de clics"); // titre de la fenêtre
frame.setBounds(10, 20, 300, 200); // position et dimensions de la fenêtre
JPanel panel = new JPanel();
TextField field = new TextField("Bonjour", 30);
field.addTextListener(this);
panel.add(field);
frame.setContentPane(panel);
}
@Override public void textValueChanged(TextEvent e) {
System.out.println("Text changed"); }
public static void main(String args[]) { new Exemple_TextEVT();} 57

}
Autres Types d'évènements

 KeyListener
 Est une interface qui permet de gérer les évènements de clavier.
 Les classes implémentant cette interface doivent redéfinir les trois méthodes : keyPressed,
keyReleased et keyTyped.
 Ces méthodes doivent prendre en paramètre un objet de type KeyEvent.
 FocusListener :
 Elle est utilisée pour répondre à la prise, ou à la perte, du focus par un élément.
 Elle définie deux méthodes : focusGained et focusLost. Ces deux méthodes requièrent un
paramètre de type FocusEvent.
58
Exercice
 Créez le programme Java qui permet de calculer la somme de deux entiers

introduits par l’utilisateur (selon figure ci-dessous)
59
Gestion des Menus
60
Gestion des Menus
 Les classes JMenuBar, JMenu et JMenuItem permettent de gérer la création des menus.
 La classe JMenuBar: permet de créer une bar de menu

Constructeur JMenuBar() Crée une bar de menu
Méthode add(JMenu menu) Ajouter au bar de menu le menu spécifié en paramètre
 La classe JMenu: représente un menu

Constructeur JMenu(String titre) Créer un menu avec le titre spécifié
Méthode add(JMenuItem item) Ajouter au menu l’item spécifié en paramètre
 La classe JMenuItem : permet de créer un item de menu

Constructeur JMenuItem(String titre) Créer un item de menu avec le titre spécifié en paramètre
61
Gestion des Menus
 La création d’un menu est basée sur les étapes suivantes:
1. Créer une bar de menu:

 JMenuBar menuBar = new JMenuBar();
2. Créer un menu:
 JMenu menu = new JMenu("File");
3. Créer les items de menu
 JMenuItem menuItem = new JMenuItem("New"));
4. Ajouter les items au menu
 menu.add(menuItem );
5. Ajouter le menu à la bar de menu
 menuBar.add(menu);
6. Ajouter la bar de menu à la fenêtre
 frame.setJMenuBar(menuBar);
62
Gestion des Menus
Exemple1: une fenêtre avec deux menu File (New, Open, Save) et Edit (Cut, Copy, Past)
Gestion des Menus
public class Exemple_menu1{

public static void main(String[] args) {
JFrame frame = new JFrame("exemple"); frame.setBounds(300, 10, 600, 300);
JMenuBar menuBar = new JMenuBar();
JMenu menuFile = new JMenu("File"); menuFile.add(new JMenuItem("New"));

menuFile.add(new JMenuItem("Open")); menuFile.add(new JMenuItem("Save"));
JMenu menuEdit = new JMenu("Edit"); menuEdit.add(new JMenuItem("Cut"));

menuEdit.add(new JMenuItem("Copy")); menuEdit.add(new JMenuItem("Past"));
menuBar.add(menuFile); menuBar.add(menuEdit);
frame.setJMenuBar(menuBar); frame.setVisible(true);
}
}
Gestion des Menus
Exemple2:
65
Gestion des Menus
public class Exemple_Menu2{
public static void main(String[] args) {
JFrame frame = new JFrame("exemple"); frame.setBounds(300, 10, 600, 300);
JMenuBar menuBar = new JMenuBar();
JMenu menu = new JMenu("File"); menu.add(new JMenuItem("New"));

menu.add(new JMenuItem("Open")); menu.add(new JMenuItem("Save"));
JMenu submenu = new JMenu("Property");

menu.add(new JSeparator()); // ajouter au nemu un separateur
submenu.add(new JMenuItem("Big")); submenu.add(new JMenuItem("Small"));
menu.add(submenu);
menuBar.add(menu);
frame.setJMenuBar(menuBar); frame.setVisible(true);
}
}
66
Les Boites de dialogue
67
 Message simple avec bouton OK:
JFrame frame = new JFrame ("identification");

…
…
JOptionPane.showMessageDialog(frame, "Welcome to Swing!");
68
 Message d’alerte

…
…
JOptionPane.showMessageDialog(frame, "Please ensure compliance!",
"Swing Tester", JOptionPane.WARNING_MESSAGE);
69
 Message d’erreur

…
…
JOptionPane.showMessageDialog(frame, "Please ensure compliance!",
"Swing Tester", JOptionPane.ERROR_MESSAGE);
70
 Message confirmation

…
…
int result = JOptionPane.showConfirmDialog(frame,"Sure? You want to exit?",
"Swing Tester", JOptionPane.YES_NO_OPTION, JOptionPane.QUESTION_MESSAGE);
if(result == JOptionPane.YES_OPTION){
System.out.println("You selected: Yes");
}else if (result == JOptionPane.NO_OPTION){
System.out.println("You selected: No");
}else {
System.out.println("None selected");
}
71
Bibliographie
 REZOUG A. , TP IHM, dep. Informatique, UMBB.
 ABBAS A. , TP IHM, dep. Informatique, Université de Bouira.
 https://www.tutorialspoint.com/java/index.htm
 https://www.tutorialspoint.com/swing/index.htm
 https://www.tutorialspoint.com/swing/swing_controls.htm
 https://docs.oracle.com/javase/tutorial/uiswing/
 https://www.guru99.com/java-swing-gui.html
72

TP Ihm

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP Ihm

Transféré par

Droits d'auteur :

Formats disponibles

TP IHM

Interaction Homme Machine

 Une fenêtre (Frame) : qui est créée en utilisant la classe JFrame;

 Des gestionnaire de disposition (LayoutManager): permettent

- les valeurs de X positives déplacent la fenêtre vers la

public static void main(String[] str){

 Il est possible d’instancier la classe JPanel qui a pour but d'accueillir

JLabel texte = new JLabel("Hello World");

fenetre1.getContentPane().add(texte); /* ajouter texte

JLabel texte = new JLabel("Hello World");

Font font1 = new Font ("Garamond", Font.ITALIC, 25); //Définir police+style

private JButton bouton=new JButton("OK");

JCheckBox() Crée une case à cocher sans texte ni icône.

JCheckBox(Icon icon) Crée une case à cocher avec une icône.

JCheckBox jCheckBox1 = new JCheckBox("Produit1");

//Group the radio buttons.

Constructor & Description

void setText(String text) Définit le texte à afficher.

void setFont(Font f) Définit la police.

JTextField textField = new JTextField(15);

void setColumns(int columns) Définit le nombre de colonnes pour ce TextArea.

void setFont(Font f) Définit la police.

(0,0) (1,0) (2,0) (3,0)

(0,0) (1,0) (2,0)

(0,1) (1,1) (2,1)

(0,2) (1,2) (2,2)

public class Fenetre_GridBagLayout extends JFrame {

 Implémentation d’une fenêtre avec : 2Labels + 3 Zones de textes + 2 Boutons

public class MyListener implements ActionListener {

JButton bouton = new JButton("Click"); // nouveau bouton

/* ajouter au bouton un écouteur d‘évènement, une instance de la classe

public static void main(String[] args) { Exemple_CLICK ec=new Exemple_CLICK(); }

public class Exemple_MouseEVT implements MouseListener {

public class Exemple_TextEVT implements TextListener {

public static void main(String args[]) { new Exemple_TextEVT();} 57

Autres Types d'évènements

 Créez le programme Java qui permet de calculer la somme de deux entiers

 La classe JMenuBar: permet de créer une bar de menu

 La classe JMenu: représente un menu

 La classe JMenuItem : permet de créer un item de menu

 La création d’un menu est basée sur les étapes suivantes:

1. Créer une bar de menu:

public class Exemple_menu1{

JMenuBar menuBar = new JMenuBar();

JMenu menuFile = new JMenu("File"); menuFile.add(new JMenuItem("New"));

JMenu menuEdit = new JMenu("Edit"); menuEdit.add(new JMenuItem("Cut"));

JMenu menu = new JMenu("File"); menu.add(new JMenuItem("New"));

JMenu submenu = new JMenu("Property");

 Message simple avec bouton OK:

JFrame frame = new JFrame ("identification");

JFrame frame = new JFrame ("identification");

JFrame frame = new JFrame ("identification");

JFrame frame = new JFrame ("identification");

Vous aimerez peut-être aussi