Cours 91 9 Interfaces graphiques avec awt. Cours 92 Plan Introduction : deux bibliothèques graphiques 1.Comment se dessine une fenêtre ?  Un exemple.

Présentation au sujet: "Cours 91 9 Interfaces graphiques avec awt. Cours 92 Plan Introduction : deux bibliothèques graphiques 1.Comment se dessine une fenêtre ?  Un exemple."— Transcription de la présentation:

1 Cours 91 9 Interfaces graphiques avec awt

2 Cours 92 Plan Introduction : deux bibliothèques graphiques 1.Comment se dessine une fenêtre ?  Un exemple  Les différentes couches  Terminologie 2.La bibliothèque awt  Classes utilitaires  Classe Graphics  Classes définissant des composants 3.Comment ça marche ?

3 Cours 93 Plan (suite) 4.Principe de conception d’une interface graphique  Créer une interface graphique ou dessiner ?  Faire un dessin 5.Etude de la classe Frame  Propriétés par défaut d'un Frame  Quelques méthodes que l’on peut employer 6.Un exemple : dessiner dans une fenêtre  L’application minimale  Amélioration  La bonne méthode

4 Cours 94 Deux bibliothèques graphiques awt : (Abstract Window Toolkit) bibliothèque de base où sont rassemblés des composants assez simples. swing : depuis la version Java 1.2. Bibliothèque beaucoup plus élaborée où seule la fenêtre de base fait appel à des routines dépendantes du système. Tout le reste est dessiné par Java. Les classes swing ont un nom commençant par J. JButton, JLabel…

5 Cours 95 1. Comment se dessine une fenêtre ? Une fenêtre est dessinée par couches successives  Création d’un cadre conteneur Frame.  Ajout d’un panneau conteneur Panel  Définition de la disposition des composants ajoutés (Layout Manager)  Ajout des composants suivants. Chaque couche est modélisée par une classe. Chaque composant possède une méthode paint() prévue pour le dessiner. L’ensemble des composants d’une fenêtre forme ainsi une liste.

6 Cours 96 Un exemple

7 Cours 97 Les différentes couches

8 Cours 98 Terminologie Certains composants sont des conteneurs de composants (Frame, Panel), d'autres ont une utilisation spécifique (libellés Label, champ de texte TextField…).  Cadre conteneur : Frame Barre de titre, Menu système, case de fermeture, de mise en icône, case zoom.  Composants conteneurs de composants (Panel)  Conteneur de dessins (Canvas)  Contrôles : bouton poussoir (Button). Boutons radio (RadioButton), cases à cocher (CheckBox), Libellés (Label), champs d'édition de textes (TextField), listes déroulantes…

