JAVA Interface Graphique SWING Historique sur les interfaces

JAVA Interface Graphique SWING

Historique sur les interfaces graphiques Java fournit les deux paquetages principaux pour les interfaces graphiques : java. awt (Abstract Window Toolkit) : Utilise les composants graphiques natifs de la plate-forme Peut avoir un comportement différent suivant la plate-forme Limité aux caractéristiques communes à toutes les plates-formes cibles Exécution assez rapide. javax. swing, initialement JFC (Java Foundation Classes) : Bibliothèque écrite en 100% pure Java ; Bibliothèque très riche proposant des composants évolués (arbres, tables, . . . ) Construite au dessus de la partie portable de AWT ; Look & Feel modifiable (application du patron MVC) ; Exécution assez lente.

SWING Méthode de construction : Une plaque de base: Jframe, Jwindow, Jdialog, Objets JApplet On ajoute des briques prédéfinies par dessus : composants ou contrôle boutons, textfield, etc. Le sous système graphique est objet chaque composant s'affiche chaque composant provoque l'affichage des composants qu'il contient La fenêtre top level JFrame s'affiche Le contentpane affiche un fond opaque Le JPanel s'affiche (par dessus le précédent) : JFrame • le fond (paint. Component()) • les bordures(paint. Border()) get. Content. Pane() Il demande à son contenu de s'afficher(paint. Children()) • Le JButton "Mon bouton" s'affiche par paint. Component() – le fond – le texte • Le Jlabel "Du texte" s'affiche par paint. Component() JPanel – le texte Pour provoquer l'affichage, utiliser repaint() : affiche tout le composant repaint(int, int) : affiche le rectangle JButton Jlabel Mon Bouton Du Texte

Construire une IG en pratique : patron MVC Définir le Modèle de données de l’application Définir l’ergonomie de l’IG : la Vue Construire une fenetre de base (JFrame, JDialog, JApplet…) Construire un composant intermédiaire : Jpanel, JScroll. Pane, JSplit. Pane, … Ajouter des objets graphiques ou d’autres composants intermédiaires dans le composant intermédiaire : methode add du composant intermédiaire Ajouter le composant intermédiaire à la fenetre de base : methode add de la fenetre principale Positionner et dimensionner les composants methode pack() de la fenetre principale Visualiser la fenetre de base : methode set. Visible(true) de la fenetre principale Définir la réaction aux actions de l’utilisateur sur les éléments de l’ IG : le Contrôleur

Swing : composants de base

Swing : composants de haut niveau

Swing : les composants intermédiaires

