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 dune interface utilisateur
• montrer le résultat de lexécution
• permettre à lutilisateur dinteragir
• (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_CLOS
  E)
• 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. Nimporte 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 dune 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) (sils ne sont pas déjà
  associés)
• Afficher

11
Composant de base (pour obtenir des données)

• JButton
• JCheckBox a toggled on/off button displaying
  state to user.
• JRadioButton a toggled on/off button displaying
  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.
• 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.
• JTextField area for entering a single line of
  input.

12
Composants de base pour afficher linformation

• Jlabel contains text string, an image, or both.
• JProgressBar communicates progress of some work.
• JToolTip 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.
• 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 dautres
  composants (de base)
• JPanel utilisé pour regrouper dautres
  composants
• JScrollPane fournir une vue avec scroll bars
• JSplitPane divise en 2 composants

15
Exemple dorganisation 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

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é à dautres structures
  pour modifier ou étendre lapplication
• Construire une vue de lapplication 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
22
(No Transcript)
23
Container de haut niveau

• Nest pas contenu dans dautre Container
• Fournir une fenêtre dans laquelle les autres
  composants peuvent safficher
• JApplet, JDialog, JFrame, JWindow

24
Haut niveau (1) JFrame

• Its 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 dune 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.getContent
Pane() 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)

paintComponent méthode pour affichage
(overriding) Graphics g la surface à dessin de
JComponent
28
Créer et voir lobjet

• 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.EX
  IT_ON_CLOSE)
• 15
• 16 RectangleComponent component new
  RectangleComponent()
• 17 frame.add(component)
• 18
• 19 frame.setVisible(true)

29
Haut Niveau (2) JApplet

• Applet une fenêtre dans un navigateur
• Permet à nimporte 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 dune page Web
• lthtmlgt
• ltheadgt
• lttitlegtTwo rectangleslt/titlegt
• lt/headgt
• ltbodygt
• ltpgtHere is my ltigtfirst appletlt/igtlt/pgt
  
• ltapplet code"RectangleApplet.class"
  width"300" height"400"gt
• lt/appletgt
• lt/bodygt
• lt/htmlgt

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

paintméthode daffichage 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 quon veut paindre doit être fait ici
• Ne pas appeler paint(Graphics), mais repaint( ),
  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
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
• public void 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 lappelle 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 lutilisateur
  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 doù provient lévénement

public Object getSource()
42
Propagation et traitement des événements
Composant a Génère un événement e du type T
Objet b qui capte lévénement de lobjet a, du
type T Traitement de e
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
  dun événement
• Le traitement lancé par lobjet b
• Programmation par événement
• Le programme réagit aux événements

43
Listener et Event handler donner la capacité
dentendre 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 linterface event
  listener 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 ltclass_namegt implements ltEventListenergt
• ltattributes / methods of the classgt
• ltimplementation of all the required methodsgt
• La classe est capable de capter les événements
  du type ltEventListenergt
• Exemple
• public class Capteur implements ActionListener
• public void actionPerformed(ActionEvent e)

45

• // 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) couleurColor.RED
• else if (e.getSource() bleu) couleur
  Color.BLUE
• repaint() //appeler paint(...) pour
  repaindre

• 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)

46
(No Transcript)
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
Un autre exemple

• 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)

• 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)

49
Ballon
Réactions

• 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)

• 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 diameterchange
• public void display (Graphics g)
• g.drawOval (xCoord, yCoord, diameter,
  diameter)

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)

51
Types dévénement et écouteur

• MouseEvent,
• Souris
• MouseListener
• public void mouseDragged(MouseEvent)
• public void mouseMoved(MouseEvent)
• MouseMotionListener
• public void mousePressed(MouseEvent)
• public void mouseReleased(MouseEvent)
• public void mouseEntered(MouseEvent)
• public void mouseExited(MouseEvent)
• public void mouseClicked(MouseEvent)
• TextEvent, TextListener
• TextComponent et ses sous-classes
• public void textValueChanged(TextEvent)

52
Embellir laffichage

• Pour les composants dans une fenêtre
• Position
• Taille
• (Autres aspects visuels)
• LayoutManager

53
LayoutManager

• Chaque container est associé avec un
  LayoutManager.
• Spécifier un LayoutManager pour un Container
  (JPanel est une sous classe de Container)
• public LayoutManager getLayout()
• public void setLayout (LayoutManager manager)
• e.g.
• JButton b new JButton("Press")
• JLabel label new JLabel("Hello World")
• JPanel p new JPanel()
• p.setLayout(new BorderLayout())
• p.add(label, BorderLayout.NORTH)
• p.add(b, BorderLayout.SOUTH)

54
LayoutManager classes

• FlowLayout gauch à droite, de haut en bas
• BorderLayout 5 potitions SOUTH, NORTH, CENTER,
  EAST, WEST
