Construire une interface graphique en Java Introduction Java

Construire une interface graphique en Java Introduction à Java Swing © Sofia Zaidenberg CNRS Mai 2007 1

Avertissement L’objectif de ce cours est de présenter les différentes techniques concernant la construction d’une interface graphique en JAVA. La conception d’interfaces graphiques étant loin d’être triviale, et les packages proposés pour cela par le JDK étant parmi les plus « complexes » (29 packages) nous n’avons pas la prétention d’être exhaustif. Il s’agit de donner les éléments de bases qui vous permettront ensuite d’aller plus loin dans la création d’interfaces utilisateur. Une partie de ce cours est basée sur un exemple tiré du chapitre 4 du livre « Java La Synthèse, 2ème edition » de G. Clavel, N. Mirouze, S. Moucherot, E. Pichon et M. Soukal (Inter. Editions). Certains éléments concernant la gestion des événements sont directement inspirés du cours « Swing Crash course » de Matthias Hauswirth http: //www. isbiel. ch/I/Resources/Comp/Sun/Java/Swing/ D'autres sont inspirés du cours « Graphical User Interface in Java » de Jonas Kvarnström On pourra également se référer à - « JAVA in a Nutshell » , chapitre 7, David Flanagan, 2 nd Ed. O'Reilly 1997 - « Java Foundation Classes in a nutshell » , David Flanagan, Ed. O'Reilly 1999 - « Swing la synthèse » , Valérie Berthié, Jean-Baptiste Briaud, Ed. Dunod 2001 © Sofia Zaidenberg CNRS Mai 2007 2

API graphique pour les applications Java l Java : un langage indépendant des plateformes (cross-platform language) l un même programme doit pouvoir être utilisé dans des environnements (matériel et OS) différents sans recompilation. l Nécessité d'offrir une API pour les interfaces graphiques indépendante elle aussi des plateformes l Classes et interfaces java l Modèle de gestion des événements l Exemple : une classe Text. Field pour définir un champ de saisie de texte l. Text. Field(String content) l. Text. Field() lvoid set. Text(String content) l. String get. Text() l. . . © Sofia Zaidenberg CNRS Mai 2007 3

API Java et systèmes de fenêtrage l Problème : les systèmes de gestion d'interface utilisateur (GUI Graphical User Interface systems) sont très différents les uns des autres : l X Window + motif l X Window + gtk l Mac. OS X API GUI cible l MS Windows l. . . API Java Adaptater GUI cible Application Java Adaptater l GUI cible Deux stratégies possibles : l faire une utilisation maximale du système graphique cible l faire une utilisation minimale du système graphique cible © Sofia Zaidenberg CNRS Mai 2007 4

API Java pour GUI l Utilisation maximale du système graphique sous-jacent l L'objet Text. Field délègue la plupart de ses tâches à un composant natif. l. Le programmeur java utilise un objet Text. Field l. L’objet Text. Field délègue à une classe adaptateur dépendant de l'OS : Motif. Text. Field, GTKText. Field, Windows. Text. Field, Mac. OSText. Field. . l. Le l système graphique natif réalise le plus gros du travail Avantages / désavantages l(+) apparence et le comportement (look and feel) des interfaces Java identique à celui d'applications « ordinaires » l(+) pas besoin de réimplémenter des composants existants l(-) ne permet de ne fournir que les composants disponibles sur toutes les plateformes l(-) difficile de garantir un comportement identique sur toutes les plateformes l Choix adopté par JAVA AWT l AWT Abstract Window Toolkit packages java. awt. * présents dans Java depuis version 1. 0. l conception pas toujours très judicieuse (cf les évolutions de awt entre version 1. 0 et 1. 1 de Java) l © Sofia Zaidenberg CNRS Mai 2007 5

Composants graphiques de AWT l palette de composants fournies par awt ne contient que des composants simples seuls les composants standard existants dans tous les systèmes d’exploitation peuvent être présents dans awt Classe abstraite décrit caractéristiques communes à tous les composants Text. Field Choice Canvas Button List Button Checkbox Check. Box Text. Component Text. Field Choice Scroll. Bar Text. Area Container Label Window Frame composants pouvant contenir d’autres composants Component List Label Object Panel Scroll. Pane Dialog Panel File. Dialog © Sofia Zaidenberg CNRS Mai 2007 6

API Java pour GUI l Utilisation minimale du système graphique sous-jacent l Utiliser des éléments natifs uniquement pour les opérations de base l Ouvrir une fenêtre, dessiner des lignes/du texte, gestion primitive des événements Réaliser tout le reste en Java l L'objet Text. Field s'affiche en dessinant des lignes, . . . l Avantages / désavantages l (+) facilité d'éviter les différences entre plateformes l (+) n'importe quel nouveau composant d'interface est immédiatement disponible sur toutes les plateformes l(-) besoin de réimplémenter tous les composants d'interface l(-) les applications java n'ont pas le même look and feel que les applications « ordinaires » l(-) lenteur ? l l C'est le choix adopté par SWING l packages javax. swing. * dans JDK depuis version 1. 2 © Sofia Zaidenberg CNRS Mai 2007 7

Swing et JFC l Swing s'intègre aux JFC (Java Fundation Classes lancées par SUN en 97 pour la création d’interfaces graphiques plus élaborées que AWT et intégré depuis version 2 de Java (1. 2) ) l l JFC = Java 2 D API + copier coller inter-applications + Swing + AWT Swing l. Composants légers (lightweight) 100% java – Prennent en charge leur affichage sans passer par des objets « Peers » gérés par le système – multiplication des composants plus riches en fonctionnalités (listes arborescentes, grilles…. ) – aspect de l’IHM : Motif, Windows, Métal, Mac, . . . – modèle MVC (Model View Controler) © Sofia Zaidenberg CNRS Mai 2007 8

