5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 1/122
Conception d’IHM en Java
Cédric Dumas
Jean-Daniel Fekete
Ecole des Mines de Nantes
contrat Creative Commons Paternité-Pas d'Utilisation Commerciale-
Partage des Conditions Initiales à l'Identique 2.0 France License
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 2/122
Conception d’IHM en Java
Concepts Généraux
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 3/1223
Java et les interfaces
graphiques interactives
Langage conçu d'emblée avec uneinterface graphique interactive
Ajout de mécanismes spécifiques pour lesinterfaces inner classes
2 interfaces et 2 modèles graphiques enstandard
Beaucoup d'exemples, de documentations
et d'expérience.
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 4/122
4
Application graphique
interactive : architecture
Les boîtes à outils 2D sont maintenanttrè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/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 5/122
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) etdimensionnée (largeur x hauteur)
Modèle graphique d'affichage
Modèle d'événements
Communication entre les applications
Gestion de ressources spécifiques
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 6/122
6
Les API graphiques
Dans une fenêtre, une application dessineen utilisant des fonctions qui prennent des
paramètres 2 catégories en 2D
orientée pixel
orientée "dimension réelle", ou "indépendantede la résolution"
Richesse variable suivant les plate formes
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 7/122
7
La gestion de l'arbre
d'affichage
Afficher = appeler une succession defonctions graphiques
Représentation sous forme d'un arbred'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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 8/122
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êtrecible 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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 9/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 10/122
10
Les composants
graphiques interactifs
Le nœud est capable de s'afficher et degérer les événement
On lui ajoute une interface decommunication suivant sa sémantique bouton, label, menu, ligne de texte, etc.
On appelle ce nœud communicant uncomposant ou widget ou gadget ou objetde contrôle.
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 11/122
11
Organisation sous forme
d'objets
Les langages à objets permettent derepré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 uneinterface particulière adaptée à sasémantique
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 12/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 13/122
13
Les boîtes à outils
graphiques interactives de
Java Java propose deux boîtes à outils
graphiques :
AWT (Abstract Window Toolkit), simple, petiteet limitée
SWING, cohérente, grosse et extensible.
Les deux peuvent s'utiliser dans lesapplets
SWING facilite la transition à partir
d'AWT.
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 14/122
Conception d’IHM en Java
AWT
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 15/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 16/122
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.
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 17/122
Conception d’IHM en Java
SWING
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 18/122
18
Java SWING
SWING implémente tous les composantsen Java
SWING offre plusieurs mécanismesoriginaux, pratiques et puissants
SWING peut se programmer à plusieurs
niveaux SWING est très gros et souvent lent.
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 19/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 20/122
20
SWING et AWT
SWING cohabite avec AWT et utilise leminimum 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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 21/122
21
Concepts de SWING
Séparation du composant et de sonapparence
plusieurs apparences existent: Windows,Unix, Mac et « Metal »
L ’apparence par défaut dépend de la plateforme
Séparation du composant et de sonmodèle
Séparation du composant et de son
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 22/122
22
Concepts de SWING
Basé sur des containers
générique
gère collection de composants design Pattern composite
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 23/122
23
Programmation SWING
Package javax.swing
Relativement proche de AWT pour faciliter
la migration, ajout « J » avant le nom desclasses:
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 24/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 25/122
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);
}}
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 26/122
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); }}
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 27/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 28/122
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)
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 29/122
29
Les autres composants
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 30/122
30
Jlabel
Javax.swing.Jlabel
descriptif : texte statique + image
exemple : devant un champ de saisieJlabel 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);
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 31/122
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();
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 32/122
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 + o
jb.setBorderPainted(false); jb.setFocusPainted(false);
jb.doClick();
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 33/122
33
JmachinButton
JToggleButton deux états (setIcon et setSelectedIcon)
JCheckBox cases à cocher
JRadioButton
dans un groupe de bouttons “radio”
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 34/122
34
Exemple de Radio
ButtonGroup grp = newButtonGroup();
JRadioButton r1 = newJRadioButton(“it1”);
JRadioButton r2 = new
JRadioButton(“it2”);r2.setSelected(true);
grp.add(r1);
grp.add(r2);
L dèl d b t
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 35/122
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 »
L dèl d b t
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 36/122
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;
}
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 37/122
37
JComboBox
Liste déroulante (ouverte ou fermée)
vector ou tableau d’objets passés en
paramètresJComboBox cb = newJComboBox( items);
cb.setMaximumRowCount(4);cb.setEditable(true); // JTextField
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 38/122
38
JMenu
Une instance de JMenuBar par Jframe
setJMenuBar(JMenuBar mb);
Plusieurs Jmenu par JMenuBaradd(JMenu jm);
Plusieurs JMenuItem/JCheckboxMenu par
Jmenuadd(JMenuItem mi);
addSeparator();
Structurez !!!
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 39/122
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
Panel
ScrollPane
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 40/122
40
Les composants de SWING
Dialog Frame Split paneTabbed Pane
Tool bar
Internal frame
Layered pane
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 41/122
41
Composants de Swing
File chooser Color chooser
Table Text Tree
List
Slider
Progress bar
Tool tip
C ité d
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 42/122
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);
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 43/122
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);
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 44/122
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);
Quelques difficultés à
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 45/122
45
Quelques difficultés à
retenir
Conteneurs de fenêtre : ne pas ajouterdirectement avec "add" mais ajouter avec
"getContentPane()" Pas de multi-threading, sauf autorisation
explicite dans la documentation
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 46/122
46
Pourquoi getContentPane ?
Les containers Swing ont un JRootPane
monContainer.getContentPane().add(..
.)
composants « lourds » : JDialog,
JFrame, JWindow
Root pane
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 47/122
47
La classe JComponent
Tool tip
Bords
Actions associées aux touches Propriétés
Accès aux handicapés
Double buffer
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 48/122
Conception d’IHM en Java
Swing : la gestion du
placement des composants
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 49/122
49
Calcul du placement
Le placement est calculé dans lesconteneurs
Soit les composants sont placésexplicitement (x, y, largeur, hauteur)
Soit ils sont gérés par un
« LayoutManager » qui calcul cesparamètres dynamiquement besoins du composant (taille min, max,
normale) + positionnement relatif
Mise en place d ’un
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 50/122
50
Mise en place d ’un
gestionnaire de placement
Les conteneurs définissent la méthodesetLayout(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 duplacement
La méthode invalidate() rend le placement
courant invalide
Les gestionnaires de
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 51/122
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 sontplacés
GridBagLayout Découpe en une grille
et place lescomposants sur une ouplusieurs cases
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 52/122
52
...ou Layout Manager
BorderLayout Découpe en 5 régions:
south, north, east,
west, center
Aucun :.setBounds(x,y,h,l);
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 53/122
Conception d’IHM en Java
La gestion d’évènements
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 54/122
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 del ’événement
L ’événement est acheminé au composant
auquel il est destiné
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 55/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 56/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 57/122
57
Types d’événements
I n te ra c t io n u t i l i s a t eu r Ev én em en ts ém is
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
Dérivation d ’un composant
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 58/122
58
Dérivation d un composant
(obsolète)
Redéfinition de la méthodeprocessEvent(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, rienne marche plus.
Association de
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 59/122
59
Association de
gestionnaires d ’actions
Pour chaque familled ’événements, uneinterface « listener »
est définie MouseListener,
MouseMoveListener,KeyListener, etc.
Chaque classecomposant définit« add<nom>Listener(
<nom>Listener )
Frame
ButtonActionListener
actionPerformed(
ActionEvent e)
addActionListener(
ActionListener)
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 60/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 61/122
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... }
}
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 62/122
62
Les adaptateurs
Les Adapters sont des classes concrètesqui facilitent l'utilisation des Inner Classes
Pour chaque Listener ayant plusieursmé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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 63/122
63
Exemple adapté
public class MyClass extends MouseAdapter {
...
someObject.addMouseListener(this);
...public void mouseClicked(MouseEvent e) {
//Event handler implementation goes here...
}
}
Rappel sur les "inner
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 64/122
64
Rappel sur les inner
classes"
Existent depuis Java 1.1
3 versions
classe définie dans l'espace de nommaged'une autre classe
classe définie dans le contexte d'une autreclasse
classe anonyme définie au fil du code dans lecontexte courant
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 65/122
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() {
… } };
…} }
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 66/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 67/122
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... }
}
}
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 68/122
68
Anonymous Inner classes
public class MyClass extends Applet {
...
someObject.addMouseListener(
new MouseAdapter() { public void mouseClicked(MouseEvent e) { //Event handler implementation goes here... }
}
);
...
}
}
C ti d’IHM J
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 69/122
Conception d’IHM en Java
Graphique & Swing
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 70/122
70
Graphics
Java définit deux interfaces pour legraphique passif: Graphics et Graphics2D
Graphics implémente un modèlegraphique très simple et orienté pixel
Graphics2D implémente un modèle
graphique sophistiqué indépendant de larésolution
On peut aussi créer une image et créer un
graphique pour dessiner dessus
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 71/122
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 lesrect, roundRect, oval, arc et polygones
On ne peut pas changer l ’épaisseur des
traits ou faire des pointillés par exemple.
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 72/122
72
Les couleurs
Modèle simple: 3 composants rouge, vertet bleu
Modèle complexe : ColorSpace, Color etColorModel ColorSpace est un espace de couleur (RGB,
CIEXYZ, etc)
Color représente une couleur dans un espacede couleur
ColorModel spécifie comment une image code
la couleur
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 73/122
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.
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 74/122
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.
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 75/122
75
Chargement d ’une image
java.awt.Toolkit.getImage(String file);
java.awt.Toolkit.getImage(URL url);
createImage fait la même chose mais nepartage pas les images
Attention, dans une applet, getImage ne
marche que sur le répertoire de l ’URL del ’applet
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 76/122
76
Affichage d ’une image
Graphics.drawImage(Image img, int x, inty, ImageObserver o);
Plusieurs autres version qui retaillentl ’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émentald ’image
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 77/122
77
Les polices de caractères
Java utilise des caractères Unicode (16bits)
Les polices traduisent des suites decaractè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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 78/122
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
Capacités d ’un
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 79/122
79
p
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.
Les objets géométriques
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 80/122
80
j g q
de Java2D
Package java.awt.geom.*
Définit les objets de gestion de la
géométrie et leurs interfaces
Les transformations
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 81/122
81
affines
Spécifie à la fois l ’échelle en X et Y, larotation, la translation et des
déformations affines Les transformations se composent
Une transformation courante est
appliquée aux primitives graphiques
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 82/122
82
Les formes
Ligne, rectangle, arcs, ellipse, polygone,etc.
Courbes quadratiques et cubiques Area
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 83/122
83
Les courbes cubiques
Courbes de Bézier
Relativement facile à
contrôler
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 84/122
84
Les "area"
Permet de calculer avec des Shapes: intersection
ajout, soustraction, différence symétrique Lent mais puissant
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 85/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 86/122
86
Les traits
Nombreux attributs: épaisseur, style de fin (end cap), style de join
(join style), pointillé
BasicStroke : transformer un trait en soncontour (pour lui appliquer unremplissage)
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 87/122
87
Les remplissages
Couleur pleine
Composition avec mélange (translucide)
Texture Gradient
Pochoir
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 88/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 89/122
Conception d IHM en Java
Créer un nouveau composant
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 90/122
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é êtredérivé pour modifier son affichage
L ’affichage se fait sur une surfacegraphique, le « Graphics »
Les composants
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 91/122
91
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
Récupération d’un
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 92/122
92
Graphics
Pas de composant ZonedeDessin
rafraichissement :
public static void main(...) {[…}
JPanel pa = new JPanel();
Graphics g = pa.getGraphics();g.drawOval(10,10,50,50); // centresupérieur gche
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 93/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 94/122
Conception d IHM en Java
MVC en Swing
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 95/122
95
Comment être multi ?
Plusieurs vues :
DessinListener listDessin = new
DessinListener();CoordListener listCoord = newCoordListener();
maZoneDessin.addMouseMotionListener(listDessin);
maZoneDessin.addMouseMotionListene
r(listCoord);Coordonnées : 83 28
Conception d’IHM en Java
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 96/122
Conception d IHM en Java
Les composants évolués
dans Swing
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 97/122
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
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 98/122
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
Le modèle de boîte
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 99/122
99
combiné (combo box)
Comme List plus un item sélectionné
Le modèle de sélection est « un seul »
Peut être modifiable ou non (ajoutimplicite d ’un item saisi au clavier dans laliste)
Le modèle d'intervalle
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 100/122
100
borné
BoundedRangeModel
Utilisé par les sliders, scrollbar et les
progress bars Minimun <= value <= value+extent <=
Maximum
JScrollBar j = newJScrollBar(myBRModel);
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 101/122
101
Le modèle d'arbre JTree
TreeModel Object getRoot(), Object getChild(Object
parent, int index), int getChildCount(Objectparent), boolean isLeaf(Object node),valueForPathChanged(TreePath p, ObjectnewValue), int getIndexOfChild(Object
parent, Object child), TreeModelListener Pour déplacer, ajouter ou retirer une
colonne dans une table
Le modèle de
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 102/122
102
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);}
}
La gestion du
t t
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 103/122
103
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érentesclasses de documents
Conception d’IHM en Java
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 104/122
p
Imprimer
Les Applets
I i
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 105/122
105
Imprimer
La classe qui imprime dérive de Graphicset doit être passée à la méthode« printAll(Graphics g) » de la racine descomposants à imprimer
Pour obtenir le Graphics, il faut un java.awt.PrintJob
class PrintJob { PrintJob();void end();Graphics getGraphics();
}
I i (2)
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 106/122
106
Imprimer (2)
Pour obtenir un PrintJob, utiliser undialogue 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) …
I i (3)
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 107/122
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();
AWT t l l t
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 108/122
108
AWT et les applets
Les applets sont téléchargées à partir depages 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
L A l t
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 109/122
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 unargument passé en paramètre
S i l A l t
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 110/122
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 duclavier 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).
Conception d’IHM en Java
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 111/122
p
Conclusion sur Swing
C l i t ti
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 112/122
112
Conclusion et perspectives
Java facilite la construction d’applicationsgraphiques interactives
Les APIs sont bien conçues Plusieurs niveaux de complexité
Problèmes
performances parfois complexité parfois
Bibli hi
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 113/122
113
Bibliographie
Designing the User Interface; Ben Shneiderman, Addison-Wesley1997; 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 Tutorialhttp://java.sun.com/docs/books/tutorial/index.html
Bibliographie
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 114/122
114
Bibliographie
java.sun.com tutorials
references http://manning.spindoczine.com/sbe/
Conception d’IHM en Java
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 115/122
Concevoir, c’est…
Organisation graphique
d'une interface
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 116/122
116
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
Comment connaître les
utilisateurs ?
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 117/122
117
utilisateurs ?
Pas d'introspection: vous n'êtes pas unutilisateur type! Modèle mental de l'utilisateur vs. Modèle
d'implémentation
Conception participative
Use cases
Analyse des tâches : que fait-il etcomment le fait-il ?
Faire participer les
utilisateurs
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 118/122
118
utilisateurs
Dessin d'interfaces sur papier
Prototypage rapide et scénarios
d'utilisation Cycle de développement en spirale
Hiérarchisation de
l'information
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 119/122
119
l information
Organiser les écrans de manièrehiérarchique
Utiliser un vocabulaire simple Bien délimiter les zones
regrouper les objets similaires
détacher les objets différents Faire appel à des graphistes
Utilisation des couleurs
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 120/122
120
Utilisation des couleurs
Concevoir avec des niveaux de gris puispasser à la couleur 10% de daltoniens ou autres trouble de la
perception
Utiliser peu de couleurs
Utiliser des teintes pastels et des couleurscomplémentaires
Utilisation des polices de
caractères
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 121/122
121
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 dugras
Utiliser des couleurs contrastées fond /lettre
Faire attention à la taille
Animations, images et
sons
5/16/2018 4 2 Java Swing - slidepdf.com
http://slidepdf.com/reader/full/4-2-java-swing-55ab57d0dd123 122/122
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 detête
Image très colorées perturbantes
S à é it f l