Vous êtes sur la page 1sur 44

6.

Interactions Homme-
Machine

Olivier Curé ­ UMLV [page 118 ]
Introduction
● Les programmes informatiques
nécessitent des interactions avec les
utilisateurs : questionner, saisir et
afficher.
● Cette interaction (homme-machine –
IHM) peut s'effectuer en mode console
ou graphique.
● Cette partie du cours porte sur les GUI
(Graphical User Interface) en Java.
Olivier Curé ­ UMLV [page 119 ]
IHM
● Utilisabilité : garantir la facilité d'apprentissage
pour l'utilisateur de manipuler ses entrées et
interpréter les sorties.
● Accessibilité : proposer efficacement et
naturellement l'accès à différentes fonctionnalités.
● Approprié : garantir une réponse appropriée et
pertinente aux différentes situations rencontrées.
● Versatilité : garantir une utilisation optimale
dans différents contextes et situations.

Olivier Curé ­ UMLV [page 120 ]
IHM et programmation
● Eléments graphiques
● Fenêtre, bouton, zones de texte et saisie, menu,
liste, etc..
● Programmation événementielle
● Écouteurs - listeners
● Écoutés – handleEvent

Olivier Curé ­ UMLV [page 121 ]
Modèle Vue Contrôleur
(MVC)

● Le modèle représente les données de


l'application.
● La vue représente visuellement les
données.
● Le contrôleur gère l'interaction
utilisateur avec le modèle.
Olivier Curé ­ UMLV [page 122 ]
MVC (suite)
● Le modèle contient les données et gère la mise-
à-jour et le renseignement des données.
● La vue affiche les composants et les données.
Elle gère la mise-à-jour (graphique, textuelle), la
notification des modifications au contrôleur et le
renseignement.
● Le contrôleur écoute les actions produites dans
la vue et récupère des informations de la vue,
met à jour le modèle, récupère les nouvelles
données de la vue pour les transmettre à la vue.

Olivier Curé ­ UMLV [page 123 ]
MVC (fin)
● Avantages :
– Séparation entre les données et la
présentation.
– Données stockées à un endroit connu.
– Modifications plus faciles

Olivier Curé ­ UMLV [page 124 ]
GUI et Java
● Trois toolkits pour les GUI en Java :
– AWT (Abstract Windowing Toolkit)
– Swing
– SWT (Standard Widget Toolkit)
● Les programmes de GUI sont dirigés
par événements.

Olivier Curé ­ UMLV [page 125 ]
Toolkits GUI Java
● AWT, développé par SUN et présent
depuis le JDK 1.0.
● Swing, développé par SUN et présent
depuis le JDK 1.2.
● SWT, développé par IBM et présent
depuis JDK 1.2.
● Le cours porte essentiellement sur
Swing et un peu sur AWT.

Olivier Curé ­ UMLV [page 126 ]
AWT
● Chaque composant Java présente un
« peer » C++ correspondant au
composant de la plateforme.
● Problème : aspect/focntionnement
différents sur les différentes
plateformes.

Olivier Curé ­ UMLV [page 127 ]
Swing
● Swing est construit au-dessus de AWT :
la gestion des événements est
identique et les classes Swing héritent
de AWT.
● Les composants Swing ont un nom qui
débute par un "J".
● Swing offre une palette bien plus
large, plus élaborée fonctionnellement
et esthétiquement mais est plus lent et
plus lourd que AWT.
Olivier Curé ­ UMLV [page 128 ]
SWT
● Développé par IBM pour l'IDE Eclipse.
● Même principe que AWT mais avec un
« peer » Java et non C++.
● Pas intégré au JDK
● Le cours ne porte pas sur SWT,
seulement sur AWT et surtout SWING
qui est le plusutilisé actuellement.

Olivier Curé ­ UMLV [page 129 ]
Composant et Container
● AWT, SWT et Swing utilisent des
classes différentes pour représenter
chaque composant graphique.
● Exemple pour les composants :
– Pour AWT : Component
– Pour Swing : Jcomponent
– SWT : Widget
● Container : un composant contenant
des composants.
Olivier Curé ­ UMLV [page 130 ]
Composant
et Container

