TP1 IHM
Interaction Homme Machine
3ème Année Licence (ISIL)
Benanane ahmed yassine
1 Département Informatique
Centre universitaire Salhi Ahmed Naama
Année universitaire 2022-2023
Programmation Evénementielle
▪ 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 (système informatique).
▪ 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 (clic
bouton pour quitter, saisie du nom d’une personne 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
2de programmation en utilisant des librairies (toolkits) graphiques, par exemples :
➢ Java : - AWT (Abstract Windowing Toolkit); - Swing ; - SWT(Standard Widget
Toolkit);
➢ C++ : Qt ;
➢ Web : JQuery.
Programmation Evénementielle 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).
Une couche d’adaptation entre le java et le système d’exploitation.
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.
3
Pour y remédier, la librairie Swing fut apparue dans la version java (1.2)
- L’implémentation des interfaces graphiques avec Swing repose sur des
composants purement java, qui sont légers et simples à utiliser.
Toolkit: Java 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 très forte 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
Notions de base essentielles de Swing Java
▪ L’implémentation d’une interface graphique, avec Swing Java, 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 (TextField), …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
5 événements).
➢ des gestionnaire de disposition (LayoutManager): permettent
d’organiser tous les composants graphiques sur un panneau (panel)
A) Fenêtre (JFrame)
▪ Les applications graphiques sont principalement construites à partir de la
classe de base JFrame. Ce dernier permet de construire une fenêtre
comportant une bordure, un titre, une taille et une localisation sur ecran.
• Un exemple d’instanciation d’une simple fenêtre avec JFrame :
import javax.swing.JFrame;
public class Fenetre extends JFrame //Etendre la classe JFrame
{ public Fenetre()
{
this.setTitle("Titre de la fenêtre "); //Intituler la fenetre
this.setSize(700, 400); //Dimensionner la fenetre
this.setResizable(false); //Interdire le redimensionnement
this.setLocationRelativeTo(null); //La positionner au centre de l'écran
this.setVisible(true); //Visualiser la fenetre
6 //Arreter le processus d'exectution on fermant la fenetre par la croix
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
public static void main(String[]A)
{ Fenetre fenetre=new Fenetre(); }
}
A) Fenêtre (JFrame)
▪ Dans l’exemple précédent, la fenêtre est centrée sur écran (Avec
setLocationRelativeTo(null)).
▪ Pour la situer sur une position bien définie de votre é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.
7
- La même règle s'applique aux valeurs de l'axe y,
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.
B) Panel (JPanel)
▪ Le conteneur le plus simple de Swing est le panneau JPanel (défini comme le
conteneur par défaut de JFrame).
▪ Sa vocation est d'accueillir d'autres objets de même type ou des objets de type
composant (boutons, cases à cocher…).
import javax.swing.JFrame;
import java.awt.Color;
import javax.swing.JPanel;
public class Fenetre extends JFrame {
public Fenetre() {
this.setTitle("Ma première fenêtre Java ");
this.setSize(400, 100);
this.setLocationRelativeTo(null);
//Instanciation d'un objet JPanel
JPanel pan = new JPanel();
8 //Définition de sa couleur de fond
pan.setBackground(Color.ORANGE);
// JPanel un simple conteneur de composants de JFrame
this.setContentPane(pan);
this.setVisible(true);
} }public static void main(String[]A)
{ Fenetre fenetre=new Fenetre(); }
}
B) Panel (JPanel)
▪ Le conteneur le plus simple de Swing est le panneau JPanel (défini comme le
conteneur par défaut de JFrame).
▪ Sa vocation est d'accueillir d'autres objets de même type ou des objets de type
composant (boutons, cases à cocher…).
import javax.swing.JFrame;
import java.awt.Color;
import javax.swing.JPanel;
public class Fenetre extends JFrame {
public Fenetre() {
this.setTitle("Ma première fenêtre Java ");
this.setSize(400, 100);
this.setLocationRelativeTo(null);
this.setVisible(true);
//Instanciation d'un objet JPanel
9 JPanel pan = new JPanel();
//Définition de sa couleur de fond
pan.setBackground(Color.ORANGE);
// JPanel un simple conteneur de composants de JFrame
this.setContentPane(pan);
} }public static void main(String[]A)
{ Fenetre fenetre=new Fenetre(); }
}
C) Principaux composants graphiques
▪ Les principaux composants atomiques et élémentaires dans une interface
graphique sont : les étiquettes (labels), les zones de texte et les boutons.
➢ Une étiquette (Label) : est une simple chaîne de caractères informative. Sa
création consiste à appeler le constructeur JLabel. Une police et un style d’écriture
peuvent lui être choisis, exemple:
Font font1 = new Font ("Garamond", Font.ITALIC, 20); //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é
10
label.setHorizontalAlignment(JLabel.CENTER);//AlignementHorizontale centrée
C) Principaux composants graphiques
▪ Une zone de texte : la plus simple et la plus utilisée repose sur l’objet JTextField.
Ce dernier construit un champ de saisie avec seule ligne dont la largeur est fixée
par setColums. Il est préférable de fixer la largeur du champ de saisie pour éviter
des déformations lors du remplissage. Les méthodes :
✓ setText(‘‘chaine’’) : définie une chaine de caractère dans la zone de texte en
question;
✓getText(): récupère la chaine de caractère (de type String) saisie dans la zone;
✓ setEditable(Boolean X): autorise (avec X=true) ou interdit (avec X=false) la
modification du contenu de la zone.
▪ Un Bouton: le plus couramment utilisé est le JButton. Généralement, le texte
affiché sur le bouton est passé comme paramètre au constructeur. Toutefois, il est
11
possible de le modifier à l’aide de la méthode setText.
C) Principaux composants graphiques
▪ Exemple: Création d’une simple fenêtre avec un label+une zone de texte+un
bouton
import javax.swing.*;
import java.awt.*;
public class Fenetre extends JFrame {
private JLabel label=new JLabel();
private JTextField entrée=new JTextField(15);
//Ou utliser setColumns(15) dans le constructeur
private JButton bouton=new JButton("OK");
public Fenetre() {
/**Définir un panel pour contenir les objets graphiques*/
JPanel panel=new JPanel();
//Label
Font font1 = new Font ("Garamond", Font.BOLD, 20); //Définir police+style
label.setFont(font1); //Lui Associer le Font
12label.setForeground(Color.black); //Couleur de l’écriture
label.setPreferredSize(new Dimension(50,25)); //Redimensionner la taille
label.setText("Pays :"); //Le texte de libellé
label.setHorizontalAlignment(JLabel.CENTER);//AlignementHorizontale centrée
C) Principaux composants graphiques
//Zone de texte
entrée.setText("Algérie");
entrée.setHorizontalAlignment(JTextField.CENTER); //Aligner l'écriture
au centre
//Le bouton
//redimensionner le bouton
bouton.setPreferredSize(new Dimension(100,50));
bouton.setToolTipText("Appuyez sur OK"); //InfoBulle
//Ajouter les composants au panel
panel.add(label);
panel.add(entrée);
panel.add(bouton);
/**Création des caractéristiques de la fenêtre **/
this.setTitle("Ma Fenêtre");
13this.setLocationRelativeTo(null);
this.setContentPane(panel); //Associer le panel à la fenêtre
this.setVisible(true);
} public static void main(String[]A)
{ Fenetre fenetre=new Fenetre(); //Instancier l’objet fenetre
fenetre.pack();
}
}
C) Principaux composants graphiques
▪ Le résultat est le suivant:
Redimensionn
er avec la
souris
14
Gestionnaire de disposition pour éviter les conflits d’affichage.
D) Gestionnaire de disposition
▪ But: Assurer la portabilité de l’application graphique tout en respectant les
dispositions des éléments graphiques lors de l’affichage dans différents
systèmes.
=> Pour ce faire, Java propose des gestionnaires de disposition permettant de
régler l’aspect visuel des composants graphiques afin de définir leur
emplacement puis les maintenir.
▪ Dans certains cas, il est possible de se passer des gestionnaires de mise en
forme pour le placement des composants. Pour cela, il suffit de mettre le
gestionnaire du contenant (i.e panel) à 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");
15 ok.setBounds(x, y, width, height);
▪ Les principaux gestionnaires de disposition sont :
- FlowLayout - BorderLayout - BoxLayout
- GridLayout - GridBagLayout
