Retour au menu Tous les systèmes d'exploitation moderne sont maintenant
dotés d'interfaces graphiques. Pour assurer l'indépendance de JAVA par rapport
à la plate-forme, les concepteurs aurait pu concevoir des composants graphiques
spécifiques. Ils ont préféré réutiliser les composants de la machine client
au moyen d'interfaces implantés dans la machine virtuelle du navigateur. La
gestion des composants graphiques est basée sur la notion de conteneurs
qui sont des espaces graphiques destinés à recevoir plusieurs composants comme
des boutons, des cases à cocher ... dont la mise en place graphique est
fonction d'un protocole de mise en page. En effet, selon les systèmes
d'exploitation, la taille et l'aspect de ces composants varient et il se pose
le problème de leur positionnement.
La classe Applet dérive
de la classe Panel qui est une extension de la classe abstraite Container.
La classe Panel (panneau) représente des conteneurs qui sont placés dans un
espace graphique existant pouvant être un autre Panel : une applet étant
un Panel peut donc contenir d'autres Panels (système récursif).
Avant
d'examiner au chapitre suivant les composants graphiques gérés par JAVA, nous
allons maintenant examiner les différents gestionnaires de mise en page associés
aux conteneurs.
C'est la mise en page par défaut (elle est utilisée quand aucun protocole
n'est précisé). Dans cette mise en page "glissante", les composants graphiques sont ajoutés
les uns après les autres de gauche à droite avec un saut de ligne quand il n'y
a plus de place à droite. L'aspect final dépend donc de la taille de la fenêtre
de l'applet.
Les trois constructeurs possibles possèdent la syntaxe :
FlowLayout(
), FlowLayout(int align) et FlowLayout(int align, int dx, int
dy). dx et dy précisent l'écartement des composants en x et y.
Les constantes FlowLayout.LEFT = 0, FlowLayout.CENTER
= 1 (défaut) et FlowLayout.RIGHT = 2 précisent l'alignement (align) dans une
ligne.
Dans l'exemple suivant, on utilise comme composants un tableau de 4 boutons. La taille des boutons est fonction de la fonte utilisée : il est donc essentiel de définir celle-ci. La valeur de la constante pos est passée à l'applet par une balise <param>. On peut constater l'évolution de l'aspect final en fonction de la taille de l'applet. Remarquez aussi que seule la surface des composants masque la zone de dessin.
import java.applet.*;
import
java.awt.*;
public class layflow extends
Applet
{ Button bt[] = new Button[4]; //déclaration
des boutons
Font
font= new Font("TimesRoman",0,12);
FlowLayout fl; //déclaration
du gestionnaire
int
p;
public void init()
{ setBackground(Color.lightGray);
setFont(font);
p
= Integer.parseInt(getParameter("pos")); //récupération
de pos
fl
= new FlowLayout(p,15,8); //création
du gestionnaire
setLayout(fl);
//mise
en place
for
(int i=0; i<5; i++){
bt[i]=new
Button(" Bouton "+(i+1)); //création
des boutons
add(bt[i]);}}
// méthode add( ) pour la mise
en place des boutons
public void paint(Graphics
g)
{ g.setFont(font);
g.drawString("Test
de flowLayout avec pos = "+p, 40, 100);
g.drawLine(0,0,size().width,size().height);}
}
|
|
|
|
|
|
Dans tous les cas de mise en place simple avec peu de composants il faut utiliser ce gestionnaire.
La mise en place glissante offre peu de possibilité pour les mises en page complexes. Le protocole de spécification par les bords BorderLayout décompose le conteneur en 5 zones (précisées par les constantes North, South, East, West et Center) qui peuvent recevoir chacune un seul composant. Le constructeur BorderLayout(int dx, int dy) permet de préciser l'espace entre les composants selon x et y. Les dimensions des composants sont fonctions des dimensions du container mais leurs positions sont maintenant définies. L'exemple ci-dessous indique comment utiliser ce gestionnaire.
import java.applet.*;
import
java.awt.*;
public class layborder extends
Applet
{ Button bt[]=new Button[5];
Font font= new Font("TimesRoman",0,12);
BorderLayout
fl;
public void init()
{ setBackground(Color.lightGray);
setFont(font);
fl
= new BorderLayout(10,30);//création
du gestionnaire
setLayout(fl);
for
(int i=0; i<5; i++)
bt[i]=new
Button(" Bouton "+(i+1));//création
des boutons
add("North",bt[0]); add("South",bt[1]);//mise
en place
add("East",bt[2]); add("West",bt[3]);
add("Center",bt[4]); }
public void paint(Graphics
g)
{ g.setFont(font);
g.drawString("Test
de BorderLayout",40,110);
g.drawLine(0,0,size().width,size().height);}
}
Avec cet exemple simpliste ce protocole semble peu intéressant puisque chaque
composant graphique occupe toute la place qui lui est offerte. C'est ici que l'on peut
faire intervenir la récursivité des protocoles : un conteneur
est lui-même un composant graphique qui peut contenir d'autres conteneurs.
Le conteneur le mieux adapté est le panneau (Panel). Avec cette technique, il
est possible de concevoir des mises en page d'applets assez complexes avec un
code relativement simple.
Ainsi dans l'exemple suivant, nous allons placer
des composants dans le haut et dans le bas de l'applet en utilisant deux objets
panneaux dotés chacun de son propre gestionnaire de mise en page. Pour
la mise en place des boutons dans chaque panneau, on utilise la méthode add(
) de l'instance de Panel utilisée.
import java.applet.*;
import
java.awt.*;
public class layborder2 extends
Applet
{ Button bt[]=new Button[5];
Font
font= new Font("TimesRoman",0,12);
Font bold=
new Font("TimesRoman",1,14);
Panel Panor=new
Panel(), Pasud=new Panel(); //création
des Panels
BorderLayout
fl= new BorderLayout(10,30); //Protocole
principal
public void
init()
{ setBackground(Color.lightGray);
setFont(font);
//fonte pour les composants
setLayout(fl);
add("North",Panor); add("South",Pasud);
//ajout des panneaux
Panor.setLayout(new
FlowLayout(1,20,5)); //protocole
du panneau supérieur
Pasud.setLayout(new
FlowLayout(2,30,10)); //protocole
du panneau inférieur
for
(int i=0; i<5; i++) //création
des boutons
bt[i]=new
Button(" Bouton "+(i+1));
for (int
i=0; i<3; i++) Panor.add(bt[i]); //mise
en place des boutons du haut
for
(int i=3; i<5; i++) Pasud.add(bt[i]);}
public void paint(Graphics
g)
{ g.setFont(bold); //fonte
pour l'applet
g.drawString("Test
de BorderLayout avec Panels",40,80);
g.drawLine(0,0,size().width,size().height);}
}
Attention : Les Panels ainsi mis en place limitent la surface de dessin de l'applet !
Ce protocole définit une grille dont chaque cellule peut contenir un
composant graphique. Les composants sont ajoutés de gauche à droite ligne par
ligne. Utilisé seul ce gestionnaire n'a pas beaucoup d'intérêt. Par contre utilisé
avec un protocole BorderLayout et des panneaux, il permet des mises en page
intéressantes. Il existe deux constructeurs GridLayout( int lig, int col)
et GridLayout( int lig, int col, int dx, int dy); lig indique
le nombre de lignes de la grille et col son nombre de colonnes; dx
et dy précisent l'écartement entre les composants.
Dans l'exemple
suivant, on met en place dans un panneau Pasud un autre panneau PasuW doté d'un
protocole Grid Layout qui va contenir 10 boutons. Il est en effet impossible
de placer directement ce protocole dans Pasud car alors les composants occuperaient
toute la largeur offerte. La surface en dessous du trait horizontal n'est plus
disponible pour le dessin (elle est occupée par le panneau Pasud) mais peut elle peut éventuellement
contenir des composants.
import java.applet.*;
import java.awt.*;
public class laygrid extends Applet
{ Button bt[]=new Button[3];
Button bu[]=new Button[10];
Font font= new Font("TimesRoman",0,14);
Font bold= new Font("TimesRoman",1,12);
Panel Panor=new Panel(),
Pasud=new Panel();
Panel PasuW=new Panel(); //container
pour les boutons bu
BorderLayout fl= new BorderLayout(10,10);
public void init()
{ setBackground(Color.lightGray);
Panor.setFont(font); Pasud.setFont(bold);
//choix des fontes
setLayout(fl);
add("North",Panor); add("South",Pasud);
Panor.setLayout(new
FlowLayout(1,20,5)); //protocoles
des panneaux
Pasud.setLayout(new
FlowLayout(0,5,5)); //principaux
Pasud.add(PasuW);
//1
panneau dans un autre
PasuW.setLayout(new
GridLayout(4,3,5,5));
//avec
son gestionnaire (une grille de 4 lignes de 3 colonnes)
for
(int i=0; i<3; i++) //création
des boutons bt
bt[i]=new
Button(" Bouton "+(i+1));
for
(int i=0; i<10; i++) //création
des boutons bu
bu[i]=new
Button(" "+i+" ");
for
(int i=0; i<3; i++) Panor.add(bt[i]); //et
mise en place
for
(int i=1; i<10; i++) PasuW.add(bu[i]);
PasuW.add(bu[0]);}
public void paint(Graphics
g)
{ g.setFont(font);
g.drawString("Test
de GridLayout avec Panels",20,70);
g.drawLine(0,118,320,118);
//pour contrôle de la
zone utile
g.drawLine(0,size().height,size().width,0);}
}
Il existe également le gestionnaire CardLayout qui ne peut afficher qu'un seul composant à la fois (en général un panneau qui va posséder ses propres composants).Ce gestionnaire est doté de méthodes first( ), last( ), previous( ) et shows( ) qui permettent de naviguer entre les cartes. Ceci suppose la mise en place de boutons de navigation sur chaque carte.
Enfin pour les situations complexes, existe le protocole
GridBagLayout qui fonctionne avec des contraintes précisées par la classe
GridBagConstraints. Dans ce gestionnaire chaque composnt est inséré dans
un conteneur et on lui associe une contrainte qui précise son emplacement dans
une grille, sa taille...
Ce protocole est très lourd à mettre en oeuvre et
je ne le décrirai pas car il existe (à mon avis) une méthode beaucoup plus facile
à mettre en application dans les applets qui est la méthode sans gestionnaire.
Dans une applet, la taille de la fenêtre est imposée par les paramètres
width et height de la balise <applet>. Il est donc possible de prévoir
l'aspect final de l'applet dans le navigateur si la taille des composants est
connue. Il existe pour les composants la méthode reshape(int ox, int oy,
int large, int haut) qui permet d'imposer au composant sa position (ox,
et oy) et ses
dimensions (large et haut) à condition qu'un gestionnaire de mise en page ne soit pas actif.
Comme par défaut JAVA utilise un protocole FlowLayout, il faut commencer par
déclarer que celui-ci est inactif au moyen de l'instruction FlowLayout fl
= null. On peut ensuite placer les composants dans la fenêtre aux endroits
souhaités. Cette technique suppose que la fonte utilisée pour les composants
soit définie dès le départ. Comme exemple, on va reprendre le cas précédent.
On peut constater que cette technique est beaucoup plus souple au niveau du
positionnement des composants. On peut aussi constater qu'aucun panneau ne vient
masquer la surface de l'applet.
Remarque : depuis la version 1.1, la méthode reshape(
) a été remplacée par la méthode setBounds( ) qui possède les
mêmes arguments (en fait seul le nom de la méthode a changé).
import java.applet.*;
import
java.awt.*;
public class laynull extends
Applet
{ Button bt[]=new Button[3];
Button bu[]=new Button[10];
Font
font= new Font("TimesRoman",0,14);
Font bold= new Font("TimesRoman",1,12);
FlowLayout
fl= null; //essentiel
public void init()
{ setBackground(Color.lightGray);
setLayout(fl);
//essentiel
for
(int i=0; i<3; i++){
bt[i]=new Button("Bouton
"+(i+1));//création
add(bt[i]);
//ajout
bt[i].setFont(font);
//fonte du composant
bt[i].reshape(20+100*i,5,80,22);}
//mise en place
setFont(bold);
//fonte par défaut pour
les composants à venir
for
(int i=0; i<10; i++)
bu[i]=new Button("
"+i+" ");//création
int k=0;
for
(int l=80; l<150; l+=30){
for (int
c=0; c<3; c++){
k++;
add(bu[k]);
//ajout
bu[k].reshape(100+30*c,l,25,25);}}//mise
en place
add(bu[0]);
bu[0].reshape(130,170,25,25);}
public void paint(Graphics
g)
{ g.setFont(font);
g.drawString("Test
sans gestionnaire",20,60);
g.drawLine(0,size().height,size().width,0);}
}
Retour au menu