Interface graphique- GUI

1. Interface graphique- GUI

2. Dans une interface graphique on imbrique généralement trois niveaux d’objets graphiques: • Le conteneur principal: permet d’encapsuler toutes les entités des deux autres niveaux (par exemple une fenêtre JFrame) • Un composant-conteneur intermédiaire: aussi un conteneur qui se charge de regrouper en son sein des composants atomiques (par exemple un panneau JPanel) • Un composant atomique: appelé aussi widgets. Il s’agit d’éléments de base: boutons, zones de saisie, liste de choix déroulant… Ces composants sont ajoutés dans le conteneur courant en invoquant une méthode add.

3. Comment les implanter en Java : • Package java.awt (Abstract Windowing Toolkit) • Package javax.swing • Ces packages contiennent tous ce qu’il faut pour créer les objets graphiques et de gérer les événements.

4. Classe JFrame: import javax.swing.* ; class MaFenetre extends JFrame { public MaFenetre () // constructeur { setTitle ("Ma premiere fenetre") ; setSize (300, 150) ; } } public class Premfen1 { public static void main (String args[]) { JFrame fen = new MaFenetre() ; // créer un cadre fen.setVisible (true) ; // rendre visible la fenêtre } }

6. Action sur les caractéristiques d’une fenêtre • fen.setBounds(x,y,lg,ht) • Le coin supérieur de la fenêtre placé au pixel x,y et de taille lg*ht • Fen.setDefaultCloseOperation(JFrame.xxx) méthode qui imposer un comportement lors de la fermeture de la fenêtre • JFrame.EXIT_ON_CLOSE: fermer l’application à la fermeture de la fenêtre • JFrame.DO_NOTHING_ON_CLOSE: ne rien faire (inhiber l’icône détruire)

7. import javax.swing.* ; class MaFenetre extends JFrame { public MaFenetre () // constructeur { setTitle ("Ma premiere fenetre") ; fen.setBounds(500,40,300,150); } } public class Premfen1 { public static void main (String args[]) { JFrame fen = new MaFenetre() ; // créer un cadre fen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // cette ligne termine le prog // quand la fenêtre se ferme fen.setVisible (true) ; // rendre visible la fenêtre } }

9. Placer des widgets dans la fenêtre • Création d’un bouton • Définir un bouton avec la Classe JButton • Ajouter le bouton au contenu de la fenêtre appelé panneau Accessible via getContentPane() de JFrame

10. import javax.swing.* ; import java.awt.*; class Fen1Bouton extends JFrame { public Fen1Bouton () { JButton monBouton ; JFrame cadre = new JFrame(); cadre.setTitle ("Premier bouton") ; cadre.setSize (300, 200) ; monBouton = new JButton ("ESSAI") ; cadre.getContentPane().add(monBouton) ; cadre.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); cadre.setVisible(true) ; } } public class Bouton1 { public static void main (String args[]) { Fen1Bouton fen = new Fen1Bouton() ; } }

12. Gestionnaire de mise en forme (layout manager) • Gère la disposition des composants dans une fenêtre • Il existe plusieurs gestionnaires • Par défaut le gestionnaire de classe BorderLayout pour les JFrame

13. import javax.swing.* ; class Fen2Bouton extends JFrame { public Fen2Bouton () { JButton monBouton1, monBouton2; JFrame fen = new JFrame(); fen.setTitle ("deux boutons") ; fen.setSize (300, 200) ; monBouton1= new JButton ("1er bouton") ; monBouton2= new JButton ("2eme bouton") ; fen.getContentPane().add(monBouton1) ; fen.getContentPane().add(monBouton2) ; fen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fen.setVisible(true) ; } } public class Bouton2b { public static void main (String args[]) { Fen2Bouton fen = new Fen2Bouton() ; } }

14. Résultat: Que s’est-il passé?

15. Divise un composant d’arrière plan en cinq régions Les composants agencés n’obtiennent généralement pas la taille voulue un composant par région Ajouter un argument à la méthode add sur la position. Par défaut de paramètres affichage au centre center north south Borderlayout east west

16. import javax.swing.* ; import java.awt.*; class Fen2Bouton extends JFrame { public Fen2Bouton () { JButton monBouton1, monBouton2; JFrame fen = new JFrame(); fen.setTitle ("deux boutons") ; fen.setSize (300, 200) ; monBouton1= new JButton ("1er bouton") ; monBouton2= new JButton ("2eme bouton") ; fen.getContentPane().add(BorderLayout.EAST,monBouton1) ; fen.getContentPane().add(BorderLayout.WEST,monBouton2) ; fen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fen.setVisible(true) ; } } public class Bouton2 { public static void main (String args[]) { Fen2Bouton fen = new Fen2Bouton() ; } }

18. Gestionnaire FlowLayout • Se comporte comme un traitement de texte où les mots seraient remplacés par des composants. • Taille des composants respectées et ils sont agencés de gauche à droite • Gestionnaire par défaut des panneaux

19. import javax.swing.* ; import java.awt.*; class Fen2Bouton extends JFrame { public Fen2Bouton () { JButton monBouton1, monBouton2; JFrame fen = new JFrame(); fen.setTitle ("deux boutons") ; fen.setSize (300, 200) ; monBouton1= new JButton ("1er bouton") ; monBouton2= new JButton ("2eme bouton") ; fen.setLayout(new FlowLayout()); fen.getContentPane().add(monBouton1) ; fen.getContentPane().add(monBouton2) ; fen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fen.setVisible(true) ; } } public class Bouton2c { public static void main (String args[]) { Fen2Bouton fen = new Fen2Bouton() ; } }

21. Un panneau dans une fenêtre: des boutons dans un panneau import javax.swing.* ; import java.awt.*; class Fen2Bouton extends JFrame { public Fen2Bouton () { JButton monBouton1, monBouton2; JFrame fen = new JFrame(); JPanel panneau = new JPanel(); // création du panneau panneau.setBackground(Color.darkGray); // couleur de fond gris foncé monBouton1= new JButton ("1er bouton") ; monBouton2= new JButton ("2eme bouton") ; panneau.add(monBouton1) ; // on ajoute le bouton au panneau panneau.add(monBouton2) ; fen.getContentPane().add(BorderLayout.EAST,panneau) ; // ajouter le panneau à la fenêtre fen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fen.setSize (300, 200) ; fen.setVisible(true) ; } } public class Bouton2e { public static void main (String args[]) { Fen2Bouton fen = new Fen2Bouton() ; }

23. Gestionnaire BoxLayout • Ressemble à FlowLayout: chaque composant a sa propre taille et ils sont placés dans l’ordre où ils ont été ajoutés • Peut empiler les composants verticalement

24. import javax.swing.* ; import java.awt.*; class Fen2Bouton extends JFrame { public Fen2Bouton () { JButton monBouton1, monBouton2; JFrame fen = new JFrame(); JPanel panneau = new JPanel(); panneau.setBackground(Color.darkGray); panneau.setLayout(new BoxLayout(panneau, BoxLayout.Y_AXIS)); // changement du Layout // Y_AXIS pour empilement vertical monBouton1= new JButton ("1er bouton") ; monBouton2= new JButton ("2eme bouton") ; panneau.add(monBouton1) ; // on ajoute le bouton au panneau panneau.add(monBouton2) ; fen.getContentPane().add(BorderLayout.EAST,panneau) ; // ajouter le panneau à la fenêtre fen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fen.setSize (300, 200) ; fen.setVisible(true) ; } } public class Bouton2f { public static void main (String args[]) { Fen2Bouton fen = new Fen2Bouton() ; } }

26. Gestion des événements: exemple du clic bouton • Objectif • quand l’utilisateur clique nous voulons le savoir • Nous nous intéressons à un événement: l’action de l’utilisateur sur le bouton

27. Le bouton doit savoir que nous voulons savoir 1 Objet bouton Votre code Le bouton doit avoir un moyen de nous rappeler quand l’événement se produit 2

28. Si un événement nous intéressent: • Implémenter une interface auditeur qui fait le pont entre l’auditeur (vous) et la source d’événement (le bouton ici) • Quand on implémente une interface auditeur: • on fournit au bouton le moyen de vous rappeler • on déclare la méthode de rappel

29. Comment l’utilisateur et la source communique Bouton.addActionListener(this) 1 actionPerformed(unEvt) 2 demander au bouton de nous ajouter dans sa liste d’auditeur et d’appeler la méthode actionPerformed() quand l’utilisateur clique 1 Puisque vous faites parti de mes actionlistener j’appele la méthode actionPerformed() que je sais que vous avez 2

30. Une source d’événement comme un bouton crée un objet événement • Dans le package java.awt.event fournit un paquet de classe d’événement facile à repérer (finissent tous par Event). • MouseEvent, KeyEvent, ActionEvent…

31. import javax.swing.* ; import java.awt.event.*; class Fen1Bouton extends JFrame implements ActionListener { JButton monBouton ; public Fen1Bouton () { JFrame cadre = new JFrame(); cadre.setTitle ("Gestion du clic") ; cadre.setSize (300, 200) ; monBouton = new JButton ("Cliquez-moi") ; monBouton.addActionListener(this); // s’ajouter à la liste des auditeurs cadre.getContentPane().add(monBouton) ; cadre.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); cadre.setVisible(true) ; } public void actionPerformed(ActionEvent event) { monBouton.setText("j'ai été cliqué!"); // bouton appelle cette méthode qd l’evt se produit } } public class Bouton_action { public static void main (String args[]) { Fen1Bouton fen = new Fen1Bouton() ; } }

32. Après Avant

33. Auditeurs, sources et événements • Auditeur reçoit l’événement • Son rôle consiste à implémenter l’interface • S’enregistrer auprès du bouton et fournir la gestion de l’événement • La source envoie l’ événement • Son rôle consiste à accepter les enregistrements (des auditeurs), recevoir les événements de l’utilisateur et appeler la méthode de gestion de l’événement de l’auditeur • L’objet Event contient les données sur l’événement • Transporte les données concernant l’événement à l’auditeur

34. Gestion de plusieurs composants • Plusieurs possibilités • Tous les composants déclenchent la même réponse (ex plusieurs boutons) • Méthode getSource Public void actionPerformed(ActionEvent event) if (event.getSource() == bouton1) {…} else if (event.getSource() == bouton2) {…} … • Ça marche mais pas très OO

35. Dans le cas général • Il faut définir plusieurs classes xxxListener • On fait appel au concept de sous classe (vu au cours précédent)

36. public class Bouton2_action { public static void main (String args[]) { Fen2Bouton fen = new Fen2Bouton() ; } } import javax.swing.* ; import java.awt.*; import java.awt.event.*; class Fen2Bouton extends JFrame { JButton monBouton1, monBouton2; public Fen2Bouton () { JFrame fen = new JFrame(); JPanel panneau = new JPanel(); fen.setTitle ("deux boutons") ; fen.setSize (300, 200) ; monBouton1= new JButton ("1er bouton") ; monBouton1.addActionListener(new TexteListener_bout1()); monBouton2= new JButton ("2eme bouton") ; monBouton2.addActionListener(new TexteListener_bout2()); fen.setLayout(new FlowLayout()); fen.getContentPane().add(monBouton1) ; fen.getContentPane().add(monBouton2) ; fen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fen.setVisible(true) ; } class TexteListener_bout1 implements ActionListener { public void actionPerformed(ActionEvent Event) { monBouton1.setText("j'ai été cliqué moi le bouton 1!"); } } class TexteListener_bout2 implements ActionListener { public void actionPerformed(ActionEvent Event) { monBouton2.setText("j'ai été cliqué moi le bouton 2!"); } } } les sous-classes qui implémente ActionListener

37. Extension à deux boutons Après Avant

38. Ajout d’un clic souris Code à rajouter dans le prog précèdent class Fen2Bouton extends JFrame { … fen.addMouseListener(new EcouteurSouris()); … class EcouteurSouris implements MouseListener { public void mouseClicked (MouseEvent ev) { int x = ev.getX(); int y = ev.getY(); System.out.println("Clic au point de coordonnées" +x+"," +y); } public void mousePressed (MouseEvent ev) {} public void mouseReleased (MouseEvent ev) {} public void mouseEntered (MouseEvent ev) {} public void mouseExited(MouseEvent ev) {} }

39. Clic souris

40. Créer sa propre widget de dessin • Tout le code graphique sera placé dans une méthode appelé paintComponent() • Cette méthode est appelé par le système et l’utilisateur n’appellera jamais cette méthode • Créer une sous-classe de JPanel et redéfinissez une seule méthode paintComponent • A chaque fois que l’écran aura besoin d’être rafraichi la méthode paintComponent sera appelé • Un appel à la méthode repaint() également

41. import javax.swing.* ; import java.awt.*; class Panneau extends JPanel { public void paintComponent(Graphics g) { g.setColor(Color.orange); g.fillRect(20,50,100,100); } } class Fen1Bouton extends JFrame { private JPanel pan; public Fen1Bouton () { JFrame cadre = new JFrame(); cadre.setSize (300, 200) ; Panneau pan = new Panneau(); cadre.getContentPane().add(pan) ; cadre.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); cadre.setVisible(true) ; } } public class Dessin1 { public static void main (String args[]) { Fen1Bouton fen = new Fen1Bouton() ; } }

43. Insérer une image class Panneau extends JPanel { public void paintComponent(Graphics g) { Image image = new ImageIcon("chat.jpg").getImage(); g.drawImage(image,3,4,this); } }

45. Exemple de méthode qu’on peut appeler sur une référence Graphics • drawImage(), drawLine(), drawPolygon(), drawRect(), drawoval(), fillRect(), setColor()… • Méthode avec Graphics2D (classe mère) • fill3DRect(), rotate(),shear(),scale()… • Par les vertus du polymorphisme passage d’un contexte à l’autre: Graphics g2d = (Graphics2D g);

46. Autre exemple d’utilisation du context graphics • Dessin de trace de clics souris

47. Exo1: • Faire une interface qui modifie la couleur d’un cercle à chaque fois qu’on actionne un bouton « changer couleur » • Exo2: écrire une interface qui produit un rectangle bleu qui rétrécit et finit par disparaître

48. Exo: l’objectif est de réaliser un mini-calculatrice qui est doté d’une addition et d’une multiplication ainsi que d’un bouton pour effacer.

49. Gestionnaire GridLayout • Permet de disposer les différents composants suivant une grille régulière chaque composant occupant une cellule • Ex: conteneur.setLayout(new GridLayout(4,5)); // 4 lignes, 5 colonnes • conteneur.setLayout(new GridLayout(4,5,15,10)); // intervalle horizontale de 15 et verticale de 10

50. Quelques composants swing • JTextField • Constructeurs • JTextField champ = new JTextField(20) // crée un champ de 20 colonnes • Utilisation • Y placer du texte champ.setText(‘’Bonjour’’); • Y extraire du texte System.out.println(champ.getText()); • Recevoir un ActionEvent quand l’utilisateur appuie sur la touche entrée • Champ.addActionListener(myActionListener)