Java

Interfaces graphiques
Java

IUT informatique des Cézeaux

2012/2013

Olivier Goutet – Openium – o.goutet@openium.fr

 Plan

1. Interface graphique
2. MVC
3. Javadoc

2
 AWT vs Swing
 Abstract Window Toolkit (java.awt.*)
 "Figé" depuis 1.1
 Présent dans les navigateurs sans plug-in
 Gestion des événements obsolète
 Composants système -> pb portabilité
 Swing (javax.swing.*)
 Toujours en évolution
 Plus complexe qu'AWT
 Surcouche d'AWT (Jcomposant)

3
Swing

Composants de haut-niveau

JFrame, JDialog, JApplet

Conteneurs

JPanel, JScrollPane, JToolBar

Composants basiques

JMenu, JButton, JLabel

Dessiner

Canvas (AWT), JPanel (Swing)

Index graphique des composants Swing
http://docs.oracle.com/javase/tutorial/ui/features/components.html

4
5
6
7
 Premier exemple

 Une fenêtre principale (avec boutons d'agrandissement,

réduction, fermeture…) : JFrame
-
 Un plan rectangulaire : JPanel
 Un bouton : Jbutton
 Une zone texte : Jlabel

8
Premier exemple (2)


JFrame contient tous les autres.

JPanel est un container intermédiaire

JButton & Jlabel composants atomiques

9
 Premier exemple : code
import javax.swing.*;
import java.awt.*;
public class Exemple1 {
  public static void main(String[] args) {
    JFrame frame = new JFrame("exemple");
    JButton button = new JButton("clic clic");
    JLabel label = new JLabel("un petit texte");
    JPanel pane = new JPanel();
    pane.add(button);
    pane.add(label);
    frame.getContentPane().add(pane,BorderLayout.CENTER);
  }
}

10
Ajouter des composants ?


Que se passe-t'il ?
// apres frame.getContentPane().add(pane...)
frame.getContentPane().add(new JLabel("2"));


Nécessité de positionner les éléments

Qui peut recevoir des composants ?

Composants de haut niveau

Conteneurs

Panels
11
 Positionnement
 Placer des composants
 Taille (minimale, maximale et préférée)
 Position relative (portabilité)
 Position absolue
 Politique de placement d'un conteneur : Layout
 JFrame, JDialog, JPanel, …
 Complexe à manipuler
 Conteneurs et Layouts spécialisés en cascade
 GUI Builder
 Matisse / Netbeans avec GroupLayout
 VEP / Eclipse
 IntelliJ

12
 Layout Manager (1)

13
http://java.sun.com/docs/books/tutorial/uiswing/layout/visual.html
Layout Manager (2)

Flow 
Card

Box 
GridBag

Border 
Spring

Grid 
Aucun

Managers par défaut :

• BorderLayout pour le contentPane du JFrame
• FlowLayout pour un JPanel
Package : java.awt

14
Utilisation : Border Layout


Ajouter au panel avec une contrainte
frame.getContentPane().add(pane, BorderLayout.CENTER);


définir le layout du JPanel avec
pane.setLayout(new BorderLayout());

15
 Exemple 2
JFrame frame = new JFrame("exemple");
JButton button = new JButton("clic clic");
JLabel label = new JLabel("un petit texte");
JButton button2 = new JButton("deuxieme bouton");
JPanel pane = new JPanel();
pane.setLayout(new BorderLayout());
pane.add(button, BorderLayout.NORTH);
pane.add(label, BorderLayout.CENTER);
pane.add(button2, BorderLayout.SOUTH);
frame.getContentPane().add(pane, BorderLayout.CENTER);
frame.show();

16
 Exemple 3
JFrame frame = new JFrame("exemple");
JButton button = new JButton("clic clic");
JLabel label = new JLabel("un petit texte");
JButton button2 = new JButton("deuxieme bouton");
JButton button3 = new JButton("troisieme bouton");
JButton button4 = new JButton("quatrieme bouton");
JPanel pane = new JPanel();
pane.setLayout(new GridLayout(3,2));
pane.add(button);
pane.add(label);
pane.add(button2);
pane.add(button3);
pane.add(button4);

frame.getContentPane().add(pane,BorderLayout.CENTER);
frame.show(); 17
 Exemple 4
