Les Interfaces Graphiques

Transcription

1 Éric Gillon Thomas Rey Lycée Marlioz 24 janvier 2014

2 Introduction Nous avons vu précédemment comment créer des boîtes de dialogues, des fenêtres pour dessiner,...

3 Introduction (suite) Aujourd hui, nous irons un peu plus loin et nous verrons comment créer des interfaces graphiques un peu plus elaborées : comment placer des composants dans nos fenêtres ; comment faire réagir notre programme en fonction des boutons cliqués, des textes saisis,...

4 Sommaire

5 Les layouts Un Layout (agent de placement) est une organisation prédéfinie de notre fenêtre, une sorte de cadre vide constitué d emplacements réservés que les programmeurs que nous sommes vont remplir avec les composants de notre interface graphique. Il existe de nombreux types de Layouts...

6 Layouts : quelques exemples Voici une liste (non exhaustive) de Layouts disponibles dans Java : BorderLayout : que nous utiliserons aujourd hui ;

7 Layouts : quelques exemples Voici une liste (non exhaustive) de Layouts disponibles dans Java : BorderLayout : que nous utiliserons aujourd hui ; BoxLayout : pour réaliser des alignements ;

8 Layouts : quelques exemples Voici une liste (non exhaustive) de Layouts disponibles dans Java : BorderLayout : que nous utiliserons aujourd hui ; BoxLayout : pour réaliser des alignements ; CardLayout : pour des superpositions (type interface à onglets) ;

9 Layouts : quelques exemples Voici une liste (non exhaustive) de Layouts disponibles dans Java : BorderLayout : que nous utiliserons aujourd hui ; BoxLayout : pour réaliser des alignements ; CardLayout : pour des superpositions (type interface à onglets) ; FlowLayout : composants les uns à la suite des autres ;

10 Layouts : quelques exemples Voici une liste (non exhaustive) de Layouts disponibles dans Java : BorderLayout : que nous utiliserons aujourd hui ; BoxLayout : pour réaliser des alignements ; CardLayout : pour des superpositions (type interface à onglets) ; FlowLayout : composants les uns à la suite des autres ; GridLayout : place les composants dans un tableau de cellules de même taille ;

11 Layouts : quelques exemples Voici une liste (non exhaustive) de Layouts disponibles dans Java : BorderLayout : que nous utiliserons aujourd hui ; BoxLayout : pour réaliser des alignements ; CardLayout : pour des superpositions (type interface à onglets) ; FlowLayout : composants les uns à la suite des autres ; GridLayout : place les composants dans un tableau de cellules de même taille ; Un guide des différents Layouts est disponible ici...

12 le BorderLayout Ce Layout est constitué de cinq emplacements notés Nord, Sud, Est, Ouest, Centre :