Attention : Tout JComponent est un


Container !

Olivier Curé ­ UMLV [page 131 ]
Composants Swing
● 3 types de composants :
– Les composants lourds qui correspondent à des
fenêtres de la plateforme : JFrame, JDialog,
JWindow, Japplet. Ils sont gérés par AWT.
– Les composants légers sont du code "pur Java"
qui les dessinent : JButton , JTextfield, JLabel, etc..
La plupart correspondent à des sous-classes de la
classe JComponent.
– les conteneurs intermédiaires : JPanel,
JScrollPane, JTabbedPane, etc..

Olivier Curé ­ UMLV [page 132 ]
Composants
● Window : une fenêtre sans bordure
● Frame : fenêtre principale d'application
● Panel : conteneur de composants que l'on
place dans une fenêtre.
● Applet : permet l'ouverture d'un emplcament
dans un navigateur internet
● ScrollPane : conteneur supportant une barre
de défilement.

Olivier Curé ­ UMLV [page 133 ]
Look and Feel
● Avec Swing, il est possible de modifier l'aspect
graphique (look and feel) d'un ensemble de
composants.
● Des exemples :
– Windows
(com.sun.java.swing.plaf.windows.WindowsLookAndFeel).
– Motif (com.sun.java.swing.plaf.motif.MotifLookAndFeel).
– Metal (javax.swing.plaf.metal.MetalLookAndFeel).
– GTK (com.sun.java.swing.plaf.gtk.GTKLookAndFeel).

Olivier Curé ­ UMLV [page 134 ]
import javax.swing.*;
import java.awt.*;
Exemple 1 import java.awt.event.*;
class FrameTd1 extends JFrame {

JFrame   public FrameTd1() {
    setTitle("Ma JFrame");
    setSize(200,200);
    addWindowListener(new WindowAdapter() {
        public void windowClosing(WindowEvent e)
                { 
                  System.exit(0); 
                }
              });
  } 
}

public class FrameTd1Test
{
  public static void main(String args[])
  {
     JFrame frame1 = new FrameTd1();
     frame1.setVisible(true);
  }
}

Olivier Curé ­ UMLV [page 135 ]
Exemple 1 (suite)
import javax.swing.*; ● Fixe le nom de la fenêtre et sa
import java.awt.*;
import java.awt.event.*;
taille
class FrameTd1 extends JFrame {
  public FrameTd1() {
    setTitle("Ma JFrame");
    setSize(200,200);
    addWindowListener(new 
WindowAdapter() {
        public void 
windowClosing(WindowEvent e)
                { 
                  System.exit(0); 
                } ● Fermeture du process en même
              });
  }  temps que fermeture de la
} fenêtre. On peut aussi utiliser la
méthode
setDefaultCloseOperation(JF
rame.EXIT_ON_CLOSE).
Olivier Curé ­ UMLV [page 136 ]
Exemple 1 (fin)
public class FrameTd1Test
{
● Création d'une
  public static void main(String 
args[]) instance de la
classe Frame1
  {
     JFrame frame1 = new 
FrameTd1();
     frame1.setVisible(true);
  }
● Affichage à
}
l'écran de cette
instance de
Frame1.

Olivier Curé ­ UMLV [page 137 ]
Ajouter des éléments dans
une JFrame
● La méthode getContentPane() de la
classe JFrame retourne le conteneur
(Container) de cette JFrame.
● A partir de ce conteneur, on peut ajoter
des éléments à la fenêtre.
● Il est également possible de changer le
conteneur à l'aide de
setContentPane().

Olivier Curé ­ UMLV [page 138 ]
Ajouter des éléments dans
une Jframe (2)
● Pour ajouter un élément à ce
conteneur, on utilise un méthode
add(component).
● le paramètre de add est un objet du
type Component, par exemple un
JButton, JLabel ou bien un élément
intermédiaire JPanel.

