Diapositive 1

1
Les Interfaces Graphiques 16 mai 2008
Patrick Reuter Maître de conférences LaBRI/INRIA,
Université Bordeaux 2 http//www.labri.fr/perso/p
reuter/ig/
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
Avant
4
Avant
5
Maintenant
6
GUI Interface Graphique Utilisateur

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

Photo gimp
7
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 entrées, les
sorties, le lien
8
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.
• Les sorties
• l'affichage des données et de l'état du système.
• Fenetre, bouton, menu, widget
• 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

9
Programmation évènementielle

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

Programmation évènementielle
Programmation fonctionnelle
10
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
  .(?implements)

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

12
Comment Concevoir un programme ?
Séparez les classes de la gestion du modèle et
celle de linterface graphique
Routines de communication
P.ex. base de données,
13
Modèle-Vue-Contrôleur (MVC)

• Motif de conception pour le développement
  d'applications logicielles qui sépare
• le modèle de données,
• l'interface utilisateur et
• la logique de contrôle.
• Ce motif a été mis au point en 1979 par Trygye
  Reenskang, qui travaillait alors sur Smalltalk
  dans les laboratoires de recherche Xerox PARC.

14
Modèle-Vue-Contrôleur (MVC)

• la Vue
• correspond à l'interface avec laquelle
  l'utilisateur
• interagit.
• Les résultats renvoyés par le modèle sont dénués
  de toute présentation mais sont présentés par les
  vues.
• Plusieurs vues peuvent afficher les informations
  d'un même modèle.
• La vue n'effectue aucun traitement, elle se
  contente d'afficher les résultats des traitements
  effectués par le modèle, et de permettre à
  l'utilisateur d'interagir avec elles.

15
Modèle-Vue-Contrôleur (MVC)

• Le Modèle
• représente le comportement de
• l'application 
• traitements des données,
• interactions avec la base de données,
• etc.
• Il décrit les données manipulées par
  l'application et définit les méthodes d'accès.

16
Modèle-Vue-Contrôleur (MVC)

• le Contrôleur
• prend en charge la gestion des événements de
  synchronisation pour mettre à jour la vue ou le
  modèle
• Il n'effectue aucun traitement, ne modifie aucune
  donnée, il analyse la requête du client et se
  contente d'appeler le modèle adéquat et de
  renvoyer la vue correspondant à la demande

Routines de communication
17
Modèle-Vue-Contrôleur (MVC)

• Résumé
• lorsqu'un client envoie une requête à
  l'application
• celle-ci est analysée par le contrôleur
• ce contrôleur demande au modèle approprié
  d'effectuer les traitements,
• puis renvoie la vue adaptée

18
Concevoir une interface
Modèle

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

19
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

20
SWING
Documentation en ligne http//java.sun.com/docs/
books/tutorial/uiswing/mini/index.html
Frame
21
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.

22
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 , p.ex.
23
Concevoir linterface 1ère partie (Vue)
24
Concevoir linterface 1ère partie (Vue)
Vue
Événement (souris, clavier, etc.)
Routines de communication
Control
Modèle
Java
25
Interface Graphique avec Java
26
Interface Graphique avec Java
Importation
Constructeur
Instanciation de lobjet
27
SWING création
Elle se fait principalement en 5 étapes
1. Création dune fenêtre (par héritage) 2.
Récupération du container 3. Modification du
Layout 4. Insertion des widgets dans le
conteneur 5. Arranger les composantes
28
SWING étape 1
Création de la fenêtre par lhéritage de JFrame
JFrame
Layout
Container
Container
Widget
29
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.
30
Composants SWING (1/4)
JFrame
Container
Container
Layout
Widget
31
SWING étape 1
Appel du constucteur de la classe mère
JFrame
Layout
Container
Container
Widget
32
SWING création
Elle se fait principalement en 5 étapes
1. Création dune fenêtre (par héritage) 2.
Récupération du container 3. Modification du
Layout 4. Insertion des widgets dans le
conteneur 5. Arranger les composantes
33
SWING étape 2
Extraction du container de la fenetre (JFrame)
JFrame
Layout
Container
Container
Widget
34
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.

35
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 layout par défaut est un FlowLayout.
• Classe JPanel déclaration et instanciation
• JPanel panel new JPanel()

