Vous êtes sur la page 1sur 122

m  

 

m 

    
m 
  
M   

       

M  

  

     MM 


m  
 

m 



 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. J
ë 


 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

^
3

 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
è
3ë


 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
[
3  !
 

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

 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 å
ë


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


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

Ñ   
 !"

 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


#


 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 
3! $% 


 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.
J
m  
 

ë
ë

 Interface indépendante de la plate-forme


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


Ñ  ë

 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.
[
m  
 

&
'
&
'

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


   
&
'

 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

&
'ë

 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

m &
'

 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

modèle de sélection
m &
'

 Basé sur des containers


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


  &
'

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

J
m   
 

 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

^
2
   
  
 



 ! "
#
   $!  
%&'"
  ()    $*+ ,*'
 #   )  - # $*+ ,*'
( m  . $' $  '
( $'
(
/
# $ '
0
0


ë 
   
  
 

#

1
"
#
   $!  
%&'"
! () ! $'
( $'
(
/
# $ '
0
0
#

!   
   "
 #   )  - # $*+ ,*'
#! $'"
 m  . $' $  '0
0
[
 

 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

m  

 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)
3  


!

 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); J
(

 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();

J
) 

 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();

J
) 

 JToggleButton
 deux états (setIcon et setSelectedIcon)
 JCheckBox
 cases à cocher
 JRadioButton
 dans un groupe de bouttons Ơradioơ

JJ
2*

ButtonGroup grp = new ButtonGroup();


JRadioButton r1 = new JRadioButton(Ơit1ơ);
JRadioButton r2 = new JRadioButton(Ơit2ơ);
r2.setSelected(true);
grp.add(r1);
grp.add(r2);

J^
3 !  
  

 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 »


3 !  
  +,-
w 
    

     
    
     
    w 
       
   
       
     w w
   
  
   


J[
m ! ) 

 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




 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 !!!



 Jpanel
 conteneur

 JScrollPane
 un seul composant !
 barres de défilement
JScrollPane sp = new JScrollPane();
M  
sp.add(monJLabel);
sp.setViewportView (monJLabel);
 composants implémentant Scrollable

class MonLabel extends Jlabel implements Scrollable
3  &
'

à     


 

  

!

"

^
m  &.

 

M#   
  M# 
   


  $ 

^
m 
  

 (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); ^
( 

 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); ^J
m 

 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);

^^
—%


 Conteneurs de fenêtre : ne pas ajouter


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


 m  /

 Les containers Swing ont un JRootPane


monContainer.getContentPane().add(...)

composants « lourds » : JDialog, JFrame, JWindow

‰ 

^[
3 m  

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


m  
 

&. 
  
m

 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

 
 

 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 è
3 
000

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

è
000 3  

 BorderLayout
 Découpe en 5 régions:
south, north, east,
west, center
 Aucun :
.setBounds(x,y,h,l);

è
m  
 

3  


 

 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é è^
  

 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
èè
3

 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
è[
 

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


è 
à    
+ ! -

 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.
èå
ë  
   

 Pour chaque famille


d ƞévénements, une
interface « listener »
est définie
 MouseListener, 

MouseMoveListener,
KeyListener, etc. %  &M  

 Chaque classe &M  '


&M  ) M  ! 
'
composant définit &M ( )

« add<nom>Listener(
<nom>Listener ) èü
3

 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 [
2
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... }

}
[
3

 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 [
2
public class MyClass extends MouseAdapter {
...
someObject.addMouseListener(this);
...
public void mouseClicked(MouseEvent e) {
//Event handler implementation goes here...
}
}

[J
*1
1

 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

[^
&

 class a { static class B { Ʀ } Ʀ}


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


à  3

 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
[[


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


ë  

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


m  
 

2&.


 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  
m 

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

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


 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.
 J
m  

 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.
 ^
m 

 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

 è
ë 

 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
 [
3 

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

 Ascent hauteur / ligne de base


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

 å
m 
,à+ ,à-

 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.  ü
3 !" 
 ,à

 Package java.awt.geom.*
 Définit les objets de gestion de la
géométrie et leurs interfaces

å
3  


 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

å
3 

 Ligne, rectangle, arcs, ellipse, polygone,


etc.
 Courbes quadratiques et cubiques
 Area

å
3 !!

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

åJ
311

 Permet de calculer avec des Shapes:


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

å^
3  1 1

 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
åè
3

 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)

å[
3

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

å 

 ,à
w    
  !"

 #  " 
$  "
  $ w $ %
  $ #  $  "
w $ #   "

 w $ #w &   ""
 '
w $ #w  "
  !w "
#w  ()  "





åå
m  
 

m   


 ë

 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 »
ü
3  
&
'

 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

ü
*  


 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
}

ü
à%  

Public class MonPanel extends JPanel {


public void PaintComponent(Graphics g) {
super.paintComponent(g);
g.drawOval(10,10,50,50);
}
}

üJ
m  
 

3m&.
m /

 Plusieurs vues :
DessinListener listDessin = new DessinListener();
CoordListener listCoord = new CoordListener();
maZoneDessin.addMouseMotionListener(listDessin);
maZoneDessin.addMouseMotionListener(listCoord);

    *+,+
üè
m  
 

3   


&.
3 

 Utilisé pour les listes


w 
 
* "
+,! "
 &   


 Facilite l ƞaffichage d ƞun conteneur par


une liste
 CellRenderer pour changer l ƞapparence
des items
ü 
m  
 -.  %/  01/   0
$%2$   "

 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
üå
3 ! $
 !+ ! ! -

 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)

üü
3  
! 

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


3  ! 

 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
 
3 
! !
$)  +,-.-. 2&  1+,-.  3 "
$)  4  2&  14   3 "
2 )   "
w    3   "
   3 - .#   "

w 5 2  "  
2&  #
w     "  
  3 #
w +,4    21 "
  2&  - 2.- .

w   !   21 "
   
w  4   +,  1 21
 "
2&  - 2.- .%  

 ) 6w  21 "

  
3 


 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

 J
m  
 



3ë



 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();
Ʀ}  è

+,-

 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) Ʀ
 [

+4-
 $ w, %) ( "# $ 
1
7 )71
 1 "

 w, 8% "
 ww%w, # w "

 w8% "
#w  w"
w#w  "99
 w 

w, # "

  
ë

 Les applets sont téléchargées à partir de


pages WEB
 Å ww
  %7w:99,  # # 9 ww93  )9
;#;7 %73  )# 72%<==%>?@
Åw  %77  %7A  B $  87@
Å @
' 2   $  C  2  
B $  1' 2   

w  w#Å @Å9 ww@

 Le classe NervousText doit dériver de


Applet dans java.Applet
 å
3ë

 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

 ü
&ë

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


m  
 

m  &.
m  

 Java facilite la construction dƞapplications


graphiques interactives
 Les APIs sont bien conçues
 Plusieurs niveaux de complexité
 Problèmes
 performances parfois
 complexité parfois


)! 
 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
J
)! 

 java.sun.com
 tutorials
 references
 http://manning.spindoczine.com/sbe/

^
m  
 

m  5 6


Ñ 
 

 Connaître les utilisateurs


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

[
m  $
/

 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 ?
 
(


 Dessin d'interfaces sur papier


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

å
 
   

 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

ü
#  

 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


#  


 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

ë 5
 

 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