Graphical User Interface

Présentation au sujet: "Graphical User Interface"— Transcription de la présentation:

1 Graphical User Interface
Dessiner avec JAVA Contexte Graphique Rafraîchissement Cours de P. Genoud

2 Adaptateurs d’événements Dessin des segments de droite
Gestion des événements souris Déplacement de la souris sur la zone de dessin met à jour les coordonnées du curseur dans la barre d’état MOUSE_MOVED, MOUSE_DRAGGED type d ’événement MouseEvent source : zone de dessin interface d ’écoute : MouseListener récepteur : zone de dessin Appuyer sur un bouton de la souris (MOUSE_PRESSED) définit le début d ’une droite Relacher le bouton de la souris (MOUSE_RELEASED) définit la fin de la droite < interface > MouseListener void mouseClicked(MouseEvent) void mouseEntered(MouseEvent) void mouseExited(MouseEvent) void mousePressed(MouseEvent) void mouseReleased(MouseEvent) Comme pour la fermeture de la fenêtre seule deux des méthodes de l ’interface nous intéressent

3 Adaptateurs d’événements Dessin des segments de droite
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class ZoneGraphique extends JPanel implements MouseMotionListener { private BarreEtat be; public ZoneGraphique(BarreEtat be) { setBackground(Color.white); setCursor(new Cursor(Cursor.CROSSHAIR_CURSOR)); this.be = be; addMouseMotionListener(this); } public void mouseMoved(MouseEvent e) { be.afficheCoord(e.getX(),e.getY()); public void mouseDragged(MouseEvent e) { } // ZoneGraphique Pour ne pas avoir à définir des méthodes inutiles possibilité d ’utiliser un adaptateur d ’événements : MouseAdapter import java.awt.event.*; public class GestionnaireClic extends MouseAdapter { ZoneGraphique zone; public GestionnaireClic(ZoneGraphique z) { zone = z; } public void mousePressed(MouseEvent e) zone.initieDroite(e.getX(),e.getY()); public void mouseReleased(MouseEvent e) zone.termineDroite(e.getX(),e.getY()); addMouseListener(new GestionnaireClic(this)); public void initieDroite(int x, int y) { be.afficheMessage(« Relacher pour dessiner la droite »); // on complétera ensuite } public void termineDroite(int x, int y) { be.afficheMessage(« Cliquer pour initier une droite »);

4 Adaptateurs d’événements Dessin des segments de droite
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class ZoneGraphique extends Jpanel implements MouseMotionListener { private BarreEtat be; public ZoneGraphique(BarreEtat be) { setBackground(Color.white); setCursor(new Cursor(Cursor.CROSSHAIR_CURSOR)); this.be = be; addMouseMotionListener(this); } public void initieDroite(int x, int y) { be.afficheMessage(« Relacher pour dessiner la droite »); // on complétera ensuite public void termineDroite(int x, int y) { be.afficheMessage(« Cliquer pour initier une droite »); ... } // ZoneGraphique Avec une classe interne (inner classe) anonyme addMouseListener( ); new MouseAdapter() { public void mousePressed(MouseEvent e) { initieDroite(e.getX(),e.getY()); } public void mouseReleased(MouseEvent e) termineDroite(e.getX(),e.getY()); L ’instance de la classe anonyme a implicitement accès à l ’instance de la classe externe qui (c.a.d. l ’instance) a provoqué sa création : en conséquence elle a accès aux membres de la classe externe this.ZoneGraphique

5 Dessiner avec Java Dessin des segments de droite
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class ZoneGraphique extends Jpanel implements MouseMotionListener { private BarreEtat be; public ZoneGraphique(BarreEtat be) { setBackground(Color.white); setCursor(new Cursor(Cursor.CROSSHAIR_CURSOR)); this.be = be; addMouseMotionListener(this); } public void initieDroite(int x, int y) { be.afficheMessage(« Relacher pour dessiner la droite »); // on complétera ensuite public void termineDroite(int x, int y) { be.afficheMessage(« Cliquer pour initier une droite »); ... } // ZoneGraphique addMouseListener( ); new MouseAdapter() { public void mousePressed(MouseEvent e) { initieDroite(e.getX(),e.getY()); } public void mouseReleased(MouseEvent e) termineDroite(e.getX(),e.getY()); Comment dessiner avec Java ? // on complétera ensuite // on complétera ensuite

6 Dessiner avec Java la classe Graphics
Ici le support du dessin représenté par une instance de la classe JPpanel avec java.awt dans la plupart des cas il s’agit d ’une instance de la classe Canvas Il faut des outils pour dessiner : primitives géométriques (droites, cercles, rectangles …) gestion des attributs de tracé (couleur du trait, couleur de remplissage, polices de caractères …) Ces outils sont représentés en Java par la classe Graphics du package java.awt Object Graphics The Graphics class is the abstract base class for all graphics contexts that allow an application to draw onto components that are realized on various devices, as well as onto off-screen images. A Graphics object encapsulates state information needed for the basic rendering operations that Java supports. Classe abstraite : les instances de cette classe sont fournies à la demande par le système d ’exploitation qui grâce à la machine virtuelle instanciera une sous-classe de Graphics spécifique à la plate-forme utilisée Graphics2D Introduite dans la plateforme Java 2 avec l ’API Java2D fournis des possibilités de dessin beaucoup plus élaborées This Graphics2D class extends the Graphics class to provide more sophisticated control over geometry, coordinate transformations, color management, and text layout. This is the fundamental class for rendering 2-dimensional shapes, text and images on the Java(tm) platform

7 Dessiner avec Java la classe Graphics2D
Démonstration des possibilités de Graphics2D programme de démonstration dans $JAVA_HOME/demo/jfc/JAVA2D/Java2Demo.jar

8 Dessiner avec Java Dessin des segments de droite
Repère graphique X y type d ’événement MouseEvent Appuyer sur un bouton de la souris (MOUSE_PRESSED) définit le début d ’une droite Relacher le bouton de la souris (MOUSE_RELEASED) définit la fin de la droite x y ? ? x y 150 50 250 110 Coordonnées position de la souris Exprimées dans le repère de la source de l ’événement : le JPanel

9 Dessiner avec Java Dessin des segments de droite
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class ZoneGraphique extends Jpanel implements MouseMotionListener { private BarreEtat be; public ZoneGraphique(BarreEtat be) { setBackground(Color.white); setCursor(new Cursor(Cursor.CROSSHAIR_CURSOR)); this.be = be; addMouseMotionListener(this); addMouseListener( new MouseAdapter() { ... } ); } public void initieDroite(int x, int y) { be.afficheMessage(« Relacher pour dessiner la droite »); public void termineDroite(int x, int y) { be.afficheMessage(« Cliquer pour initier une droite »); ... } // ZoneGraphique int xInit, yInit; xInit = x; yInit = y; lorsque le bouton de la souris est pressé : mémoriser le début d ’un nouveau segment lorsque le bouton de la souris est relaché : Graphics g = this.getGraphics(); 1) récupérer le contexte graphique associé au JPanel g.drawLine(xInit,yInit,x,y); 2) Utiliser l ’objet Graphics pour effectuer le dessin

10 Dessiner en Java « rafraichissement » du dessin
Problème de réaffichage après que la fenêtre ait été masquée, redimensionnée… GO 1 Zone non rafraichie 2 Application seule ne peut pas décider du moment où elle doit être rafraîchie Le système ne prend pas en charge seul le rafraichissement averti uniquement l ’application qu’elle doit se redessiner (en lui indiquant quel est son rectangle invalide) à la charge de celle-ci de se redessiner 3

11 Dessiner en Java « rafraichissement » du dessin
Chaque composant graphique possède une méthode qui définit comment il doit se dessiner public void paint(Graphics g) pour les composants awt public void paintComponent(Graphics g) pour les composants swings Evidemment pour les composants standards (fenêtre, boutons, …) il est inutile de définir comment ils doivent s ’afficher une fenêtre affichera son cadre et son fond puis affichera tout les composants qu ’elle contient un conteneur affichera son fond puis affichera recursivement tous les composants qu ’il contient … Mais dès que l’application gère ses propres graphiques via un contexte graphique (objet Graphics) elle devra se soucier de leur rafraichissement

12 Dessiner en Java « rafraichissement » du dessin
Redessiner les segments de droite disparus il faut stocker les informations pour afficher à nouveau tous les segments déjà dessinés classes SegmentDroite et Dessin import java.util.*; import java.awt.*; public class Dessin { private List lesDroites = new Vector(); public void ajouterDroite(SegmentDroite d) { lesDroites.add(d); } public void dessineToi(Graphics g) { for (Iterator it=lesDroites.iterator(); it.hasNext();) { SegmentDroite d = (SegmentDroite) it.next(); d.dessineToi(g); public void efface() { lesDroites.clear(); public void defaire() { if (! lesDroites.isEmpty()){ lesDroites.remove(lesDroites.lastElement()); } // Dessin import java.awt.*; public class SegmentDroite { private int xInit, yInit, xFin, yFin; private Color couleur; public SegmentDroite(int xi, int yi, int xf, int yf, Color c) { xInit = xi; yInit = yi; xFin = xf; yFin = yf; couleur = c; } public void dessineToi(Graphics g) { g.setColor(couleur); g.drawLine(xInit, yInit,xFin,yFin);

13 Dessiner en Java « rafraichissement » du dessin
Redessiner les segments de droite disparus import java.awt.*; import javax.swing.*; import java.awt.event.*; public class ZoneGraphique extends Jpanel implements MouseMotionListener { private BarreEtat be; private int xInit, yInit; public ZoneGraphique(BarreEtat be) { ... } public void initieDroite(int x, int y) { be.afficheMessage(« Relacher pour dessiner la droite »); xInit = x; yInit =y; public void termineDroite(int x, int y) { be.afficheMessage(« Cliquer pour initier une droite »); Graphics g = this.getGraphics(); g.drawLine(xInit,yInit,x,y); } // ZoneGraphique private Dessin dessin = new Dessin(); Rajout d ’un objet dessin pour mémoriser les segments dessinés Mémorisation des nouveaux objets tracés SegmentDroite droite = new SegmentDroite(x,y,xInit,yInit,couleurCourante); dessin.ajouterDroite(droite); droite.dessineToi(g); public void paintComponent(Graphics g) { super.paintComponent(g); dessin.dessineToi(g); } Redéfinition de la méthode paintComponent pour gérer la réaffichage

14 Dessiner en Java rafraichissement du dessin
import java.awt.event.*; import java.awt.*; public class BarreOutils extends JPanel { public BarreOutils(final ZoneDessin zd) { ... JButton bDefaire = new JButton("Défaire"); this.add(bDefaire); JButton bEffacer = new JButton("Tout effacer"); this.add(bEffacer); bDefaire.addActionListener( ); bEffacer.addActionListener( } new ActionListener() { public void actionPerformed(ActionEvent e) { zd.efface(); zd.defaire(); récepteurs : utilisation de classes anonymes dans le constructeur de la Barre d ’Outils Efface toute la zone de dessin Annule le dernier tracé type d ’événement ActionEvent source les JButton interface d ’écoute ActionListener

15 1) Modification de l ’objet mémorisant le dessin
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class ZoneGraphique extends Jpanel implements MouseMotionListener { private BarreEtat be; private int xInit, yInit; Dessin dessin new Dessin(); public ZoneGraphique(BarreEtat be) { ... } public void initieDroite(int x, int y) { public void termineDroite(int x, int y) { public void paintCompoent(Graphics g) { } // ZoneGraphique Prise en compte des opérations défaire et effacer sur la zone de dessin public void defaire() { dessin.defaire(); } 1) Modification de l ’objet mémorisant le dessin 2) réaffichage de la zône de dessin il faut prévenir l ’application que le dessin a changé et qu ’il faut rafraîchir le composant repaint(); méthode repaint() se charge de rappeler la méthode d ’affichage du composant (paint ou paintComponent) avec le bon contexte graphique public void efface() { dessin.efface(); repaint(); }