Interface Graphique IFT 1025 Programmation 2 JianYun Nie

Interface Graphique IFT 1025 – Programmation 2 Jian-Yun Nie

Concepts • Construire une fenêtre graphique – Objets graphiques – Composition, affichage • Programmation par événement – Comment faire pour que le programme réagisse? – Principe MVC – Modèle-Vue-Contrôle • Package Swing

Généralité Programme Interface Utilisateur Rôles d’une interface utilisateur: • montrer le résultat de l’exécution • permettre à l’utilisateur d’interagir • (1) Montrer – (2) Réagir

Exemple simple (Montrer) Importer le package import javax. swing. *; public class Display. Frame { Créer un objet public static void main (String[] args) { graphique JFrame f = new JFrame("Frame. Demo"); //… components are added to its content frame. f. set. Size(300, 200); Définir la taille f. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); f. set. Visible(true); } } afficher

Afficher une interface • Importer le package (les classes) – Les classes sont regroupées en package – Importer un package = importer toutes les classes du package – import javax. swing. *; • • Créer une fenêtre graphique (JFrame, …) Définir les paramètres (taille, …) Afficher Différence: – import java. awt. *; les classes dans awt – import java. awt. event. *; les classes dans event – import javax. swing. *; awt: Abstract Windows Toolkit

Hiérarchie de package java awt event javax … swing [classes] … import java. awt. *; N’importe pas event. * [classes] … import java. awt. event. *;

Les objets graphiques • 3 niveaux – Haut niveau • Définir une fenêtre • JApplet, JDialog, JFrame, JWindow – Niveau intermédiaire • Pour composer la fenêtre • JPanel, JScroll. Pane, JSplit. Pane, … – Niveau inférieur • Les éléments de base • JButton, JCheck. Box, JText. Field, JText. Area, …

Insérer des éléments dans la fenêtre • Composition d’une fenêtre JFrame Jframe internal structure

Ajouter des composants dans une fenêtre import javax. swing. *; public class Display. Frame { Haut niveau public static void main (String[] args) { JFrame f = new JFrame("Frame. Demo"); Composante JLabel label = new JLabel("Hello World"); de base JPanel p = (JPanel)f. get. Content. Pane(); Niveau p. add(label); intermédiaire f. set. Size(300, 200); //alternative: f. pack(); f. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); f. set. Visible(true); } }

Composer une fenêtre • Créer une fenêtre (1) • Créer un ou des composants intermédiaires (2) – Pour JFrame, un JPanel est associé implicitement (Content. Pane) • Créer des composants de base (3) • Insérer (3) dans (2) • Insérer (2) dans (1) (s’ils ne sont pas déjà associés) • Afficher

Composant de base (pour obtenir des données) • • JButton JCheck. Box a toggled on/off button displaying state to user. JRadio. Button a toggled on/off button displaying its state to user. JCombo. Box a drop-down list with optional editable text field. The • • Jlist allows a user to select one or more items from a list. Jmenu popup list of items from which the user can select. Jslider lets user select a value by sliding a knob. JText. Field area for entering a single line of input. user can key in a value or select a value from drop-down list.

Composants de base pour afficher l’information • Jlabel contains text string, an image, or both. • JProgress. Bar communicates progress of some work. • JTool. Tip describes purpose of another component. • Jtree a component that displays hierarchical data in outline form. • Jtable a component user to edit and display data in a two-dimensional grid. • JText. Area, JText. Pane, JEditor. Pane – define multi-line areas for displaying, entering, and editing text.

Swing components: Illustration

Composants intermédiaires • Utilisés pour organiser ou positionner d’autres composants (de base) – JPanel utilisé pour regrouper d’autres composants – JScroll. Pane fournir une vue avec scroll bars – JSplit. Pane divise en 2 composants – …

Exemple d’organisation des composants ñAjouter 2 boutons dans un Panel JPanel p = new JPanel(); p. add(new JButton("on")); p. add(new JButton("off")); • Ce Panel contient maintenant 2 boutons

Construire GUI: Méthode générale • Utiliser JPanel comme décomposition de fenêtre un outil de – Une technique standard – Permet plus de flexibilités – JPanel peut être ajouté à d’autres structures pour modifier ou étendre l’application • Construire une vue de l’application dans un JPanel, et ajouter JPanel à Content. Pane de JFrame

Hiérarchie des classes pour composants graphiques • AWT (Abstract Windowing Toolkit) Object Component Menu. Component Layout Event Peer • Utilisé dans JDK 1. 0 et JDK 1. 1 • JDK 2 utilise plutôt Swing (mais continue à supporter AWT)

Hiérarchie des composants graphiques: AWT

Hiérarchie des composants graphiques: AWT

Hiérarchie des composants graphiques: Swing

Hiérarchie des composants graphiques: Swing

Container de haut niveau • N’est pas contenu dans d’autre Container • Fournir une fenêtre dans laquelle les autres composants peuvent s’afficher – JApplet, JDialog, JFrame, JWindow

Haut niveau (1): JFrame • It’s a window with title, border, (optional) menu bar and user-specified components. • It can be moved, resized, iconified. • It is not a subclass of JComponent. • Delegates responsibility of managing userspecified components to a content pane, an instance of JPanel. – get. Content. Pane()

Insérer des éléments dans la fenêtre • Composition d’une fenêtre JFrame Jframe internal structure

JFrame: Composer • Ajouter un composant dans Content Pane de JFrame f = new JFrame("A Frame"); JButton b = new JButton("Press"); JPanel cp = (JPanel)f. get. Content. Pane(); cp. add(b) ou ou JFrame f = new JFrame("A Frame"); JButton b = new JButton("Press"); f. get. Content. Pane(). add(b) JFrame f = new JFrame("A Frame"); JButton b = new JButton("Press"); f. add(b)

Définir ses propres classes paint. Component: méthode pour affichage (overriding) Graphics g: la surface à dessin de JComponent 01: import java. awt. Graphics; 02: import java. awt. Graphics 2 D; 03: import java. awt. Rectangle; 04: import javax. swing. JPanel; 05: import javax. swing. JComponent; 06: 07: /** 08: A component that draws two rectangles. 09: */ 10: public class Rectangle. Component extends JComponent 11: { 12: public void paint. Component (Graphics g) 13: { 14: // Recover Graphics 2 D 15: Graphics 2 D g 2 = (Graphics 2 D) g; 16: 17: // Construct a rectangle and draw it 18: Rectangle box = new Rectangle(5, 10, 20, 30); 19: g 2. draw(box); 20: 21: // Move rectangle 15 units to the right and 25 units down 22: box. translate(15, 25); 23: 24: // Draw moved rectangle 25: g 2. draw(box); 26: } 27: }

Créer et voir l’objet 01: import javax. swing. JFrame; 02: 03: public class Rectangle. Viewer 04: { 05: public static void main(String[] args) 06: { 07: JFrame frame = new JFrame(); 08: 09: final int FRAME_WIDTH = 300; 10: final int FRAME_HEIGHT = 400; 11: 12: frame. set. Size(FRAME_WIDTH, FRAME_HEIGHT); 13: frame. set. Title("Two rectangles"); 14: frame. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); 15: 16: Rectangle. Component component = new Rectangle. Component(); 17: frame. add(component); 18: 19: frame. set. Visible(true); 20: } 21: }

Haut Niveau (2): JApplet • Applet = une fenêtre dans un navigateur • Permet à n’importe quel utilisateur de lancer une application • Plus de contrainte de sécurité (pas d’écriture) • Programme englobé dans une page Web

Lancer un Applet À partir d’une page Web: <html> <head> <title>Two rectangles</title> </head> <body> <p>Here is my <i>first applet</i>: </p> <applet code="Rectangle. Applet. class" width="300" height="400"> </applet> </body> </html>

Afficher deux Rectangles 01: import java. awt. Graphics; 02: import java. awt. Graphics 2 D; 03: import java. awt. Rectangle; 04: import javax. swing. JApplet; 05: 06: /** 07: An applet that draws two rectangles. 08: */ 09: public class Rectangle. Applet extends JApplet 10: { 11: public void paint (Graphics g) 12: { 13: // Prepare for extended graphics 14: Graphics 2 D g 2 = (Graphics 2 D) g; 15: 16: // Construct a rectangle and draw it 17: Rectangle box = new Rectangle(5, 10, 20, 30); 18: g 2. draw(box); 19: 20: // Move rectangle 15 units to the right and 25 units down 21: box. translate(15, 25); 22: 23: // Draw moved rectangle 24: g 2. draw(box); 25: } 26: } 27: paint: méthode d’affichage dans JApplet Graphics g: surface

Différence

JApplet: quelques détails public public void void init () start () stop () destroy () paint (Graphics) repaint() public void update (Graphics) public void show. Status(String) public String get. Parameter(String)

JApplet: détails • init() est la première méthode exécutée – init() est la place idéale pour initialiser les variables – init() est la meilleure place pour définir la configuration de GUI – Presque chaque Applet a une méthode init( )

JApplet: détails • public void start() est appelée: – Juste après init( ) – Chaque fois quand la page est chargée ou rafraichie • public void stop( ) est appelée: – Quand le navigateur quitte la page – Juste avant destroy( ) • public void destroy( ) est appelée après stop( ) – Utiliser destroy() pour relâcher les ressources – Les ressources sont relâchées automatiquement

JApplet: détails • Pour dessiner ou paindre • Tout ce qu’on veut paindre doit être fait ici • Ne pas appeler paint(Graphics), mais repaint( ), qui appele paint.

Graphics • Every component has a graphics context. • The Graphics object has methods for drawing text, images, and geometrical figures on components. – draw. Line, – draw. Image, – draw. Rect, – draw. String, – fill. Rect, etc.

Graphics g. draw. String(“Hello”, 20); g. draw. Rect(x, y, width, height); g. fill. Rect(x, y, width, height); g. draw. Oval(x, y, width, height); g. set. Color(Color. red); Hello

Drawing a triangle • A JPanel can be used as a canvas to draw on. • JPanel defines an integer coordinate system with coordinates ranging from (0, 0) in the upper left to (width-1, height-1) in the lower right. • Units are pixels. • To draw on a JPanel, we override the method paint. Component.

Drawing a triangle class Triangle. Panel extends JPanel { … public void paint. Component (Graphics g) { super. paint. Component(g); g. draw. Line(10, 10, 80); g. draw. Line(10, 80, 110, 80); g. draw. Line(110, 80, 10); } } paint. Component est la méthode exécutée à la création, quand on l’appelle ou quand on appelle repaint().

Événement et composants • • Événement sont des objets Sous-classes de la class abstraite java. awt. AWTEvent. Les composants génèrent des événements Événements: chaque interaction de l’utilisateur sur un composant génère un événement – – Bouger la souris Cliquer sur un bouton Fermer une fenêtre … • Un événement contient des informations: source, type d’événement, … public Object get. Source(); – Utile pour détecter d’où provient l’événement

Propagation et traitement des événements Composant a: Génère un événement e du type T • • e Objet b qui capte l’événement de l’objet a, du type T: Traitement de e Les événements sont générés et propagés Certains autres objets sont capables de capter des événements des types spécifiés, provenant de ces composants – b écoute les événements du type T venant de a – b est un listener de a • On peut activer le traitement suite à la capture d’un événement – Le traitement lancé par l’objet b • Programmation par événement – Le programme réagit aux événements

Listener et Event handler: donner la capacité d’entendre un événement • Listener: Un objet est intéressé à écouter l’événement produit (être signalé quand il y a un événement) • Listener doit implanter l’interface event listener interface associée à chaque type d’événement. • Event Handler: le programme qui lance un traitement suite à un événement Type d’événement écouté • Exemple classe public class Capteur implements Action. Listener { public void action. Performed(Action. Event e) { … } } Action déclenchée

Donner la capacité d’écoute class <class_name> implements <Event. Listener> { <attributes / methods of the class> <implementation of all the required methods> } La classe est capable de capter les événements du type <Event. Listener> Exemple public class Capteur implements Action. Listener { public void action. Performed(Action. Event e) { … } }

import java. awt. *; import javax. swing. *; import java. awt. event. *; public class JApplet. Example extends JApplet implements Action. Listener { private JButton rouge, bleu; private Color couleur = Color. BLACK; public void init() { rouge = new JButton("Rouge"); bleu = new JButton("Bleu"); Container content = get. Content. Pane(); content. set. Layout(new Flow. Layout()); content. add(rouge); content. add(bleu); // Liens d'ecoute rouge. add. Action. Listener(this); bleu. add. Action. Listener(this); } // affichage public void paint(Graphics g) { super. paint(g); g. set. Color(couleur); g. draw. String("Choisir une couleur. ", 100, 100); } // methode qui reagit aux evenements public void action. Performed (Action. Event e) { if (e. get. Source() == rouge) couleur=Color. RED; else if (e. get. Source() == bleu) couleur = Color. BLUE; repaint(); //appeler paint(. . . ) pour repaindre } }

Mode de fonctionnement Fenêtre: Composants graphique rouge Action. Event bleu Réactions: action. Performed redéfinir la couleur, réafficher Liens d’écoute: add. Acion. Listener

Un autre exemple public Play. Balloon() { set. Title("Balloon"); set. Layout(new Flow. Layout()); import java. awt. *; import java. awt. event. *; public class Play. Balloon extends Frame implements Action. Listener, Window. Listener { private Button grow, shrink, exit; private Balloon my. Balloon; public static void main(String[] args) { Play. Balloon f = new Play. Balloon(); f. set. Size(300, 300); f. set. Visible(true); } grow = new Button("Grow"); add(grow); grow. add. Action. Listener(this); shrink = new Button("Shrink"); add(shrink); shrink. add. Action. Listener(this); exit = new Button("Exit"); add(exit); exit. add. Action. Listener(this); my. Balloon = new Balloon(20, 50); this. add. Window. Listener(this); } // fin constructeur Play. Balloon

Réactions public void action. Performed(Action. Event event) { if (event. get. Source() == grow) my. Balloon. change. Size(10); if (event. get. Source() == shrink) my. Balloon. change. Size(-10); repaint(); if (event. get. Source() == exit) System. exit(0); } public void window. Closing(Window. Event event) { System. exit(0); } public void window. Iconified(Window. Event event) {} public void window. Opened(Window. Event event) {} public void window. Closed(Window. Event event) {} public void window. Deiconified(Window. Event event) {} public void window. Activated(Window. Event event) {} public void window. Deactivated(Window. Event event) {} public void paint (Graphics g) { my. Balloon. display(g); } } Ballon class Balloon { private int diameter; private int x. Coord, y. Coord; Balloon (int initial. Diameter, int initial. X, int initial. Y) { diameter = initial. Diameter; x. Coord = initial. X; y. Coord = initial. Y; } public void change. Size (int change) { diameter = diameter+change; } public void display (Graphics g) { g. draw. Oval (x. Coord, y. Coord, diameter, diameter); } }

Types d’événement et écouteur • Action. Event, Action. Listener: – Button, List, Text. Field, Menu. Item, JButton, … – public void action. Performed(Action. Event) • Adjustment. Event, Adjustment. Listener – Scrollbar, Scroll. Pane, … – public void adjustment. Value. Changed(Adjustment. Event) • Item. Event, Item. Listener – Checkbox, Checkbox. Menu. Item, Choice, List – public void item. State. Changed(Item. Event)

Types d’événement et écouteur • Mouse. Event, – Souris – Mouse. Listener • public void mouse. Dragged(Mouse. Event) • public void mouse. Moved(Mouse. Event) – Mouse. Motion. Listener • • • public void mouse. Pressed(Mouse. Event) public void mouse. Released(Mouse. Event) public void mouse. Entered(Mouse. Event) public void mouse. Exited(Mouse. Event) public void mouse. Clicked(Mouse. Event) • Text. Event, Text. Listener – Text. Component et ses sous-classes – public void text. Value. Changed(Text. Event)

Embellir l’affichage • Pour les composants dans une fenêtre: – Position – Taille – (Autres aspects visuels) • Layout. Manager

Layout. Manager • Chaque container est associé avec un Layout. Manager. • Spécifier un Layout. Manager pour un Container (JPanel est une sous classe de Container): public Layout. Manager get. Layout(); public void set. Layout (Layout. Manager manager); e. g. JButton b = new JButton("Press"); JLabel label = new JLabel("Hello World"); JPanel p = new JPanel(); p. set. Layout(new Border. Layout()); p. add(label, Border. Layout. NORTH); p. add(b, Border. Layout. SOUTH);

Layout. Manager classes • Flow. Layout gauch à droite, de haut en bas • Border. Layout 5 potitions: SOUTH, NORTH, CENTER, EAST, WEST • Grid. Layout • Card. Layout Grille de 2 dimention comme une carte

Default layout managers • JPanel: Flow. Layout. • content pane de JFrame : Border. Layout. • Grid. Layout import java. awt. *; import java. applet. Applet; public class Button. Grid extends Applet { public void init() { set. Layout(new Grid. Layout(3, 2)); add(new Button("1")); add(new Button("2")); add(new Button("3")); add(new Button("4")); add(new Button("5")); add(new Button("6")); } } Variante: new Grid. Layout(3, 2, 5, 5): les marges entre les cases: 5 et 5 pixels

Component layout figures

Un exemple non MVC – valable pour une application simple • Regrouper M, V et C dans une même classe: – Affichage – Contrôle – Modèle - Affichage -Modele -Controle Rouge Bleu Choisir une couleur. – Problème: changer la couleur d’affichage

Schéma général main: -Créer les instances de Vue, Modèle et Controle -Établir les liens d’écoute Vue: - Définir une fenêtre et les composants - Créer un objet de Modèle et de Contrôle Modèle: - Les attributs et méthodes spécifique à une application - Produire un résultat à afficher à la Vue Contrôle: - Un objet capable d’écouter les événements - Traitements selon chaque événement capté (appeler la méthode appropriée de Vue pour le traiter)

Exemple MVC • Problème: compteur – Deux boutons: ++ pour incrémenter et RAZ pour remettre à 0; – Quand on clique sur un bouton, la valeur affichée doit changer – Utiliser JApplet ++ Valeur=0 RAZ

Modules Vue extends JApplet - Init: - Création des boutons - Création d’un Modèle, et d’un Contrôle - Lien d’écoute - affichage Demande d’affichage Modèle - attributs: valeur - Méthodes - bump: ajouter 1 - Raz: remet valeur à 0 Propagation des événements Requête de traitement Contrôle - Définir 2 classes internes pour capter les événements des boutons - Définir les méthodes de réaction

Exemple: Vue public class Compteur. Vue extends JApplet{ private Compteur. Modele modele; private Compteur. Controle controle; private JButton bump. Button, raz. Button; private String message = "Valeur=0"; init(): méthode exécutée quand Applet est lancée public void init(){ // configurer l'interface; Container content = get. Content. Pane(); content. set. Layout(new Flow. Layout()); bump. Button = new JButton("++"); raz. Button = new JButton("RAZ"); content. add(bump. Button); content. add(raz. Button); // creer un modele et un controle; modele = new Compteur. Modele(this); controle = new Compteur. Controle(modele); Création // lien d'ecoute; bump. Button. add. Action. Listener(controle. new Bump()); raz. Button. add. Action. Listener(controle. new RAZ()); } // methode pour afficher une valeur; public void display(int valeur) { message = "Valeur="+valeur; repaint(); } Lien d’écoute Préparer le message et l’afficher public void paint(Graphics g) { super. paint(g); // pour repaindre les boutons; g. draw. String(message, 20, 50); // ensuite afficher le message; } } Méthode pour afficher aussi exécutée par repaint()

Exemple: Contrôle Classe de Contrôle class Compteur. Controle { private Compteur. Modele modele; Attributs public Compteur. Controle(Compteur. Modele modele) { constructeur this. modele = modele; } public class Bump implements Action. Listener Type { public void action. Performed(Action. Event event) { modele. bump(); } Classes internes avec } Méthodes qui réagissent public class RAZ implements Action. Listener { public void action. Performed(Action. Event event) { modele. raz(); } } }

Exemple: Modèle class Compteur. Modele { private int valeur = 0; private Compteur. Vue vue; Compteur. Modele(Compteur. Vue vue) { this. vue = vue; } // bump incremente valeur de 1; public void bump() { valeur++; vue. display(valeur); } // raz remet valeur a 0; public void raz() { valeur=0; vue. display(valeur); } }

Haut Niveau (3): Dialog • A window to present information or gather input from user. • For standard dialogs use: JOption. Pane, JFile. Chooser, and JColor. Chooser • For custom dialogs use JDialog.

Dialog • Every dialog – Has owner, a frame. – It’s destroyed if owner is destroyed, – disappears from the screen while owner is iconified. • Two kinds of dialogs – modal : User input to all other windows is blocked when a modal dialog is visible. – non-modal : dialogs for which you must use JDialog.

JOption. Pane Method Name • show. Confirm. Dialog – Asks a confirming question, like yes/no/cancel. • show. Input. Dialog – Prompt for some input. • show. Message. Dialog – Tell the user about something that has happened. • show. Option. Dialog – The Grand Unification of the above three.

JOption. Pane. show. Message. Dialog • Used to create simple, standard dialogues. public static void show. Message. Dialog ( Frame owner Component parent. Component, Object message, String title, int message. Type, String message to be displayed Window’s title int value indicating style of message Icon icon); icon to be displayed in dialog

JOption. Pane. show. Input. Dialog ñUsed to get input from the user. It gets a String from the user, using either a text field or a combo box. ñThe parameters are the same as in show. Message. Dialog. ñA simpler variants of method is specified as public static String show. Input. Dialog ( Component parent. Component, Object message) • When user presses “OK” button, – contents of text field is returned or null if user presses “Cancel” or closes window. – Contents is String. Requesting a number from user, you must validate and convert String to appropriate type of value.

JOption. Pane. show. Input. Dialog String response = JOption. Pane. show. Input. Dialog(frame, “Message Type”); int value = convert. To. Int(response);

JOption. Pane. show. Confirm. Dialog • The show. Confirm. Dialog generates a two or three button window. • The two button provides “Yes” and “No” or ‘OK” and “Cancel” buttons. • The three button, “Yes, ” “No, ” and “Cancel” buttons. • The method returns an int indicating the user’s response. Possible return values include JOption. Pane. YES_OPTION, JOption. Pane. OK_OPTION, JOption. Pane. NO_OPTION, JOption. Pane. CANCEL_OPTION, and if user closes window, JOption. Pane. CLOSED_OPTION.

Show confirm dialog int response = JOption. Pane. show. Confirm. Dialog(frame, “Take over the world? ”, “The Brain”, JOption. Pane. YES_NO_OPTION); if (response == YES_OPTION) …

File. Chooser and JColor. Chooser dialogs • JFile. Chooser : a simple mechanism for a user to select a file. JFile. Chooser directory = new JFile. Chooser(); directory. set. Current. Directory(new File(“. ”)); directory. show. Open. Dialog(this); //open dialog File file = directory. get. Selected. File();

JDialog • Used to create custom dialog windows. • A JDialog – a top-level window. – has an owner, generally a frame. – It delegates component management to a content pane, to which components are added. – It’s displayed by invoking its set. Visible method with an argument of true, and is hidden by invoking its set. Visible method with an argument of false

JDialog • A typical constructor is specified as follows: public JDialog (Frame owner, String title, boolean modal) ñ Provides an object to create custom views to get or present data.