Composants graphiques Swing l Object awt Classe abstraite décrit caractéristiques communes à tous les contrôles Swings Component Container Window Frame JFrame Hiérarchie très partielle des classes couvrant les composants des swings Dialog JDialog Button . . . Panel JWindow JButton JComponent Abstract. Button JToggle. Button JRadio. Button © Sofia Zaidenberg JCheck. Box CNRS . . . Box JColor. Chooser . . . JLabel JPanel JMenu. Item JMenu . . . Mai 2007 9

Swing : démos et tutoriaux l l l jdk 1. 5. 0_06/demo/jfc/Swing. Set 2 Java tutorial consacré aux swing l http: //java. sun. com/docs/books/tutorial/uiswing/ En particulier l’index visuel des composants swing l http: //java. sun. com/docs/books/tutorial/uiswing/components. html Penser à étudier des programmes sources pour apprendre à se servir des swing © Sofia Zaidenberg CNRS Mai 2007 10

Java Fundation Classes packages awt et swing tous les deux présents dans la plateforme Java l Quel package utiliser : AWT ou Swing ? ? ? l « Swing provides many benefits to programmers and end users. Unless you have a good reason not to convert (and use AWT), we urge you to convert to Swing as soon as possible. » M. Campione - K. Walrath « the Java Tutorial » Puisqu’elles le disent si gentiment, allons-y… l Si Swing et AWT ne sont plus vraiment en concurrence, un troisième larron a fait son apparition : SWT (Standard Window Tool. Kit) développé par IBM – Eclipse l approche similaire à AWT, l beaucoup plus ambitieux, nombreux composants, modèle MVC (JFace) l windows, motif, gtk, Mac OS X © Sofia Zaidenberg CNRS Mai 2007 11

Introduction à Swing composants de base l conteneurs l fenêtres l placement des composants (layout managers) l gestion de l'interaction (événements) l © Sofia Zaidenberg CNRS Mai 2007 12

Exemple développé* l Construction d’un éditeur graphique simple l l Créer une fenêtre Gérer un menu Gérer différents composants d’interaction simples (boutons, champ de saisie de texte…) Dessiner dans une fenêtre *d'après « Java La Synthèse , 2ème edition » de G. Clavel, N. Mirouze, S. Moucherot, E. Pichon et M. Soukal (Inter. Editions). © Sofia Zaidenberg CNRS Mai 2007 13

Structure de l’interface graphique l La création de l’interface graphique passe forcément par une instance de la classe JFrame Du point de vue du système d’exploitation cette fenêtre représente l’application l La fenêtre joue le rôle de « conteneur » dans lequel vont être disposés les différents éléments constitutifs (composants) de l’interface graphique de l’application (boutons, listes déroulantes, zone de saisie…) l ces éléments sont désignés sous les termes de l contrôles (IHM) l composants (components en JAVA) l widgets (Xwindow-Motif) l © Sofia Zaidenberg CNRS Mai 2007 14

Composants graphiques Swing l Usage : afficher du texte statique et/ou une image l Ne réagit pas aux interactions de l’utilisateur l Définition du texte du label l Dans le constructeur JLabel lb = new JLabel("un label"); l l l JComponent JLabel Par la méthode set. Text lb. set. Text("un autre texte pour le label"); Méthode symétrique lb. get. Text() Définition d’une icône : l Par défaut pas d’image l Dans le constructeur l Par la méthode set. Icon lb. set. Icon(new Image. Icon("info. gif")); l l JLabel Spécification de la position du texte par rapport à l’icône lb. set. Vertical. Text. Position(Swing. Constants. BOTTOM); lb. set. Horizontal. Text. Position(Swing. Constants. CENTER); Mise en forme du texte l set. Text supporte HTML lb. set. Text("<html>ce texte est en <B>gras</B></HTML>") attention : si texte HTML est incorrect, exception levée à l’exécution © Sofia Zaidenberg CNRS Mai 2007 15

Composants graphiques Swing JText. Field l Usage : présente un champ de saisie de texte l Création d’un JText. Field l JText. Field jtf = new JText. Field(); l JText. Field jtf = new JText. Field("un texte"); l JText. Field jtf = new JText. Field(20); l Modification du texte l Par interaction de l’utilisateur l jtf. set. Text("le texte"); l Récupérer le texte l jtf. get. Text(); l Copier / Coller l jtf. copy() ou jtf. cut() l jtf. paste(); l JComponent JText. Component Interdire saisie l jtf. set. Editable(false); JText. Area Saisie de mot de passe © Sofia Zaidenberg JPassword. Field CNRS JText. Field a des frères JEditor. Pane et des fils Saisie avec JFormatted. Field vérification d'un format Mai 2007 16

Composants graphiques Swing JButton l Usage : un bouton permettant de déclancher une action l Création d’un JButton l JButton jbt = new JButton("Titre"); l JButton jbt = new JButton("Titre", icon); l Association d'une icône l à l'instanciation l méthodes set. Icon(), set. Roll. Over. Icon(), set. Pressed. Icon(), set. Disabled. Icon() l Association d'un raccourci clavier l jbt. set. Mnemonic('b'); // Alt + b l Enlever / ajouter la bordure l jbt. set. Border(false); l Enlever le cadre indiquant le focus l jbt. set. Focus. Painted(false); l Simuler un clic utilisateur l jbt. do. Click(); © Sofia Zaidenberg JComponent Abstract. Button Définit toutes ces méthodes car JButton a des frères JButton CNRS Mai 2007 17

