Conception d'interfaces utilisateur en Java

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

2. Plan du cours • Architecture d ’une application graphique interactive • La programmation AWT • La programmation avec Java Swing

3. Java et les interfaces graphiques interactives • Langage conçu d'emblée avec une interface graphique interactive • Ajout de mécanismes spécifiques pour les interfaces • inner classes • 2 interfaces et 2 modèles graphiques en standard • Beaucoup d'exemples, de documentations et d'expérience.

4. Application graphique interactive : architecture • Les boîtes à outils 2D sont maintenant très stéréotypées • 3 composants • système de fenêtrage • API graphique • gestion de l'arbre d'affichage et d'interaction • Organisation sous forme d'objets

5. Le système de fenêtrage • Accès partagé à l'écran • Subdivision de l'écran en fenêtres • Chaque fenêtre est positionné (x, y, z) et dimensionnée (largeur x hauteur) • Modèle graphique d'affichage • Modèle d'événements • Communication entre les applications • Gestion de ressources spécifiques

6. Les API graphiques • Dans une fenêtre, une application dessine en utilisant des fonctions qui prennent des paramètres • 2 catégories en 2D • orientée pixel • orientée "dimension réelle", ou "indépendante de la résolution" • Richesse variable suivant les plate formes

7. La gestion de l'arbre d'affichage • Afficher = appeler une succession de fonctions graphiques • Représentation sous forme d'un arbre d'affichage (ou graphe directe acyclique) • On affiche récursivement, en profondeur d'abord, tous les nœuds de l'arbre • On modifie l'arbre pour changer l'affichage puis on réaffiche

8. La gestion de l'interaction • Les dispositifs d'entrée génèrent des événements (petit bloc mémoire contenant un type, un temps, une fenêtre cible et des détails suivant le type) • La boîte à outils achemine l'événement vers un nœud cible • Le nœud gère l'événement, ce qui peut modifier l'état de l'arbre d'affichage • On passe à l'événement suivant

9. Acheminement des événements • Positionnel (souris) • on regarde quel est le nœud de l'arbre le plus près de la position • On l'envoie au plus prés, qui renvoie a son père s'il ne veut pas le gérer • Non positionnel (clavier) • si un nœud à le "focus", on lui envoie • traduction d'une touche en caractère(s) ou action • sinon, on cherche une cible • gestion des raccourcis clavier

10. Les composants graphiques interactifs • Le nœud est capable de s'afficher et de gérer les événement • On lui ajoute une interface de communication suivant sa sémantique • bouton, label, menu, ligne de texte, etc. • On appelle ce nœud communicant un composant ou widget ou gadget ou objet de contrôle.

11. Organisation sous forme d'objets • Les langages à objets permettent de représenter ces nœuds comme des objets ayant une interface • Tous les nœuds héritent d'une classe de base (Component dans Java) • Chaque composant particulier spécifie une interface particulière adaptée à sa sémantique

12. Principales différences entre les GUIs • Il existe un grand nombre de boîtes à outils graphiques interactives (Graphical User Interfaces ou GUI) • Langage / portabilité / performances / mécanismes de communications / extensibilité / rapidité de développement / robustesse • Pas de "meilleur" mais des spécialisations • Lire le chapitre consacré aux GUIs

13. Les boîtes à outils graphiques interactives de Java • Java propose deux boîtes à outils graphiques : • AWT (Abstract Window Toolkit), simple, petite et limitée • SWING, cohérente, grosse et extensible. • Les deux peuvent s'utiliser dans les applets • SWING facilite la transition à partir d'AWT.

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

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

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

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

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

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: • pack • Affichage

20. Component Button Canvas Checkbox Choice Container Panel ScrollPane Window Dialog FileDialog Frame Label List Scrollbar TextComponent TextArea TextField MenuComponent MenuBar MenuItem CheckBoxMenuItem Menu PopupMenu AWT: composants

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é

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

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

24. Types d’événements

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.

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 ActionListener Button addActionListener(ActionListener) actionPerformed(ActionEvent e)

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

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

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

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

31. Rappel sur les "inner classes" • Existent depuis Java 1.1 • 3 versions • classe définie dans l'espace de nommage d'une autre classe • classe définie dans le contexte d'une autre classe • classe anonyme définie au fil du code dans le contexte courant

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

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

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

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

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

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

38. 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 Les gestionnaires de placement...

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

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 »

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

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

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

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

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

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

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 g • On peut dessiner l’image sur le graphics courant.

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 images • Attention, dans une applet, getImage ne marche que sur le répertoire de l ’URL de l ’applet

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

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