• GridLayout Grille de 2 dimention
• CardLayout comme une carte

55
Default layout managers
                                             

• JPanel FlowLayout.
• content pane de JFrame BorderLayout.
• GridLayout
• import java.awt.
• import java.applet.Applet
• public class ButtonGrid extends Applet
• public void init()
• setLayout(new GridLayout(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 GridLayout(3,2,5,5) les marges
  entre les cases 5 et 5 pixels

56
Component layout figures
57
Un exemple non MVC valable pour une application
simple

• Regrouper M, V et C dans une même classe
• Affichage
• Contrôle
• Modèle
• Problème changer la couleur daffichage

• - Affichage
• Modele
• Controle

Choisir une couleur.
Rouge
Bleu
58
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)

59
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

Valeur0

RAZ
60
Modules

• Vue extends JApplet
• Init
• Création des boutons
• Création dun Modèle, et dun Contrôle
• Lien découte
• affichage

Demande daffichage
Propagation des événements

• Modèle
• attributs valeur
• Méthodes
• bumpajouter 1
• Raz remet valeur à 0

• Contrôle
• Définir 2 classes internes pour capter les
  événements des boutons
• Définir les méthodes de réaction

Requête de traitement
61
Exemple Vue

• public class CompteurVue extends JApplet
• private CompteurModele modele
• private CompteurControle controle
• private JButton bumpButton,razButton
• private String message "Valeur0"
• public void init()
• // configurer l'interface
• Container content getContentPane()
• content.setLayout(new FlowLayout())
• bumpButton new JButton("")
• razButton new JButton("RAZ")
• content.add(bumpButton)
• content.add(razButton)
• // creer un modele et un controle
• modele new CompteurModele(this)
• controle new CompteurControle(modele)

init() méthode exécutée quand Applet est lancée
Création
Lien découte
Préparer le message et lafficher
Méthode pour afficher aussi exécutée par repaint()
62
Exemple Contrôle
Classe de Contrôle

• class CompteurControle
• private CompteurModele modele
• public CompteurControle(CompteurModele
  modele)
• this.modele modele
• public class Bump implements ActionListener
• public void actionPerformed(ActionEvent event)
• modele.bump()
• public class RAZ implements ActionListener
• public void actionPerformed(ActionEvent event)
• modele.raz()

Attributs
constructeur
Type
Classes internes avec Méthodes qui réagissent
63
Exemple Modèle

• class CompteurModele
• private int valeur 0
• private CompteurVue vue
• CompteurModele(CompteurVue vue)
• this.vue vue
• // bump incremente valeur de 1
• public void bump()
• valeur
• vue.display(valeur)
• // raz remet valeur a 0
• public void raz()

64
Haut Niveau (3) Dialog

• A window to present information or gather input
  from user.
• For standard dialogs use JOptionPane,
  JFileChooser, and JColorChooser
• For custom dialogs use JDialog.

65
Dialog

• Every dialog
• Has owner, a frame.
• Its 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.

66
JOptionPane

• Method Name
• showConfirmDialog
• Asks a confirming question, like yes/no/cancel.
• showInputDialog
• Prompt for some input.
• showMessageDialog
• Tell the user about something that has happened.
• showOptionDialog
• The Grand Unification of the above three.

67
JOptionPane.showMessageDialog

• Used to create simple, standard dialogues.

• public static void showMessageDialog (
  Component parentComponent, Object message,
  String title, int messageType, Icon icon)

Frame owner
String message to be displayed
Windows title
int value indicating style of message
icon to be displayed in dialog
68
JOptionPane.showInputDialog

• 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
  showMessageDialog.
• A simpler variants of method is specified as

public static String showInputDialog ( Component
parentComponent, 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.

69
JOptionPane.showInputDialog
String response JOptionPane.showInputDial
og(frame, Message Type) int value
convertToInt(response)
70
JOptionPane.showConfirmDialog

• The showConfirmDialog 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 users
  response. Possible return values include

JOptionPane.YES_OPTION, JOptionPane.OK_OPTION,
JOptionPane.NO_OPTION, JOptionPane.CANCEL_OPTION,
and if user closes window,JOptionPane.CLOSED_OPT
ION.
71
Show confirm dialog
int response JOptionPane.showConfirmDialog(fram
e, Take over the world?, The Brain,
JOptionPane.YES_NO_OPTION) if (response
YES_OPTION)
72
FileChooser and JColorChooser dialogs

• JFileChooser a simple mechanism for a user to
  select a file.

JFileChooser directory new JFileChooser() direc
tory.setCurrentDirectory(new File(.)) directory
.showOpenDialog(this) //open dialog File file
directory.getSelectedFile()
73
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.
• Its displayed by invoking its setVisible method
  with an argument of true, and is hidden by
  invoking its setVisible method with an argument
  of false

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