TP IHM Interaction Homme Machine PDF

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 Inter...

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) 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); 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  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(){ JPanel panel=new JPanel(); FlowLayout disposition=new FlowLayout(); panel.setLayout(disposition); //associer la disposition FlowLayout au conteneur panel panel.add(label); panel.add(entrée); panel.add(bouton1); panel.add(bouton2); this.setTitle("Fenêtre avec FlowLayout");... this.setContentPane(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.*; import javax.swing.*; 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(){ JPanel panel=new JPanel(); 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.*; import javax.swing.*; public class Fenetre_GridLayout extends JFrame { private JButton bouton1 = new JButton("(1)"); private JButton bouton2 = new JButton("(2)"); private JButton bouton3 = new JButton("(3)"); private JButton bouton4 = new JButton("(4)"); private JButton bouton5 = new JButton("(5)"); public Fenetre_GridLayout(){ JPanel panel=new JPanel(); 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  LayoutManager - GridBagLayout  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  LayoutManager - GridBagLayout import java.awt.*; import javax.swing.*; 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(){ JPanel panel=new JPanel(); 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  LayoutManager - GridBagLayout contraintes.gridx =1;//cellule (1,0) de gridBag contraintes.gridy =0; contraintes.gridwidth=2; panel.add(Bouton2, contraintes); contraintes.gridx =0;//cellule (0,1) de gridBag contraintes.gridy =1; contraintes.gridwidth=1; contraintes.gridheight=2;//avec une hauteur de 2 panel.add(Bouton3, contraintes); contraintes.gridx =1;//cellule (1,1) de gridBag contraintes.gridy =1; contraintes.gridwidth=1; contraintes.gridheight=1; panel.add(Bouton4, contraintes); contraintes.gridx =2;//cellule (2,1) de gridBag contraintes.gridy =1; contraintes.gridwidth=1; contraintes.gridheight=1; panel.add(Bouton5,contraintes); contraintes.gridx =2;//cellule (2,2) de gridBag contraintes.gridy =2; contraintes.gridwidth=1; contraintes.gridheight=1; 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  Gestion des évènements  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  Gestion des évènements 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  Gestion des évènements ActionListener Exemple:  Un programme qui affiche le nombre de click sur un bouton (figure ci-dessous)  3 méthodes possibles 49  Gestion des évènements 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  Gestion des évènements Exemple - méthode 1 (suite): L’IHM import javax.swing.*; public class Exemple_CLICK { public Exemple_CLICK() { JFrame frame = new JFrame("exemple"); frame.setBounds(300, 100, 300, 100); JButton bouton = new JButton("Click"); // nouveau bouton JPanel pane = new JPanel(); // nouveau panneau 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  Gestion des évènements Exemple - méthode 2: import javax.swing.*; public class Exemple_CLICK { public Exemple_CLICK() { JFrame frame = new JFrame("exemple"); frame.setBounds(300, 100, 300, 100); JButton bouton = new JButton("Click"); // nouveau bouton JPanel pane = new JPanel(); // nouveau panneau bouton.addActionListener(new ActionListener() { int nb = 0; @Override public void actionPerformed(ActionEvent e) { nb++; System.out.println("Nbre de Click: "+nb);} }); pane.add(bouton); frame.setContentPane(pane); frame.setVisible(true); } public static void main(String[] args) { Exemple_CLICK ec=new Exemple_CLICK(); } 52 }  Gestion des évènements Exemple - méthode 3: import javax.swing.*; public class Exemple_CLICK implements ActionListener { int nb; public Exemple_CLICK() { nb = 0; JFrame frame = new JFrame("exemple"); frame.setBounds(300, 100, 300, 100); JButton bouton = new JButton("Click"); // nouveau bouton JPanel pane = new JPanel(); // nouveau panneau bouton.addActionListener(this); pane.add(bouton); frame.setContentPane(pane); frame.setVisible(true); } @Override public void actionPerformed(ActionEvent e) { nb++; System.out.println("Nbre de Click: "+nb);} public static void main(String[] args) { Exemple_CLICK ec=new Exemple_CLICK(); } 53 }  Gestion des évènements  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  Gestion des évènements Exemple : import javax.swing.*; 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); frame.setVisible(true); } @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  Gestion des évènements  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  Gestion des évènements 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); frame.setVisible(true); } @Override public void textValueChanged(TextEvent e) { System.out.println("Text changed"); } public static void main(String args[]) { new Exemple_TextEVT();} 57 }  Gestion des évènements 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  Les Boites de dialogue  Message simple avec bouton OK: JFrame frame = new JFrame ("identification"); … … JOptionPane.showMessageDialog(frame, "Welcome to Swing!"); 68  Les Boites de dialogue  Message d’alerte JFrame frame = new JFrame ("identification"); … … JOptionPane.showMessageDialog(frame, "Please ensure compliance!", "Swing Tester", JOptionPane.WARNING_MESSAGE); 69  Les Boites de dialogue  Message d’erreur JFrame frame = new JFrame ("identification"); … … JOptionPane.showMessageDialog(frame, "Please ensure compliance!", "Swing Tester", JOptionPane.ERROR_MESSAGE); 70  Les Boites de dialogue  Message confirmation JFrame frame = new JFrame ("identification"); … … 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