Conception d’IHM en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes [email protected] contrat Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France License
Apr 03, 2015
Conception d’IHM en Java
Cédric Dumas
Jean-Daniel FeketeEcole des Mines de Nantes
[email protected] Creative Commons Paternité-Pas d'Utilisation Commerciale-
Partage des Conditions Initiales à l'Identique 2.0 France License
Conception d’IHM en Java
Concepts Généraux
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
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'interactionOrganisation sous forme d'objets
5
Le système de fenêtrage
Accès partagé à l'écranSubdivision de l'écran en fenêtresChaque fenêtre est positionné (x, y, z)
et dimensionnée (largeur x hauteur)Modèle graphique d'affichageModèle d'événementsCommunication entre les applicationsGestion de ressources spécifiques
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
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
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
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érerNon positionnel (clavier)
si un nœud à le "focus", on lui envoietraduction d'une touche en caractère(s) ou
action
sinon, on cherche une ciblegestion des raccourcis clavier
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
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
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
Les boîtes à outils graphiques interactives de JavaJava 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.
Conception d’IHM en Java
AWT
15
Java AWT
Interface indépendante de la plate-forme
API simple (simpliste)Composants peu nombreuxApparence pauvreRelativement rapideSimilaire sur toutes les plate-formes
16
Organisation d ’AWT
Packages java.awt et java.appletClasses de composants (dérivées de
Component) Composants conteneurs Composants « feuille »
Classes de gestionnaire d’événementsMyriade de classes utilitaires
Image, Color, Cursor, Dimension, Font, etc.
Conception d’IHM en Java
SWING
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
Programmation avec Java SWING
Généralités sur Java SWINGSWING et AWTConcepts de SWINGUne application Java SWING pas à pas
TPsLes composants standards de SWINGCréer ses propres composants
20
SWING et AWT
SWING cohabite avec AWT et utilise le minimum de ses services
Tous les composants sont redéfinisAWT n ’est pas régulier
pas de canvas dans un menuSWING est totalement régulier
tout conteneur peut afficher tout objet graphique
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 formeSéparation du composant et de son
modèleSéparation du composant et de son
modèle de sélection
22
Concepts de SWING
Basé sur des containersgénériquegère collection de composantsdesign Pattern composite
23
Programmation SWING
Package javax.swingRelativement proche de AWT pour
faciliter la migration, ajout « J » avant le nom des classes:
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
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
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
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:
packAffichage
28
Mon premier Composant
JFrame fenêtre principale
JDialog fenêtre de dialogue (modale)
Jwindowshow()hide() ou dispose()toFront() ou toBack()setTitle(“titre !”)setSize(int, int) et setResizable(false)
29
Les autres composants
30
Jlabel
Javax.swing.Jlabeldescriptif : texte statique + imageexemple : 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
JTextField
Javax.swing.JTextFieldsaisie 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
JButton
Bouton simple à étatsJButton 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 + ojb.setBorderPainted(false);jb.setFocusPainted(false);jb.doClick();
33
JmachinButton
JToggleButton deux états (setIcon et setSelectedIcon)
JCheckBox cases à cocher
JRadioButton dans un groupe de bouttons “radio”
penser à regarder Abstract Button
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
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
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
JComboBox
Liste déroulante (ouverte ou fermée)vector ou tableau d’objets passés en
paramètresJComboBox cb = new JComboBox( items);cb.setMaximumRowCount(4);cb.setEditable(true); // JTextField
38
JMenu
Une instance de JMenuBar par JframesetJMenuBar(JMenuBar mb);
Plusieurs Jmenu par JMenuBaradd(JMenu jm);
Plusieurs JMenuItem/JCheckboxMenu par Jmenu
add(JMenuItem mi);addSeparator();
Structurez !!!
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 Scrollableclass MonLabel extends Jlabel implements
Scrollable
Panel
ScrollPane
40
Les composants de SWING
Dialog Frame Split paneTabbed Pane
Tool bar
Internal frameLayered pane
41
Composants de Swing
File chooser Color chooser
Table Text Tree
List
Slider
Progress bar
Tool tip
42
Capacités communes des composants
(dés)activationisEnabled() setEnabled(…)
(in)visiblesetVisible(…) isVisible() module le coût de l’instanciation d’un container !
tailles réelle et souhaitableDimension getSize() ou Dimension
getSize(Dimension r)setSize(…)Dimension getPreferredSize() ;setPreferredSize(Dimension r);
43
Factory
BorduresBorder mbd= new Border(
BorderFactory.createEtchedBorder()BorderFactory.createLoweredBevelBorder()BorderFactory.createTitledBorder(“Titre !”)etc… );
monJbutton.setBorder(mbd);
CurseurCursor nc = new
Cursor(Cursor.CROSSHAIR_CURSOR);monJbutton.setCursor(nc);
44
Couleurs
new Color (r,g,b)new Color (r,g,b,a)0 -> 255a=255 opaque
monJbutton.setBackground(Color.white); //constantes
monJbutton.setForeground(Color.black);monJbutton.setOpaque(true);
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
Pourquoi getContentPane ?
Les containers Swing ont un JRootPane
monContainer.getContentPane().add(...)
composants « lourds » : JDialog, JFrame, JWindow Root pane
47
La classe JComponent
Tool tipBordsActions associées aux touchesPropriétésAccès aux handicapésDouble buffer
Conception d’IHM en Java
Swing : la gestion du placement des composants
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
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
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
...ou Layout Manager
BorderLayout Découpe en 5
régions: south, north, east, west, center
Aucun : .setBounds(x,y,h,l);
Conception d’IHM en Java
La gestion d’évènements
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
Gestion des actions
Associer une action à un événement2 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
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
Types d’événements
Interaction utilisateur Evénements émis
Clic sur un JPanel MouseEvent
Frappe d’une touche sur un JPanel KeyEvent
Iconification d’un fenetre WindowEvent
Clic sur un bouton ActionEvent
Ajout d’une lettre dans un JTextField DocumentEvent
Sélection d’un item dans une JList ListSelectionEvent
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
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
Les listeners
Chaque composant peut renvoyer certains événements à l'application si elle le demande
Le renvoi se fait par un ListeneractionListener, AdjustmentListener,
FocusListener, InputMethodListener, ItemListener, KeyListener, MouseListener, MouseMotionListener, TextListener, WindowListener
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
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
Exemple adapté
public class MyClass extends MouseAdapter {
...
someObject.addMouseListener(this);
...
public void mouseClicked(MouseEvent e) {
//Event handler implementation goes here...
}
}
64
Rappel sur les "inner classes"
Existent depuis Java 1.13 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
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
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
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
Anonymous Inner classes
public class MyClass extends Applet {
...
someObject.addMouseListener(
new MouseAdapter() { public void mouseClicked(MouseEvent e) { //Event handler implementation goes here... }
}
);
...
}
}
Conception d’IHM en Java
Graphique & Swing
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
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, imageOn peut tracer le contour ou remplir les
rect, roundRect, oval, arc et polygonesOn ne peut pas changer l ’épaisseur
des traits ou faire des pointillés par exemple.
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
Les Images
Image: tableau de pixelspeut ê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 ’APIIci, le plus simple.
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 gOn peut dessiner l’image sur le graphics
courant.
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 imagesAttention, dans une applet, getImage
ne marche que sur le répertoire de l ’URL de l ’applet
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
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
Les métriques de polices
Ascent hauteur / ligne de baseLeading avance / début à
gauchecharWidth largeur d ’un caractèrecharsWidth largeur de plusieurs
caractères
79
Capacités d ’un Graphics2D (Java2D)
Dérive d’un GraphicsAjoute 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
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
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 composentUne transformation courante est
appliquée aux primitives graphiques
82
Les formes
Ligne, rectangle, arcs, ellipse, polygone, etc.
Courbes quadratiques et cubiquesArea
83
Les courbes cubiques
Courbes de BézierRelativement facile à
contrôler
84
Les "area"
Permet de calculer avec des Shapes: intersection ajout, soustraction, différence
symétriqueLent mais puissant
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 PathOn peut itérer le long du Path
suite de segments typés connus
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
Les remplissages
Couleur pleineComposition avec mélange
(translucide)TextureGradientPochoir
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(); } } }}
Conception d’IHM en Java
Créer un nouveau composant
90
Modifier l’Affichage
Deux cas de figure: composant primitif, l ’affichage est laissé
au « peer » composant redéfini, l ’affichage est géré
parupdate 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
Les composants spécifiques SWING
Dériver de JComponentpaint appelle paintComponent,
paintBorder et paintChildrenOn peut changer l’un des trois ou
paint directementSimilaire à AWTOn peut utiliser Java2D
92
Récupération d’un Graphics
Pas de composant ZonedeDessinrafraichissement :
public static void main(...) {[…}JPanel pa = new JPanel();Graphics g = pa.getGraphics();g.drawOval(10,10,50,50); // centre supérieur
gche}
93
Dessiner à tous les coups
Public class MonPanel extends JPanel {public void PaintComponent(Graphics g) {
super.paintComponent(g);g.drawOval(10,10,50,50);}
}
Conception d’IHM en Java
MVC en Swing
95
Comment être multi ?
Plusieurs vues :DessinListener listDessin = new
DessinListener();CoordListener listCoord = new
CoordListener();maZoneDessin.addMouseMotionListener(listD
essin);maZoneDessin.addMouseMotionListener(listC
oord);
Coordonnées : 83 28
Conception d’IHM en Java
Les composants évolués dans Swing
97
Le modèle de liste
Utilisé pour les listespublic 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
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 CellRendererOn peut lui changer son SelectionModel
un ou plusieurs séléctionnés plusieurs contigus ou non le contrôle peut être plus fin
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
Le modèle d'intervalle borné
BoundedRangeModelUtilisé par les sliders, scrollbar et les
progress barsMinimun <= value <= value+extent
<= MaximumJScrollBar j = new
JScrollBar(myBRModel);
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
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
La gestion dutexte
Gestion simple et configurableNiveau de configuration très poussé
Texte simple, Texte HTML, Texte XML?Interface « Document » pour gérer
l ’intérieur d ’un textePlusieurs Viewers pour les différentes
classes de documents
Conception d’IHM en Java
ImprimerLes Applets
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
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
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
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
Les Applets
Applet dérive de PanelDé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
Surprises avec les Applets
Des mécanismes de sécurité sont activésLe 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 fixeL’apparence varie d ’une machine à
l’autre (les fonts disponibles par exemple).
Conception d’IHM en Java
Conclusion sur Swing
112
Conclusion et perspectives
Java facilite la construction d’applications graphiques interactives
Les APIs sont bien conçuesPlusieurs niveaux de complexitéProblèmes
performances parfois complexité parfois
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
Bibliographie
java.sun.com tutorials references
http://manning.spindoczine.com/sbe/
Conception d’IHM en Java
Concevoir, c’est…
116
Organisation graphique d'une interface
Connaître les utilisateursConcevoir avec eux l'interfaceSe rattacher à des choses connues
code de couleurs, organisation spatiale, vocabulaire, etc.
Tester les interfaces
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émentationConception participativeUse casesAnalyse des tâches : que fait-il et
comment le fait-il ?
118
Faire participer les utilisateurs
Dessin d'interfaces sur papierPrototypage rapide et scénarios
d'utilisationCycle de développement en spirale
119
Hiérarchisation de l'information
Organiser les écrans de manière hiérarchique
Utiliser un vocabulaire simpleBien délimiter les zones
regrouper les objets similaires détacher les objets différents
Faire appel à des graphistes
120
Utilisation des couleurs
Concevoir avec des niveaux de gris puis passer à la couleur 10% de daltoniens ou autres trouble de
la perceptionUtiliser peu de couleursUtiliser des teintes pastels et des
couleurs complémentaires
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
Animations, images et sons
Attention à ne pas divertir l'attentionL'œ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êteImage très colorées perturbantesSons à éviter, sauf pour les erreurs
graves redondance pour les erreurs