36
Composants SWING (2/4)
JFrame
Container
Container
Layout
Widget
37
SWING création
Elle se fait principalement en 5 étapes
1. Création dune fenêtre (par héritage) 2.
Récupération du container 3. Modification du
Layout 4. Insertion des widgets dans le
conteneur 5. Arranger les composantes
38
SWING étape 3
Mise en place dun gestionnaire de placement
JFrame
Layout
Container
Container
Widget
39
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).

40
Composants SWING (3/4)
JFrame
Container
Container
Layout
Widget
41
SWING Layout

• Il sont par défaut dans tous les composants
  (JFrame, JPanel). Il existe 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 "frame"
• Container pan frame.getContentPane()
• pan.setLayout(new FlowLayout())

42
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
43
SWING BorderLayout

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

44
SWING BoxLayout

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

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

46
SWING GridLayout

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

47
SWING création
Elle se fait principalement en 5 étapes
1. Création dune fenêtre (par héritage) 2.
Récupération du container 3. Modification du
Layout 4. Insertion des widgets dans le
conteneur 5. Arranger les composantes
48
SWING étape 4
Insertion dun widget dans le panneau avec la
politique définit par le layout
JFrame
Layout
Container
Container
Widget
49
Composants SWING (4/4)
JFrame
Container
Container
Layout
Widget
50
SWING création
Elle se fait principalement en 5 étapes
1. Création dune fenêtre (par héritage) 2.
Récupération du container 3. Modification du
Layout 4. Insertion des widgets dans le
conteneur 5. Arranger les composantes
51
SWING étape 5
Insertion dun widget dans le panneau avec la
politique définit par le layout
JFrame
Layout
Container
Container
Widget
Arranger les composantes
52
Arranger les composantes

• Pourquoi cette étape ?
• Seulement quand SWING connaît toutes les
  composantes de la mise en page, les positions
  peuvent être attribué
• Compatibilité avec les différentes résolution
  décran
• PC
• PC portable
• PDA
• Téléphone portable ..

53
Arranger les composantes

