Diapositive 1

1
IHMLes Interfaces Graphiques
Patrick Reuter LaBRI/INRIA, Université Bordeaux 2
1/3/2007
1
2
Interface Utilisateur

• Les interfaces graphiques et les périphériques
  matériels permettent l'interactivité entre
• un programme (composé d'un ensemble de
  fonctions), et
• un utilisateur.

3
GUI Interface Graphique Utilisateur

• GUI Graphical user Interface
• (WIMP Window Icon Menu Pointer)
• p.ex. Gnome, kde, linux, Macos X, Win

Photo gimp
4
GUI Interface Graphique Utilisateur

• But Permettre une interactivité avec un
  programme de manière   plus simple  et plus
  intuitive.

• Elle repose sur trois parties
• Les sorties l'affichage des données et de
  l'état du système.
• Fenetre, bouton, menu, widget

5
GUI Interface Graphique Utilisateur

• - Les entrées récupération des informations
  auprès de l'utilisateur
• frappe au clavier, déplacement de la souris,
  widget, etc.
• - Le lien entre les actions de l'utilisateur et
  les actions effectives sur le coeur du programme.
• Ouvrir un fichier, met le fichier en mémoire
  dans le logiciel, etc.

6
Comment Concevoir un programme ?
Séparez les classes de la gestion du modèle et
celle de linterface graphique
P.ex. base de données,
7
Programmation évènementielle

• La programmation événementielle est un concept
  différent de la programmation fonctionnelle,
  orientée objet..
• Il sagit de permettre une interaction
  non-linéaire, plusieurs événements peuvent être
  produits avec un ordre différent.

8
Programmation évènementielle

• Les composants dune applications événementielle
  interagissent entre eux et avec lenvironnement.
• Il communiquent en réponse à des événements.
• Les événements sont captés par le système et sont
  transmis aux écouteurs (listener).
• Cest vous qui mettez en place les écouteurs .

9
Programmation évènementielle

• Pour réaliser des interfaces, il est impératif de
  programmer de manière evénementielle et donc de
  prévoir les évènements.
• Dans ce but, vous devez connaître les capacités
  de votre interface et les événements quelle peut
  générer.

10
Interface Graphique avec Java
11
Interface Graphique avec Java

• JAVA, langage de programmation de SUN utilise
  deux bibliothèques pour vous aider à développer
  des interfaces graphiques