9 Cours 99 Disposition des composants les uns par rapport aux autres : Layout managers. Ces composants ont des propriétés par défaut. La technique de conception d'interface va donc consister à utiliser l'héritage pour réutiliser, étendre, ou redéfinir, le comportement (l'affichage) par défaut. Par exemple, on peut réutiliser le copier/coller associé au composant TextField. On peut modifier le dessin d'une fenêtre en redéfinissant la méthode qui le dessine…

10 Cours 910 2. La bibliothèque awt Classes utilitaires Classe Graphics Classes définissant des composants

11 Cours 911 Classes utilitaires PointDimensionRectangleColorFontFontMetrics int x int y int width int height int x int y int width int height Consta ntes static Nom de police, taille, style Caractéris tiques des fontes

12 Cours 912 Classe Graphics Un objet de cette classe contient toutes les informations pour dessiner (ou écrire) sur un composant (la couleur du dessin, la fonte utilisée, l’origine des coordonnées…). La classe Graphics possède des méthodes draw… pour dessiner une Line, un Oval, une String, une Image… Pour dessiner, il faudra donc :  se procurer un objet g de cette classe adapté au composant sur lequel on veut dessiner (c’est Java qui nous le donne).  faire appel aux méthodes draw : g.drawLine(…), g.drawRect(…), etc.

13 Cours 913 Classes définissant des composants de awt ComponentClasse abstraite. Caractéristiques communes : Position, taille, couleur, fonte, visible, paint… LabelLibellés ButtonBoutons CanvasZone de dessin CheckboxCases à cocher ChoiceListe de choix ListListe déroulantes ScrollbarBarres de scrolling TextComponenent TextFieldZone de saisie d’une seule ligne TextAreaEditeur de texte ContainerClasse abstraite, ajout, retrait de composants, Possède un gestionnaire de disposition PanelPanneau conteneur, disposition: FlowLayout Window DialogTitre, resizable, modale, icône, BorderLayout FileDialog FrameTitre, menu, resizable, icône, BorderLayout

14 Cours 914 3. Comment ça marche ?

15 Cours 915 Affichage et polymorphisme L’affichage repose sur le fait que :  Chaque composant est un objet responsable de son affichage.  Sa méthode paint le redessine quand cela est nécessaire. Les composants internes à une fenêtre forment alors une liste d'objets d'une même lignée. Pour les afficher, il suffit d'appliquer à la liste des composants une action analogue à celle vue au cours 8. Le polymorphisme fait le reste.

16 Cours 916 Exemple de polymorphisme avec les classes Point et PointColoré qui possèdent chacune une méthode afficher() en redéfinition. Point a = new Point("A", 10, 20); Point b = new Point("B", 100, 200); PointColoré g = new PointColoré("G", 25, 30, Color.yellow); PointColoré pc = new PointColoré("PC", 40, 50); Point p = pc; // Ref ancêtre = ref descendant Point f[] = {a, b, g, p, new PointColoré("U", 5, 5)};// Noter l’objet anonyme for(int i=0; i < f.length; i++) f[i].afficher(); // Choix de la bonne méthode à l'exécution

17 Cours 917 Nous avons vu pour des objets issus d’une même lignée : Point f [ ] = {a, b, g, p, new PointColoré("U", 5, 5)}; for (int i=0; i < f.length; i++) f[i].afficher(); Choix de la bonne méthode à l'exécution Avec awt, Java effectue un traitement similaire : Component [ ] liste={maFen, monPanneau, libel1, libel2, champ1, champ2, bouton} ; for (int i = 0 ; i < liste.length, i++) liste[i].paint(g); Choix de la bonne méthode à l'exécution

18 Cours 918 Donc : Pour personnaliser l'affichage d'un composant, il suffit de : redéfinir sa méthode paint. Il faut donc créer une classe héritière. Lorsqu’on crée une interface, généralement, on ne personnalise pas les composants standards (boutons, liste…). On ajoute les composants à un conteneur.

19 Cours 919 La méthode paint Pour la majorité des composants awt, la méthode paint(g) est héritée de Component. Lors de l’exécution le système Java lui procure le contexte graphique dans lequel elle doit s’exécuter. public void paint (Graphics g) Le handle g est un paramètre d’entrée.

20 Cours 920 4. Principe de conception d’une interface graphique On ne dessine pas habituellement directement dans les composants : On crée une classe héritière  Qui possède donc les mêmes propriétés.  On personnalise ces propriétés (couleur, police, taille…) : méthodes set…  On peut redéfinir certaines méthodes pour modifier le comportement : paint, toString()

21 Cours 921 Créer une interface graphique ou dessiner ? Lorsqu’on crée une interface graphique on ajoute (add) des composants à des cadres conteneurs.  Un problème : comment organiser leur disposition les uns par rapport aux autres ?  Solution Java : les layout managers. Ces composants sont automatiquement redessinés par leurs méthodes paint. On ne redéfinit pas (habituellement) les méthodes paint (lorsqu’on crée une interface graphique).

22 Cours 922 Faire un dessin Lorsqu’on veut faire un dessin (une courbe par exemple), on prévoit un conteneur de dessins appelé Canvas dans awt. On redéfinit la méthode paint du Canvas. C’est là que se passe le dessin. Ce conteneur de dessins est ajouté à l’interface graphique.

23 Cours 923 5. Etude de la classe Frame Un Frame est le cadre conteneur initial de toute application avec awt.

24 Cours 924 Propriétés par défaut d'un Frame Quelques propriétés par défaut d'un FrameElles peuvent être modifiées par Est invisiblesetVisible(true) (héritée de Component) S'affiche au point (0, 0)setBounds(x, y, larg, haut) ou setLocation(x, y) (héritée de Component) Sa taille est minimalesetBounds(…) ou setSize(…) Possède une barre de titre videsetTitle("titre") (de Frame) A une couleur par défautsetBackground(Color) (de Component) A une police par défaut définie dans le contexte graphique. Police qui s'affiche en noir Font fonte = new Font(…) setFont(fonte) (héritée de Container) g.setColor(Color) (g = contexte graph) La disposition de ses composants est gérée par BorderLayout qui définit cinq zones Nord, Sud, Est Ouest et Centre setLayout(autre manager) (héritée de Container) Sait changer de taille, se mini-miser (icône) et se maximiser setResizable(false) (de Frame) Ne sait pas répondre à un clic sur la case de fermeture Ajout d'un écouteur d'événement

25 Cours 925 Quelques méthodes que l’on peut employer La hiérarchie : Object  Component  Container  Window  Frame Etude de quelques méthodes : Héritées de java.awt.Component Héritées de java.awt.Window Héritées de java.awt.Frame

26 Cours 926 boolean isEnable()true si le composant détient le focus boolean isShowing()true si le composant est visible à l’écran (son parent doit donc être visible) boolean isVisible()Détermine si le composant devrait être visible lorsque son parent l’est Rectangle getBounds()Largeur, hauteur et position par rapport au parent Point getLocation() int getX() int getY() int getWidth() int getHeight() Position relative à l'écran Point getLocation() int getX() int getY() int getWidth() int getHeight() Position relative au parent Héritées de java.awt.Component

27 Cours 927 Point getLocationOnScreen()Position relative à l'écran Dimension getSize()Taille void repaint() void repaint(int x, int y, int width, int height) Repeint le composant dès que possible void setBackground(Color c)Couleur du fond void setBounds(int x, int y, int width, int height) void setBounds(Rectangle r) Déplace et redimensionne le composant Héritées de java.awt.Component

28 Cours 928 void setEnable(boolean b)Rend le composant susceptible ou non de recevoir les événements (focus) void setForeground(Color c)Définit la couleur du premier plan void setLocation(int x, int y) void setLocation(Point p) Relativement aux coordonnées du parent void setSize(int width, int height) void setSize(Dimension d) Définit la taille du composant void setVisible(boolean b)true ou false Héritées de java.awt.Component (suite)

29 Cours 929 void hide()Cache la fenêtre boolean isShowing()True si la fenêtre est visible void show()Rend la fenêtre visible void pack()Ajuste la fenêtre à sa taille préférée void toFront()Met au premier plan void toBack()Met à l'arrière plan Héritées de java.awt.Window

30 Cours 930 void setResizable(boolean b)true ou false void setTitle(String s)Définit un titre void setIconImage(Image image)Définit un icône Héritées de java.awt.Frame

31 Cours 931 6. Etude d’un exemple élémentaire Dessiner dans une fenêtre  L’application minimale : création d’une fenêtre  Amélioration : on utilise l’héritage  La bonne solution

32 Cours 932 Dessiner dans une fenêtre L'application minimale, création d’une fenêtre // Fenêtre visible, taille minimale // ---------------------------------------- import java.awt.*;// Donne accès aux méthodes de awt class Fen0 { public static void main(String[] arg) { Frame f = new Frame(); f.setVisible(true); // Car, par défaut, un Frame est invisible } }

33 Cours 933 Amélioration On pourrait dessiner dans la fenêtre en redéfinissant sa méthode paint mais ce n'est pas la bonne méthode. On crée une classe spécifique qui hérite de Frame. // Fenêtre visible, on dessine dans le Frame // ----------------------------------------- import java.awt.*; class Fen1 { public static void main(String[] arg) { MaFen f = new MaFen(); }

34 Cours 934 Amélioration (suite) class MaFen extends Frame { MaFen() // Le constructeur personnalise le Frame { super(); // Important pour initialiser le comportement par défaut setBounds(10, 20, 200, 100);// Position et taille setTitle("Première fenêtre");// Titre setVisible(true); } // REDEFINTION DE paint public void paint(Graphics g)// On dessine dans le Frame { g.drawOval(5, 25, 50, 20);// Coord relatives à MaFen } } Chaque fois que cela est nécessaire la méthode paint est réactivée.

35 Cours 935 Noter l’éllipse coupée en raison de l’origine des coordonnées dans le domaine où l’on dessine.

36 Cours 936 La bonne méthode pour dessiner En fait la bonne méthode c'est d'utiliser un conteneur spécifique pour les dessins : un Canvas. Ce conteneur est ajouté (add) au Frame. class MaFen extends Frame // Construction héritée du modèle de Frame { MaFen() { super();// Active les caractéristiques par défaut // Personnalisation des caractéristiques setBounds(10, 20, 200, 100);// Position et taille setTitle("Première fenêtre");// Titre setBackground(Color.pink) ;// Couleur du fond personnalisée add(new ZoneDeDessin());// Ajout d’un Canvas conteneur de dessin setVisible(true);// A mettre en dernier } }

37 Cours 937 class ZoneDeDessin extends Canvas// On dessine dans un objet approprié { ZoneDeDessin()// Constructeur { super();// Définit les caractéristiques par défaut } public void paint(Graphics g)// REDEFINITION de la méthode de dessin { g.setColor(Color.blue) ;// Choisit une autre coueleur de tracé g.drawOval(5, 25, 50, 20); // Coord relative à la zone de dessin } }

38 Cours 938