Conception d’IHM en Java

Cédric Dumas
[Link]@[Link]
Jean-Daniel Fekete
contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Ecole des Mines de Nantes
Partage des Conditions Initiales à l'Identique 2.0 France License
Conception d’IHM en Java

Concepts Généraux
Java et les interfaces
graphiques interactives

Langage conçu d'emblée avec une

interface graphique interactive
Ajout de mécanismes spécifiques
pour les interfaces
 inner classes
2 interfaces et 2 modèles graphiques
en standard
Beaucoup d'exemples, de
documentations et d'expérience. 3
Application graphique
interactive : architecture

Les boîtes à outils 2D sont

maintenant très stéréotypées
3 composants
 système de fenêtrage
 API graphique
 gestion de l'arbre d'affichage et
d'interaction
Organisation sous forme d'objets
4
Le système de fenêtrage

Accès partagé à l'écran

Subdivision de l'écran en fenêtres
Chaque fenêtre est positionné (x, y, z)
et dimensionnée (largeur x hauteur)
Modèle graphique d'affichage
Modèle d'événements
Communication entre les applications
Gestion de ressources spécifiques
5
Les API graphiques

Dans une fenêtre, une application

dessine en utilisant des fonctions qui
prennent des paramètres
2 catégories en 2D
 orientée pixel
 orientée "dimension réelle", ou
"indépendante de la résolution"
Richesse variable suivant les plate
formes
6
La gestion de l'arbre
d'affichage

Afficher = appeler une succession de

fonctions graphiques
Représentation sous forme d'un arbre
d'affichage (ou graphe directe acyclique)
On affiche récursivement, en profondeur
d'abord, tous les nœuds de l'arbre
On modifie l'arbre pour changer
l'affichage puis on réaffiche

7
La gestion de l'interaction

Les dispositifs d'entrée génèrent des

événements (petit bloc mémoire
contenant un type, un temps, une
fenêtre cible et des détails suivant le
type)
La boîte à outils achemine l'événement
vers un nœud cible
Le nœud gère l'événement, ce qui peut
modifier l'état de l'arbre d'affichage
On passe à l'événement suivant 8
Acheminement des
événements

Positionnel (souris)
 on regarde quel est le nœud de l'arbre le
plus près de la position
 On l'envoie au plus prés, qui renvoie a
son père s'il ne veut pas le gérer
Non positionnel (clavier)
 si un nœud à le "focus", on lui envoie
traduction d'une touche en caractère(s) ou
action
 sinon, on cherche une cible 9
Les composants graphiques
interactifs

Le nœud est capable de s'afficher et

de gérer les événement
On lui ajoute une interface de
communication suivant sa sémantique
 bouton, label, menu, ligne de texte, etc.
On appelle ce nœud communicant un
composant ou widget ou gadget ou
objet de contrôle.
10
Organisation sous forme
d'objets

Les langages à objets permettent de

représenter ces nœuds comme des
objets ayant une interface
Tous les nœuds héritent d'une classe
de base (Component dans Java)
Chaque composant particulier
spécifie une interface particulière
adaptée à sa sémantique
11
Principales différences entre
les GUIs

Il existe un grand nombre de boîtes à

outils graphiques interactives (Graphical
User Interfaces ou GUI)
Langage / portabilité / performances /
mécanismes de communications /
extensibilité / rapidité de développement
/ robustesse
Pas de "meilleur" mais des
spécialisations
Lire le chapitre consacré aux GUIs 12
Les boîtes à outils graphiques
interactives de Java
Java propose deux boîtes à outils
graphiques :
 AWT (Abstract Window Toolkit), simple,
petite et limitée
 SWING, cohérente, grosse et extensible.
Les deux peuvent s'utiliser dans les
applets
SWING facilite la transition à partir
d'AWT.
13
Conception d’IHM en Java

AWT
Java AWT

Interface indépendante de la plate-

forme
API simple (simpliste)
Composants peu nombreux
Apparence pauvre
Relativement rapide
Similaire sur toutes les plate-formes

15
Organisation d ’AWT

Packages [Link] et [Link]

Classes de composants (dérivées de
Component)
 Composants conteneurs
 Composants « feuille »
Classes de gestionnaire d’événements
Myriade de classes utilitaires
 Image, Color, Cursor, Dimension, Font, etc.

16
Conception d’IHM en Java

