GridBagLayout

Version imprimable

Voir 40 message(s) de cette discussion en une page

17/05/2006, 14h04
nicotine002

GridBagLayout

Bonjour,
Voilà j'ai testé a peu près tout les lyaout de l'api et c'est donc celui ci qui me pose problème:)

Par exemple pour placer un composant, on utilise gridx(le numéro de ligne) et gridy(le numéro de colonne), bah en fait pour que ca marche, moi je dois faire l'inverse(j'ai surement loupé qulque chose mais bon), c'est à dire que pour moi le numéro de ligne c'est gridy et gridx pour le numéro de colonne O_o

Ensuite, est-il possible de modifier la largeur d'une colonne?(ou d'une ligne)

J'aurais également voulu des précision sur weigthx, weigthy, ces méthode jouent-elle juste sur le redimensionnement?

Voilà, j'ai un peu de mal à comprendre ce layout malgrès la faq et autres recherche, merci d'avance.
17/05/2006, 14h17
calogerogigante

Tu trouveras dans ce post un exemple de GridBagLayout :

post

C'est une méthode simple proposée par Delannoy dans son ouvrage : méthode que je trouve fantastique, rapide et facile à maintenir. Disposer les paramètres des différents composants dans des tableaux, et un petit switch pour placer le tout.
(Peut-être que cette méthode ne sera pas appréciée de tout le monde...)

Avec cette méthode, tu peux :
- te passer d'éditeur visuel de GUI
- faire des interfaces aussi compliquées que celle-là :
image

Salut.
17/05/2006, 14h27
nicotine002

Merci pour ta réponse; en effet ca m'a l'air pas mal, mais j'ai quelque petites questions:
1. Dans le post,pour placer le 2nd panel, les coordonnées utilisées sont bien x=0 et y=1(pourquoi pas l'inverse?, le numéro de ligne est bien 1 et colonne 0, c'est ça que j'ai du mal à piger)
2.Pourrais tu m'expliquer à quoi sert le weigth stp?

Sinon ca m'a l'air pas mal comme méthode, je l'essaierai tout à l'heure car la je manque de temps.
Encore merci;)

Citation:

Dans le post,pour placer le 2nd panel, les coordonnées utilisées sont bien x=0 et y=1(pourquoi pas l'inverse?, le numéro de ligne est bien 1 et colonne 0, c'est ça que j'ai du mal à piger)

C'est le coin supérieur gauche du composant qui est référencé par ce x et y.

Mais oui, tu as raison, j'ai pas donné assez d'explications :

Je recolle tout les morceaux de code ici, pour rendre ce post complet :
Code:

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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 import javax.swing.*; import java.awt.*; class MaFenetre extends JFrame { public static int x[] = { 0, 0, 1}; public static int y[] = { 0, 1, 0}; public static int larg[]= { 1, 1, 3}; public static int haut[]= { 1, 2, 3}; public static int px[] = {20,20,60}; public static int py[] = {20,40,60}; public static JPanel pan1; public static JPanel pan2; public static JPanel pan3; public MaFenetre() { setTitle("Exemple"); setSize(800,500); setDefaultCloseOperation(EXIT_ON_CLOSE); Container contenu = getContentPane(); GridBagLayout g = new GridBagLayout(); contenu.setLayout(g); GridBagConstraints c = new GridBagConstraints(); c.fill = GridBagConstraints.BOTH ; pan1=new JPanel(); pan1.setBackground(Color.blue); pan2=new JPanel(); pan2.setBackground(Color.white); pan3=new JPanel(); pan3.setBackground(Color.red); for (int i=0; i<x.length; i++) { c.gridx=x[i]; c.gridy=y[i]; c.gridwidth=larg[i]; c.gridheight=haut[i]; c.weightx=px[i]; c.weighty=py[i]; switch(i) { case 0: contenu.add( pan1, c ); break; case 1: contenu.add( pan2, c ); break; case 2: contenu.add( pan3, c ); break; } } } }
Et ceci encore :
Code:

1 2 3 4 5 6 7 8 public class GUI_01 { public static void main (String args[]) { MaFenetre fen = new MaFenetre(); fen.setVisible(true); } }
L'image que tu verras ci-dessous devrait t'éclaircir sur les raisons d'exister des weightx et weigthy.

Cela permet en fait d'avoir une pondération par rapport aux autres composants.

Un exemple : le pan1 fait 20 en weightx, et le pan3 fait 60 en weightx.
Donc la largeur de pan1 sera de 20/(20+60) % par rapport à la largeur de pan3 qui sera de 60/(20+60) %.

20 et 60 sont choisi arbitrairement. Tu peux mettre n'importe quelle valeur qui t'arrange. Le gestionnaire de GridBagLayout se chargera de faire la somme des poids pour en apprécier le % par rapport au total...

En réalité, pour plus de compréhension, (mais quand c'est trop facile, c'est pas rigolo), j'aurai pu donner à pan1 : 25 de poids x et à pan3 : 75 de poids x. Ce qui aurait donné : pan1 prends 25% de la largeur totale, pan3 prends 75% de la largeur totale.

pan1 : 25/(25+75) % et pan3: 75/(25+75) %

Pigé l'astuce ?

:D :D

Plus besoin d'éditeur visuel, quand t'as pigé tout ça, ton code est alors intégralement fait par tes petites mains de programmeur dans les nuages...

17/05/2006, 16h57
nicotine002

Ok un grand merci pour ton explication, à mon avis quand je te parlais des gridx et gridy, je devais un peux avoir la tête à l'envers.
Pour l'histoire des weight, tout pigé;)
Je laisse le post ouvert car je vais tester çà avec mes paramètres et je te dirais si oui ou non j'ai des problèmes.
En tout cas grand bravo et grand merci à toi:)
17/05/2006, 17h05
calogerogigante

