115
Conception d'interfaces utilisateur 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

Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes [email protected] contrat Creative Commons Paternité-Pas

Embed Size (px)

Citation preview

Page 1: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

Conception d'interfaces utilisateur 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

Page 2: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

2

Plan du cours

Architecture d ’une application graphique interactive

La programmation AWTLa programmation avec Java Swing

Page 3: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

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.

Page 4: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

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

Page 5: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

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

Page 6: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

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

Page 7: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

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

Page 8: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

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

Page 9: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

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

Page 10: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

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.

Page 11: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

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

Page 12: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

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écialisationsLire le chapitre consacré aux GUIs

Page 13: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

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.

Page 14: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

14

Java AWT

Interface indépendante de la plate-forme

API simple (simpliste)Composants peu nombreuxApparence pauvreRelativement rapideSimilaire sur toutes les plate-formes

Page 15: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

15

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.

Page 16: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

16

Construction d ’une application AWT

Construire un arbre d ’objets dérivés de « Component »

Attacher des gestionnaires d ’événements

Ce sont les gestionnaires d ’événements qui feront les actions et modifieront les composants

Page 17: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

17

Exemple 1 AWT

import java.awt.*;

class hw { public static void main(String args[]) {

Frame f = new Frame("Hello World");f.add(new Label("Hello World"));f.pack();f.setVisible(true);

}}

Page 18: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

18

Exemple 2 AWT

import java.awt.*;import java.awt.event.*;

class hw2 { public static void main(String args[]) {

Frame f = new Frame("Hello World");Button b = new Button("Hello World");b.addActionListener(new ActionListener() {

public void actionPerformed(ActionEvent e) { System.exit(0);

} });

f.add(b);f.pack();f.setVisible(true);

}}

Page 19: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

19

AWT: explications

Création de l ’arbre de composants : Frame + Label ou Button

Déclaration des actions: addEventHandler + création d ’une

« inner class »Calcul du placement des composants:

packAffichage

Page 20: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

20

AWT: composants

Component Button Canvas Checkbox Choice Container

Panel ScrollPane Window

• Dialog– FileDialog

• Frame

Label List Scrollbar TextComponent

• TextArea• TextField

MenuComponent MenuBar MenuItem

• CheckBoxMenuItem

• Menu– PopupMenu

Page 21: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

21

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é

Page 22: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

22

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

Page 23: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

23

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

Page 24: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

24

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

Page 25: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

25

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.

Page 26: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

26

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)

Page 27: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

27

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

Page 28: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

28

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

}

Page 29: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

29

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

Page 30: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

30

Exemple adapté

public class MyClass extends MouseAdapter {

...

someObject.addMouseListener(this);

...

public void mouseClicked(MouseEvent e) {

//Event handler implementation goes here...

}

}

Page 31: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

31

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

Page 32: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

32

Syntaxe des inner classes

class a { static class B { … } …}class a { class B { … } …}class a { type method(args) { …

Thread t = new Thread() { void run() { … } }; …} }

Page 33: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

33

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

Page 34: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

34

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

}

}

Page 35: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

35

Anonymous Inner classes

public class MyClass extends Applet {

...

someObject.addMouseListener(

new MouseAdapter() { public void mouseClicked(MouseEvent e) { //Event handler implementation goes here... }

}

);

...

}

}

Page 36: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

36

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

Page 37: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

37

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

Page 38: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

38

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

Page 39: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

39

...ou Layout Manager

BorderLayout Découpe en 5

régions: south, north, east, west, center

Aucun : .setBounds(x,y,h,l);

Page 40: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

40

Affichage dans AWT

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 »

Page 41: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

41

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

Page 42: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

42

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.

Page 43: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

43

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}

Page 44: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

44

Dessiner à tous les coups

Public class MonPanel extends JPanel {public void PaintComponent(Graphics g) {

super.paintComponent(g);g.drawOval(10,10,50,50);}

}

Page 45: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

45

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

Page 46: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

46

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.

Page 47: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

47

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.

Page 48: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

48

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

Page 49: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

49

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

Page 50: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