SWING
Java SWING

SWING implémente tous les

composants en Java
SWING offre plusieurs mécanismes
originaux, pratiques et puissants
SWING peut se programmer à
plusieurs niveaux
SWING est très gros et souvent lent.

18
Programmation avec Java
SWING

Généralités sur Java SWING

SWING et AWT
Concepts de SWING
Une application Java SWING pas à pas
 TPs
Les composants standards de SWING
Créer ses propres composants

19
SWING et AWT

SWING cohabite avec AWT et utilise

le minimum de ses services
Tous les composants sont redéfinis
AWT n ’est pas régulier
 pas de canvas dans un menu
SWING est totalement régulier
 tout conteneur peut afficher tout objet
graphique
20
Concepts de SWING

Séparation du composant et de son

apparence
 plusieurs apparences existent:
Windows, Unix, Mac et « Metal »
 L ’apparence par défaut dépend de la
plate forme
Séparation du composant et de son
modèle
Séparation du composant et de son
21
Concepts de SWING

Basé sur des containers

générique
gère collection de composants
design Pattern composite

22
Programmation SWING

Package [Link]
Relativement proche de AWT pour
faciliter la migration, ajout « J »
avant le nom des classes:

23
Construction d ’une
application

Construire un arbre d ’objets dérivés

de « JComponent »
Attacher des gestionnaires
d ’événements
Ce sont les gestionnaires
d ’événements qui feront les actions
et modifieront les composants

24
Exemple
import [Link].*;
import [Link].*;

class hwSwing {
public static void main(String args[]) {
JFrame f = new JFrame("Hello World");
Jlabel texte = new JLabel("Hello World");
[Link]().add(texte);
[Link]();
[Link](true);
}
}

25
Autre approche
import [Link].*;
import [Link].*;

public class Test {

public static void main(String args[]) {
Simple f = new Simple();
[Link]();
[Link](true);
}
}
public class Simple extends JFrame {
Jlabel texte = new JLabel("Hello World");
public Simple() {
getContentPane().add(texte); }
}
26
explications

Création de l ’arbre de composants :

 JFrame + JLabel ou JButton
Déclaration des actions:
 addEventHandler + création d ’une
« inner class »
Calcul du placement des composants:
 pack
Affichage
27
Mon premier Composant

JFrame
 fenêtre principale
JDialog
 fenêtre de dialogue (modale)
Jwindow
show()
hide() ou dispose()
toFront() ou toBack()
setTitle(“titre !”)
setSize(int, int) et setResizable(false)
28
Les autres composants

29
Jlabel

[Link]
descriptif : texte statique + image
exemple : devant un champ de saisie
Jlabel jl = new Jlavel(“Label 1”);
ou [Link](“Label 1”); // -> .getText()

[Link](new ImageIcon(“[Link]”));

[Link]([Link]
M) 30
JTextField

[Link]
saisie de texte (non typé)
JTextField jt = new JTextField(“Thomas”);
String nom = new String(“Thomas”);
[Link](nom);
[Link]([Link]());
[Link](); [Link](); [Link]();

31
JButton

Bouton simple à états

JButton jb= new Jbutton(“OK”,new
ImageIcon(“[Link]));
[Link](new ImageIcon(“[Link]”));
[Link](new ImageIcon(“[Link]”));
[Link](new ImageIcon(“[Link]”));
[Link](‘o’); // ALT + o
[Link](false);
[Link](false);
[Link]();
32
JmachinButton

JToggleButton
 deux états (setIcon et setSelectedIcon)
JCheckBox
 cases à cocher
JRadioButton
 dans un groupe de bouttons “radio”

33
Exemple de Radio
ButtonGroup grp = new ButtonGroup();
JRadioButton r1 = new JRadioButton(“it1”);
JRadioButton r2 = new JRadioButton(“it2”);
[Link](true);
[Link](r1);
[Link](r2);

34
Le modèle de bouton
poussoir

Modèle utilisé pour les CheckBox,

RadioButton et Button
Plusieurs niveaux d ’utilisation
 gère l ’état du bouton, au repos, sous le
pointeur, appuyé et relâché.
 Gère la notification vers les listeners
 Gère l ’envoie d ’un événement
« action »

35
Le modèle de bouton
poussoir (2)
public interface ButtonModel extends ItemSelectable
{
attribute boolean armed;
attribute boolean selected;
attribute boolean enabled;
attribute boolean pressed;
attribute boolean rollover;
attribute int mnemonic;
attribute String actionCommand;
attribute ButtonGroup group;
listener ActionListener;
listener ItemListener;
listener ChangeListener;
}

36
JComboBox

Liste déroulante (ouverte ou fermée)

vector ou tableau d’objets passés en
paramètres
JComboBox cb = new JComboBox( items);
[Link](4);
[Link](true); // JTextField

37
JMenu

Une instance de JMenuBar par Jframe

setJMenuBar(JMenuBar mb);
Plusieurs Jmenu par JMenuBar
add(JMenu jm);
Plusieurs JMenuItem/JCheckboxMenu
par Jmenu
add(JMenuItem mi);
addSeparator();
Structurez !!!
38
JPanel

Jpanel
 conteneur
JScrollPane Panel

 un seul composant !
 barres de défilement
JScrollPane sp = new JScrollPane();
[Link](monJLabel); ScrollPane
[Link] (monJLabel);
 composants implémentant Scrollable
class MonLabel extends Jlabel implements 39
Les composants de SWING

Dialog Tabbed Pane Frame Split pane

Tool bar

Internal frame
Layered pane

40
Composants de Swing

List

File chooser Tool tip

Color chooser
Progress bar

Slider
Table Text Tree

41
Capacités communes des
composants

(dés)activation
isEnabled() setEnabled(…)
(in)visible
setVisible(…) isVisible()
 module le coût de l’instanciation d’un container !
tailles réelle et souhaitable
Dimension getSize() ou Dimension
getSize(Dimension r)
setSize(…)
Dimension getPreferredSize() ;
42
setPreferredSize(Dimension r);
Factory

Bordures
Border mbd= new Border(
[Link]()
[Link]()
[Link](“Titre !”)
etc… );
[Link](mbd);
Curseur
Cursor nc = new
Cursor(Cursor.CROSSHAIR_CURSOR);
[Link](nc); 43
Couleurs
 new Color (r,g,b)
 new Color (r,g,b,a)
 0 -> 255
 a=255 opaque
[Link]([Link]);
//constantes
[Link]([Link]);
[Link](true);

44
Quelques difficultés à retenir

Conteneurs de fenêtre : ne pas

ajouter directement avec "add" mais
ajouter avec "getContentPane()"
Pas de multi-threading, sauf
autorisation explicite dans la
documentation

45
Pourquoi getContentPane ?

Les containers Swing ont un

JRootPane
[Link]().add(...)

composants « lourds » : JDialog, JFrame,

JWindow Root pane

46
La classe JComponent

Tool tip
Bords
Actions associées aux touches
Propriétés
Accès aux handicapés
Double buffer

47
Conception d’IHM en Java

Swing : la gestion du
placement des composants
Calcul du placement

Le placement est calculé dans les

conteneurs
Soit les composants sont placés
explicitement (x, y, largeur, hauteur)
Soit ils sont gérés par un
« LayoutManager » qui calcul ces
paramètres dynamiquement
 besoins du composant (taille min, max,
normale) + positionnement relatif
49
Mise en place d ’un
gestionnaire de placement

Les conteneurs définissent la méthode

setLayout(layoutManager) pour
changer le gestionnaire par défaut
Le gestionnaire par défaut change
d ’une classe de conteneur à une autre
La méthode pack() déclenche le calcul
du placement
La méthode invalidate() rend le
placement courant invalide
50
Les gestionnaires de
placement...
 FlowLayout  GridLayout
 Place les  Découpe en une
composants de grille régulière sur
gauche à droite laquelle les
composants sont
 CardLayout placés
 Superpose les  GridBagLayout
composants
 Découpe en une
grille et place les
composants sur une
ou plusieurs cases
51
...ou Layout Manager
 BorderLayout
 Découpe en 5
régions: south,
north, east, west,
center
 Aucun : .setBounds
(x,y,h,l);

52
Conception d’IHM en Java

La gestion d’évènements
Parcours des événements

Plusieurs boucles envoient des

événements dans une file unique
 [Link]()
Un Thread lit la file et distribue les
événements à la racine de l ’arbre
des composants associé à la fenêtre
de l ’événement
L ’événement est acheminé au
composant auquel il est destiné 54
Gestion des actions

Associer une action à un événement

2 types d ’événements
 issu du système de fenêtrage (bas niveau)
 issu d ’un composant ou d’un sous-
système Java (haut niveau)
2 niveaux de gestion
 dérivation des composants
 association de gestionnaires d’actions

55
Les événements

Package [Link].*
Héritent de la classe
[Link]
 identificateur (numéro unique)
 consumed (a-t-il été utilisé?)
 source (qui l'a émis)
Envoyés dans une file unique
 [Link]()
Lus par un thread spécique
56
Types d’événements

I nteraction utilisateur Evénements émis

Clic sur un J Panel MouseEvent

Frappe d’une touche sur un J Panel KeyEvent

Iconification d’un fenetre WindowEvent

Clic sur un bouton ActionEvent

Ajout d’une lettre dans un J TextField DocumentEvent

Sélection d’un item dans une J List ListSelectionEvent

57
Dérivation d ’un composant
(obsolète)

Redéfinition de la méthode
processEvent(AWTEvent e)
Test de la classe de l ’événement
 if (e instanceof FocusEvent)
processFocusEvent((FocusEvent)e);
else
[Link](e);
Ne pas oublier d ’appeler super
sinon, rien ne marche plus.
58
Association de gestionnaires
d ’actions
 Pour chaque famille
d ’événements, une
interface « listener »
est définie
 MouseListener,
Frame
MouseMoveListener,
KeyListener, etc. ActionListener
Button
 Chaque classe
addActionListener(
composant définit ActionListener) actionPerformed(
ActionEvent e)
« add<nom>Listene
r(<nom>Listener )
59
Les listeners

Chaque composant peut renvoyer

certains événements à l'application
si elle le demande
Le renvoi se fait par un Listener
actionListener, AdjustmentListener,
FocusListener, InputMethodListener,
ItemListener, KeyListener,
MouseListener, MouseMotionListener,
TextListener, WindowListener 60
Exemple
public class MyClass implements MouseListener {
...
[Link](this);
...
public void mousePressed(MouseEvent e) { }
public void mouseReleased(MouseEvent e) { }
public void mouseEntered(MouseEvent e) { }
public void mouseExited(MouseEvent e) { }
public void mouseClicked(MouseEvent e) { ...//Event handler
implementation goes here... }

}
61
Les adaptateurs

Les Adapters sont des classes

concrètes qui facilitent l'utilisation des
Inner Classes
Pour chaque Listener ayant plusieurs
méthodes, un Adapter est défini
Il implémente toutes les méthodes en
ne faisant rien
Seules les méthodes faisant quelque
chose doivent être implémentés par des
inner classes 62
Exemple adapté
public class MyClass extends MouseAdapter {
...
[Link](this);
...
public void mouseClicked(MouseEvent e) {
//Event handler implementation goes here...
}
}

63
Rappel sur les "inner classes"

Existent depuis Java 1.1

3 versions
 classe définie dans l'espace de
nommage d'une autre classe
 classe définie dans le contexte d'une
autre classe
 classe anonyme définie au fil du code
dans le contexte courant

64
Syntaxe des inner classes

class a { static class B { … } …}

class a { class B { … } …}
class a { type method(args) { …
Thread t = new Thread() { void
run() { … } };
…} }

65
Définition d ’un Listener

4 méthodes
 Définition d’une classe qui implémente
l’interface ActionListener
 Définition de l’interface ActionListener
dans la classe qui gère l’action
 Utilisation des « inner classes », définition
à la volée du code
 Utilisation d ’un classe « Adapter » pour
ne pas avoir à définir toutes les méthodes

66
Inner classes
public class MyClass extends Applet {
...
[Link](new MyAdapter());
...
class MyAdapter extends MouseAdapter {
public void mouseClicked(MouseEvent e) { ...//Event handler
implementation goes here... }
}
}

67
Anonymous Inner classes
public class MyClass extends Applet {
...
[Link](
new MouseAdapter() { public void mouseClicked(MouseEvent
e) { //Event handler implementation goes
here... }
}
);
...
}
}

68
Conception d’IHM en Java

Graphique & Swing

Graphics

Java définit deux interfaces pour le

graphique passif: Graphics et
Graphics2D
Graphics implémente un modèle
graphique très simple et orienté pixel
Graphics2D implémente un modèle
graphique sophistiqué indépendant de
la résolution
On peut aussi créer une image et créer
un graphique pour dessiner dessus 70
Capacités d ’un Graphics

Les attributs sont:

 Color, PaintMode, Font, clip, origin, taille
Les primitives graphiques sont:
 line, rect, roundRect, oval, arc, polyline,
polygon, string, image
On peut tracer le contour ou remplir les
rect, roundRect, oval, arc et polygones
On ne peut pas changer l ’épaisseur
des traits ou faire des pointillés par
exemple. 71
Les couleurs

Modèle simple: 3 composants rouge,

vert et bleu
Modèle complexe : ColorSpace, Color
et ColorModel
 ColorSpace est un espace de couleur
(RGB, CIEXYZ, etc)
 Color représente une couleur dans un
espace de couleur
 ColorModel spécifie comment une
image code la couleur 72
Les Images

Image: tableau de pixels

peut être
 chargé du WEB ou d ’un fichier
 créé pour accélérer l’affichage
 créé pour éviter des clignottements
 créé pour dessiner dedans
Plusieurs niveaux d ’API
Ici, le plus simple.
73
Création d ’une image

Dans Component:
 Image img = createImage(largeur, hauteur)
Pour dessiner dedans, créer un
Graphics :
 Graphics g = [Link]();
 [Link](getBackground());
On peut ensuite dessiner dans g
On peut dessiner l’image sur le graphics
courant.
74
Chargement d ’une image

[Link](String
file);
[Link](URL url);
createImage fait la même chose
mais ne partage pas les images
Attention, dans une applet, getImage
ne marche que sur le répertoire de
l ’URL de l ’applet
75
Affichage d ’une image

[Link](Image img, int x,

int y, ImageObserver o);
Plusieurs autres version qui retaillent
l ’image
[Link]
interface
 boolean imageUpdate(Image i, int info, int
x, int y, int w, int h)
 appelé lors d ’un chargement incrémental
d ’image 76
Les polices de caractères
Java utilise des caractères Unicode (16
bits)
Les polices traduisent des suites de
caractères en suite de glyphes affichables
Une police a un nom, un style et une taille
 noms systèmes: Dialog, DialogInput,
Monospaced, Serif, SansSerif, Symbol
 Styles: PLAIN, BOLD, ITALIC
La famille est gérée en interne
77
Les métriques de polices

Ascent hauteur / ligne de base

Leading avance / début à
gauche
charWidth largeur d ’un caractère
charsWidth largeur de plusieurs
caractères

78
Capacités d ’un Graphics2D
(Java2D)

Dérive d’un Graphics

Ajoute les attributs suivants:
 composite, paint, stroke,
RenderingHints, transform
Les primitives obéissent à la
transformation affine installée
Les « stroke » et « paint »
définissent les attributs d ’affichage
des remplissages et des traits. 79
Les objets géométriques de
Java2D

Package [Link].*
Définit les objets de gestion de la
géométrie et leurs interfaces

80
Les transformations affines

Spécifie à la fois l ’échelle en X et Y,

la rotation, la translation et des
déformations affines
Les transformations se composent
Une transformation courante est
appliquée aux primitives graphiques

81
Les formes

Ligne, rectangle, arcs, ellipse,

polygone, etc.
Courbes quadratiques et cubiques
Area

82
Les courbes cubiques

Courbes de Bézier
Relativement facile à
contrôler

83
Les "area"

Permet de calculer avec des Shapes:

 intersection
 ajout, soustraction, différence
symétrique
Lent mais puissant

84
La notion de "Path"

Forme définie par son contour

 point de départ
 suite de lignes ou courbes
 levé du crayon
 fermeture
On peut remplir ou tracer le Path
On peut itérer le long du Path
 suite de segments typés connus
85
Les traits

Nombreux attributs:
 épaisseur, style de fin (end cap), style
de join (join style), pointillé
BasicStroke : transformer un trait en
son contour (pour lui appliquer un
remplissage)

86
Les remplissages

Couleur pleine
Composition avec mélange
(translucide)
Texture
Gradient
Pochoir

87
Imprimer avec Java2D
public void actionPerformed(ActionEvent e) {
if ([Link]() instanceof JButton) {
PrinterJob printJob =
[Link]();
[Link](this);
if ([Link]()) {
try {
[Link]();
} catch (Exception ex) {
[Link]();
}
}
}
}

88
Conception d’IHM en Java

Créer un nouveau composant

Modifier l’Affichage

Deux cas de figure:

 composant primitif, l ’affichage est laissé
au « peer »
 composant redéfini, l ’affichage est géré
par
update et paint
En principe, seul le Canvas est censé
être dérivé pour modifier son affichage
L ’affichage se fait sur une surface
graphique, le « Graphics » 90
Les composants spécifiques
SWING

Dériver de JComponent
paint appelle paintComponent,
paintBorder et paintChildren
On peut changer l’un des trois ou
paint directement
Similaire à AWT
On peut utiliser Java2D

91
Récupération d’un Graphics

Pas de composant ZonedeDessin

rafraichissement :
public static void main(...) {
[…}
JPanel pa = new JPanel();
Graphics g = [Link]();
[Link](10,10,50,50); // centre supérieur
gche
}

92
Dessiner à tous les coups
Public class MonPanel extends JPanel {
public void PaintComponent(Graphics g) {
[Link](g);
[Link](10,10,50,50);
}
}

93
Conception d’IHM en Java

MVC en Swing
Comment être multi ?

Plusieurs vues :
DessinListener listDessin = new
DessinListener();
CoordListener listCoord = new
CoordListener();
[Link](listD
essin);
[Link](listC
oord);

Coordonnées : 83 28
95
Conception d’IHM en Java

Les composants évolués dans

Swing
Le modèle de liste

Utilisé pour les listes

public interface ListModel {
int getSize();
Object getElementAt(int index);
Listener ListDataListener;
}
Facilite l ’affichage d ’un conteneur
par une liste
CellRenderer pour changer
l ’apparence des items
97
Création d ’une liste
String[] data = {« un », « deux »};
Jlist l = new JList(data);
JList peut être créé avec un modèle ou
un tableau (le modèle est créé
implicitement)
On peut lui changer son CellRenderer
On peut lui changer son SelectionModel
 un ou plusieurs séléctionnés
 plusieurs contigus ou non
 le contrôle peut être plus fin
98
Le modèle de boîte combiné
(combo box)

Comme List plus un item sélectionné

Le modèle de sélection est « un
seul »
Peut être modifiable ou non (ajout
implicite d ’un item saisi au clavier
dans la liste)

99
Le modèle d'intervalle borné

BoundedRangeModel
Utilisé par les sliders, scrollbar et les
progress bars
Minimun <= value <= value+extent
<= Maximum
JScrollBar j = new
JScrollBar(myBRModel);

100
Le modèle d'arbre JTree

TreeModel
 Object getRoot(), Object getChild(Object
parent, int index), int
getChildCount(Object parent), boolean
isLeaf(Object node),
valueForPathChanged(TreePath p, Object
newValue), int getIndexOfChild(Object
parent, Object child), TreeModelListener
Pour déplacer, ajouter ou retirer une
colonne dans une table
101
Le modèle de
table JTable
JTable(Object[][] rowData, Object[] columnNames)
JTable(Vector rowData, Vector columnNames)
new AbstractTableModel() {
public String getColumnName(int col) {
return columnNames[col].toString();
}
public int getRowCount() { return
[Link]; }
public int getColumnCount() { return
[Link]; }
public Object getValueAt(int row, int col) {
return rowData[row][col];
}
public boolean isCellEditable(int row, int col)
{ return true; }
public void setValueAt(Object value, int row,
int col) {
rowData[row][col] = value;
fireTableCellUpdated(row, col);
}
} 102
La gestion du
texte

Gestion simple et configurable

Niveau de configuration très poussé
 Texte simple, Texte HTML, Texte XML?
Interface « Document » pour gérer
l ’intérieur d ’un texte
Plusieurs Viewers pour les différentes
classes de documents

103
Conception d’IHM en Java

Imprimer
Les Applets
Imprimer

La classe qui imprime dérive de

Graphics et doit être passée à la
méthode « printAll(Graphics g) » de
la racine des composants à imprimer
Pour obtenir le Graphics, il faut un
[Link]
 class PrintJob { PrintJob();
void end();
Graphics getGraphics();
…} 105
Imprimer (2)

Pour obtenir un PrintJob, utiliser un

dialogue d’ impression
 [Link](Frame f, String
jobtitle, JobAttributes jobAttributes,
 PageAttributes pageAttributes)
On peut tester dans la méthode
« paint » si on affiche à l ’écran ou si on
imprime:
 if (g instanceof PrintGraphics) …
106
Imprimer (3)
PrintJob pjob = getToolkit().getPrintJob(frame,
"Printing Test",
null, null);
if (pjob != null) {
Graphics pg = [Link]();
if (pg != null) {
[Link](pg);
[Link](); // flush page
}
[Link]();

107
AWT et les applets

Les applets sont téléchargées à

partir de pages WEB
 <applet
codebase="[Link]
1.1" code="[Link]" width=400 height=75>
<param name="text" value="Welcome to HotJava!">
<hr> If you were using a Java-enabled browser such
as HotJava, you would see dancing text instead of
this paragraph. <hr> </applet>

Le classe NervousText doit dériver

de Applet dans [Link]
108
Les Applets

Applet dérive de Panel

Définit les méthodes suivantes:
 void init() appelé une fois au chargement
 void start() appelé quand la page s’affiche
 void stop() appelé quand la page disparaît
 String getParameter(String) récupère un
argument passé en paramètre

109
Surprises avec les Applets

Des mécanismes de sécurité sont activés

Le focus n’est pas implicitement sur
l’applet, elle ne reçoit pas les touches du
clavier par défaut
Il faut que la taille de la fenêtre soit fixe
L’apparence varie d ’une machine à
l’autre (les fonts disponibles par
exemple).

110
Conception d’IHM en Java

Conclusion sur Swing

Conclusion et perspectives

Java facilite la construction

d’applications graphiques interactives
Les APIs sont bien conçues
Plusieurs niveaux de complexité
Problèmes
 performances parfois
 complexité parfois

112
Bibliographie
 Designing the User Interface; Ben Shneiderman, Addison-
Wesley 1997; ISBN 0201694972
 Developing User Interfaces, Dan R. Olsen, Morgan
Kaufmann, 1998; ISBN 1558604189
 The Java Class Libraries : [Link], [Link], [Link]
(Vol 2)
P. Chan, R. Lee Addison-Wesley, 1997; ISBN 0201310031
 The JFC Swing Tutorial: A Guide to Constructing GUIs
K. Walrath, M. Campione; Addison-Wesley, 1999; ISBN
0201433214
 Systèmes d'information et Interaction Homme-Machine, Ed.
C. Kolski, 2000; Hermes.
 The Java Tutorial 113
[Link]
Bibliographie

[Link]
 tutorials
 references
[Link]

114
Conception d’IHM en Java

Concevoir, c’est…
Organisation graphique d'une
interface

Connaître les utilisateurs

Concevoir avec eux l'interface
Se rattacher à des choses connues
 code de couleurs, organisation spatiale,
vocabulaire, etc.
Tester les interfaces

116
Comment connaître les
utilisateurs ?

Pas d'introspection: vous n'êtes pas

un utilisateur type!
 Modèle mental de l'utilisateur vs.
Modèle d'implémentation
Conception participative
Use cases
Analyse des tâches : que fait-il et
comment le fait-il ?
117
Faire participer les
utilisateurs

Dessin d'interfaces sur papier

Prototypage rapide et scénarios
d'utilisation
Cycle de développement en spirale

118
Hiérarchisation de
l'information

Organiser les écrans de manière

hiérarchique
Utiliser un vocabulaire simple
Bien délimiter les zones
 regrouper les objets similaires
 détacher les objets différents
Faire appel à des graphistes

119
Utilisation des couleurs

Concevoir avec des niveaux de gris

puis passer à la couleur
 10% de daltoniens ou autres trouble de
la perception
Utiliser peu de couleurs
Utiliser des teintes pastels et des
couleurs complémentaires

120
Utilisation des polices de
caractères

Prendre des polices réglées pour les

écrans et non traditionnelles à
l'impression
Pas d'italique ou de penché mais
plutôt du gras
Utiliser des couleurs contrastées
fond / lettre
Faire attention à la taille
121
Animations, images et sons

Attention à ne pas divertir l'attention

L'œil est très sensible aux animations:
 il est attiré par ce qui bouge
 il ne peut pas contrôler cette attirance
 peut provoquer de la fatigue et des maux de
tête
Image très colorées perturbantes
Sons à éviter, sauf pour les erreurs
graves
 redondance pour les erreurs 122