Interface Graphique

1. Interface Graphique IFT1025 – Programmation 2 Jian-Yun Nie

2. 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

3. 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

4. Exemple simple (Montrer) Importer le package import javax.swing.*; public class DisplayFrame { public static void main (String[] args) { JFrame f = new JFrame("FrameDemo"); //… components are added to its content frame. f.setSize(300,200); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setVisible(true); } } Créer un objet graphique Définir la taille afficher

5. 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

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

7. 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, JScrollPane, JSplitPane, … • Niveau inférieur • Les éléments de base • JButton, JCheckBox, JTextField, JTextArea, …

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

9. Ajouter des composants dans une fenêtre import javax.swing.*; public class DisplayFrame { public static void main (String[] args) { JFrame f = new JFrame("FrameDemo"); JLabel label = new JLabel("Hello World"); JPanel p = (JPanel)f.getContentPane(); p.add(label); f.setSize(300,200); //alternative: f.pack(); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setVisible(true); } } Haut niveau Composante de base Niveau intermédiaire

10. 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 (ContentPane) • 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

11. Composant de base (pour obtenir des données) • JButton • JCheckBox a toggled on/off buttondisplaying state to user. • JRadioButtona toggled on/off buttondisplaying its state to user. • JComboBox a drop-down list with optional editable text field. The user can key in a value or select a value from drop-down list. • Jlistallows a user to select one or more items from a list. • Jmenupopup list of items from which the user can select. • Jslider lets user select a value by sliding a knob. • JTextField area for entering a single line of input.

12. Composants de base pour afficher l’information • Jlabelcontains text string, an image, or both. • JProgressBarcommunicates progress of some work. • JToolTip describes purpose of another component. • Jtreea component that displays hierarchical data in outline form. • Jtablea component user to edit and display data in a two-dimensional grid. • JTextArea, JTextPane, JEditorPane • define multi-line areas for displaying, entering, and editing text.

13. Swing components: Illustration

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

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

16. Construire GUI: Méthode générale • Utiliser JPanel comme un outil de décomposition de fenêtre • 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 à ContentPane de JFrame

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

18. Hiérarchie des composants graphiques: AWT

19. Hiérarchie des composants graphiques: AWT

20. Hiérarchie des composants graphiques: Swing

21. Hiérarchie des composants graphiques: Swing

23. 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

24. 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 user-specified components to a content pane, an instance of JPanel. • getContentPane()

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

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

27. Définir ses propres classes 01: import java.awt.Graphics; 02: import java.awt.Graphics2D; 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 RectangleComponent extends JComponent 11: { 12: public void paintComponent (Graphics g) 13: { 14: // Recover Graphics2D 15: Graphics2D g2 = (Graphics2D) g; 16: 17: // Construct a rectangle and draw it 18: Rectangle box = new Rectangle(5, 10, 20, 30); 19: g2.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: g2.draw(box); 26: } 27: } paintComponent: méthode pour affichage (overriding) Graphics g: la surface à dessin de JComponent

28. Créer et voir l’objet 01: import javax.swing.JFrame; 02: 03: public class RectangleViewer 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.setSize(FRAME_WIDTH, FRAME_HEIGHT); 13: frame.setTitle("Two rectangles"); 14: frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 15: 16: RectangleComponent component = new RectangleComponent(); 17: frame.add(component); 18: 19: frame.setVisible(true); 20: } 21: }

29. 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

30. 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="RectangleApplet.class" width="300" height="400"> </applet> </body> </html>

31. Afficher deux Rectangles 01: import java.awt.Graphics; 02: import java.awt.Graphics2D; 03: import java.awt.Rectangle; 04: import javax.swing.JApplet; 05: 06: /** 07: An applet that draws two rectangles. 08: */ 09: public class RectangleApplet extends JApplet 10: { 11: public void paint (Graphics g) 12: { 13: // Prepare for extended graphics 14: Graphics2D g2 = (Graphics2D) g; 15: 16: // Construct a rectangle and draw it 17: Rectangle box = new Rectangle(5, 10, 20, 30); 18: g2.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: g2.draw(box); 25: } 26: } 27: paint:méthode d’affichage dans JApplet Graphics g: surface

32. Différence

33. JApplet: quelques détails public void init () public void start () public void stop () public void destroy () public void paint (Graphics) public void repaint() public void update (Graphics) public void showStatus(String) public String getParameter(String)

34. 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( )

35. 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

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

37. Graphics • Every component has a graphics context. • The Graphics object has methods for drawing text, images, and geometrical figures on components. • drawLine, • drawImage, • drawRect, • drawString, • fillRect, etc.

38. Hello g.drawString(“Hello”, 20, 20); g.drawRect(x, y, width, height); g.fillRect(x, y, width, height); g.drawOval(x, y, width, height); g.setColor(Color.red); Graphics

39. 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 paintComponent.

40. Drawing a triangle class TrianglePanel extends JPanel { … publicvoid paintComponent (Graphics g) { super.paintComponent(g); g.drawLine(10,10,10,80); g.drawLine(10,80,110,80); g.drawLine(110,80,10,10); } } paintComponent est la méthode exécutée à la création, quand on l’appelle ou quand on appelle repaint().

41. É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, … • Utile pour détecter d’où provient l’événement public Object getSource();

42. Propagation et traitement des événements • 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 unlistener 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 Composant a: Génère un événement e du type T Objet b qui capte l’événement de l’objet a, du type T: Traitement de e e

43. 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 eventlistener interface associée à chaque type d’événement. • Event Handler: le programme qui lance un traitement suite à un événement • Exemple public class Capteur implements ActionListener { public void actionPerformed(ActionEvent e) { … } } classe Type d’événement écouté Action déclenchée

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

45. import java.awt.*; import javax.swing.*; import java.awt.event.*; public class JAppletExample extends JApplet implements ActionListener { private JButton rouge, bleu; private Color couleur = Color.BLACK; public void init() { rouge = new JButton("Rouge"); bleu = new JButton("Bleu"); Container content = getContentPane(); content.setLayout(new FlowLayout()); content.add(rouge); content.add(bleu); // Liens d'ecoute rouge.addActionListener(this); bleu.addActionListener(this); } // affichage public void paint(Graphics g) { super.paint(g); g.setColor(couleur); g.drawString("Choisir une couleur.", 100, 100); } // methode qui reagit aux evenements public void actionPerformed (ActionEvent e) { if (e.getSource() == rouge) couleur=Color.RED; else if (e.getSource() == bleu) couleur = Color.BLUE; repaint(); //appeler paint(...) pour repaindre } }

47. Mode de fonctionnement Fenêtre: Composants graphique rouge bleu Réactions: actionPerformed redéfinir la couleur, réafficher ActionEvent Liens d’écoute: addAcionListener

48. import java.awt.*; import java.awt.event.*; public class PlayBalloon extends Frame implements ActionListener, WindowListener { private Button grow, shrink, exit; private Balloon myBalloon; public static void main(String[] args) { PlayBalloon f = new PlayBalloon(); f.setSize(300, 300); f.setVisible(true); } public PlayBalloon() { setTitle("Balloon"); setLayout(new FlowLayout()); grow = new Button("Grow"); add(grow); grow.addActionListener(this); shrink = new Button("Shrink"); add(shrink); shrink.addActionListener(this); exit = new Button("Exit"); add(exit); exit.addActionListener(this); myBalloon = new Balloon(20, 50, 50); this.addWindowListener(this); } // fin constructeur PlayBalloon Un autre exemple

49. public void actionPerformed(ActionEvent event) { if (event.getSource() == grow) myBalloon.changeSize(10); if (event.getSource() == shrink) myBalloon.changeSize(-10); repaint(); if (event.getSource() == exit) System.exit(0); } public void windowClosing(WindowEvent event) { System.exit(0); } public void windowIconified(WindowEvent event) {} public void windowOpened(WindowEvent event) {} public void windowClosed(WindowEvent event) {} public void windowDeiconified(WindowEvent event) {} public void windowActivated(WindowEvent event) {} public void windowDeactivated(WindowEvent event) {} public void paint (Graphics g) { myBalloon.display(g); } } class Balloon { private int diameter; private int xCoord, yCoord; Balloon (int initialDiameter, int initialX, int initialY) { diameter = initialDiameter; xCoord = initialX; yCoord = initialY; } public void changeSize (int change) { diameter = diameter+change; } public void display (Graphics g) { g.drawOval (xCoord, yCoord, diameter, diameter); } } Ballon Réactions

50. Types d’événement et écouteur • ActionEvent, ActionListener: • Button, List, TextField, MenuItem, JButton, … • public void actionPerformed(ActionEvent) • AdjustmentEvent, AdjustmentListener • Scrollbar, ScrollPane, … • public void adjustmentValueChanged(AdjustmentEvent) • ItemEvent, ItemListener • Checkbox, CheckboxMenuItem, Choice, List • public void itemStateChanged(ItemEvent)