JFrame frame = new JFrame("exemple");
JButton button1 = new JButton("bouton1");
JLabel label1 = new JLabel("texte1");
JLabel label2 = new JLabel("texte2");
JButton button2 = new JButton("bouton2");
JButton button3 = new JButton("bouton3");
JButton button4 = new JButton("bouton4");
JButton button5 = new JButton("bouton5");
JPanel pane1 = new JPanel(new BorderLayout()); 
/* on peut spécifier le layout à la construction */
JPanel pane2 = new JPanel(new BorderLayout());
JPanel pane3 = new JPanel(new BorderLayout());
pane1.add(button1, BorderLayout.EAST);
pane1.add(label1, BorderLayout.WEST);
pane1.add(pane2, BorderLayout.CENTER);
pane2.add(button2, BorderLayout.NORTH);
pane2.add(button3, BorderLayout.SOUTH);
pane2.add(pane3, BorderLayout.CENTER);
pane3.add(button4, BorderLayout.EAST);
pane3.add(button5, BorderLayout.WEST);
pane3.add(label2, BorderLayout.CENTER);
frame.getContentPane().add(pane1, BorderLayout.CENTER); 18
frame.show();
Arborescence

19
 Exemple 5
JFrame frame = new JFrame("exemple");
JButton button1 = new JButton("Ô rage");
JButton button2 = new JButton("Ô désespoir");
JButton button3 = new JButton("Ô vieillesse ennemie");
JLabel label1 = new JLabel(new ImageIcon("duke.gif"));
JPanel pane1 = new JPanel(new GridLayout(0, 1));
pane1.add(button1);
pane1.add(button2);
pane1.add(button3);
frame.getContentPane().add(pane1, BorderLayout.EAST);
frame.getContentPane().add(label1, BorderLayout.CENTER);
frame.show();

Remarque : une valeur 0 pour l'initialisation du GridLayout signifie "un nombre

20
indéterminé" de composants.
 Boîte de dialogue simple


Classe JOptionPane

Méthodes statiques showXXXDialog

Message, Confirm, Option, Input

JOptionPane.showConfirmDialog(frame,"Alors, ça vous plaît ?");
21
 Événements


Communication entre les composants d'une
application et avec l'utilisateur

Envoi de messages

Gestion des événements incompatible entre AWT
et Swing

Réaction au moindre événement

Action

Souris ? (déplacement, clic, action)

Clavier ? (appui, focus)

Fenêtre ? (déplacement, visibilité)

22
Gestionnaire d'événements

Surveiller (écouter) les messages/événements

Délégation des actions à réaliser

1.Écrire le gestionnaire

Implémentation de Listener (interface)
OU

Spécialisation d'Adapter (classe)
2.Enregistrer le gestionnaire

23
 Appuyer sur un bouton
class Gestionnaire extends AbstractAction {
  public void actionPerformed(ActionEvent e) {
    // ce qu'il y a a faire
  }  OPTION 1
}

// Ecrire le gestionnaire
class Gestionnaire implements ActionListener {
  public void actionPerformed(ActionEvent e) {
    // ce qu'il y a a faire
  }  OPTION 2
}

// enregistrement du gestionnaire
JButton bouton = new JButton("Libelle");
bouton.addActionListener(new Gestionnaire()); 24
 Boutons

button1 = new JButton();
ActionListener myActionListener = new ActionListener();
button1.addActionListener(myActionListener);
...
class MyActionListener implements ActionListener {
  public void actionPerformed(ActionEvent event) {
    if(event.getSource() == button1) {
      // button1 clicked
    } else {
      ...
    }
  }
}

25
WindowsListener
private class MyWindowListener implements WindowListener {
  public void windowActivated(WindowEvent event) {
  }
  public void windowDeactivated(WindowEvent event) {
  }
  public void windowClosing(WindowEvent event) {
    System.exit(0);
  }
  public void windowClosed(WindowEvent event) {
  }
  public void windowIconified(WindowEvent event) {
  }
  public void windowDeiconified(WindowEvent event) {
  }
  public void windowOpened(WindowEvent event) {
  }
}

private class MyWindowListener extends WindowAdapter {
  public void windowClosing(WindowEvent event) {
    System.exit(0);
  } 26
}
 Barre de menus