Olivier Curé ­ UMLV [page 139 ]
import javax.swing.*;
Exemple import java.awt.*;
import java.awt.event.*;

2 public class FrameTd2Test
{

JFrame   public static void main(String args[])
  {
     JFrame frame2 = new FrameTd1();
     Container contentPane2 = 
frame2.getContentPane();
     JButton jb1 = new JButton("Bouton #1");
     jb1.setBackground(Color.red);
     contentPane2.add(jb1);
     frame2.setVisible(true);
     JFrame frame21 = new FrameTd1();
     Container contentPane21 = 
frame21.getContentPane();
     JLabel jl1 = new JLabel("Un label 
dans le second cadre");
     contentPane21.add(jl1);
     frame21.setVisible(true);

 }
}

Olivier Curé ­ UMLV [page 140 ]
La classe JComponent
● Taille d'un composant :
– taille actuelle avec get/setSize()
– taille préférée avec get/setPreferredSize()
– Taille minimale avec get/setMinimumSize()
– Taille maximale avec get/setMaximalSize()
● Etat :
– activation avec is/setEnabled()
– visibilté avec is/setVisible()

Olivier Curé ­ UMLV [page 141 ]
Quelques JComponent :
boutons
● Plusieurs classes pour les boutons qui
héritent toutes de AbstractButton :
– JButton
– JCheckBox correspondant à une case à
cocher.
– JRadioButton correspondant à un bouton
radio.
– Pour avoir un seul bouton sélectionné à la
fois, il faut intégrer les boutons dans un
ButtonGroup
Olivier Curé ­ UMLV [page 142 ]
Quelques JComponent :JPanel
● Sert à regrouper des composants dans
une zone écran.
● Ne possède pas d'aspect visuel
déterminé; son aspect visuel est
conditionné par ses composants.

Olivier Curé ­ UMLV [page 143 ]
Exemple 3
import java.awt.Container;
import javax.swing.ButtonGroup;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JRadioButton;
public class ButtonPanel extends JFrame {
public JPanel createGroup(JPanel panel) {
ButtonGroup buttonGroup = new ButtonGroup();
for(int cpt=0; cpt<5;cpt++) {
JRadioButton radioButton = new JRadioButton("#"+cpt);
panel.add(radioButton);
buttonGroup.add(radioButton);
}
return panel;
}
public ButtonPanel() { 
JPanel panel = new JPanel();
Container contentPane = this.getContentPane();
contentPane.add(createGroup(panel));
}
public static void main(String[] args) {
ButtonPanel buttonPanel = new ButtonPanel();
buttonPanel.setVisible(true);
}
}
Olivier Curé ­ UMLV [page 144 ]
Quelques Jcomponent: JLabel,
JTextField,JTextArea
● Ils prennent un texte lors de la
construction.
● JLabel permet d'afficher du texte mais
on ne peut interagir avec.
● JTextArea et JtextField offrent des
zones où l'on peut saisir du texte.

Olivier Curé ­ UMLV [page 145 ]
Quelques JComponent: liste et
liste déroulante
● JComboBox et JList peuvent prendre un
tableau à la construction.
● Exemple :
Object[] tableau = new Object[5];
Jlist list = new Jlist(tableau);
list.setVisibleRowCount(3);
...
JcomboBox comboBox = new JComboBox(tableau);

Olivier Curé ­ UMLV [page 146 ]
Layout manager
● Le placement des composants est
réalisé à l'aide de layout manager et
non au pixel près.
● Utilisabilité pour
l'agrandissement/réduction de
composants lourds.
● Un layout manager est associé au
container.

Olivier Curé ­ UMLV [page 147 ]
Layout (2)
● Un layout manager utilise les tailles
d'un composants pour les placer dans
son container, les méthodes sont :
– getPreferredSize()
– getMaximalSize()
– getMinimalSize()
● La méthode pack() de JFrame
redimensionne sa taille en fonction de
la taille préférée de chacun des
container. Olivier Curé ­ UMLV [page 148 ]
Layout (3)
● On peut redimmensionner un
composant :
– setSize(largeur, hauteur)
– setPreferredSize(dimension)

Olivier Curé ­ UMLV [page 149 ]
Layout (4)
● 2 types de layout :
– sans contrainte : FlowLayout, GridLayout
et BoxLayout.
– avec contraintes : BorderLayout et
GridBagLayout.

Olivier Curé ­ UMLV [page 150 ]
FlowLayout
● Affiche les composants de la gauche
vers la droite en passant à la ligne s'il
n'y a plus de place.
● La disposition est recalculée après
chaque redimensionnement.

Olivier Curé ­ UMLV [page 151 ]
GridLayout
● Affiche les composants sur une grille,
ligne par ligne et les cellules ont toutes
la même taille.
GridLayout (int li, int co, int 
hgap, int vgap);
● Respectivement le nombre de lignes,
colonnes et distances horizontale et
verticale (nulles par défaut).
● Si li=0, le nombre de lignes est ignoré.
● Si li > 0, co est ignoré.
Olivier Curé ­ UMLV [page 152 ]
GridLayout
● Affiche les composants sur une grille,
ligne par ligne et les cellules ont toutes
la même taille.
GridLayout (int li, int co, int 
hgap, int vgap);

Olivier Curé ­ UMLV [page 153 ]
GridLayout
● Respectivement le nombre de lignes,
colonnes et distances horizontale et
verticale (nulles par défaut).
● Si li=0, le nombre de lignes est ignoré.
● Si li > 0, co est ignoré.

Olivier Curé ­ UMLV [page 154 ]
BorderLayout
● Affiche les composants dans 5 zones
(nord, sud, est, ouest et centre) où
'nord' et 'sud' occupent toute la
largeur; 'est' et 'ouest' occupent la
hauteur restante.

Olivier Curé ­ UMLV [page 155 ]
BoxLayout
● Exemple, BoxLayout (horizontal)
correspond à des cellules de même
hauteur mais de largeur variable.
● On peut définir l'axe à l'aide des
constantes X_AXIS(horiz.) et Y_AXIS
(vert.).

Olivier Curé ­ UMLV [page 156 ]
Composant Box
● Le composant Box est un conteneur
trasparent dont le gestionnaire est
BoxLayout.
● On peut y ajouter un élément glue pour
faire du remplissage. En fait, il absorbe
les espaces vides.

Olivier Curé ­ UMLV [page 157 ]
Box: exemple
Box box = new Box(BoxLayout.X_AXIS);
box.add(Box.createHorizontalGlue());
box.add(new Jbutton(''texte'');
box.add(Box.createHorizontalGlue());
...

Olivier Curé ­ UMLV [page 158 ]
GridBagLayout
● Affiche les composants dans une grille
selon un ensemble de contraintes
(exprimé par la classe GridBagConstraints) :
– La zone réservée de la grille.
– La place occupée dans cette zone.

Olivier Curé ­ UMLV [page 159 ]
Layout (5)
● JPanel utilise par défaut un FlowLayout.
● JFrame utilise par défaut un
BorderLayout.

Olivier Curé ­ UMLV [page 160 ]
Exemple import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
4 public class FrameTd3Test

JFrame
{
  public static void main(String args[])
  {
     JFrame frame3 = new FrameTd1();
     Container contentPane3 = 
frame3.getContentPane();
     contentPane3.setLayout 
(new java.awt.GridLayout (2, 2));
    /* GridLayout avec 2 lignes et 2 colonnes */
     JButton jb1 = new JButton("Bouton #1");
     jb1.setBackground(Color.red);
     JButton jb2 = new JButton("Bouton #2");
     jb2.setBackground(Color.green);
     JLabel jl1 = new JLabel("Un label en bas");
     contentPane3.add(jb1);
     contentPane3.add(jb2);
     contentPane3.add(jl1);
 frame3.setLocation(300,300);
     frame3.show();
  }
}

Olivier Curé ­ UMLV [page 161 ]