Pour t'encourager, et pour te convaincre que c'est possible : le screenshot de mon programme de gestion de cochons (que j'ai mis au début de cette discussion) a été fait intégralement avec cette méthode, càd des JPanels imbriqués (en gridbaglayout), et géré à la manière de Delannoy.

Cela dit : cette méthode comporte un seul gros inconvénient : c'est qu'il faut bien savoir à l'avance ce que l'on veut.

Cela implique (et c'est comme ça que je travaille) de devoir dessiner en vitesse sur un bout de papier ton interface, de tracer un cadrillage, et d'y repérer les positions des composants qui vont entrer dans le paramétrage du GridBagLayout.

Mais le gros avantage : tu es le maître absolu de ton code, avec la satisfaction d'avoir tout codé toi-même sans logiciel extérieur...
;)
17/05/2006, 17h38
nicotine002

Au départ j'avais tout fais à la main(setLayout(null)) sur mon soft et là je dois tout refaire avec un gridbaglayout pour gérer le redimensionnement, je te raconte pas le boulot avec plus d'une 50aine de composants...
Mais je vais m'y ateler dès maintenant en essayant de faire un shéma préalablement, tiens une qutre question qui me vient,les zones vides?
Si je gère les poids avec par exemple 70 et 20, les 10% restant ca fera quoi?
17/05/2006, 17h45
calogerogigante

Ta remarque me fait dire que t'as pas tout saisis. :?

En réalité, il n'y pas de 10% restant.
Je t'explique autrement :

Si tu donnes un weightx de valeur A à pan1 et un weightx de valeur B à pan3, java considérera la somme totale de A + B comme étant 100%.

Dans ce que tu viens de me dire : si tu donnes 20 comme weightx à pan1 et 70 comme weightx à pan3, on aura :

pan1 s'étale sur l'axe des x sur 20/(20+70) % = 22.2 %
pan3 s'étale sur l'axe des x sur 70/(20+70)% = 77.8 %
17/05/2006, 17h48
nicotine002

Sisi j'avais bien compris, je reformule ma question autrement(désolé me suis mal exprimé):
Comment dois-je faire pour qu'il y ait dans la frame, une zone vide(sans composant dedans), suis-je obligé de declarer un panel par exemple qui remplira cette place vide?(mais qui ne contiendra rien)
17/05/2006, 17h55
calogerogigante

Tu mets le doigts sur un point faible de cette méthode. :applo:

Pour une zone faite d'une case vide, moi je mets un JLabel vide "" , auquel je donne une PreferedSize, et je le place dans la case où je veux du vide... (le JLabel est étalé sur une case ou sur plusieurs cases, en fonction de ce que tu désires).

(En passant, si quelqu'un a une autre proposition pour faire une case vide dans un GridBagLayout, je suis preneur... Car parfois, je n'ai aucun autre moyen pour mettre du vide que de mettre un JLabel vide...)

Cela dit, cette façon de faire marche également très bien.

Autre remarque qui pourra te prendre la tête.
Un weightx ou un weighty de valeur 0 fera en sorte que c'est java qui adaptera la taille du composant de poids 0 .
Il faut quand même parfois un peu tester, modifier, tester, modifier pour ce qui concerne les poids.
Mais au final, j'y arrive toujours...
:mouarf:

EDIT : si j'ai du temps demain au boulot, je te ferais un exemple d'interface complète, sans action, avec du vide, des JButtons, etc...
17/05/2006, 18h18
sinok

Au choix des Insets particuliers entre les diverses cases à préparer, un bidouillage sale sur les ancres, fill et weight

Mais bon un label vide avec les bonnes GridBagConstraints peut faire office de Glue sans pb
17/05/2006, 18h24
nicotine002

Lol premier test, presque exactement ce que je voulais faire avec plus de 10 panel quand même:)J'ai fait exactement comme tu as dis excepté le label en Panel.
Je continue un peu et je te tien au courant:)
Encore merci c'est génial:)
17/05/2006, 18h27
calogerogigante

