Title: Interface%20Graphique
1Interface Graphique
- IFT1025 Programmation 2
- Jian-Yun Nie
2Concepts
- 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
3Gé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
4Exemple 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
5Afficher 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
6Hiérarchie de package
- java javax
- awt swing
- event classes
- classes
import java.awt. Nimporte pas event.
import java.awt.event.
7Les 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,
8Insérer des éléments dans la fenêtre
- Composition dune fenêtre JFrame
Jframe internal structure
9Ajouter 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
10Composer 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
11Composant 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.
12Composants 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.
13Swing components Illustration
14Composants 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
-
15Exemple 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
16Construire 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
17Hié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
18Hiérarchie des composants graphiques AWT
19Hiérarchie des composants graphiques AWT
20Hiérarchie des composants graphiques Swing
21Hiérarchie des composants graphiques Swing
22(No Transcript)
23Container de haut niveau
- Nest pas contenu dans dautre Container
- Fournir une fenêtre dans laquelle les autres
composants peuvent safficher - JApplet, JDialog, JFrame, JWindow
24Haut 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()
25Insérer des éléments dans la fenêtre
- Composition dune fenêtre JFrame
Jframe internal structure
26JFrame 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)
27Dé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
28Cré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)
29Haut 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
30Lancer 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
31Afficher 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
32Différence
33JApplet 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)
34JApplet 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( )
35JApplet 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
36JApplet 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.
37Graphics
- 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.
38Graphics
39Drawing 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.
40Drawing 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()
42Propagation 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
43Listener 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
44Donner 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)
47Mode 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)
-
-
49Ballon
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) -
-
50Types 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)
51Types 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)
52Embellir laffichage
- Pour les composants dans une fenêtre
- Position
- Taille
- (Autres aspects visuels)
- LayoutManager
53LayoutManager
- 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)
54LayoutManager 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
55Default 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
56Component layout figures
57Un 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
58Sché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)
59Exemple 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
60Modules
- 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
61Exemple 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()
62Exemple 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
63Exemple 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()
-
64Haut 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.
65Dialog
- 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.
66JOptionPane
- 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.
67JOptionPane.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
68JOptionPane.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.
69JOptionPane.showInputDialog
String response JOptionPane.showInputDial
og(frame, Message Type) int value
convertToInt(response)
70JOptionPane.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.
71Show confirm dialog
int response JOptionPane.showConfirmDialog(fram
e, Take over the world?, The Brain,
JOptionPane.YES_NO_OPTION) if (response
YES_OPTION)
72FileChooser 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()
73JDialog
- 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
74JDialog
- 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.