13 Code Java public static void main ( String [] args ) { JFrame mafenetre = new JFrame ();// Création fenêtre JButton nord = new JButton ("NORD");// JButton sud = new JButton ("SUD");// Création JButton est = new JButton ("EST");// des JButton ouest = new JButton ("OUEST");// boutons JButton centre = new JButton ("CENTRE"); // paramètres de la fenêtre : mafenetre. settitle (" D e s c r i p t i o n du BorderLayout "); mafenetre. setsize (400,300) ; mafenetre. setlayout ( new BorderLayout ()); // Def du Layout mafenetre. add (nord, BorderLayout. NORTH ); // Placement mafenetre. add (sud, BorderLayout. SOUTH ); // des mafenetre. add (est, BorderLayout. EAST ); // boutons mafenetre. add ( ouest, BorderLayout. WEST ); // dans le mafenetre. add ( centre, BorderLayout. CENTER ); // Layout mafenetre. setvisible ( true );}

14 Avantage d un Layout Un des principaux avantages est que le contenu s adapte à la taille de la fenêtre. En redimensionnant la fenêtre, les composants gardent la même disposition mais en s adaptant à la nouvelle forme...

15 Inconvénients d un Layout L utilisation d un Layout oblige le programmeur à «penser» (c est-à-dire avec du papier et un crayon) sa fenêtre avant de se lancer dans le code du programme! Rappel : un (bon) programmeur commence avec un papier et un crayon! À propos du projet ISN : le schéma de votre interface dessiné «à la main» peut (doit) faire partie de votre dossier à présenter...

16 Sommaire

17 La balle qui tombe Dans la suite de ce diaporama, nous allons essayer de créer une application qui ressemble à la fenêtre ci-dessous :

18 La balle qui tombe : détails Utilisation d un BorderLayout avec : Nord, Sud et Est : vides ; Centre : un JPanel qui contient l image de la balle ; Ouest : un JPanel qui est organisé par un BoxLayout (alignement vertical).

19 La balle qui tombe : le code Java JFrame fenetre = new JFrame (); PanneauDessin panneaud = new PanneauDessin ();// la classe PanneauDessin créé un panneau avec une balle qui peut s animer ( voir TP précédent ) JPanel panneaub = new JPanel (); JButton btna = new JButton (" A f f i c h e r ");// Clair non? JButton btnd = new JButton (" Démarrer "); // idem pr autres btn // on ajoute le BoxLayout à panneaub : panneaub. setlayout ( new BoxLayout ( panneaub, BoxLayout. PAGE_AXIS )); panneaub. setbackground ( Color. ORANGE ); // jolie couleur! panneaub. add ( btna ); // Ajout du bouton Afficher panneaub. add ( btnd ); // Clair! fenetre. settitle ("La b a l l e qui tombe");// Comme d hab! fenetre. setsize (400,300) ; fenetre. setlayout ( new BorderLayout ()); fenetre. add ( panneaud, BorderLayout. CENTER ); fenetre. add ( panneaub, BorderLayout. WEST ); fenetre. setvisible ( true );

20 La balle qui tombe : le code Java (suite) Pour mémoire, le code Java de la classe PanneauDessin : public class PanneauDessin extends JPanel { private int posx = 100, posy =20; public void paintcomponent ( Graphics g) { g. filloval (posx, posy, 80, 80) ; } public int getposx () { return posx ; } public void setposx ( int posx ) { this. posx = posx ; } public int getposy () { return posy ; } public void setposy ( int posy ) { this. posy = posy ; } }

21 Sommaire

22 Obtenir des informations Dans un TP précédent, nous avons créé des conteneurs que l utilisateur va (ou non) utiliser : boutons ; zones de textes ; cases cochées,... Il faut maintenant récupérer ces informations : quel bouton a été pressé? quel texte a été saisi? quelles cases sont cochées?

23 Les «listeners» Pour indiquer à Java que nous avons besoin «d écouter» les actions de l utilisateur, il faut : implémenter les écouteurs d actions : c est-à-dire ajouter à la définition de notre classe implements ActionListener ;

24 Les «listeners» Pour indiquer à Java que nous avons besoin «d écouter» les actions de l utilisateur, il faut : implémenter les écouteurs d actions : c est-à-dire ajouter à la définition de notre classe implements ActionListener ; appliquer à chaque composant la méthode qui permet «d écouter» les actions sur ce composant, il s agit de la méthode addactionlistener ;

25 Les «listeners» Pour indiquer à Java que nous avons besoin «d écouter» les actions de l utilisateur, il faut : implémenter les écouteurs d actions : c est-à-dire ajouter à la définition de notre classe implements ActionListener ; appliquer à chaque composant la méthode qui permet «d écouter» les actions sur ce composant, il s agit de la méthode addactionlistener ; écrire une méthode qui se déclenche à chaque événement causé par l utilisateur (ou le programme lui-même).

26 Les «listeners» Pour indiquer à Java que nous avons besoin «d écouter» les actions de l utilisateur, il faut : implémenter les écouteurs d actions : c est-à-dire ajouter à la définition de notre classe implements ActionListener ; appliquer à chaque composant la méthode qui permet «d écouter» les actions sur ce composant, il s agit de la méthode addactionlistener ; écrire une méthode qui se déclenche à chaque événement causé par l utilisateur (ou le programme lui-même). Tout ceci paraît bien compliqué...

27 Les «listeners» Pour indiquer à Java que nous avons besoin «d écouter» les actions de l utilisateur, il faut : implémenter les écouteurs d actions : c est-à-dire ajouter à la définition de notre classe implements ActionListener ; appliquer à chaque composant la méthode qui permet «d écouter» les actions sur ce composant, il s agit de la méthode addactionlistener ; écrire une méthode qui se déclenche à chaque événement causé par l utilisateur (ou le programme lui-même). Tout ceci paraît bien compliqué...et ça l est quand même un peu!

28 Les «listeners» Pour indiquer à Java que nous avons besoin «d écouter» les actions de l utilisateur, il faut : implémenter les écouteurs d actions : c est-à-dire ajouter à la définition de notre classe implements ActionListener ; appliquer à chaque composant la méthode qui permet «d écouter» les actions sur ce composant, il s agit de la méthode addactionlistener ; écrire une méthode qui se déclenche à chaque événement causé par l utilisateur (ou le programme lui-même). Tout ceci paraît bien compliqué...et ça l est quand même un peu! Détaillons sur notre exemple de balle qui tombe...

29 Le bouton afficher Au départ notre panneau «dessin» est vide. Il faut qu en cliquant sur le bouton «afficher» la balle apparaisse dans ce panneau...

30 Le bouton afficher On considère que le panneau constitué des boutons est créé par une classe PanneauBoutons. Pour qu elle «écoute» les boutons, on la définit ainsi : public class PanneauBoutons extends JPanel implements ActionListener { Dans la définition du bouton «afficher» on écrit alors : this.add(btnafficher); btnafficher.addactionlistener(this); Ici this désigne le panneau de type PanneauBoutons (ceci permet à une classe faire appel à l objet du type «elle-même»)

31 Le bouton afficher Notre bouton est prêt à fonctionner, il reste à créer, dans dans la classe PanneauBoutons, la méthode actionperformed ainsi public void actionperformed ( ActionEvent evt ) { // Dès qu un évenement surgit cette méthode est lancée if ( evt. getsource () == this. btnafficher ) { System. out. println (" c l i c sur a f f i c h e r ");} } Désormais, à chaque clic sur le bouton «afficher», le texte «clic sur afficher» apparait dans la console.

32 Sommaire

33 Écouter le clavier Pour «écouter» les événements du clavier il faut ajouter au composant qui «écoute» un KeyListener, littéralement un écouteur de touche.

34 Écouter le clavier Pour «écouter» les événements du clavier il faut ajouter au composant qui «écoute» un KeyListener, littéralement un écouteur de touche. Concrétement, on a un Label (ou un autre composant) nommé moncompo, dans le code, on écrit : moncompo. addkeylistener ( new KeyListener ()); moncompo. requestfocus ();

35 Écouter le clavier Pour «écouter» les événements du clavier il faut ajouter au composant qui «écoute» un KeyListener, littéralement un écouteur de touche. Concrétement, on a un Label (ou un autre composant) nommé moncompo, dans le code, on écrit : moncompo. addkeylistener ( new KeyListener ()); moncompo. requestfocus (); Remarque : la deuxième ligne permet au composant qui écoute le clavier d être le composant actif et donc de pouvoir écouter.

36 Récupérer la touche appuyée Lorsqu une touche est appuyée, la méthode keypressed est invoquée, il faut donc la compléter ainsi : public void keypressed ( KeyEvent e) { char carappuye = e. getkeychar ();// ici on récupère le caractère if ( carappuye == "a") { System. out. println ("Vous avez appuyé sur a"); } int codetouche = e. getkeycode ();// ici on récupère le code de la touche if ( codetouche == 13) { // 13 correspond à entrée System. out. println ("Vous avez appuyé sur Entrée "); } }

37 Autres méthodes Il existe trois méthodes qui «gèrent» le clavier : keypressed : lorsqu une touche est appuyée (on l a vu dans la diapo précédente) ;

38 Autres méthodes Il existe trois méthodes qui «gèrent» le clavier : keypressed : lorsqu une touche est appuyée (on l a vu dans la diapo précédente) ; keyreleased : lorsqu une touche est relâchée ;

39 Autres méthodes Il existe trois méthodes qui «gèrent» le clavier : keypressed : lorsqu une touche est appuyée (on l a vu dans la diapo précédente) ; keyreleased : lorsqu une touche est relâchée ; keytyped : appelée entre les deux méthodes ci-dessus (on écrit ici le code de tout ce qu il y a faire tant que la touche reste enfoncée) ; La liste des codes est disponible par exemple ici : constant-values.html#java.awt.event.keyevent.vk_7

40 Et le mulot? De la même façon qu un programme java peut écouter le clavier, il peut aussi écouter la souris en ajoutant à un composant un MouseListener.

41 Et le mulot? De la même façon qu un programme java peut écouter le clavier, il peut aussi écouter la souris en ajoutant à un composant un MouseListener. Il existe alors plusieurs méthodes : public void mouseclicked ( MouseEvent e) {} // Invoked when the mouse has been clicked on a component. public void mousepressed ( MouseEvent e) {} // Invoked when a mouse button has been pressed on a component. public void mousereleased ( MouseEvent e) {} // Invoked when a mouse button has been released on a component. public void mouseentered ( MouseEvent e) {} // Invoked when the mouse enters a component. public void mouseexited ( MouseEvent e) {} // Invoked when the mouse exits a component.

42 Sommaire

43 Vous savez tout! Voilà! Vous connaissez le principe d un ActionListener. À vous d étudier le code du projet «BalleQuiTombe» distribué en classe et de le modifier en suivant les consignes.

44 Vous savez tout! Voilà! Vous connaissez le principe d un ActionListener. À vous d étudier le code du projet «BalleQuiTombe» distribué en classe et de le modifier en suivant les consignes. Au boulot!