Je suis content de pouvoir aider, de la même manière qu'on m'a déjà beaucoup aidé sur ce forum.
:D

J'ai parlé trop vite, ca en m'affiche pas tout les panel , au départ je pensé que c'était à cause des couleur qui était les même mais non:(
Voici les déclarations:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
public static int x[] = { 0, 0, 0, 0, 0, 0, 1, 2, 2, 0};
        public static int y[] = { 0, 1, 2, 3, 4, 5, 3, 3, 5, 6};
        public static int larg[]= { 3, 3, 3, 1, 1, 2, 1, 1, 1, 3};
        public static int haut[]= { 1, 3, 3, 5, 4, 8, 9, 9, 8, 3};
        public static int px[]  = {100,100,100,30,30,60,30,30,30,100};
        public static int py[]  = {5,15,15,25,20,40,45,45,40,15};
        public static JPanel pan1;
        public static JPanel pan2;
        public static JPanel pan3;
        public static JPanel pan4;
        public static JPanel pan5;
        public static JPanel pan6;
        public static JPanel pan7;
        public static JPanel pan8;
        public static JPanel pan9;

Et le reste:

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
 
pan1=new JPanel();
        pan1.setBackground(Color.white);
        pan2=new JPanel();
        pan2.setBackground(Color.green);
        pan3=new JPanel();
        pan3.setBackground(Color.red);
        pan4=new JPanel();
        pan4.setBackground(Color.green);
        pan5=new JPanel();
        pan5.setBackground(Color.gray);
        pan6=new JPanel();
        pan6.setBackground(Color.CYAN);
 
        pan7=new JPanel();
        pan7.setBackground(Color.DARK_GRAY );
        pan8=new JPanel();
        pan8.setBackground(Color.LIGHT_GRAY);
        pan9=new JPanel();
        pan9.setBackground(Color.magenta);
 
          for (int i=0; i<x.length; i++)
      {
 
     c.gridx=x[i]; c.gridy=y[i];
     c.gridwidth=larg[i]; c.gridheight=haut[i];
     c.weightx=px[i]; c.weighty=py[i];
     switch(i)
        {
     case 0: getContentPane().add( BarMenu, c ); break;
     case 1: getContentPane().add( pan1, c ); break;
     case 2: getContentPane().add( pan2, c ); break;
     case 3: getContentPane().add( pan3, c ); break;
     case 4: getContentPane().add( pan4, c ); break;
     case 5: getContentPane().add( pan5, c ); break;
     case 6: getContentPane().add( pan6, c ); break;
     case 7: getContentPane().add( pan7, c ); break;
     case 8: getContentPane().add( pan8, c ); break;
      case 9: getContentPane().add( pan9, c ); break;
 
        }
      }