50

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

Page 51: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

51

Les métriques de polices

Ascent hauteur / ligne de baseLeading avance / début à

gauchecharWidth largeur d ’un caractèrecharsWidth largeur de plusieurs

caractères

Page 52: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

52

Exemple de composant spécifique dans AWT

Un composant Canvas affiche une liste de dessins

On dérive le Canvas pour ajouter une liste d’affichage

On définit une interface simple pour les objets de la liste d ’affichage

On modifie paint pour afficher la liste

Page 53: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

53

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(); … }

Page 54: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

54

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

Page 55: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

55

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

Page 56: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

56

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

Page 57: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

57

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

Page 58: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

58

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

Page 59: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

59

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

Page 60: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

60

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 ?

Page 61: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

61

Faire participer les utilisateurs

Dessin d'interfaces sur papierPrototypage rapide et scénarios

d'utilisationCycle de développement en spirale

Page 62: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

62

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

Page 63: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

63

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

Page 64: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

64

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

Page 65: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

65

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

Page 66: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

66

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.

Page 67: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

67

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

Page 68: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

68

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

Page 69: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

69

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

Page 70: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

70

Concepts de SWING

Basé sur des containersgénériquegère collection de composantsdesign Pattern composite

Page 71: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

71

Programmation SWING

Package javax.swingRelativement proche de AWT pour

faciliter la migration, ajout « J » avant le nom des classes:

Page 72: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

72

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

}}

Page 73: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

73

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

Page 74: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

74

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)

Page 75: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

75

Les autres composants

Page 76: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

76

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

Page 77: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

77

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

Page 78: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

78

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

Page 79: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

79

JmachinButton

JToggleButton deux états (setIcon et setSelectedIcon)

JCheckBox cases à cocher

JRadioButton dans un groupe de bouttons “radio”

penser à regarder Abstract Button

Page 80: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

80

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

Page 81: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

81

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 »

Page 82: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

82

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

Page 83: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

83

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

Page 84: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

84

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

Page 85: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

85

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

Page 86: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

86

Les composants de SWING

Dialog Frame Split paneTabbed Pane

Tool bar

Internal frameLayered pane

Page 87: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

87

Composants de Swing

File chooser Color chooser

Table Text Tree

List

Slider

Progress bar

Tool tip

Page 88: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

88

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

Page 89: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

89

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

Page 90: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

90

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

Page 91: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

91

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

Page 92: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

92

Pourquoi getContentPane ?

Les containers Swing ont un JRootPane

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

composants « lourds » : JDialog, JFrame, JWindow Root pane

Page 93: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

93

La classe JComponent

Tool tipBordsActions associées aux touchesPropriétésAccès aux handicapésDouble buffer

Page 94: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

94

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

Page 95: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

95

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

Page 96: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

96

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

Page 97: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

97

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)

Page 98: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

98

Le modèle d'intervalle borné

BoundedRangeModelUtilisé par les sliders, scrollbar et les

progress barsMinimun <= value <= value+extent

<= MaximumJScrollBar j = new

JScrollBar(myBRModel);

Page 99: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

99

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

Page 100: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

100

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

Page 101: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

101

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

Page 102: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

102

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

Page 103: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

103

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.

Page 104: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

104

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

Page 105: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

105

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

Page 106: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

106

Les formes

Ligne, rectangle, arcs, ellipse, polygone, etc.

Courbes quadratiques et cubiquesArea

Page 107: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

107

Les courbes cubiques

Courbes de BézierRelativement facile à

contrôler

Page 108: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

108

Les "area"

Permet de calculer avec des Shapes: intersection ajout, soustraction, différence

symétriqueLent mais puissant

Page 109: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

109

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

Page 110: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

110

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)

Page 111: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

111

Les remplissages

Couleur pleineComposition avec mélange

(translucide)TextureGradientPochoir

Page 112: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

112

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

Page 113: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

113

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

Page 114: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

114

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

Page 115: Conception d'interfaces utilisateur en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas

115

Bibliographie

java.sun.com tutorials references

http://manning.spindoczine.com/sbe/