TP1 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)
import javax.swing.* ;
public class MyFrame extends JFrame{ //Etendre la classe JFrame
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);

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

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

dans le panneau par défaut */
fenetre1.setVisible(true);
}
} 13
 La classe JFrame
 Résultat

14
 La classe JFrame
 Exemple 2: (Instancier la classe JPanel)
import javax.swing.* ;
public class MyFrame extends JFrame{ //Etendre la classe JFrame
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);

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

JPanel panel = new JPanel();
panel.setBackground(Color.ORANGE);
panel.add(texte);
fenetre1.setContentPane(panel);
fenetre1.setVisible(true);
} 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
 Les principaux composants graphiques

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
 Les principaux composants graphiques

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.

Constructeur Description
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
 Les principaux composants graphiques

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
 Les principaux composants graphiques
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.
Constructeur Description

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
 Les principaux composants graphiques

JCheckBox
 Exemple:

JCheckBox jCheckBox1 = new JCheckBox("Produit1");

JCheckBox jCheckBox2 = new JCheckBox("Produit2");
JCheckBox jCheckBox3 = new JCheckBox("Produit3");

jCheckBox1.setMnemonic('p');
jCheckBox2.setMnemonic('r');
jCheckBox3.setMnemonic('d');

22
 Les principaux composants graphiques

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.
Constructeur Description
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
 Les principaux composants graphiques

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);
group.add(jRadioButton2);
group.add(jRadioButton3);
24
 Les principaux composants graphiques

JComboBox
 La classe JComboBox est un composant qui combine un bouton ou champ
éditable et une liste déroulante.

Constructeur Description
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
 Les principaux composants graphiques

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
 Les principaux composants graphiques

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
 Les principaux composants graphiques

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.

Méthode Description

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
 Les principaux composants graphiques

JTextField
 Exemple

JTextField textField = new JTextField(15);

textField.setText("Algérie"); // Ajouter un text
textField.setHorizontalAlignment(JTextField.CENTER); //Aligner l'écriture au centre

29
 Les principaux composants graphiques

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.

Constructeur Description
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.

Méthode Description
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
 Les principaux composants graphiques

JTextArea
 La classe JTextArea est une zone multiligne pour afficher du texte.
Constructeur Description
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.

Méthode Description

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
 Les principaux composants graphiques

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
 Les LayoutManager

Gestion des évènements

33
 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://docs.oracle.com/javase/tutorial/uiswing/
 https://www.guru99.com/java-swing-gui.html
 https://www.tutorialspoint.com/swing/swing_controls.htm

34