[GridLayout][GridData]

Version imprimable

Bonjour à tous,

J'ai du mal à comprendre les GridData pour la mise en page de mes Widgets.

Le problème vient du placement de mes Composite. Je m'explique:

voici tout d'abord un bout de code
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 void init() { layout = new GridLayout(); layout.numColumns=2; display = new Display(); shell = new Shell(display); dimension = Toolkit.getDefaultToolkit().getScreenSize(); shell.setSize(dimension.width,dimension.height); shell.setText("PDG"); shell.setLayout(layout); fBoutons = new BoutonsPanel(this); contraintes = new GridData(GridData.FILL_BOTH ); contraintes.horizontalSpan = 1; fBoutons.panel.setLayoutData(contraintes); fPrincipale = new PrincipalePanel(this); contraintes = new GridData(GridData.VERTICAL_ALIGN_FILL); contraintes.horizontalSpan =1; contraintes.verticalSpan = 2; fPrincipale.panel.setLayoutData(contraintes); fOptions = new OptionsPanel(this); contraintes = new GridData(GridData.FILL_BOTH); contraintes.horizontalSpan = 1; fOptions.panel.setLayoutData(contraintes); openShell();
et voici le shell

shell

Le problème est que je voudrais que cela fasse l'inverse c'est à dire que le Composite de droite prenne les 3/4 du shell.

Merci

Ps: J'ai essayé en augmentant le nombre de colonnes mais cela ne change rien du tout.

30/07/2003, 18h04
jIdJo

Tu ne pas utiliser un système de poids comme en swing (cf thread précédent).
Ce qui m'étonne dans l'image que tu as jointe c'est que tes "panels" remplissent la totalité de l'écran. Ce n'est pas normal vu le code que tu viens de donner.

Que ce passe t-il quand tu agrandis ta fenêtre ?
30/07/2003, 18h42
Stessy

Citation:

Envoyé par jIdJo

Que ce passe t-il quand tu agrandis ta fenêtre ?

C'est l'image de ma frame agrandie qui est visible sur le lien.

Citation:

Envoyé par jIdJo

Ce qui m'étonne dans l'image que tu as jointe c'est que tes "panels" remplissent la totalité de l'écran. Ce n'est pas normal vu le code que tu viens de donner.

Pourquoi dis-tu ça?

Ok,

Ma remarque sur le fait que l'image n'était pas correcte était fausse et je comprend pourquoi je n'aimais pas l'utilisation du constructeur de GridData avec les paramètres (merci Stessy). Je pense d'ailleurs que tu as eu la même interprétation que moi et voici l'explication.

Pour moi les codes suivants étaientt équivalent :
Code:

1 2 GridData constraint = new GridData(GridData.FILL_BOTH);
ou
Code:

1 2 3 4 GridData constraint = new GridData(); constraint.horizontalAlignment = GridData.FILL; constraint.verticalAlignment = GridData.FILL;
Et quand on met FILL en horizontal ou en vertical cela signifie juste que le composant prendra toute la place de la cellule. Mais pour autant la cellule ne s'agrandira pas quand la fenêtre sera retaillé. Donc la notion de FILL est valable par rapport aux autres composant.

Par exemple 2 boutons de largeurs différentes :
Code:

1 2 3 4 5 6 7 8 Largeur du shell |-------------------------------------------------| |---------------| |---------------| |---------------------------| |---------------------------|
Si pour le bouton1 tu spécifies horizontalAlignment = GridData.FILL cela donnera :
Code:

1 2 3 4 5 6 7 8 Largeur du shell |-------------------------------------------------| |---------------------------| |---------------------------| |---------------------------| |---------------------------|
Mais pour autant les cellules ne prendront pas toutes la place disponible.

Le fait de vouloir qu'une cellule s'agrandise en fonction de la place disponible se fait par grabExcessHorizontalSpace et grabExcessVerticalSpace. Dans l'example précédent si tu mets grabExcessHorizontalSpace = true sur le bouton1 cela donnera
Code:

1 2 3 4 5 6 7 8 Largeur du shell |-------------------------------------------------| |-------------------------------------------------| |-------------------------------------------------| |---------------------------| |---------------------------|
Si tu l'avais fait sur le bouton2 et que le bouton1 était en FILL alors ils auraient tous les 2 fait la largeur du shell.

Maintenant l'erreur :
En fait FILL_BOTH = FILL_VERTICAL + FILL_HORIZONTAL. Jusque là on peut se dire que c'est tel que l'on le pensait, mais NON.

Car FILL_HORIZONTAL de veut pas dire FILL sur horizontalAlignment mais HORIZONTAL_ALIGN_FILL (équivalent de FILL mais comme cela est passé au constructeur cela fait la différence entre horizontal et vertical) et GRAB_HORIZONTAL sur grabExcessHorizontalSpace.

Donc ton code dit ceci :

Le panel de bouton fait 1 cellule x 1 cellule, prend toute la place de la cellule et prend de la place disponible dans le container si c'est possible. Même chose pour le panel des options. Par contre le panel principal fait 1 cellule x 2 cellules prend toutes la place disponible dans la cellule. Comme le grab est sur bouton et options c'est normal que ce soit eux qui prenne le maximum de place.

Donc je te conseille de :

1- Ne plus utiliser le constructeur de GridData ou l'on passe des paramètres car c'est sujet à mauvaise interprétation (à mon avis)

2- De mettre pour chaque panel, FILL (en horizontal et vertical)

3- De ne mettre du grab que sur les panels dont tu veux qu'ils prennent de la place au fur et à mesure de l'agrandissement de la fenêtre.
Tips : si tu ne mets du grab (H et V) que sur la fenêtre principale, puisque boutons et options sont en FILL mais que options est la dernière dans la 1ère colonne c'est cette dernière qui devrait voir sa hauteur augmenter. Si tu veux que cela soit l'inverse il faut mettre du grab vertical sur boutons.

T'as lu jusque là ? Cool...

Bonne continuation, si cela ne marche pas n'hésite pas.

merci de ta réponse et de ton courage pour écrire un prose pareille :lol:

Voilà comment j'ai fait pour arriver à mes fins.

Dis-moi ce que tu en penses
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 void init() { layout = new GridLayout(); layout.numColumns=10; layout.makeColumnsEqualWidth = true; display = new Display(); shell = new Shell(display); dimension = Toolkit.getDefaultToolkit().getScreenSize(); shell.setSize(dimension.width,dimension.height); shell.setText("PDG"); shell.setLayout(layout); fBoutons = new BoutonsPanel(this); contraintes = new GridData(GridData.FILL_HORIZONTAL | GridData.FILL_VERTICAL); contraintes.horizontalSpan =2; contraintes.verticalSpan = 1; fBoutons.panel.setLayoutData(contraintes); fPrincipale = new PrincipalePanel(this); contraintes = new GridData(GridData.FILL_HORIZONTAL | GridData.FILL_VERTICAL); contraintes.horizontalSpan =8; contraintes.verticalSpan = 2; fPrincipale.panel.setLayoutData(contraintes); fOptions = new OptionsPanel(this); contraintes = new GridData(GridData.FILL_HORIZONTAL | GridData.FILL_VERTICAL); contraintes.horizontalSpan = 2; fOptions.panel.setLayoutData(contraintes); openShell(); }
En fait j'ai rajouté la méthode

Code:

layout.makeColumnsEqualWidth = true;

pour permettre de faire un peu tout ce que l'on veut sur la largeur des colonnes.

En fait je me casse la tête depuis ce matin et j'ai enfin plus ou moins compris les pseudo-contraintes du GridData.
Je me suis amusé un peu avec toutes les options possibles et imaginables.
Rien de tel pour comprendre un truc.

J'ai trouvé quelques tutos sur les widgets et les layouts qui sont pas mals.

Si cela t'interesse:

http://www.cs.umanitoba.ca/~eclipse/

Voilà

En tout cas un grand merci et à charge de revanche :wink:

Sauf si tu as vraiment besoin d'avoir ta 1ère colonne qui bouge aussi en fonction de la largeur de ton shell, moi je l'aurais fait à taille fixe.

Voici 2 codes.
- Le 1er à la principale qui prend de la place dans les 2 sens avec aussi les options qui prend de la place en verticale.
- Le 2ème c'est la même chose sauf que c'est les boutons et non les options qui prend de la place en verticale

Code1

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
 
		// Set the shell's GridLayout
		GridLayout layout = new GridLayout();
		layout.numColumns = 2;
		shell.setLayout(layout);
 
 
		GridData constraint;
 
		//-------- Buttons composite		
		Composite buttonsComposite = new Composite(shell, SWT.NONE);		
		buttonsComposite.setBackground(new Color(null, 255, 0, 0));
		constraint = new GridData();
		constraint.verticalAlignment = GridData.FILL;
		constraint.horizontalAlignment = GridData.FILL;
		buttonsComposite.setLayoutData(constraint);
 
		//-------- Main composite		
		Composite mainComposite = new Composite(shell, SWT.NONE);		
		mainComposite.setBackground(new Color(null, 0, 255, 0));
		constraint = new GridData();
		constraint.horizontalAlignment = GridData.FILL;
		constraint.verticalAlignment = GridData.FILL;
		constraint.grabExcessHorizontalSpace = true;
		constraint.verticalSpan = 2;
		mainComposite.setLayoutData(constraint);
 
		//-------- Options composite		
		Composite optionComposite = new Composite(shell, SWT.NONE);		
		optionComposite.setBackground(new Color(null, 0, 0, 255));
		constraint = new GridData();
		constraint.verticalAlignment = GridData.FILL;
		constraint.horizontalAlignment = GridData.FILL;
		constraint.grabExcessVerticalSpace = true; 
		constraint.horizontalSpan = 1;
		optionComposite.setLayoutData(constraint);

Code2

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
 
		// Set the shell's GridLayout
		GridLayout layout = new GridLayout();
		layout.numColumns = 2;
		shell.setLayout(layout);
 
 
		GridData constraint;
 
		//-------- Buttons composite		
		Composite buttonsComposite = new Composite(shell, SWT.NONE);		
		buttonsComposite.setBackground(new Color(null, 255, 0, 0));
		constraint = new GridData();
		constraint.verticalAlignment = GridData.FILL;
		constraint.grabExcessVerticalSpace = true; 
		constraint.horizontalAlignment = GridData.FILL;
		buttonsComposite.setLayoutData(constraint);
 
		//-------- Main composite		
		Composite mainComposite = new Composite(shell, SWT.NONE);		
		mainComposite.setBackground(new Color(null, 0, 255, 0));
		constraint = new GridData();
		constraint.horizontalAlignment = GridData.FILL;
		constraint.verticalAlignment = GridData.FILL;
		constraint.grabExcessHorizontalSpace = true;
		constraint.verticalSpan = 2;
		mainComposite.setLayoutData(constraint);
 
		//-------- Options composite		
		Composite optionComposite = new Composite(shell, SWT.NONE);		
		optionComposite.setBackground(new Color(null, 0, 0, 255));
		constraint = new GridData();
		constraint.verticalAlignment = GridData.FILL;
		constraint.horizontalAlignment = GridData.FILL;
		constraint.horizontalSpan = 1;
		optionComposite.setLayoutData(constraint);

Dans les 2 cas ce qui est intérressant c'est que le principale a juste le grab sur l'horizontal, mais surtout pas en verticale. Il est bien sur en FILL dans les 2 sens.
Du coup il suffit de placer le grab vertical sur les boutons, sur les options ou sur les 2 deux pour déterminer lesquels s'agrandiront.

Maintenant tu peux aussi écrire ton propre layout qui gère un système de poids comme dans le GridBagLayout de Swing.

Si boutons et options ne contiennent pas des composants de type Tree ou Field (enfin des composants ou il est intérressant d'en voir plus quand la fenêtre s'agrandit), je ne vois pas l'intérêt qu'ils s'agrandissent.

31/07/2003, 17h48
Stessy

ok, je vais regarder avec ces 2 codes lequel me plaît le mieux et je te tiens au courant.

Merci
01/08/2003, 18h28
Stessy

Bon alors, ce qui ne me sied pas c'est que tes constructions redimensionnent un seul composite mais ce que j'aimerais c'est que les composites aient la même hauteur.

Je parle des buttonsComposite et optionsComposite.

En plus le Composite principal prend trop de place par rapport au x 2 autres.

Mais cette approche est la bonne.

Citation:

Bon alors, ce qui ne me sied pas c'est que tes constructions redimensionnent un seul composite mais ce que j'aimerais c'est que les composites aient la même hauteur.

Je viens de résoudre le problème en ajoutant au deuxième composite

Code:

constraint.grabExcessVerticalSpace = true;

Ps : flashantes tes couleurs, j'ai failli devenir aveugle :lol:

Bon maintenant comment faire pour diminuer un peu la taille de la principale?

En ajoutant des pseudo-contraintes?
01/08/2003, 21h37
jIdJo

C'est vrai les couleurs sont flash. Au moins on les voient bien...

Pour redimensionner "b" et "o" (j'abrège), je vois 2 solutions (y en a peut être d'autres) :

1- La largeur de "b" et "o" (identiques puisque les 2 en FILL) sera déterminée par le composant le plus large que tu mettras dans "b" ou "o". Donc tu peux laisser comme ca et cela s'adaptera automatiquement. Par exemple si 1 de tes panels contient un PropertySheet qui fait 100 pixels de large alors "b" et "o" feront 100 pixels de large.

2- Tu peux utiliser "widthHint" sur un des 2 panels. Perso je ne l'ai jamais utilisé mais cela permet apparemment de donner une notion taille préférée. Si tu l'essaies je veux avoir un retour d'experience.

Mais suivant ce que tu désires mettre réellement dans ton shell, il y a un des GridData plus complexe (avec plus d'emplacements) à concevoir et qui répondrait mieux à ton problème !
Peux tu me donner un petit dessin de ce que aimerais avoir dans ton shell ?
04/08/2003, 15h01
Stessy

Shell

Voilà plus ou moins ce que je veux mais en ajoutant deux Composites sur la gauche avec les boutons généraux et les boutons options
05/08/2003, 01h20
jIdJo

Ce que tu appelles les boutons généraux et les boutons options sont présents dans l'image de ton shell ?

Autre question plutôt importante : fais tu une application SWT ou un plugin pour Eclipse ?
05/08/2003, 12h24
Stessy

Citation:

Envoyé par jIdJo

Ce que tu appelles les boutons généraux et les boutons options sont présents dans l'image de ton shell ?

Non en fait les composites boutons et options doivent être rajoutés sur la gauche des autres composites présents sur l'image du lien, mais sur le même shell, donc agrandir la taille du shell sans pour antant augmenter la taille des composite présents sur le lien

Citation:

Envoyé par jIdJo

Autre question plutôt importante : fais tu une application SWT ou un plugin pour Eclipse ?

Je crée simplement une application SWT pour un projet.

J'ai mis sur le lien un schéma général de ce que je voudrais:

1er composite: composite des boutons(Client,Fournisseur, Projet,Articles,..)

2è composite : composite comprenant des renseignements tels que num client, son nom,.... mais dans ce composite les widgets changeront en fonction du bouton sélectionné

3è composite (en dessous du composite boutons) : composite comprenant les options telles que créer un client, créer un projet pour un client choisi ,... . Ce composite changera de widgets également lorsqu'un bouton sera sélectionné

4è composite : Composite de saisie qui contiendra un TabFolder avec des TabItem et des Composites en fonction toujours du bouton sélectionné et de l'option choisie

5è composite (1er composite qui prend toute la largeur du shell) : Composite de recherche qui contiendra différents widgets en fonction du bouton

6è composite : Composite contenant des tables différentes en fonction du bouton

7è composite : Composite contenant les boutons pour enregistrer, modifier, imprimer,quitter,.....

A noter que les composite 1 et 3 doivent être de la même hauteur.

Voilà en gros ce que je veux faire.

Voilà grosso modo ce que j'ai fait et qui correspond à ce que "grosso modo" tu souhaites.

NB : Je n'ai pu réussir à utiliser un seul GridLayout car le (1) prend 2 cellules verticales ainsi que le (4), le tout avec une cellule verticale commune (au milieu) : ce qui est impossible (le (4) ne peut faire qu'une cellule verticale). Donc j'ai mis les composites buttons et options dans un composite btnContainer.

Les couleurs sont toujours hyper flashi ....

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
		// Set the shell's layout
		GridLayout layout = new GridLayout();
		layout.numColumns = 2;
		shell.setLayout(layout);
 
 
		//-----------------------------------------------------------------------------------------
		// Note : For all composite, you can specify a heighHint (or widthHint)
		// It's especially useful for composite which use grabExcessVerticalSpace 
		// (or grabExcessHorizontalSpace) to avoid a very small height 
		// (or width) when reducing the shell.
		//-----------------------------------------------------------------------------------------
 
		GridData constraint;
 
		//-------- Buttons composite container
		Composite btnContainer = new Composite(shell, SWT.NONE);
		btnContainer.setBackground(new Color(null, 0, 0, 255));
		constraint = new GridData();
		constraint.verticalSpan = 2;
		constraint.verticalAlignment = GridData.FILL;
		constraint.horizontalAlignment = GridData.FILL;
		btnContainer.setLayoutData(constraint);
 
 
		// Set the btnContainer's layout
		GridLayout btnLayout = new GridLayout();
		btnLayout.numColumns = 1;
		btnContainer.setLayout(btnLayout);
 
		//================== Composite in btnContainer =================
		//-------- Buttons composite		
		Composite btnComposite = new Composite(btnContainer, SWT.NONE);
		btnComposite.setBackground(new Color(null, 127, 127, 0));
		constraint = new GridData();
		constraint.grabExcessVerticalSpace = true;
		constraint.verticalAlignment = GridData.FILL;
		constraint.horizontalAlignment = GridData.FILL;
		btnComposite.setLayoutData(constraint);
 
		//-------- Options composite		
		Composite optComposite = new Composite(btnContainer, SWT.NONE);		
		optComposite.setBackground(new Color(null, 0, 127, 127));
		constraint = new GridData();
		constraint.grabExcessVerticalSpace = true;
		constraint.verticalAlignment = GridData.FILL;
		constraint.horizontalAlignment = GridData.FILL;
		optComposite.setLayoutData(constraint);
  		//================== Composite in btnContainer =================
 
 
 
		//-------- Header composite		
		Composite headComposite = new Composite(shell, SWT.NONE);		
		headComposite.setBackground(new Color(null, 0, 255, 0));
		constraint = new GridData();
		constraint.verticalAlignment = GridData.FILL;
		constraint.horizontalAlignment = GridData.FILL;
		// Don't need to grab horizontal : done by editComposite
		headComposite.setLayoutData(constraint);
 
		//-------- Editor composite		
		Composite editComposite = new Composite(shell, SWT.NONE);		
		editComposite.setBackground(new Color(null, 0, 255, 255));
		constraint = new GridData();
		constraint.grabExcessVerticalSpace = true;
		constraint.verticalAlignment = GridData.FILL;
		constraint.grabExcessHorizontalSpace = true;
		constraint.horizontalAlignment = GridData.FILL;
		editComposite.setLayoutData(constraint);
 
		//-------- Search composite		
		Composite searchComposite = new Composite(shell, SWT.NONE);
		searchComposite.setBackground(new Color(null, 255, 0, 0));
		constraint = new GridData();
		constraint.verticalAlignment = GridData.FILL;
		constraint.horizontalSpan = 2;
		// Don't need horizontal grab : done by editComposite
		constraint.horizontalAlignment = GridData.FILL;
		searchComposite.setLayoutData(constraint);
 
		//-------- Table composite		
		Composite tableComposite = new Composite(shell, SWT.NONE);
		tableComposite.setBackground(new Color(null, 255, 0, 255));
		constraint = new GridData();
		constraint.grabExcessVerticalSpace = true;
		constraint.verticalAlignment = GridData.FILL;
		constraint.horizontalSpan = 2;
		// Don't need horizontal grab : done by editComposite
		constraint.horizontalAlignment = GridData.FILL;
		tableComposite.setLayoutData(constraint);
 
		//-------- Footer composite		
		Composite footerComposite = new Composite(shell, SWT.NONE);
		footerComposite.setBackground(new Color(null, 255, 255, 0));
		constraint = new GridData();
		constraint.verticalAlignment = GridData.FILL;
		constraint.horizontalSpan = 2;
		// Don't need horizontal grab : done by editComposite
		constraint.horizontalAlignment = GridData.FILL;
		footerComposite.setLayoutData(constraint);

06/08/2003, 16h22
Stessy

alors là chapeau :ccool:

:merci: