java swing ppt

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

2. Conception d’IHM en Java
Concepts Généraux

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

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

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

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

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

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

9. 9
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
gestion des raccourcis clavier

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

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

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

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

14. Conception d’IHM en Java
AWT

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

16. 16
Organisation d ’AWT
Packages java.awt et java.applet
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.

17. Conception d’IHM en Java
SWING

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

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

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

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

22. 22
Concepts de SWING
Basé sur des containers
générique
gère collection de composants
design Pattern composite

23. 23
Programmation SWING
Package javax.swing
Relativement proche de AWT pour faciliter
la migration, ajout « J » avant le nom des
classes:

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

25. 25
Exemple
import java.awt.*;
import javax.swing.*;
class hwSwing {
public static void main(String args[]) {
JFrame f = new JFrame("Hello World");
Jlabel texte = new JLabel("Hello World");
f.getContentPane().add(texte);
f.pack();
f.setVisible(true);
}
}

26. 26
Autre approche
import java.awt.*;
import javax.swing.*;
public class Test {
public static void main(String args[]) {
Simple f = new Simple();
f.pack();
f.setVisible(true);
}
}
public class Simple extends JFrame {
Jlabel texte = new JLabel("Hello World");
public Simple() {
getContentPane().add(texte); }
}

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

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

29. 29
Les autres composants

30. 30
Jlabel
Javax.swing.Jlabel
descriptif : texte statique + image
exemple : devant un champ de saisie
Jlabel jl = new Jlavel(“Label 1”);
ou jl.setText(“Label 1”); // -> .getText()
jl.setIcon(new ImageIcon(“java.gif”));
jl.setVerticalTextPosition(SwingConstants.BOTTOM)
jl.setHorizontalTextPosition(SwingConstants.CENTER);

31. 31
JTextField
Javax.swing.JTextField
saisie de texte (non typé)
JTextField jt = new JTextField(“Thomas”);
String nom = new String(“Thomas”);
jt.setText(nom);
jt.setColumns(nom.length());
jt.copy(); jt.cut(); jt.paste();

32. 32
JButton
Bouton simple à états
JButton jb= new Jbutton(“OK”,new ImageIcon(“boc.gif));
jb.setRolloverIcon(new ImageIcon(“cob.gif”));
jb.setPressedIcon(new ImageIcon(“ocb.gif”));
jb.setDisabledIcon(new ImageIcon(“obc.gif”));
jb.setMnemonic(‘o’); // ALT + o
jb.setBorderPainted(false);
jb.setFocusPainted(false);
jb.doClick();

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

34. 34
Exemple de Radio
ButtonGroup grp = new ButtonGroup();
JRadioButton r1 = new JRadioButton(“it1”);
JRadioButton r2 = new JRadioButton(“it2”);
r2.setSelected(true);
grp.add(r1);
grp.add(r2);

35. 35
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 »

36. 36
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;
}

37. 37
JComboBox
Liste déroulante (ouverte ou fermée)
vector ou tableau d’objets passés en
paramètres
JComboBox cb = new JComboBox( items);
cb.setMaximumRowCount(4);
cb.setEditable(true); // JTextField

38. 38
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 !!!

39. 39
JPanel
Jpanel
conteneur
JScrollPane
un seul composant !
barres de défilement
JScrollPane sp = new JScrollPane();
sp.add(monJLabel);
sp.setViewportView (monJLabel);
composants implémentant Scrollable
class MonLabel extends Jlabel implements Scrollable
Panel
ScrollPane

40. 40
Les composants de SWING
Dialog Frame Split pane
Tabbed Pane
Tool bar
Internal frame
Layered pane

41. 41
Composants de Swing
File chooser
Color chooser
Table Text Tree
List
Slider
Progress bar
Tool tip

42. 42
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() ;
setPreferredSize(Dimension r);

43. 43
Factory
Bordures
Border mbd= new Border(
BorderFactory.createEtchedBorder()
BorderFactory.createLoweredBevelBorder()
BorderFactory.createTitledBorder(“Titre !”)
etc… );
monJbutton.setBorder(mbd);
Curseur
Cursor nc = new Cursor(Cursor.CROSSHAIR_CURSOR);
monJbutton.setCursor(nc);

44. 44
Couleurs
new Color (r,g,b)
new Color (r,g,b,a)
0 -> 255
a=255 opaque
monJbutton.setBackground(Color.white); //constantes
monJbutton.setForeground(Color.black);
monJbutton.setOpaque(true);

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

46. 46
Pourquoi getContentPane ?
Les containers Swing ont un JRootPane
monContainer.getContentPane().add(...)
composants « lourds » : JDialog, JFrame, JWindow
Root pane

47. 47
La classe JComponent
Tool tip
Bords
Actions associées aux touches
Propriétés
Accès aux handicapés
Double buffer

48. Conception d’IHM en Java
Swing : la gestion du
placement des composants

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

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

51. 51
Les gestionnaires de
placement...
FlowLayout
Place les composants
de gauche à droite
CardLayout
Superpose les
composants
GridLayout
Découpe en une grille
régulière sur laquelle
les composants sont
placés
GridBagLayout
Découpe en une grille
et place les
composants sur une
ou plusieurs cases

52. 52
...ou Layout Manager
BorderLayout
Découpe en 5 régions:
south, north, east,
west, center
Aucun :
.setBounds(x,y,h,l);

53. Conception d’IHM en Java
La gestion d’évènements

54. 54
Parcours des événements
Plusieurs boucles envoient des
événements dans une file unique
System.getSystemEventQueue()
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é

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

56. 56
Les événements
Package java.awt.event.*
Héritent de la classe java.awt.AWTEvent
identificateur (numéro unique)
consumed (a-t-il été utilisé?)
source (qui l'a émis)
Envoyés dans une file unique
Toolkit.getSystemEventQueue()
Lus par un thread spécique

57. 57
Types d’événements
I
n
t
e
r
a
c
t
i
o
n
u
t
i
l
i
s
a
t
e
u
r E
v
é
n
e
m
e
n
t
sé
m
i
s
C
l
i
cs
u
ru
n
J
P
a
n
e
l M
o
u
s
e
E
v
e
n
t
F
r
a
p
p
e
d
’
u
n
e
t
o
u
c
h
e
s
u
ru
n
J
P
a
n
e
l K
e
y
E
v
e
n
t
I
c
o
n
i
f
i
c
a
t
i
o
n
d
’
u
n
f
e
n
e
t
r
e W
i
n
d
o
w
E
v
e
n
t
C
l
i
cs
u
ru
n
b
o
u
t
o
n A
c
t
i
o
n
E
v
e
n
t
A
j
o
u
td
’
u
n
e
l
e
t
t
r
e
d
a
n
su
n
J
T
e
x
t
F
i
e
l
d D
o
c
u
m
e
n
t
E
v
e
n
t
S
é
l
e
c
t
i
o
n
d
’
u
n
i
t
e
m
d
a
n
su
n
e
J
L
i
s
t L
i
s
t
S
e
l
e
c
t
i
o
n
E
v
e
n
t

58. 58
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
super.processFocusEvent(e);
Ne pas oublier d ’appeler super sinon, rien
ne marche plus.

59. 59
Association de
gestionnaires d ’actions
Pour chaque famille
d ’événements, une
interface « listener »
est définie
MouseListener,
MouseMoveListener,
KeyListener, etc.
Chaque classe
composant définit
« add<nom>Listener(
<nom>Listener )
Frame
Button
ActionListener
actionPerformed(
ActionEvent e)
addActionListener(
ActionListener)

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

61. 61
Exemple
public class MyClass implements MouseListener {
...
someObject.addMouseListener(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... }
}

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

63. 63
Exemple adapté
public class MyClass extends MouseAdapter {
...
someObject.addMouseListener(this);
...
public void mouseClicked(MouseEvent e) {
//Event handler implementation goes here...
}
}

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

65. 65
Syntaxe des inner classes
class a { static class B { … } …}
class a { class B { … } …}
class a { type method(args) { …
Thread t = new Thread() { void run() {
… } };
…} }

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

67. 67
Inner classes
public class MyClass extends Applet {
...
someObject.addMouseListener(new MyAdapter());
...
class MyAdapter extends MouseAdapter {
public void mouseClicked(MouseEvent e) { ...//Event handler
implementation goes here... }
}
}

68. 68
Anonymous Inner classes
public class MyClass extends Applet {
...
someObject.addMouseListener(
new MouseAdapter() { public void mouseClicked(MouseEvent e) {
//Event handler implementation goes here... }
}
);
...
}
}

69. Conception d’IHM en Java
Graphique & Swing

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

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

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

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

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

75. 75
Chargement d ’une image
java.awt.Toolkit.getImage(String file);
java.awt.Toolkit.getImage(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

76. 76
Affichage d ’une image
Graphics.drawImage(Image img, int x, int
y, ImageObserver o);
Plusieurs autres version qui retaillent
l ’image
java.awt.image.ImageObserver interface
boolean imageUpdate(Image i, int info, int x,
int y, int w, int h)
appelé lors d ’un chargement incrémental
d ’image

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

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

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

80. 80
Les objets géométriques
de Java2D
Package java.awt.geom.*
Définit les objets de gestion de la
géométrie et leurs interfaces

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

82. 82
Les formes
Ligne, rectangle, arcs, ellipse, polygone,
etc.
Courbes quadratiques et cubiques
Area

83. 83
Les courbes cubiques
Courbes de Bézier
Relativement facile à
contrôler

84. 84
Les "area"
Permet de calculer avec des Shapes:
intersection
ajout, soustraction, différence symétrique
Lent mais puissant

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

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

87. 87
Les remplissages
Couleur pleine
Composition avec mélange (translucide)
Texture
Gradient
Pochoir

88. 88
Imprimer avec Java2D
public void actionPerformed(ActionEvent e) {
if (e.getSource() instanceof JButton) {
PrinterJob printJob =
PrinterJob.getPrinterJob();
printJob.setPrintable(this);
if (printJob.printDialog()) {
try {
printJob.print();
} catch (Exception ex) {
ex.printStackTrace();
}
}
}
}

89. Conception d’IHM en Java
Créer un nouveau composant

90. 90
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 »

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

92. 92
Récupération d’un
Graphics
Pas de composant ZonedeDessin
rafraichissement :
public static void main(...) {
[…}
JPanel pa = new JPanel();
Graphics g = pa.getGraphics();
g.drawOval(10,10,50,50); // centre supérieur gche
}

93. 93
Dessiner à tous les coups
Public class MonPanel extends JPanel {
public void PaintComponent(Graphics g) {
super.paintComponent(g);
g.drawOval(10,10,50,50);
}
}

94. Conception d’IHM en Java
MVC en Swing

95. 95
Comment être multi ?
Plusieurs vues :
DessinListener listDessin = new DessinListener();
CoordListener listCoord = new CoordListener();
maZoneDessin.addMouseMotionListener(listDessin);
maZoneDessin.addMouseMotionListener(listCoord);
Coordonnées : 83 28

96. Conception d’IHM en Java
Les composants évolués
dans Swing

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

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

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

100. 100
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);

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

102. 102
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
rowData.length; }
public int getColumnCount() { return
columnNames.length; }
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);
}
}

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

104. Conception d’IHM en Java
Imprimer
Les Applets

105. 105
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
java.awt.PrintJob
class PrintJob { PrintJob();
void end();
Graphics getGraphics();
… }

106. 106
Imprimer (2)
Pour obtenir un PrintJob, utiliser un
dialogue d’ impression
java.awt.Toolkit.getPrintJob(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) …

107. 107
Imprimer (3)
PrintJob pjob = getToolkit().getPrintJob(frame,
"Printing Test",
null, null);
if (pjob != null) {
Graphics pg = pjob.getGraphics();
if (pg != null) {
root.printAll(pg);
pg.dispose(); // flush page
}
pjob.end();

108. 108
AWT et les applets
Les applets sont téléchargées à partir de
pages WEB
 <applet
codebase="http://java.sun.com/applets/NervousText/
1.1" code="NervousText.class" 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 java.Applet

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

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

111. Conception d’IHM en Java
Conclusion sur Swing

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

113. 113
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 : Java.Applet, Java.Awt, Java.Beans (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
http://java.sun.com/docs/books/tutorial/index.html

114. 114
Bibliographie
java.sun.com
tutorials
references
http://manning.spindoczine.com/sbe/

115. Conception d’IHM en Java
Concevoir, c’est…

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

117. 117
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 ?

118. 118
Faire participer les
utilisateurs
Dessin d'interfaces sur papier
Prototypage rapide et scénarios
d'utilisation
Cycle de développement en spirale

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

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

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

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