Interface Graphique : Créer ses propres composants

On va terminer ce chapitre par une section qui introduit à la création de composants personnalisés. La section précédente a déjà donné une introduction en montrant comment créer des fenêtres personnalisées, maintenant, on va s'intéresser à des composants personnalisés comme par exemple le composant qui permet d'afficher une courbe que l'on a pu voir lors de l'introduction.

La classe `JComponent`

Comme on travaille avec Swing, la classe qui représente le composant le plus général est la classe JComponent. Si on veut créer notre propre composant, comme on est en programmation orientée objets, la manière naturelle de faire est d'écrire une nouvelle classe qui étend la classe JComponent.

public class PlotComponent extends JComponent

{

}

listing j10.22 Un composant personnalisé

On a donc défini une nouvelle classe, on va pouvoir lui ajouter un constructeur. Pour notre exemple, le constructeur va recevoir une liste d'objets de type Point. La classe Point représente simplement une coordonnée de type (x,y) dans le plan cartésien. Attention, n'oubliez pas de faire appel au constructeur parent, c'est une chose obligatoire lorsque l'on travaille par héritage.

1
2
3
4
5
6
7
8
9
10

public class PlotComponent extends JComponent

{

private List<Point> points;

public PlotComponent (List<Point> list)

{

super();

points = list;

}

listing j10.23 Le constructeur

On a donc commencé par faire un appel au constructeur de la classe parent avec super(). Rappelez-vous néanmoins que dans ce cas-ci on ne doit pas explicitement l'écrire puisque le compilateur Java ajoute par défaut un appel super(); si on ne met rien.

Voilà, on a donc créé un nouveau composant, composant que l'on a rattaché à la hiérarchie de Swing en étendant la classe JComponent comme le montre la figure suivante. Maintenant, on peut l'utiliser comme tous les autres composants pour construire une interface graphique, mais il n'y a pas grand chose qui s'affichera ...

fig j10.26 Composant personnalisé

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

public static void main (String[] args)

{

// Création de la fenêtre

JFrame frame = new JFrame ("PlotComponent");

frame.setDefaultCloseOperation (EXIT_ON_CLOSE);

frame.setSize (new Dimension (300, 200));

// Construction d'une liste de points

List<Point> list = new LinkedList<Point>();

for (double i = -5; i <= 5; i += 0.1)

{

list.add (new Point (i, Math.sin (i)));

}

// Construction de la fenêtre

PlotComponent plot = new PlotComponent (list);

frame.getContentPane().add (plot);

// On affiche la fenêtre

frame.setVisible (true);

}

listing j10.24 Utilisation d'un composant personnalisé

Ce à quoi on aimerait arriver est présenté en figure j10.27, il ne nous reste donc plus qu' à voir comment faire pour dessiner dans un composant.

fig j10.27 Afficher une courbe

La méthode `paintComponent`

Tous les composants de Swing ont une méthode paintComponent qui décrit comment le composant doit être affiché à l'écran. Cette méthode est originalement écrite dans la classe JComponent et toutes les classes qui étendent JComponent vont redéfinir cette méthode en utilisant l'overriding vu au chapitre 9.

1
2
3
4
5
6
7
8
9
10
11

public class PlotComponent extends JComponent

{

// [...]

protected void paintComponent (Graphics g)

{

super.paintComponent (g);

g.drawString ("Hello World !", 50, 50);

}

listing j10.25 La méthode paintComponent

La première chose que l'on fait consiste à faire appel à la méthode paintComponent de la classe parent en utilisant super pour que le composant soit bien initialisé (par exemple la couleur de fond, ...). Une fois cela fait, vient la partie que l'on ajoute nous-mêmes pour personnaliser le composant. Dans notre exemple, on affiche la chaine de caractères Hello World ! au point de coordonnées (50, 50).

fig j10.28 La méthode paintComponent

Vous aurez bien entendu remarqué que la méthode paintComponent est déclarée comme protected, pour rappel, cela signifie qu'elle est héritée et peut donc être redéfinie et accédée depuis une classe fille mais est inaccessible depuis une instance de la classe qui serait créée dans une classe ne se trouvant pas dans le même package.

L'objet `Graphics`

La méthode paintComponent reçoit en paramètre un objet de type Graphics. Cet objet permet de faire des dessins en deux dimensions grâce à toute une série de méthodes qui permettent de tracer des lignes, des courbes, de changer la couleur, ...

C'est donc grâce à cet objet que l'on va pouvoir dessiner dans un composant. L'exemple du listing j10.25 utilise la méthode drawString qui permet d'afficher une chaine de caractère à une certaine coordonnée.

Vous devez, avant de vous lancer dans le dessin, savoir que le système de coordonnées utilisé en informatique n'est pas tout à fait le même que celui qu'on utilise traditionnellement en mathématiques, en effet, l'axe des y est croissant vers le bas comme le montre la figure j10.29.

fig j10.29 Système de coordonnées

Coordonnées du monde / sur l'écran

Intéressons-nous maintenant à la conversion de coordonnées du monde vers des coordonnées sur l'écran. Pour les matheux, sachez qu'on a en fait une transformation affine. Bref, fixons un peu les choses avec la figure suivante.

fig j10.30 Système de coordonnées du monde / sur l'écran

Maintenant, ce qu'on cherche, c'est trouver les coordonnées sur l'écran (sx, sy) qui correspondent à un point (x, y) dans le monde réel. En utilisant les proportions, sachant qu'on a une transformation affine qui préserve les proportions, on trouve aisément la réponse. Voyons en détail le raisonnement.

fig j10.31 Calcul de la transformation

Dans le monde réel, le point x se trouve à une certaine proportion entre L et R. La proportion est conservée lors du passage sur l'écran, on peut donc écrire

Tranformation de x du monde vers l'écran

On obtient la valeur pour sy de la même manière

Tranformation de y du monde vers l'écran

La courbe

Maintenant que l'on est capable de passer de coordonnées réelles dans le monde vers des coordonnées sur l'écran, on peut s'attaquer à notre composant qui doit tracer une courbe représentée par une liste de points. La première chose à faire est de trouver les bornes du monde réel : L et R pour les abscisses et T et B pour les ordonnées.

On va tout d'abord trier les valeurs de la liste de points de sorte qu'on retrouve en première position le point avec la plus petite coordonnée en x et en dernière position le point avec la plus grande valeur de x. Pour y, il va falloir faire une boucle sur tous les points pour retrouver le minimum et le maximum.

Une fois qu'on a tous ces éléments, il faut afficher les différents points à l'écran en les reliant par une ligne. Tout ça est très facilement faisable en utilisant les méthodes de la classe Graphics. Nous vous invitons toujours à consulter la documentation de l'API Java pour en savoir plus sur ces méthodes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

protected void paintComponent (Graphics g)

{

// Appel de la méthode dans la classe mère

super.paintComponent (g);

// Mise à jour de L et R, les minimum et maximum pour x

L = points.get (0).getX();

R = points.get (points.size() - 1).getX();

// Calcul de B et T, les minimum et maximum pour y

for (Point p : points)

{

if (p.getY() > T) T = p.getY();

if (p.getY() < B) B = p.getY();

}

// On peut tracer les points

g.setColor (Color.BLACK);

Point p1, p2;

for (int i = 0; i < points.size() - 1; i++)

{

p1 = points.get (i);

p2 = points.get (i + 1);

g.drawLine (sx (p1.getX()), sy (p1.getY()), sx (p2.getX()), sy (p2.getY()));

}

listing j10.26 Tracer la courbe des points

Voici la signature des méthodes de la classe Graphics qui a été utilisée dans cet exemple :

public void setColor (Color c);
public void drawLine (int x1, int y1, int x2, int y2);

La méthode setColor permet de changer la couleur courante et la méthode drawLine permet de dessiner une ligne dans la couleur courante entre le point de coordonnée (x1, y1) et le point (x2, y2). Ce qu'on passe comme paramètre à la méthode, ce sont les points contenus dans la liste mais après transformation via les méthodes sx et sy dont le code ne vous est pas présenté ici.

Et voilà, on a eu l'occasion dans ce chapitre de faire un tour général des interfaces graphiques en Java, on aura encore l'occasion de découvrir ensemble plus de choses dans un chapitre ultérieur, maintenant, laissez place à votre imagination et entrainez-vous à maitriser tous les nouveaux concepts découverts que sont la programmation évènementielle, les listeners, handlers, les composants, le graphisme en 2D, ... N'oubliez pas que vous pouvez retrouver toutes les classes présentées dans le tutoriel dans les ressources.

Chapitre 11