Les Gestionnaires de Placement Principe : Associé à un Container, un gestionnaire de placement (Layout. Manager) est chargé de positionner ses composants suivant une politique prédéfinie Flow. Layout Les uns à la suite des autres Border. Layout Au centre ou à un des quatre coins cardinaux Box. Layout Sur une même ligne ou sur une même colonne Grid. Layout Sur un tableau à 2 dimensions (les composants ont tous la même ta Grid. Bag. Layout Dans une grille mais les composants peuvent être de tailles différen Card. Layout seulement un seul composant est affiché

Exemples de Gestionnaires de Placement

Créer un nouveau composant pour dessiner • La classe Graphics est une classe abstraite – – – permettant de dessiner des formes simples et des chaines de caractères D’etre indépendant du support réel : carte graphique, imprimante, image en mémoire contient des informations sur : • • • Les couleurs d’affichage, de fond, le type d’opération de dessin (xor) Le composant abstrait dans lequel on dessine Pour dessiner dans une fenetre: – On crée un nouveau composant d’affichage dérivant de JPanel et on redéfinit les méthodes • • Paint. Component(Graphics g) pour l’affichage Paint. Border pour les bordures public void paint. Component(Graphics g) { super. paint. Component(g); //Le fond g. draw. Rect(10, 20, 99, 199); g. set. Color(Color. yellow); // Dessine un rectangle jaune g. fill. Rect(10+1, 20 + 1, 98, 198); }

Image • AWT : get. Image, draw. Image my. Image = Toolkit. get. Default. Toolkit(). get. Image(filename. Or. URL); g. draw. Image(my. Image, 0, 0, this); • SWING : une image est simplement affichée dans un JPanel, un JButton – interface icons – Classe Image. Icon : implemente icons, lit du GIF ou JPEG, mais aussi des Buffered. Image (!= Image) – la fonction paint. Icon(Component, Graphics, int) personnalise l'affichage d'une image

Afficher une image dans un composant (1) class Affiche. Image extends JLabel { private Image. Icon icon=null; public Affiche. Image(String im) { update. Image(im); } public void update. Image(String im) { icon=new Image. Icon(im); set. Icon(icon); } // Creation et affichage de l’image } class Appli. Affiche extends JFrame { private Affiche. Image affiche =null; public Appli. Affiche(String im) { get. Content. Pane(). add(affiche=new Affiche. Image(im)); pack(); set. Visible(true); } public void suite(String im) { affiche. update. Image(im); pack(); } } public class Ex 40 { public static void main (String []arg) { Scanner clavier = new Scanner(System. in); if (arg==null) {System. out. println("Usage : java Ex 40 im 1 im 2. . "); } else { Appli. Affiche p = new Appli. Affiche(arg[0]); System. out. println("Photo suivante"); clavier. next. Line(); for (int i=1; i<arg. length; i++) { p. suite(arg[i]); System. out. println("Photo suivante"); clavier. next. Line(); } }

Afficher une image dans un composant (2) class Affiche. Image extends JPanel{ private Buffered. Image img = null; public Affiche. Image(Buffered. Image i) { img=i; } public void update. Image(Buffered. Image i) { img=i; repaint(); } public void paint. Component(Graphics g) { g. draw. Image(img, 0, 0, null); } public Dimension get. Preferred. Size() { return (img==null) ? new Dimension(100, 100): new Dimension(img. get. Width(null), img. get. Height(null)); } } class Appli. Affiche extends JFrame { private Affiche. Image affiche =null; public Appli. Affiche(Buffered. Image im) { get. Content. Pane(). add(affiche=new Affiche. Image(im)); pack(); set. Visible(true); } public void suite(Buffered. Image im) { affiche. update. Image(im); pack(); } } public class Ex 40 b { public static void main(String [] arg) {Scanner clavier = new Scanner(System. in); Buffered. Image img = null; if (arg==null) {System. out. println("Usage : java Ex 40 im 1 im 2. . "); } else { try { img = Image. IO. read(new File(arg[0])); } catch (IOException e) {} Appli. Affiche p = new Appli. Affiche(img); System. out. println("Photo suivante"); clavier. next. Line(); for (int i=1; i<arg. length; i++) { try { img = Image. IO. read(new File(arg[i])); } catch (IOException e) {} p. suite(img); System. out. println("Photo suivante"); clavier. next. Line(); } System. exit(0); } } }

Swing : exemple Exemple de réalisation ergonomie

JAVA Gestion des évènements en SWING

Gestion des évenements Objet Ecouteur 3 Evenement : clic sur le moins EDT : file des évènements gérée par un thread Contient la méthode à executer public void action. Performed(Action. Event event) Envoi à tous les objets qui ont le droit d’écouter le bouton « moins » cette information Objet Ecouteur 1 Objet Ecouteur 2 Contient la méthode à executer public void action. Performed(Action. Event event) Mettre a jour le compteur Contient la méthode à executer public void action. Performed(Action. Event event)

Ecouter un bouton Il faut créer l’interface graphique (IG) : une fenetre de base Trois boutons : moins, plus, reset Une zone de texte : resultat Deux possibilités pour définir un écouteur : La classe principale (la Vue) réalise Action. Listener Définition d’une classe spécifique pour chaque écouteur qui réalise Action. Listener La classe qui réalise l’interface Action. Listener permet de gérer les clics sur un bouton, les sélections de menu On définit dans cette classe la méthode action. Performed(…) qui explicite ce qui doit être fait quand on clique sur un bouton public void action. Performed(Action. Event event) { TODO } Le bouton moins autorise l’objet. Ecoutant à traiter les evenements en provenance de lui même (le moins), i. e. on enregistre objet. Ecoutant aupres du bouton par la méthode add. Action. Listener, moins. add. Action. Listener(objet. Ecoutant);

Ecouter un bouton Exemple de l’IG compteur : Patron Modèle-Vue-Contrôleur (MVC) • Modèle de l’application = la classe compteur (les données) • Vue = « Ergonomie » de l’IG • Contrôleur = Réaction aux actions de l’utilisateur sur les éléments de l’IG Graphique

Fermer la fenetre Il faut créer une classe (ici Mon. Ecouteur. Fenetre) qui implémente l’interface window. Listener qui permet de gérer les fenetres Il faut définir 7 méthodes, meme si elles sont vides void window. Opened(Window. Event e) : ouverture de la fenetre void window. Closed(Window. Event e) : apres la fermeture de la fenetre void window. Closing(Window. Event e) : au moment de la fermeture de la fenetre void window. Iconified(Window. Event e) : iconifier la fenetre void window. Deiconified(Window. Event e) : deiconifier de la fenetre void window. Activated(Window. Event e) : focus dans la fenetre; Utiliser de préférence window. Gained. Focus de Window. Focus. Listener void window. Deactivated(Window. Event e) : perte du focus de la fenetre. Utiliser de préférence window. Lost. Focus de Window. Focus. Listener On crée et enregistre cet objet aupres de la fenetre par la méthode add. Window. Listener

Les adapteurs : Fermer la fenetre Gérer les événements par adaptateur une interface listener toutes les méthodes doivent être écrites, même vides exemple : windows. Listener : 7 méthodes à redéfinir window. Activated, window. Closing, Window. Deactivated, window. Deiconified, window. Iconified, window. Opened Un adaptateur : une classe contient déjà une version vide on ne surcharge que les fonctionnalités dont on a besoin Attention : la classe écouteur HERITE de la classe Adapter au lieu de IMPLEMENTE une interface Component. Adapter Container. Adapter Focus. Adapter Key. Adapter Mouse. Motion. Adapter Window. Adapter

Quel écouteur définir pour quelle action ? Interface Action. Listener Utilisée par les clics bouton, choix de menu, et les CR dans un zone de texte (JText. Field, JText. Area) Méthodes à définir void action. Performed(Action. Event e) : que faire lors de l'apparition d’un des évènements Interface Mouse. Listener ou classe Mouse. Adapter Utilisée pour les actions souris entrant et sortant dans la fenetre, les clics dans la fenetre Méthodes à définir void void mouse. Clicked(Mouse. Event e) : clic dans la fenetre mouse. Entered(Mouse. Event e) : souris entrant dans la fenetre mouse. Exited(Mouse. Event e) : souris sortant de la fenetre mouse. Pressed(Mouse. Event e) : touche souris appuyée dans la fenetre mouse. Realised(Mouse. Event e) : touche souris relachée dans la fenetre Principales méthodes de la classe Mouse. Event boolean is. Alt. Down(), boolean is. Control. Down(), boolean is. Meta. Down(), boolean is. Shift. Down() int get. Modifiers(), int get. X(), int get. Y() Méthodes utiles boolean is. Left. Mouse. Button(Mouse. Event e) : vrai si e concerne le bouton gauche de la souris boolean is. Middle. Mouse. Button(Mouse. Event e) : vrai si e concerne le bouton milieu de la souris boolean is. Right. Mouse. Button(Mouse. Event e) : vrai si e concerne le bouton droit de la souris Interface Mouse. Motion. Listener ou classe Mouse. Motion. Adapter Utilisée pour les déplacement souris dans la fenetre Méthodes à définir void mouse. Dragged(Mouse. Event e) : clic dans la fenetre void mouse. Moved. Mouse. Event e) : déplacement souris dans la fenetre

Quel écouteur définir pour quelle action (2) ? Interface Window. Listener ou classe Window. Adapter Utilisée pour les actions sur les fenetres : ouverture, fermeture, iconification, quitter Méthodes à définir void window. Opened(Window. Event e) : ouverture de la fenetre void window. Closed(Window. Event e) : apres la fermeture de la fenetre void window. Closing(Window. Event e) : au moment de la fermeture de la fenetre void window. Iconified(Window. Event e) : iconifier la fenetre void window. Deiconified(Window. Event e) : deiconifier de la fenetre void window. Activated(Window. Event e) : focus dans la fenetre; Utiliser de préférence window. Gained. Focus de Window. Focus. Listener void window. Deactivated(Window. Event e) : perte du focus de la fenetre. Utiliser de préférence window. Lost. Focus de Window. Focus. Listener La principale action à redéfinir est celle de la fermeture d’une application. Pour cela, il faudrait Soit vos applications graphiques implémentent l’interface Window. Listener avec ses 7 methodes redéfinir systématiquement la fonction window. Closed Ecrire un corps de fonction vide pour les autres Soit vos applications graphiques héritent de Window. Adapter avec ses 7 methodes redéfinir systématiquement la fonction window. Closed Mais votre application ne peut plus hérité d’une autre classe Solution : la méthode définit la sortie propre sans redéfinir le listener ou l’adapter set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE);

Exercice Programmer une Interface Graphique en Java / Swing pour le Zoo 2 D