9 Interfaces graphiques avec awt

Download Report

Transcript 9 Interfaces graphiques avec awt

Slide 1

9
Interfaces graphiques avec awt

Cours 9

1


Slide 2

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 ?
Cours 9

2


Slide 3

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

Cours 9

3


Slide 4

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…

Cours 9

4


Slide 5

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.

Cours 9

5


Slide 6

Un exemple

Cours 9

6


Slide 7

Les différentes couches

Cours 9

7


Slide 8

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…

Cours 9

8


Slide 9

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…

Cours 9

9


Slide 10

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

Cours 9

10


Slide 11

Classes utilitaires
Point

int x
int y

Dimension

int width
int height

Rectangle

int x
int y
int width
int height

Color

Font

FontMetrics

Consta Nom
Caractéris
ntes
de
tiques des
static
police, fontes
taille,
style

Cours 9

11


Slide 12

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.
Cours 9

12


Slide 13

Classes définissant des
composants de awt
Component

Label
Button
Canvas
Checkbox
Choice
List
Scrollbar

Classe abstraite. Caractéristiques communes :
Position, taille, couleur, fonte, visible, paint…
Libellés
Boutons
Zone de dessin
Cases à cocher
Liste de choix
Liste déroulantes
Barres de scrolling

TextComponenent
TextField
TextArea

Zone de saisie d’une seule ligne
Editeur de texte

Container

Classe abstraite, ajout, retrait de composants,
Possède un gestionnaire de disposition
Panneau conteneur, disposition: FlowLayout

Panel
Window
Dialog Titre, resizable, modale, icône, BorderLayout
FileDialog
Frame Titre, menu, resizable, icône , BorderLayout
Cours 9

13


Slide 14

3. Comment ça marche ?

Cours 9

14


Slide 15

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.
Cours 9

15


Slide 16

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

Cours 9

16


Slide 17

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

Cours 9

17


Slide 18

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.
Cours 9

18


Slide 19

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.

Cours 9

19


Slide 20

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

Cours 9

20


Slide 21

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

21


Slide 22

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.
Cours 9

22


Slide 23

5. Etude de la classe Frame

Un Frame est le cadre conteneur initial de
toute application avec awt.

Cours 9

23


Slide 24

Propriétés par défaut d'un Frame
Quelques propriétés par défaut d'un Frame

Elles peuvent être modifiées par

Est invisible

setVisible(true)

S'affiche au point (0, 0)

setBounds(x, y, larg, haut) ou
setLocation(x, y)
(héritée de Component)

Sa taille est minimale

setBounds(…) ou setSize(…)

Possède une barre de titre vide

setTitle("titre") (de Frame)

A une couleur par défaut

setBackground(Color)

A une police par défaut définie dans le
contexte graphique.
Police qui s'affiche en noir

Font fonte = new Font(…)
setFont(fonte)
g.setColor(Color)

(héritée de Container)
(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)

Ne sait pas répondre à un clic sur la case de
fermeture

Ajout d'un écouteur d'événement
Cours 9

(héritée de Component)

(de Component)

(de Frame)

24


Slide 25

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
Cours 9

25


Slide 26

Héritées de java.awt.Component

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

Cours 9

26


Slide 27

Héritées de java.awt.Component

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

Cours 9

27


Slide 28

Héritées de java.awt.Component (suite)

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

Cours 9

28


Slide 29

Héritées de java.awt.Window

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
Cours 9

29


Slide 30

Héritées de java.awt.Frame

void setResizable(boolean b)

true ou false

void setTitle(String s)

Définit un titre

void setIconImage(Image image)

Définit un icône

Cours 9

30


Slide 31

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

Cours 9

31


Slide 32

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
}
}
Cours 9

32


Slide 33

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

33


Slide 34

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.
Cours 9

34


Slide 35

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

Cours 9

35


Slide 36

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
{
MaFen()
{
super();
setBounds(10, 20, 200, 100);
setTitle("Première fenêtre");
setBackground(Color.pink) ;
add(new ZoneDeDessin());
setVisible(true);

// Construction héritée du modèle de Frame

// Active les caractéristiques par défaut
// Personnalisation des caractéristiques
// Position et taille
// Titre
// Couleur du fond personnalisée
// Ajout d’un Canvas conteneur de dessin
// A mettre en dernier

}
}
Cours 9

36


Slide 37

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)
{
g.setColor(Color.blue) ;
g.drawOval(5, 25, 50, 20);
}

// REDEFINITION de la méthode de dessin
// Choisit une autre coueleur de tracé
// Coord relative à la zone de dessin

}

Cours 9

37


Slide 38

Cours 9

38