• AWT (ne s'utilise plus)
• SWING

12
SWING
Documentation en ligne http//java.sun.com/docs/
books/tutorial/uiswing/mini/index.html
Frame
13
SWING

• SWING est en sus de AWT, mais en réutilise
  quelques parties. Il est inclu dans le SDK
  (software Development Kit) de JAVA depuis la
  version 1.2.
• SWING est contenu dans le package javax.swing.
  
• import javax.swing.
• import java.awt.
• import java.awt.event.
• SWING est indépendant du système d'exploitation
  (Mac, Windows, Linux, )
• ?, on garde donc une portabilité des programmes.

14
Interface Graphique avec Java
Les applications SWING se développent de la même
manière que toutes les applications JAVA en
utilisant les classes de la bibliothèque SWING
objets, classes, héritages
Programmer une interface n'est pas donc pas
différent que programmer un ensemble de classe
comme la classe  Cercle , ou  Cercle 
15
Interface Graphique avec Java
16
Concevoir une interface 1 partie

• Il faut connaître le modèle et son fonctionnement
• Définir le contrôle que lon veut faire (ouvrir,
  fermer, afficher, etc.) sur le modèle
• Faire un croquis de linterface pour définir les
  widgets (menu, bouton, label, etc.) à utiliser et
  leurs caractéristiques (nom, position, etc.)

17
Concevoir une interface 1 partie
Vue
Événement (souris, clavier, etc.)
Routines de communication
Action
Modèle
Java
18
SWING création
Elle se fait en principalement en 4 étapes
1.Création dune fenêtre (par héritage) 2.Récupér
ation du container 3.Modification du Layout 4.
Insertion des widgets dans le conteneur
19
SWING étape 1
Création de la fenêtre par lhéritage de JFrame
JFrame
Layout
Container
Container
Widget
20
SWING JFrame
JFrame est un composant de haut niveau, il
contiendra toute lapplication, cest la première
brique de linterface. Pour lutiliser et
simplifier le code, on implémente une nouvelle
classe qui hérite de JFrame. Une JFrame possède
un conteneur par défaut. Pour hériter de JFrame
- on crée une nouvelle classe (ici Fenetre)
qui hérite (extends) de JFrame. - Toujours créer
un constructeur pour pouvoir insérer les éléments
dans cette fenêtre.
21
SWING component (1/4)
JFrame
Container
Container
Layout
Widget
22
SWING étape 2
Extraction du container de la fenetre (JFrame)
JFrame
Layout
Container
Container
Widget
23
SWING Conteneur
Container
Container
Le conteneur est lobjet en Java qui permet
dafficher plusieurs objets graphiques. On peut
insérer un ou plusieurs objets dans un même
conteneur. Les objets sont placés dans le
conteneur suivant les règles imposées par le
layout (voir suite). Par la suite, pour
réaliser des interfaces plus complexes, on insère
des conteneurs dans dautres conteneurs pour
spécifier plusieurs politiques de placement. Les
conteneurs les plus souvent utilisés sont les
JPanels.
24
SWING JPanel

• Le panneau est un conteneur intermédiaire
  invisible. Il a pour finalité de positionner
  daprès son layout les composants, boutons et
  les labels (JScrollPane, JTabbedPane). Son
  conteneur par défaut est un FlowLayout.
• Classe JPanel déclaration et instanciation
• JPanel panel new JPanel()

25
SWING component (2/4)
JFrame
Container
Container
Layout
Widget
26
SWING étape 3
Mise en place dun gestionnaire de placement
JFrame
Layout
Container
Container
Widget
27
SWING Layout

• Les  layout  permettent de positionner les
  élèments avec une politique de placement des
  objets. Les layouts sont toujours liès aux
  conteneurs (JPanels, Tabbed pane).

28
SWING component (3/4)
JFrame
Container
Container
Layout
Widget
29
SWING Layout

• Il sont par défaut dans tous les composants
  (JFrame, JPanel). Il existe le 7 types
  FlowLayout, BorderLayout, GridLayout, BoxLayout,
  GridBagLayout, SpringLayout et le CardLayout.
• Chaque layout est une classe Java
• Pour créer un layout déclaration puis
  instanciation
• FlowLayout flo new FlowLayout()
• Les composants utilisent souvent par défaut un
  BorderLayout (JFrame, JDialog, Japplet).
• Les Layouts sont utilisés surtout avec les
  panneaux (JPanel) et les fenêtres
• On peut affecter un layout dans un panneau au
  moment de linstanciation
• JPanel panel new JPanel(new BorderLayout())
• Affectation d'un layout dans le conteneur dune
  fenêtre
• Container contentPane frame.getContentPane()
• contentPane.setLayout(new FlowLayout())

30
SWING Layout

• Le même code donnera des résultats différents
  suivant le Layout utilisé.

case 6 System.out.println("création avec
SpringLayout") setLayout(new
SpringLayout()) break case
7 System.out.println("création avec
CardLayout") setLayout( new CardLayout(5,3))
for(i0 i lt 5 i) JButton button
new JButton(texti) add(button,texti)
break default System.out.prin
tln("Type non reconnu " type)
if(nbLayout!7) for(i0 i lt 5 i)
JButton button new JButton(texti) add(b
utton) public static
void main(String args)
JFrame.setDefaultLookAndFeelDecorated(true)
//Create seven windows. for(int i0
i lt 7 i) JFrame frame new
JFrame(layouti) frame.setDefaultCloseOperatio
n(JFrame.EXIT_ON_CLOSE) //Set up the content
pane. frame.setContentPane(new
JPanel5Boutons(layouti)) //Display the
window. frame.pack() frame.setVisible(true)

import java.awt. import javax.swing. public
class JPanel5Boutons extends JPanel private
static String layout"BoxLayout","GridLayout",
"GridBagLayout", "FlowLayout","BorderLayout","Spr
ingLayout","CardLayout" public
JPanel5Boutons(String type) super() int
i0 int nbLayout 7 String
text"Button 1","Button 2","Button
3","Long-Named Button 4","Button 5" for(i0
i lt 7 i) if(type.equals(layouti))
nbLayout i1 switch(nbLayout)
case 1 System.out.println("création
avec BoxLayout") setLayout(new
BoxLayout(this,BoxLayout.Y_AXIS)) break
case 2 System.out.println("création avec
GridLayout") setLayout(new GridLayout(2,3))
break case 3 System.out.println("création
avec GridBagLayout") GridBagLayout g new
GridBagLayout() setLayout(g) break
case 4 System.out.println("création avec
FlowLayout") setLayout(new FlowLayout()) bre
ak case 5 System.out.println("création
avec BorderLayout") setLayout(new
BorderLayout()) break
31
SWING BorderLayout

• Le BorderLayout possède 5 zones déterminées par
  les points cardinaux (north, south, east, west)
  et le centre (center).

32
SWING BoxLayout

• Il positionne tous les composants sur une colonne
  ou une ligne.
• Il aligne les composants et respecte la taille
  maximun.

33
SWING FlowLayout

• C'est le  layout  par défaut des  JPanel .
  Les composants sont insérerés de gauche à droite.
  Si la largeur est trop petite, il passe à la
  ligne suivante.

34
SWING GridLayout

• Il positionne les composants dans une grille
  (ligne, colonne) et adapte la taille des boutons
  au plus grand composant.

35
SWING étape 4
Insertion dun widget dans le panneau avec la
politique définit par le layout
JFrame
Layout
Container
Container
Widget
36
SWING component (4/4)
JFrame
Container
Container
Layout
Widget
37
SWING mise en page plus complexe
pan1.add(button1) pan1.add(button2) butto
n2.setText("nouveau nom") pan2.add(button3) pa
n2.add(button4) Container pan
this.getContentPane() pan.add(pan1) pan.add(
pan2) public static void
main(String args) JFrame frame new
JFrame("2 panneau") frame.setDefaultCloseOperati
on(JFrame.EXIT_ON_CLOSE) //Set up the content
pane. frame.setContentPane(new
JPanel2()) //Display the window. frame.pack()
frame.setVisible(true)
JPanel2
Pan1
Pan2
38
Concevoir un programme 2 partie
Vue
Événement (souris, clavier, etc.)
Routines de communication
Action
Model
39
Lévénement et laction

• Les évènements sont les interventions de
  lutilisateurs sur linterface graphique à laide
  des périphériques (par exemple clavier,
  souris)
• Frappe au clavier
• Clic de souris
• Mouvement de la souris
• Laction est la traduction par un composant
  (widget, bouton) de lévènement. Elle peut être
  traitée ou pas par le programme. Swing propose
  des interfaces (au sens Génie logiciel) à
  implémenter pour traiter les évènements en
  fonction des composants. Cest vous qui
  choisissez les événements à traiter

40
Lévènement et laction
Exemple pour un Bouton
Chaque bouton a son action !!
41
Gestion des événements
Après avoir créé la partie visible de linterface
(Vue), il faut lier les actions réalisées avec le
modèle. Il faut gérer les évènements (souris,
clavier, etc.) - les  intercepter  lier
une action à un composant (bouton, list,
tableau, etc.) - les  interpréter
implémenter linterface correspondant
Avec Swing, vous devez implémenter une interface
pour chaque signal. Par exemple pour actionner un
bouton l'interface est ActionListener dont la
seule méthode est actionPerformed. Rappel
Utilisation du mot clef  implements , et vous
devez implémenter toutes les méthodes de
l'interface.
42
Liste des interfaces
Evénement et leurs écouteurs (listener) associés
Autres interfaces écouteurs ItemListener,
TextListener, KeyListener, MouseMotionListener,
WindowListener
43
Gestion des événements
Gestion de laction sur un bouton 1) création
du bouton Jbutton boutonBye new Jbutton(Bye
Bye) // bouton bye avec label bye bye
2) On attache la gestion de lévénement
(Listener Type) à ce bouton (cf Tableau
précédent) boutonBye.addActionListener(..)
// syntaxe addXXX() où XXX est linterface
écouteur 3) Implémentation de l'interface
public class MyClass implements ActionListener
Une classe portant le nom de l'évènement
implements la classe liée (Implements
ActionListener) (plus propre et  Génie
logiciel )
44
Gestion des événements 2e méthode
Le traitement de laction est gérée par une
classe qui hérite de linterface. !! La
difficulté de cette technique réside dans le
passage dargument.
45
Gestion des événements 2e méthode
Création de la classe MyActionEvent qui
implémente l'interface ActionListener
import java.awt. import java.awt.event. import
javax.swing. class MyActionEvent implements
ActionListener public MyActionEvent ()
System.out.println("My action Event appel
constructeur") public void
actionPerformed(ActionEvent e)
System.out.println("ActionCommand "
e.getActionCommand() " reçu")

46
Gestion des événements 2e méthode
Création de la classe FrameBase, fenêtre
principale contenant tous les objets, l'appel à
l'affichage et la fonction main

• import java.awt.
• import java.awt.event.
• import javax.swing.
• public class FrameBase
• public static void main(String s)
• //Create and set up the window.
• JFrame frame new JFrame("Frame")
• frame.setDefaultCloseOperation(JFrame.EXIT
  _ON_CLOSE)
• // create button
• JButton button
• button new JButton("Click Me")
• // add evenment
• button.addActionListener(new MyActionEvent())
• //add button to the frame
• frame.getContentPane().add(button)

47
Concevoir une interface 2 partie
Nous voulons réaliser une fenêtre avec un bouton,
qui affiche bonjour sur la sortie
standard. Action afficher le message à
lécran Evènement bouton enfoncé Modèle
aucun Croquis une action sur un bouton -gt un
bouton.
48
Concevoir une interface 3 partie
évènement
49
Utillisation dun modèle
Le modèle est un programme classique en java qui
ne doit contenir aucun appel à la bibliothèque de
swing. Il doit pouvoir être utilisable sans
interface graphique. Par exemple, la gestion dun
stock, on crée toutes les méthode permettant de
gérer le stock (ajouter, enlever, compter, etc.)
- On peut lutiliser dans une fonction main
classique - Ou lutiliser via une interface
Modèle
Nous allons utiliser une classe Crayon qui permet
décrire dans la fenêtre ms-dos une phrase.
50
Utillisation dun modèle
51
Utillisation dun modèle
public class Crayon private String
couleur private int taille public Crayon ()
couleur "gris" taille 3 public
Crayon (String la_couleur) couleur
la_couleur taille 3 public void
ecrire (String phrase) if (taille gt 0)
System.out.print(couleur) System.out.prin
t(" ") System.out.println(phrase) taille
taille-1 public int deQuelleTaille
() return taille public boolean
estUse() if (taille 0) return true else
return false
Modèle Crayon
52
Utillisation dun modèle
Modèle Crayon
Ou doit-on garder linstanciation de notre modèle
? - avec la classe ActionXXX - avec la classe
Run - avec la frame
53
Utillisation dun modèle
import java.awt. import java.awt.event. import
javax.swing. public class EcrireStylo extends
JFrame Crayon monStylo
public EcrireStylo()
super("VueActionModel") monStylo
new Crayon("rouge") JButton
button button new JButton("Ecrire
avec Stylo") button.addActionListener
(new MyGestionStylo(monStylo))
this.setDefaultCloseOperation(JFrame.EXIT_O
N_CLOSE) Container pan
this.getContentPane()
pan.add(button, BorderLayout.CENTER)
//Display the window. this.pack()
this.setVisible(true)
54
Utillisation dun modèle
import java.awt. import java.awt.event. import
javax.swing. public class MyGestionStylo
implements ActionListener
Crayon monStyloSave public
MyGestionStylo(Crayon sty) monStyloSave
sty public void
actionPerformed(ActionEvent e)
monStyloSave.ecrire("bonjour")
Action
55
Utillisation dun modèle
Exécution (javac .java, java Run )
import java.awt. import java.awt.event. import
javax.swing. public class Run
public static void main(String args)
EcrireStylo ecr new EcrireStylo()
System.out.println("instruction suivante")

56
Concevoir une interface
-Vous devez respecter la séparation de chaque
partie ne pas mettre de code de la biliothèque
Java-Swing dans le modèle -Vous devez garder une
cohérence dans linterface graphique, ne pas
faire un bouton ouvrir qui ferme
lapplication - Conseil développer
indépendamment le modèle et la vue (par exemple
la classe Crayon)
57
Utillisation dun Controleur
Le modèle MVC permet davoir une séparation plus
importante entre le modèle et linterface et
facilite la gestion des événements. Le controleur
permet de gérer des programmes plus complexes de
manière plus simple. Il connaît létat de tous
les éléments de lapplication à tous moments, il
peut être assimilé à un superviseur .
58
Utillisation dun Controleur
Le modèle MVC permet davoir une séparation plus
importante entre le modèle et linterface et
facilite la gestion des événements. Le controleur
permet de gérer des programmes plus complexes de
manière plus simple. Il connaît létat de tous
les éléments de lapplication à tous moments, il
peut être assimilé à un superviseur .
59
Utillisation dun Controleur
M V C
60
SWING mise en page plus complexe
import java.awt. import javax.swing. public
class JPanel2 extends JPanel public
JPanel2() super(new FlowLayout()) JPanel
pan1 new JPanel() pan1.setLayout(new
BoxLayout(pan1,BoxLayout.Y_AXIS)) JPanel pan2
new JPanel() pan2.setLayout(new
BoxLayout(pan2,BoxLayout.X_AXIS)) JButton
button1 new JButton("bouton 1") JButton
button2 new JButton("bouton 2") JButton
button3 new JButton("bouton 3") JButton
button4 new JButton("bouton 4") pan1.add(but
ton1) pan1.add(button2) button2.setText("nou
veau nom") pan2.add(button3) pan2.add(button4)
this.add(pan1) this.add(pan2)
public static void main(String args)
JFrame frame new JFrame("2
panneau") frame.setDefaultCloseOperation(JFrame.
EXIT_ON_CLOSE) //Set up the content
pane. frame.setContentPane(new
JPanel2()) //Display the window. frame.pack()
frame.setVisible(true)
JPanel2
Pan1
Pan2