• Egalement possible
• JLabel titreLabel new JLabel("Space
  Invaders")
• titreLabel.setLocation(10,10)
• pan.add(titreLabel)

54
Swing

• Swing est un boîte doutils de IG pour Java.
• Est partie des Java Foundation Classes (JFC).
• Swing inclues une IG (Graphical User Interface
  (GUI)) et des Widgets comme boutons, menu,
•  Swing supports pluggable look and feel not by
  using the native platform's facilities, but by
  roughly emulating them. This means you can get
  any supported look and feel on any platform. The
  disadvantage of lightweight components is slower
  execution. The advantage is uniform behavior on
  all platforms. 

55
SWING mise en page plus complexe
import java.awt. import javax.swing. public
class FenetreView extends JFrame public
FenetreView(String nom)
super(nom) Container pan
this.getContentPane() pan.setLayout(new
GridBagLayout()) JPanel pan1 new
JPanel() pan1.setLayout(new BoxLayout(pan1,BoxLa
yout.Y_AXIS)) JPanel pan2 new
JPanel() pan2.setLayout(new BoxLayout(pan2,BoxLa
yout.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(button1) pan1.add
(button2) button2.setText("nouveau
nom") pan2.add(button3) pan2.add(button4) pa
n.add(pan1) pan.add(pan2) this.pack()
this.setVisible(true)
pan
pan1
pan2
56
Concevoir linterface 2ème partie (Event)
57
Concevoir un programme 2 partie
Vue
Événement (souris, clavier, etc.)
Routines de communication
Control
Model
58
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

59
Lévènement et laction
Exemple pour un Bouton
Evènement appuyer sur le bouton (géré par Swing)
Evènement appuyer sur le bouton (géré par Swing)
Action actionPerformed
Action aucune
Après action sur le bouton
Après action sur le bouton
Traitement Changement de nom (géré par le
programmeur)
Chaque bouton a son action !!
60
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.

61
Liste des interfaces
Evénement et leurs écouteurs (listener) associés
Autres interfaces écouteurs ItemListener,
TextListener, MouseMotionListener, WindowListener
62
Concevoir une interface 2 partie
Nous voulons réaliser une fenêtre avec un bouton,
qui affiche bonjour sur la sortie
standard. Evènement bouton enfoncé Action
afficher le message à lécran Modèle
aucun
63
Gestion des événements

• Gestion de laction sur un bouton
• 1) Création du bouton
• JButton button
• button new JButton("Click Me")
• 2) On attache la gestion de lévénement (Listener
  Type) à ce bouton (cf Tableau précédent)
• button.addActionListener(new FenetreEvent())
• bouton.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
  implémente la classe liée (Implements
  ActionListener) (plus propre et  Génie
  logiciel )

64
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.
65
Gestion des événements 2e méthode
Création de la classe FenetreEvent qui
implémente l'interface ActionListener
import java.awt. import java.awt.event. import
javax.swing. class FenetreEvent implements
ActionListener public FenetreEvent ()
System.out.println("My action Event appel
constructeur") public void
actionPerformed(ActionEvent e)
System.out.println("ActionCommand "
e.getActionCommand() " reçu")

66
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 javax.swing. public
class Fenetre extends JFrame public
Fenetre(String nom) super(nom)
Container pan this.getContentPane() pan.se
tLayout(new GridBagLayout()) JLabel label
label new JLabel("Hello
ESTIA") pan.add(label) JButton button
button new JButton("Click
Me") button.addActionListener(new
FenetreEvent()) pan.add(button)
this.pack() this.setVisible(true)
public static void
main(String s) Fenetre
fenetre new Fenetre("simple")
On attache l'écouteur au bouton
67
Concevoir linterface 3ème partie (Control)
68
Concevoir linterface 3ème partie (Control)
Vue
Événement (souris, clavier, etc.)
Routines de communication
Control
Model
69
Concevoir linterface 3ème partie (Control)
traitement
évènement
Modèle
70
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 .
71
Exemple en UML Fenêtre de login
ActionListener
LoginEvent
LoginController
LoginController _loginController
LoginModel _loginModel LoginView_loginView
LoginEvent(LoginController lc)
actionPerformed(ActionEvent e)
LoginController() void start() void
boutonValider()
LoginModel
String _nomFichier
JFrame
LoginModel(String nomFichier) boolean
estValide(String login, String mdp)
LoginView
JTextField _login JPasswordField _
LoginView(LoginController lc) getLogin()
getPassword() void afficherMessage(String
msg) void afficher()
LoginRun
void main(String args)
72
Concevoir linterface 4ème partie (Model)
73
Concevoir linterface 4ème partie (Model)
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
74
Concevoir une interface
traitement
évènement
Modèle
Control
Vue
-Vous devez respecter la séparation de chaque
partie (surtout ne pas mettre de code de la
biliothèque Java-Swing dans le modèle) -Vous
devez garder une cohérence dans linterface
graphique (c-à-d bon positionnement des widgets,
ne pas faire un bouton ouvrir qui ferme
lapplication -) )
75
(No Transcript)
76
Conventions

• Pour la lisibilité, utilisez toujours
  l'indentation.
• Pour chaque exercice, créer un nouveau répertoire
  avec le nom exerciceX.Y qui contiendra les
  fichiers .java nécessaires.
• Chaque fichier qui utilise la bibliothèque SWING
  doit faire les importations suivantes
• import javax.swing.
• import java.awt.
• import java.awt.event.
• Choisissez des noms des classes avec des lettres
  en majuscule, des noms de variables avec des
  lettres en miniscules.
• Dans un fichier, vous allez définir une seule
  classe. Le nom de ce fichier sera le nom de la
  classe suivi de l'extension.java N'utilisez
  jamais des caractères spéciaux ni des accents
  dans vos noms de fichiers/classes/variables.

77
Conventions

• En utilisant le concept MVC, rajouter au nom de
  la classe le mot View s'il s'agit d'une classe
  qui s'occupe de la vue, le mot Model s'il s'agit
  d'une classe Modèle, le mot Control s'il s'agit
  d'une classe Control ( Action), et le mot Event
  s'il s'agit d'une classe qui implémente un
  écouteur, ainsi que le mot Run s'il s'agit d'une
  classe contenant la méthode main.
• Pour chaque nouvelle classe de Java SWING que
  vous utilisez (comme par exemple JFrame, JButton,
  ...), consultez systématiquement son manuel afin
  de découvrir ses possibilités
• http//java.sun.com/j2se/1.5.0/docs/api/index.htm
  l

78
Pièges à éviter

• Attention nom du fichier nom de la classe
• Une classe --- Un fichier
• Attention à la casse