17/05/2006, 22h15
calogerogigante

Je veux bien tenter de faire le code de disposition de tes JPanels (vu l'heure, ce sera quand même pour demain dans la journée)... Pour que tu voies comment je fais...

Pourrais-tu me faire (avec Paint par ex., c'est bon) une sorte de plan en image (comme je l'ai fait) de la disposition que tu souhaites pour tes JPanels ?
17/05/2006, 22h18
nicotine002

Ok je vais te faire ca, mais ca m'enerve quand, à mon avis j'ai pas compris le systeme des poids,j'arrive même pas à faire 3 zones horizontales...

Voilà en gros ce que je voudrais faire:
http://img116.imageshack.us/img116/4707/test8di.th.gif
Mais je voudrais bien comprendre, juste me dire comment faire 3 zones horizontales, moi j'avais essayé avec ceci:
Code:

1 2 3 4 5 6 7 public static int x[] = { 0, 0, 0}; public static int y[] = { 0, 1, 2}; public static int larg[]= { 3, 3, 3}; public static int haut[]= { 1, 2, 2}; public static int px[] = {30,30,30}; public static int py[] = {10,20,20};
Mais bon comme tu doit t'en douter, je n'ai que 2 zones horizontales...

Fait en 15 min (image en Paint comprise), juste avant de commencer à bosser !
:mouarf:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import javax.swing.UIManager;
 
public class Gui_02
{
public static void main (String args[])
   {
   try
     {
     UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
     }
   catch (Exception e)
      {
      System.out.println(e);
      }
   MaFenetre fen = new MaFenetre();
   fen.setVisible(true);
   }
}

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import javax.swing.*;
import javax.swing.border.*;
import java.awt.*;
 
class MaFenetre extends JFrame
{
private int x[]   = { 0, 0, 0, 0, 0, 1, 3, 0, 3, 0};
private int y[]   = { 0, 1, 2, 3, 4, 3, 3, 5, 5, 6};
private int larg[]= { 4, 4, 4, 1, 1, 2, 1, 3, 1, 4};
private int haut[]= { 1, 1, 1, 1, 1, 2, 2, 1, 1, 1};
private int px[]  = {75,75,75,20,20,40,15,60,15,75};
private int py[]  = { 5,10,10,40,20,60,60,30,30,10};
 
public MaFenetre()
  {
  setTitle("Exemple");
  setSize(800,500);
  setDefaultCloseOperation(EXIT_ON_CLOSE);
  Container contenu = getContentPane();
  GridBagLayout g = new GridBagLayout();
  contenu.setLayout(g);
  GridBagConstraints c = new GridBagConstraints();
                     c.fill = GridBagConstraints.BOTH ;
 
   JPanel pan1 =new JPanel();  pan1.setBorder(new TitledBorder(" pan1 "));
   JPanel pan2 =new JPanel();  pan2.setBorder(new TitledBorder(" pan2 "));
   JPanel pan3 =new JPanel();  pan3.setBorder(new TitledBorder(" pan3 "));
   JPanel pan4 =new JPanel();  pan4.setBorder(new TitledBorder(" pan4 "));
   JPanel pan5 =new JPanel();  pan5.setBorder(new TitledBorder(" pan5 "));
   JPanel pan6 =new JPanel();  pan6.setBorder(new TitledBorder(" pan6 "));
   JPanel pan7 =new JPanel();  pan7.setBorder(new TitledBorder(" pan7 "));
   JPanel pan8 =new JPanel();  pan8.setBorder(new TitledBorder(" pan8 "));
   JPanel pan9 =new JPanel();  pan9.setBorder(new TitledBorder(" pan9 "));
   JPanel pan10=new JPanel(); pan10.setBorder(new TitledBorder(" pan10 "));
 
  for (int i=0; i<x.length; i++)
      {
      c.gridx=x[i]; c.gridy=y[i];
      c.gridwidth=larg[i]; c.gridheight=haut[i];
      c.weightx=px[i]; c.weighty=py[i];
      switch(i)
        {
        case  0: contenu.add( pan1, c ); break;
        case  1: contenu.add( pan2, c ); break;
        case  2: contenu.add( pan3, c ); break;
        case  3: contenu.add( pan4, c ); break;
        case  4: contenu.add( pan5, c ); break;
        case  5: contenu.add( pan6, c ); break;
        case  6: contenu.add( pan7, c ); break;
        case  7: contenu.add( pan8, c ); break;
        case  8: contenu.add( pan9, c ); break;
        case  9: contenu.add(pan10, c ); break;
        }
      }
  }
}

Et je te mets également le schéma détaillé, que je fais habituellement sur papier (parce que sur Paint, c'est plus long !!).

Et bien sûr, au sein de chaque JPanel, libre à toi d'y adjoindre le layout que tu veux, pour imbriquer tout ça. Avec ce layout (selon moi le plus puissant des layouts), tu peux ainsi faire CE QUE TU VEUX comme interface, tout ça, en java natif.

C'est pas joli, le GridBagLayout ?
:D

18/05/2006, 10h42
nicotine002

Ok tout d'abord merci infiniement, je trouve tu fais vraiment du bon boulot sur le forum.
Le pire c'est que je comprend à peu prés le système, genre pour les px, 75 en largeur = 100% de la largeur de la frame, mais ce que je ne comprend pas c'est comment tu determine ces valeurs.
Tu te dis:"Bon la frame est divisée en 3 colonnes donc on dit 75 pour que une colonne ca fasse 25"?
Si c'est çà, je me demande bien à quoi servent larg et haut...
Enfin je comprend pas encore trés bien larg et haut je pense mais en tout case merci beaucoup pour ton travail.
Ps: une petite dernière:), pourquoi dans les abscisse,avoir un maximum de 3, 2 n'aurait pas suffit?
18/05/2006, 12h49
calogerogigante

Citation:

Envoyé par nicotine002

mais ce que je ne comprend pas c'est comment tu determine ces valeurs.

Je choisis ces valeurs tout à fait librement, simplement avec un peu de bon sens.
En réalité, il faut voir ça relativement.

Pour la largeur (cf. indications en bas de l'image), j'ai en effet choisi 20 + 20 + 20 + 15.

Mais j'aurais pu prendre 40 + 40 + 40 + 30.
Ou si je voulais 35 + 35 + 35 + 20 (autre possibilité, qui n'est pas rigoureusement identique aux 2 propositions précédentes du point de vue largeurs relatives entre les JPanels, mais qui pourrait aller tout aussi bien).

La largeur et la hauteur servent à indiquer sur combien de carrés (de ton quadrillage) ton composant s'étale.
Tout part de la mise en place d'un quadrillage intelligent.
Après, le travail restant, c'est juste du recopiage de position des composants et du nombre de cases que les composants couvrent (en largeur et en hauteur), et du recopiage de leur poids respectifs suivant les axes X et Y.

J'aurai pu faire un quadrillage avec beaucoup plus de carrés, le résultat aurait été le même, mais les valeurs affublées à chaque composant (ici des JPanels donc) auraient été alors différentes, car ces valeurs sont en relation directe avec ce quadrillage.

Si j'ai du temps, je te refairais le même exemple avec un quadrillage avec plus de carré.
"Mais pourquoi as-tu utilisé ca quadrillage là, alors ?" : me diras-tu ?
Simplement parce que c'est le quadrillage minimum qui me permet de tracer mes JPanels exactement comme tu l'as voulu.
(Et encore, si tu regardes bien ma proposition de quadrillage, ma proposition n'est pas minimaliste, car la ligne verticale n°2 n'est pas indispensable. Si j'avais décidé de ne pas mettre cette ligne-là dans mon quadrillage, il aurait suffit que je donne une largeur de 40 au composant pan6.)

Voir 40 message(s) de cette discussion en une page