Composants graphiques Swing l Usage : un bouton à deux états. Utilisé lorsque l'aspect visuel du bouton doit refléter état (ON/OFF) d'une fonctionnalité (exemple boutons dans une barre d'outils). JToggle. Button JComponent Abstract. Button JToggle. Button ON JButton OFF l Association d'une icône aux états l jtbt. set. Icon(icon 1) état "non sélectionné" l jtbt. set. Selected. Icon(icon 2) état "sélectionné" l Forcer l'état l jtbt. set. Selected(true) l Consulter l'état l jtbt. is. Selected() true ou false © Sofia Zaidenberg CNRS Mai 2007 18

JCheck. Box et JRadio. Button Composants graphiques Swing l Usage : l cases à cocher (états indépendants) l et boutons radio (états dépendant au sein d'un groupe de boutons) JComponent Button. Group Abstract. Button JToggle. Button JCheck. Box cb 1 cb 2 cb 3 cb 4 = = new new JCheck. Box("Chin"); JCheck. Box("Glasses"); JCheck. Box("Hair"); JCheck. Box("Teeth"); JRadio. Button JCheck. Box Button. Group groupe = new Button. Group(); JRadio. Button b 1 = new JRadio. Button("Bird"); JRadio. Button b 2 = new JRadio. Button("Cat"); . . . JRadio. Button b 5 = new JRadio. Button("Pig"); b 5. set. Selected(true); groupe. add(b 1); groupe. add(b 2); . . . groupe. add(b 5); © Sofia Zaidenberg CNRS Mai 2007 19

Composants graphiques Swing JCombo. Box l Usage : liste déroulante dans laquelle l'utilisateur peut choisir un item l Indiquer les items à afficher l l l JCombo. Box Combo box éditable l l en passant en paramètre du constructeur un tableau d'objets ou un java. util. Vector Object[] items = { "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi" }; JCombo. Box cb = new JCombo. Box(items); en passant par add. Item(Object) cb. add. Item("dimanche"); JComponent le champ qui représente le texte sélectionné est éditable (c'est un JText. Field) Vector pays = new Vector(); pays. add("Angleterre"); . . . JCombo. Box cb = new JCombo. Box(pays); cb. set. Editable(true); Récupération de l'item sélectionné l l get. Selected. Index() int get. Selected. Item() Object © Sofia Zaidenberg CNRS Mai 2007 20

Composants graphiques Swing l l Usage : liste dans laquelle l’utilisateur peut choisir un item l à préférer à une combo box lorsque le nombre d'éléments de la liste est grand l permet une sélection multiple en passant en paramètre un tableau d'objets ou un java. util. Vector Object[] data = { "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi" }; l dans le constructeur : JList jl = new JList(data); l par la méthode set. Data : jl. set. Data(data); set. Selection. Mode(int) List. Selection. Model. SINGLE_SELECTION SINGLE_INTERVAL_SELECTION MULTIPLE_INTERVAL_SELECTION définir l'arrangement des éléments l l JList définir le mode de sélection l l JComponent indiquer les éléments à afficher l l JList set. Layout. Orientation(int) récupérer la sélection l l List. VERTICAL HORIZONTAL_WRAP VERTICAL_WRAP get. Selected. Index() int, get. Selected. Indices() int[] get. Selected. Value() Object, get. Selected. Values() Object[] © Sofia Zaidenberg CNRS Mai 2007 21

Capacités communes à tous les composants l Activation / désactivation du composant (le composant réagit ou non aux interactions avec l'utilisateur) l set. Enabled(boolean); l is. Enabled() boolean Visibilité / invisibilité d'un composant l set. Visible(boolean); l is. Visible() boolean l Apparence du curseur (changement de l'apparence du curseur en fonction du composant qu'il survole) l set. Cursor(java. awt. Cursor) l bt. set. Cursor(Cursor. get. Predefined. Cursor(Cursor. WAIT_CURSOR)); l Bulles d’aide ( « tooltips » ) l set. Tool. Top. Text(String) possibilité d'utiliser HTML pour formater le texte d'aide Couleur l set. Back. Ground. Color(java. awt. Color) l set. Fore. Ground. Color(java. awt. Color) l… l © Sofia Zaidenberg CNRS Mai 2007 22

Container Object Container : composant particulier dont le rôle est de contenir d'autres composants awt Component Container Window Frame JFrame Dialog JDialog Button Panel JWindow JButton . . . swing JComponent Abstract. Button JToggle. Button JRadio. Button © Sofia Zaidenberg JCheck. Box CNRS . . . Box JColor. Chooser . . . JLabel JPanel JMenu. Item JMenu . . . Mai 2007 23

Container Object l 0. . * Component Container est un composant l un container peut contenir d'autres containers l permet de créer des arborescences de composants int ncomponents Component[] component. . . Component add(Component) Component add(Component, int). . . void remove(int) void remove(Component). . . int get. Component. Count() Component get. Component(int) © Sofia Zaidenberg CNRS Mai 2007 24

Arborescence de containers l Construction d’une interface : élaborer une arborescence de composants à l'aide de containers jusqu'à obtenir l'interface souhaitée composant qui affiche du texte bouton 1 bouton 2 fenêtre contient panneau. Gauche. add(composant. Texte); panneau gris foncé panneau. Droite. add(bouton 1); panneau. Droite. add(bouton 2); panneau gauche panneau. Gris. add(panneau. Gauche); panneau. Gris. add(panneau. Droite); composant texte panneau droite bouton 1 bouton 2 fenêtre. add(panneau. Gris); © Sofia Zaidenberg CNRS Mai 2007 25

Top Level Containers l l Pour apparaître sur l'écran, tout composant doit se trouver dans une hiérarchie de "conteneurs" À la racine de cette hiérarchie se trouvent les fenêtres (top level container) Object awt Component Container Window Frame Dialog Button Panel . . . Fenêtre sans bordure ni titre Ni déplaçable, ni redimensionable Utilisée pour « splash screen » au lancement d’une application JWindow Fenêtre secondaire Peut être Fenêtre principale JFrame JDialog © Sofia Zaidenberg modale par rapport à un autre JDialog ou JFrame CNRS B modale par rapport à A si l’affichage de la fenêtre B empêche l’accès à fenêtre A Mai 2007 26

Fenêtres Comportement l new JFrame(. . . ) ou new JDialog(. . . ) crée un objet fenêtre mais ne provoque pas son affichage l set. Visible(true) (show()) affiche la fenêtre set. Visible(false) (hide()) cache la fenêtre, mais ne la détruit pas. l l'objet fenêtre et son contenu existent toujours en mémoire la fenêtre peut être réaffichée ultérieurement l dispose() permet de libérer les ressources natives utilisées par le système pour afficher la fenêtre et les composants qu'elle contient l Par défaut à la fermeture d'une fenêtre, elle est simplement rendue invisible l on verra plus tard comment définir nos propres comportements l possibilité d'associer un comportement choisi parmi un ensemble de comportements prédéfinis l set. Default. Close. Operation(int operation) Window. Constants. HIDE_ON_CLOSE Window. Constants. DO_NOTHING_ON_CLOSE Window. Constants. EXIT_ON_CLOSE Window. Constants. DISPOSE_ON_CLOSE © Sofia Zaidenberg CNRS Mai 2007 27

Fenêtre d’application l Toute fenêtre d’application est représentée par une classe dérivant ou utilisant la classe JFrame du package javax. swing import javax. swing. JFrame; • se comporte comme toute fenêtre du système d’exploitation : • peut être redimensionnée, déplacée, … public class My. Frame extends JFrame { final static int HAUTEUR = 200; final static int LARGEUR = 300; public My. Frame() { set. Title("Ma première Fenêtre"); set. Size(LARGEUR, HAUTEUR); set. Visible(true); } • aff nêtre à iche la fe l’écran n d’exécutio » d a e r th « • lance un teractions sur cette r in pour gére fenêtre public static void main(String[] args) { new My. Frame(); do { System. out. println("dans le thread principal"); System. out. println("voulez vous poursuivre le thread principal ? "); } while (Lecture. Clavier. lire. Oui. Non ()); System. out. println("fin thread principal"); } • par défaut la fermeture de la fenêtre la rend simplement invisible elle ne termine pas son thread d'exécution ! } • L’exécution du programme principal ne se termine que lorsque le « thread » lié à la fenêtre se termine lui aussi © Sofia Zaidenberg CNRS Mai 2007 28

Fenêtres Comportement l set. Size(int largeur, int hauteur) fixe la taille de la fenêtre l set. Location(int x, int y) fixe la position de la fenêtre (son coin supérieur gauche) sur l'écran java. awt. Toolkit permet d'obtenir la taille de l'écran Toolkit tk = Toolkit. get. Default. Toolkit(); Dimension dim. Ecran = tk. get. Screen. Size(); l l set. Resizable(boolean) autorise ou non le redimensionnement de la fenêtre par l'utilisateur l set. Tilte(String) définit le contenu de la barre de titre de la fenêtre l to. Front(), to. Back() fait passer la fenêtre au premier plan ou à l'arrière plan © Sofia Zaidenberg CNRS Mai 2007 29

Fenêtres l Les composants qui seront visibles dans la fenêtre seront placés dans un conteneur particulier associé à celle-ci : Content Pane l pour récupérer ce conteneur : get. Content. Pane() Container l La fenêtre peut contenir de manière optionnelle une barre de menus (qui n'est pas dans le content pane) © Sofia Zaidenberg CNRS Mai 2007 30

Ajout d’un composant à une fenêtre Avec AWT Avec les Swings import javax. swing. *; import java. awt. *; public class My. Frame extends Frame { public class My. Frame extends JFrame { final static int HAUTEUR = 200; final static int LARGEUR = 300; public My. Frame() { set. Title("Ma première Fenêtre"); set. Size(LARGEUR, HAUTEUR); Button b = new Button("Mon 1 er composant"); add(b); JButton b = new JButton("Mon 1 er composant"); this. get. Content. Pane(). add(b); show(); set. Visible(true); } } Un composant ne peut être directement inséré dans une JFrame, mais à son « content pane » qui doit être récupéré au préalable 1) Création du composant 2) ajout au « conteneur » © Sofia Zaidenberg CNRS Mai 2007 31

Fenêtres l Création d’un menu Ajouter à l’application un menu rudimentaire Classes utilisées : JMenu. Bar : représente la barre de menu d’une fenêtre JMenu : options visibles dans la barre de menu Fichier Nouveau Quitter Aide A propos JMenu. Item : Items qui déclencheront par leur sélection des actions définies par le programmeur JComponent Abstract. Button JFrame JMenu. Item 0. . 1 JMenu. Bar © Sofia Zaidenberg CNRS JMenu Mai 2007 32

Fenêtres Création d’un menu Classes utilisées : JMenu. Bar : représente la barre de menu d’une fenêtre JMenu : options visibles dans la barre de menu import java. swing. *; JMenu. Item : Items qui déclencheront par leur sélection des actions définies par le programmeur public class Menu. Editeur extends JMenu. Bar { JMenu. Item quitter, nouveau, a. Propos; public Menu. Editeur() { Fichier JMenu menu. Fichier = new JMenu("Fichier"); nouveau = new JMenu. Item("Nouveau"); quitter = new JMenu. Item("Quitter"); menu. Fichier. add(nouveau); menu. Fichier. add. Separator (); menu. Fichier. add(quitter); JMenu menu. Aide = new JMenu("Aide"); a. Propos = new JMenu. Item("A propos"); menu. Aide. add(a. Propos); 1) création des éléments du menu Quitter 2) association des objets JMenu. Item dans un objet Menu 3) ajout des objets JMenu dans l’objet JMenu. Bar (this) this. add(menu. Fichier); this. add(menu. Aide); } Nouveau Fichier Nouveau Quitter Fichier Nouveau Aide A propos Quitter } // Menu. Editeur © Sofia Zaidenberg CNRS Mai 2007 33

Fenêtres l Création d’un menu Seule une instance de la classe JFrame (ou JDialog) peut héberger un menu import java. swing. *; public class My. Frame extends JFrame { final static int HAUTEUR = 200; final static int LARGEUR = 300; public My. Frame() { set. Title("Ma première Fenêtre"); set. Size(LARGEUR, HAUTEUR); set. JMenu. Bar(new Menu. Editeur()); set. Visible(true); } set. JMenu. Bar prend en paramètre une instance de la classe JMenu. Bar : • soit une instance directe de JMenu. Bar qui aura été modifiée grâce aux méthodes add(…) • soit une instance d’une classe dérivée de JMenu. Bar comme dans le cas présent public static void main(String[] args) { new My. Frame(); } } © Sofia Zaidenberg CNRS Mai 2007 34

Autres types de containers l l JFrame et JDialog containers racines (top level containers) Containers de type noeud JScroll. Pane: lorsque le composant qu'il contient n'est pas affichable dans sa totalité JPanel : Aspect réduit au minimum : rectangle invisible dont on peut fixer la couleur de fond Utilisé pour regrouper des composants dans une fenêtre JSplit. Pane: permet de séparer son contenu en deux zones distinctes dont les surfaces respectives peuvent varier dynamiquement JTool. Bar: barre d'outils (regroupe des boutons) © Sofia Zaidenberg JTabbed. Pane: tableau à onglets CNRS Mai 2007 35

Encore d'autres containers JLayered. Pane: fournit une troisième dimension (z : profondeur) pour positionner les composants qu'il contient JDesktop. Pane: permet de définir des fenêtres internes dans une fenêtre © Sofia Zaidenberg CNRS Mai 2007 36

Imbrication des composants l Pour structurer l’interface graphique utilisation de JPanels l Exemple : ajout d’une barre d’outils à l’éditeur graphique import java. awt. *; import javax. swing. *; public class Barre. Outils extends JPanel { JButton public Barre. Outils() { String[] libelle. Couleurs = {"Bleue", "Rouge", "Jaune", "Vert"}; Color[] couleurs = { Color. blue, Color. red, Color. yellow, Color. green }; JPanel JCombo. Box import javax. swing. *; public class My. Frame extends JFrame { this. set. Background(Color. light. Gray); final static int HAUTEUR = 200; final static int LARGEUR = 300; JCombo. Box liste. Couleurs = new JCombo. Box(); for (int i = 0; i < libelle. Couleurs. length; i++) liste. Couleurs. add. Item(libelle. Couleurs[i]); public My. Frame() { set. Title("Ma première Fenêtre"); set. Size(LARGEUR, HAUTEUR); set. JMenu. Bar(new Menu. Editeur()); this. add(liste. Couleurs); this. add(new JButton("Défaire")); this. add(new JButton("Tout effacer")); this. add(new JButton("Quitter")); Container content=this. get. Content. Pane(); content. add(new Barre. Outils()); set. Visible(true); } } // Barre. Outils © Sofia Zaidenberg CNRS Mai 2007 37

Placement des composants l Dans les exemples précédents les composants se sont placés automatiquement l Pour la barre d’outils au centre du JPanel Mécanismes par défaut l Possibilité de les adapter aux besoins particulier de l’application l l Layout. Manager objet associé à un Container l l se charge de gérer la disposition des composants appartenant à celui-ci l. Par exemple Layout par défaut pour les JPanels – composants placés les uns après les autres dans leur ordre d’ajout – le tout doit être centré réordonnancement automatique des composants lorsque la fenêtre est redimensionnée © Sofia Zaidenberg CNRS Mai 2007 38

Placement des composants 5 gestionnaires de mise en forme implémentant l’interface Layout. Manager sont prédéfinis dans awt : l Border. Layout l Flow. Layout l Grid. Layout l Card. Layout l Grid. Bag. Layout l North West Center one three two one two three East four South five four five six java. awt. Border. Layout java. awt. Flow. Layout java. awt. Grid. Layout add(Component, String) add(Component, index) l D’autres sont définis dans les swings (Box. Layout, Spring. Layout…. ) l Il est aussi possible de définir ses propres gestionnaires © Sofia Zaidenberg CNRS Mai 2007 39

Placement des composants : exemple Grid. Layout l Définition de la barre d’état de l’application import javax. swing. *; import java. awt. *; JPanel JLabel Grig. Layout : 1 ligne, 2 colonnes public class Barre. Etat extends JPanel { private JLabel coord, info; public Barre. Etat() { this. set. Background(Color. dark. Gray); this. set. Layout(new Grid. Layout(1, 2)); this. add(info = new JLabel()); this. add(coord = new JLabel()); } public void affiche. Coord(int x, int y) { coord. set. Text("x : " + x + " y : " + y); } Associe un Grid. Layout en spécifiant le nombre de lignes et colonnes Ajout des composants dans les différentes cellules définies par le layout public void affiche. Info(String message) { info. set. Text(message); } } © Sofia Zaidenberg CNRS Mai 2007 40

Placement des composants : exemple Border. Layout l Ajout d’une zone de dessin et d’une barre d’état à la fenêtre de l’application Content. Pane Border. Layout Barre. Outils « North » Flow. Layout (par défaut) Zone dessin « Center » Grid. Layout (1 ligne, 2 colonnes) Barre. Etat « South» Associe un Border. Layout en spécifiant espacement entre les composants Ajout des composants dans les différentes régions définies par le layout public My. Frame () { Barre. Etat barre. Etat; set. Title("Ma première Fenêtre"); set. Size(LARGEUR, HAUTEUR); set. JMenu. Bar(new Menu. Editeur()); this. get. Content. Pane(). set. Layout(new Border. Layout(2, 2)); this. get. Content. Pane(). add(new Barre. Outils(), "North"); this. get. Content. Pane(). add(new Zone. Graphique(), "Center"); this. get. Content. Pane(). add(barre. Etat = new Barre. Etat(), "South"); barre. Etat. affiche. Coord(0, 0); barre. Etat. affiche. Info("coordonnées du cruseur"); set. Visible(true); } © Sofia Zaidenberg CNRS Mai 2007 41

Comment dimensionner les composants ? Jusqu’à présent nous ne nous sommes pas préoccupés de la taille des composants l Dans la barre d’outils les boutons n’ont pas tous la même taille (fixée automatiquement par le layout manager). l Possibilité d’indiquer une taille avec les méthodes set. Preferred. Size, set. Minimum. Size. l public Barre. Outils() { JCombo. Box liste. Couleurs; String[] libelle. Couleurs = {"Bleue", "Rouge", "Jaune", "Vert"}; Color[] couleurs = { Color. blue, Color. red, Color. yellow, Color. green }; Indique les dimensions souhaitées, elles ne pourront pas toujours être respectées selon les contraintes et la politique de placement du Layout. Manager this. set. Background(Color. light. Gray); liste. Couleurs = new JCombo. Box(); for (int i = 0; i < libelle. Couleurs. length; i++) liste. Couleurs. add. Item(libelle. Couleurs[i]); this. add(liste. Couleurs); JButton b; this. add(b= new JButton("Défaire")); b. set. Preferred. Size(new Dimension(130, 25)); this. add(b = new JButton("Tout effacer")); b. set. Preferred. Size(new Dimension(130, 25)); this. add(b = new JButton("Quitter")); b. set. Preferred. Size(new Dimension(130, 25)); } © Sofia Zaidenberg CNRS Mai 2007 42

Comment dimensionner les composants ? l l Prise en compte des dimensions souhaitées selon le layout Layout Hauteur Largeur Flow. Layout oui Border. Layout (East, West) non oui Border. Layout (North, South) oui non Border. Layout(Center) non Grid. Layout non Possibilité de se passer des services des Layout. Manager et de placer les composants « à la main » en indiquant des positions et dimensions exprimées en pixels (set. Bounds, set. Size) plus de souplesse l mais attention lorsque redimensionnement des conteneurs (attention à la portabilité de l’interface graphique) l © Sofia Zaidenberg CNRS Mai 2007 43

Gérer les événements l Pour le moment les interactions de l’utilisateur avec les différents composants de l’interface graphique ne provoquent aucune action l Les applications comportant une interface graphique sont dirigées par les événements (event-driven) l elles ne font rien jusqu'à ce que l'utilisateur bouge la souris, clique un bouton ou appuie sur une touche… l Le cœur de toute application comportant une interface graphique est le code de traitement des événements. l un programme dirigé par les événements est structuré autour d'un modèle de traitement des événements. Bien comprendre ce modèle est important pour une bonne programmation. l dans JAVA, le modèle de gestion des événements par délégation a radicalement (et heureusement) changé entre la version 1. 0 et la version 1. 1 (nous n’aborderons pas ici le modèle du JDK 1. 0) © Sofia Zaidenberg CNRS Mai 2007 44

Modèle événementiel du JDK 1. 1 l Objectifs de conception l simple et facile à apprendre l séparation nette entre code applicatif et code de l’interface utilisateur l faciliter l’écriture de code robuste pour la gestion des événements ( « strong compile time checking » ) l suffisamment flexible pour autoriser selon les applications des modèles différents pour le flot et la propagation des événements l pour les concepteurs d’outils visuels permettre de découvrir à l’exécution l les événements qu’un composant peut générer l les événements qu’il peut observer l supporter une compatibilité binaire avec l’ancien modèle l Ce nouveau modèle est utilisé par AWT, Swing et sert également dans de nombreuses API Java (servlets, SAX, java BEANS, …) © Sofia Zaidenberg CNRS Mai 2007 45

Modèle événementiel du JDK 1. 1 l Le modèle événementiel de JDK 1. 1 se compose : l D’objets sources d’événements l D’objets récepteurs d’événements l Ces objets interagissent de façon standard en invoquant des méthodes pour permettre le déclenchement et la gestion des événements Récepteur d’événements action. Performed(un. Evnt) un. Objet JButton Mon. Bouton 2 Source d’événements Activer get. Source() 3 1 new Action. Event() Action. Event un. Evnt © Sofia Zaidenberg CNRS Mai 2007 46

Objets Evénement Un objet événement encapsule une information spécifique à une instance d’événement l exemple : un événement représentant un clic souris contient la position du pointeur souris l Les différents types d’événements sont représentés par des classes différentes l Action. Event, Mouse. Event … l Toute classe d’événement est sous classe de la classe java. util. Event. Object les différents types d’événements liés à AWT héritent de AWTEvent sont rangés dans le package java. awt. event Event. Object(Object source) Object get. Source( ) AWTEvent Permet d’identifier plusieurs types d’événements dans une même classe int id Définit 7 types d’événements Action. Event String get. Command() . . . © Sofia Zaidenberg Mouse. Event int get. X(), int get. Y() CNRS MOUSE_CLICKED, MOUSE_DRAGGED MOUSE_ENTERED, MOUSE_EXITED, MOUSE_MOVED, MOUSE_PRESSED, MOUSE_RELEASED Mai 2007 47

La hiérarchie des événements l Une partie de la hiérarchie des événements AWT Event. Object AWTEvent Evénements sémantiques : Expriment ce que fait l’utilisateur Action. Event • Clic sur un bouton • Sélection d’un élément de menu ou de liste • Touche entrée sur zone texte Adjustment. Event • Composant a été déplacé, affiché, caché ou sa taille a été modifiée Component. Event Item. Event Text. Event • Déplacement du curseur • Sélection dans un groupe • Modification du contenu dans une barre de défilement de cases à cocher ou dans d’un champ ou d’une zone texte une liste Evénements de bas niveau Container. Event • Ajout ou suppression d’un composant dans un conteneur Focus. Event Input. Event Window. Event • Un composant a obtenu • Fenêtre activée, désactivée ou perdu la focalisation iconifiée, réouverte ou fermée Key. Event © Sofia Zaidenberg Mouse. Event • Une touche du clavier • Clic souris, déplacement a été pressée ou relâchée du pointeur de la souris CNRS Mai 2007 48

Récepteurs d’événements Un récepteur d’événements est un objet qui doit être prévenu ( « notified » ) par la source lorsque certains événements se produisent l Les notifications d’événements se font en invoquant des méthodes de l’objet à l’écoute, l’objet événement étant transmis en paramètre l La source d’événements doit savoir quelle méthode du récepteur doit être appelée l pour chaque classe d’événements une interface spécifique définit les méthodes à appeler pour notifier les événements de cette classe l exemple : interface Action. Listener pour les Action. Event package java. awt. event; import java. util. Event. Listener; public interface Action. Listener extends Event. Listener { /** Invoked when an action occurs. */ public void action. Performed(Action. Event e); } toute classe désirant recevoir des notifications d’un événement donné devra implémenter cette interface l un récepteur d’Action. Event doit implémenter l’interface Action. Listener © Sofia Zaidenberg CNRS Mai 2007 49

Interfaces d’écoute d’événements l Toutes les interfaces d’écoute d'événements héritent de java. util. Event. Listener l Par convention toutes les interfaces des récepteurs d’événements ont des noms de la forme <Event. Type>Listener l exemple : les événements de AWT et les interfaces correspondantes pour les récepteurs Interface d’écoute Classe d’événement Action. Event Adjustment. Event Component. Event Container. Event Focus. Event Item. Event Key. Event Mouse. Event Action. Listener Adjustment. Listener Component. Listener Container. Listener Focus. Listener Item. Listener Key. Listener Mouse. Motion. Listener Text. Listener Window. Listener Text. Event Window. Event © Sofia Zaidenberg CNRS Mai 2007 50

Interfaces d’écoute d’événements l Une interface d’écoute d’événements peut contenir un nombre quelconque de méthodes, chacune correspondant à un événement différent < interface > Mouse. Listener Mouse. Event définit 7 types d’événements void mouse. Clicked(Mouse. Event) void mouse. Entered(Mouse. Event) void mouse. Exited(Mouse. Event) void mouse. Pressed(Mouse. Event) void mouse. Released(Mouse. Event) MOUSE_CLICKED MOUSE_ENTERED MOUSE_EXITED MOUSE_PRESSED MOUSE_RELEASED < interface > Mouse. Motion. Listener MOUSE_DRAGGED MOUSE_MOVED void mouse. Moved(Mouse. Event) void mouse. Dragged(Mouse. Event) l Les méthodes définies dans les interfaces d’écoute doivent se conformer au schéma standard : void <event. Occurence. Method. Name>(<Event. Object. Type> evt); où l event. Occurence. Method. Name décrit clairement l’événement qui sera déclenché l Event. Object. Type est le type de l’événement déclenché et dérive obligatoirement de java. util. Event. Object © Sofia Zaidenberg CNRS Mai 2007 51

Sources d’événements Événements générés par des sources d’événements ( « event sources » ) l Source d’événements, un objet capable de : l Déterminer quand un événement « intéressant » s’est produit l D’avertir ( « notify » ) des objets récepteurs ( « event listeners » ) de l’occurrence de cet événement l l Pour être averti des événements produits par une source un récepteur doit se faire enregistrer auprès de la source 1 Récepteur d’événements add. Action. Listener(un. Objet) action. Performed(un. Evnt ) 2 . . . un. Objet action. Performed(un. Evnt ) 4 3 JButton Mon. Bouton Source d’événements Activer remove. Action. Listener(un. Objet) © Sofia Zaidenberg CNRS Mai 2007 52

Sources d'événements l Plusieurs récepteurs peuvent être à l’écoute d’une même source d’événements 1 add. A Récepteur d’événements ction Liste actio un. Objet acti ner( n. Pe rform on. P un. O ed(u n. Ev bjet) nt) erfo 2 rme d(u n Evn 3 tion. Lis add. Ac Récepteur d’événements un. Autre. Objet Autre ner(un te t) 4 Objet) d( rme o f r Pe JButton Mon. Bouton Source d’événements Activer t) vn un. E 5 on acti Lorsqu’un événement se produit il se déclenche vers tous les récepteurs d'événements (multicast) © Sofia Zaidenberg CNRS Mai 2007 53

Sources d’événements l Un récepteur peut être à l’écoute de plusieurs sources différentes new Action. Event( ) Action. Event un. Evnt ) e( rc ou S et g 6 nt) n. Ev 4 JButton bouton 2 5 Des. Activer ed(u orm Perf Source d’événements n actio Récepteur d’événements un. Objet actio n. Per 3 form ed(u n. Evn t) ge JButton bouton 1 2 ou t. S ) e( rc Activer 1 Action. Event un. Evnt © Sofia Zaidenberg Source d’événements CNRS new Action. Event( ) Mai 2007 54

Sources d’événements l Une source d’événements pour une interface d’écoute d’événements propose une méthode d’enregistrement dont la signature a la forme suivante : public void add<Listener. Type>(<Listener. Type> listener) l À tout moment un objet récepteur d’événements peut annuler sa demande de notification l Une source d’événements pour une interface d’écoute d’événements propose une méthode d’annulation de notification dont la signature a la forme suivante : public void remove<Listener. Type>(<Listener. Type> listener) © Sofia Zaidenberg CNRS Mai 2007 55

Exemple de gestion des événements l l Afficher les coordonnées de la souris lorsqu’elle se déplace sur la zone de dessin. Type d’événements : Mouse. Event (MOUSE_MOVED, MOUSE_DRAGGED) Source d’événements : la zone de dessin l Interface d’écoute : Mouse. Motion. Listener l l Récepteur d’événements ? l Devra modifier l’affichage de la barre d’état l Plusieurs solutions sont possibles. Prenons le cas où le récepteur est la zone graphique elle même l elle devra s’enregistrer auprès d’elle même pour être à l’écoute des Mouse. Motion. Event générés sur elle devra avoir connaissance de l’objet gérant la barre d’état (la référence de celui-ci sera passée en paramètre du constructeur de la zone graphique) l © Sofia Zaidenberg CNRS Mai 2007 56

Exemple de gestion des événements l Code de la classe représentant la zone de dessin import java. awt. *; import javax. swing. *; import java. awt. event. *; public class Zone. Dessin private Barre. Etat be; extends JPanel implements Mouse. Motion. Listener { L’objet zone graphique va être à 1 public Zone. Dessin(Barre. Etat be) { l’écoute des événements set. Background(Color. white); Mouse. Event de type Mouse. Motion set. Cursor(new Cursor(Cursor. CROSSHAIR_CURSOR)); this. be = be; L’objet zone graphique s’enregistre this. add. Mouse. Motion. Listener(this); lui même comme récepteur des } 3 événements Mouse. Event de type Mouse. Motion qu’il est susceptible de public void mouse. Moved(Mouse. Event e) { générer be. affiche. Coord(e. get. X(), e. get. Y()); } L’objet zone graphique utilise les 2 public void mouse. Dragged(Mouse. Event e) { informations contenues dans l’objet be. affiche. Coord(e. get. X(), e. get. Y()); Mouse. Event qui lui est transmis pour } mettre à jour la barre d’état. } // Zone. Graphique © Sofia Zaidenberg CNRS Mai 2007 57

Exemple de gestion des événements l Code de la classe lançant l’application import javax. swing. *; public class My. Frame extends JFrame { final static int HAUTEUR = 450; final static int LARGEUR = 750; public My. Frame 7() { Barre. Etat barre. Etat = new Barre. Etat(); L’objet zone de dessin a connaissance de l’objet barre d’état pour pouvoir agir sur lui lors de la réception des Mouse. Event set. Title("Ma première Fenêtre"); set. Size(LARGEUR, HAUTEUR); set. JMenu. Bar(new Menu. Editeur()); this. get. Content. Pane(). add(new Barre. Outils(), "North"); this. get. Content. Pane(). add(new Zone. Dessin(barre. Etat), "Center"); this. get. Content. Pane(). add(barre. Etat, "South"); barre. Etat. affiche. Info("coordonnées du cruseur"); set. Visible(true); } public static void main(String[] args) { new My. Frame(); } } // My. Frame © Sofia Zaidenberg CNRS Mai 2007 58

Pour conclure (momentanément) l Pour gérer les événements il faut : l Identifier l’objet à l’origine des événements (souvent un composant) l Identifier le type de l’événement que l’on veut intercepter. l Pour découvrir les types d’événements qu’est capable d’émettre un composant, lister dans sa classe toutes les méthodes de type add. XXXListener l Créer une classe qui implémente l’interface associée à l’événement que l’on veut gérer lle choix de cette classe n’est pas neutre – celle du composant (ou du conteneur du composant) à l’origine de l’événement ( « facilité » d’implémentation) – une classe indépendante qui détermine la frontière entre l’interface graphique (émission des événements) et ce qui représente la logique de l’application (traitement des événements). Une bonne séparation permet de faciliter l’évolution du logiciel. l Implémenter dans cette classe la (les) méthode(s) associées à l’événement. L’événement passé en paramètre contient des informations qui peuvent être utiles (position du curseur, état du clavier, objet source de l’événement). © Sofia Zaidenberg CNRS Mai 2007 59