Zone
Zonespéciale
spéciale≠≠BorderLayout.NORTH
BorderLayout.NORTH

Fichier
Fichier
menuBar = new JMenuBar();
Nouveau
Nouveau frame.setJMenuBar(menuBar);
Ouvrir
Ouvrir
Sauvegarder
Sauvegarder menu = new JMenu("Fichier");
menuBar.add(menu);

Quitter
Quitter item = new JMenuItem("Nouveau");
menu.add(item);

menu.addSeparator();

27
 Exemple Menu
JFrame frame = new JFrame("exemple");
JMenuBar menuBar = new JMenuBar();
JMenu menu = new JMenu("File");
JMenu submenu = new JMenu("Property");
menu.add(new JMenuItem("New"));
menu.add(new JMenuItem("Open"));
menu.add(new JMenuItem("Save"));
menu.add(new JSeparator());
menu.add(submenu);
submenu.add(new JMenuItem("Big"));
submenu.add(new JMenuItem("Small"));
menuBar.add(menu);
frame.setJMenuBar(menuBar);
frame.show();

28
Plan

1. Interface Graphique
2. MVC
3. Javadoc

29
Modèle Vue Contrôleur
Modèle

Mi

Inf
se

o rm
à jo
ur d

el ec
e

um
dèl

on t
odè
mo

rôl
le e
du

eur
n fo
uel

d 'u
act

nct

nc
ion
t

ha n
éta

des
e l'

g em
nd

éve

e nt
ma

nem
De

d'é
nts e

ta t
reçus
Action utilisateur : on contrôle
Vue La vue doit être mise à jour Contrôleur
30
Modèle


Contient les données manipulées

Gère / garantit l’intégrité de ses données

Méthodes pour récupérer ses données


La couche métier

31
Vue


Interface avec laquelle l'utilisateur
interagit

Présenter les résultats

Recevoir toutes les actions de l'utilisateur

Événements sont envoyés au contrôleur


La vue n'effectue aucun traitement

32
Contrôleur


Définit le comportement de l'application

Gestion des événements

Mettre à jour la vue ou le modèle et les
synchroniser

Effectue les traitements

Calculs

Appels réseau

...
33
Modèle MVC


Modèle

Données

Vue

Interface(s) graphique(s) pour l’affichage et
l’interaction avec l’utilisateur

Contrôleur

Communication entre les composants

Traitements
34
Nouveau système pour la gestion des commandes

 Les caissiers ont besoin d’une nouvelle interface

 entrées les nouvelles commandes, récupérer l’argent
 Les cuisiniers ont besoin d’une autre interface
 Visualiser les commandes, supprimer celles qui sont
réalisées
 Exemples de code pour le Model, la View, le
Controller, et la manière de les intégrer.

35
 Main

class ExempleViewController{
   public static void main() {
    //notre modèle est autonome
    CommandeModele model = new CommandeModele();

    //ces références dépendent du modèle
    CashierController vc1 = new CashierController(model);
    CashierController vc2 = new CashierController(model);
    CookController vc3 = new CookController(model);
    CookController vc4 = new CookController(model);
  }
}

36
 Le Modèle
public class CommandeModele extends Observable {
  Vector orders; // liste de toutes les commandes

  // ...CommandeModele()...
  // ...getCommandeIterator()...
  public void ajouterCommande(Commande newOrder) {
    orders.add(newOrder); // modification du modele
    setChanged(); // le modele a change (vecteur)
    notifyObservers(); // notification globale
  }

  // idem avec supprimerCommande()
  // ...
}

37
 Le Contrôleur
public class CookController implements Observer,CuisineController {
  CommandeModele model;
  CuisineVue view;

  public CookController(CommandeModele inModel) {
    model = inModel;
    model.addObserver(this);
    view = new CookView(this) ; Appelée par
  } notifyObservers()
  @Override
  public void update(Observable o, Object arg) {
    if (model.getNombreDeCommandes() == 0)
      view.disableRemoveButton();
    view.miseAJourVue(model.getListCommande());
  }

  public void onButtonAddClicked() {
    Commande c = view.getCurrentCommand();
    model.ajouterCommande(c);
  }
} 38
 La Vue
public class CookView implements CuisineVue {
  CuisineController controller;
  JButton buttonRemove, buttonAdd;
  JButton buttonNext;

  public CuisineVue(CuisineController controller) {
    this.controller = controller; Appelée par
    initialiserVue();
  } le contrôleur()
  public void miseAJourVue(List<Commande> list ) {
    // ...mettre à jour ce qui est vu à l'écran
  }

39
La classe Observable (java.util)


Cette classe représente un objet observable par
d'autres, au niveau du modèle de données.

Un objet observable possède un ou plusieurs
observateur, ajoutés par la méthode
addObserver(Observer o)

40
La classe Observable (java.util)


La méthode notifyObservers permet de notifier
les observateurs d ’une modification dans l ’état.

Une modification est reflétée par la méthode
setChanged().

Une fois les observateurs notifiés, la méthode
clearChanged permet d ’indiquer que l ’objet
n ’est plus dans l ’état modifié.

41
L'interface Observer (java.util)

 Une classe qui implémente l'interface Observer, désire

être notifiée des changements produits sur un objet
observable.
 L ’unique méthode devant être implémentée est
update(Observable o, Object arg)
 La méthode update est appelée automatiquement
lorsque l'objet est notifié de la modification de
l'observable.

42
L'interface Observer (java.util)


Le premier paramètre est l ’objet qui
notifie.

Le second paramètre est un objet passé
à la méthode update, au moyen d ’un
appel à la méthode notifyObserver(Object
o)

43
Plan

1. Interface Graphique
2. MVC
3. Javadoc

44
Introduction Javadoc


javadoc est le 3e programme essentiel
fourni avec le SDK (java, javac)

Génère documentation au format de html

Utiliser cet outil est fondamental pour
programmer en Java : bonnes manières

/**
* documentation pour
* methode/classe/attributs/parametres/etc.
*/
45
 Exemple
package prog ;
/**
*@author Chuck Noris
*La classe personne modelise une personne
*/
public class Personne implements Cloneable {
/**
*l'age de la personne ,doit etre positif
*/
private int age ;
/**
*le nom de la personne , une simple chaine de caracteres
*/
private String name ;

46
 Exemple (2)
/**
*constructeur pour la classe Personne
*@param age un entier >= 0
*@param aName le nom de la personne
*/
public Personne ( int age , String aName) {
  this.age = age ;
  name = aName;
}
/**
*modifie l'age de la personne
*@param age un entier >= 0
*@throws NegativeAgeException si l'age est negatif
*/
public void setAge ( int age ) throws NegativeAgeException {
  if ( age < 0 ) {
    throw (new NegativeAgeException ("erreur : l'age doit etre > 0");
    this.age = age ;
  }
}
47
 Exemple (3)

@Override
/**
*cree une representation sous forme de string de l'objet personne
* @return une chaine de caracteres
*/
public  String toString ( ) {
  return name + " age : " + age ;
}

48
49
Utilisation


En ligne de commande :

option -d : répertoire destination

arguments : noms de package
(prog.nompackage) et/ou noms de fichiers
.java

man javadoc

javadoc ­d doc prog

50
Quelques Tags

51
Exercice

52
Exercice


Écrire le programme suivant

++ / -- un entier

53
public class Exercice {
  private int count = 0;
  private JLabel label;
  private JButton buttonPlus;
  private JButton buttonMoins;
  public Exercice() {
    JFrame frame = new JFrame("exemple");
    frame.addWindowListener(new MyWindowListener());
    buttonPlus = new JButton("plus");
    buttonMoins = new JButton("moins");
    buttonPlus.addActionListener(new MyActionListener());
    buttonMoins.addActionListener(new MyActionListener());
    label = new JLabel("0", SwingConstants.CENTER);
    JPanel pane = new JPanel(new BorderLayout());
    JPanel buttons = new JPanel(new GridLayout(0, 1));
    buttons.add(buttonPlus);
    buttons.add(buttonMoins);
    pane.add(buttons, BorderLayout.WEST);
    pane.add(label, BorderLayout.CENTER);

    frame.getContentPane().add(pane, BorderLayout.CENTER);
    frame.show();
  }
54
  private class MyActionListener implements ActionListener {
    public void actionPerformed(ActionEvent event) {
      if(event.getSource() == buttonPlus) {
        count++;
      } else {
        count­­;
      }
      label.setText(Integer.toString(count));
    }
  }
}

55