[Débutant] Interfaces GUI sophistiquées

**calogerogigante** · 11/08/2005, 08h10

Bonjour,

Je me pose beaucoup de questions sur l'élaboration d'interfaces GUI assez sophistiquées en JAVA. (J'en ai besoin pour mon Travail de Fin d'Etudes).

De nombreux livres exposent les layouts, mais toujours avec des exemples simples... A tel point que je me suis demandé y'a quelques temps, si c'était vraiment efficace, java, pour faire des GUI de qualité...

Puis, je crois qu'en cherchant un peu, j'ai compris qu'il fallait s'ingénier à imbriquer les layouts... C'est ça ?

J'ai essayé un exemple personnel simple (inspiré à moitié d'un exemple du Delannoy):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
import javax.swing.*;
import java.awt.*;
 
class MaFenetre extends JFrame
{
public static int x[]   = { 0, 3, 3, 0, 0, 3};
public static int y[]   = { 0, 0, 1, 2, 3, 2};
public static int larg[]= { 3, 2, 2, 3, 3, 2};
public static int haut[]= { 2, 1, 1, 1, 1, 2};
public static int px[]  = {60,40, 0, 0, 0, 0};
public static int py[]  = { 0,25,25,25,25, 0};
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 MaFenetre()
  {
  setTitle("Exemple");
  setSize(1000,700);
  setDefaultCloseOperation(EXIT_ON_CLOSE);
  Container contenu = getContentPane();
  GridBagLayout g = new GridBagLayout();
  contenu.setLayout(g);
  GridBagConstraints c = new GridBagConstraints();
                     c.fill = c.BOTH ;
 
	  pan1=new JPanel();
	  pan1.setBackground(Color.blue);
	  pan2=new JPanel();
	  pan2.setBackground(Color.white);
	  pan3=new JPanel();
	  pan3.setBackground(Color.black);
	  pan4=new JPanel();
	  pan4.setBackground(Color.red);
	  pan5=new JPanel();
	  pan5.setBackground(Color.yellow);
	  pan6=new JPanel();
	  pan6.setBackground(Color.green);
 
  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];
	  if (i==0) contenu.add( pan1, c );
	  if (i==1) contenu.add( pan2, c );
	  if (i==2) contenu.add( pan3, c );
	  if (i==3) contenu.add( pan4, c );
	  if (i==4) contenu.add( pan5, c );
	  if (i==5) contenu.add( pan6, c );
      }
  }
}
 
 
public class GUI_complique_01
{
public static void main (String args[])
   {
   MaFenetre fen = new MaFenetre();
   fen.setVisible(true);
   }
}

Ma question est la suivante : est-ce comme cela qu'on fait de belles interfaces en java ? En imbriquant les layouts ? Et puis en traitant chaque panel à part ?

JBuilder m'avait enthousisamé au début, et puis je me rends compte que l'éditeur ne réagit pas toujours comme je le voudrais, alors j'essaie plutôt de me mettre à construire tout seul mes GUI, avec une feuille, une latte et un crayon d'abord, pour délimiter le GridBagLayout général du contentPane...

Si quelqu'un a un exemple de GUI compliquée à me montrer, je suis preneur...
;-)

**Gfx** · 11/08/2005, 08h22

Alors ça dépend de ton style en fait

Personnellement je n'utilise presque que des BorderLayout en imbriquant des JPanel. D'autres personnes, par exemple Richard Bair leader du projet SwingX, ne jurent que par le GridBagLayout. D'autres enfin préfèrent des layouts qui ne sont pas dans le JDK : FormLayout (http://www.jgoodies.com), TableLayout, etc.

Si tu veux un exemple de layouts imbriqués regarde sur mon blog avec cet exemple : http://www.jroller.com/page/gfx/20050328#packed_with_effects (le code source est dispo sur http://jext.free.fr/videosurveillance.zip)

Si tu veux un exemple de FormLayout, qui est excellent d'ailleurs, jette un oeil au code source de cet exemple : http://www.jroller.com/page/gfx/20050215#wait_with_style_in_swing

Si tu veux un exemple de mélange d'imbrication de layouts et de GridBagLayout (http://www.progx.org/users/Gfx/dropinmotion.png) télécharge ce code source : http://jext.free.fr/dropinmotion.zip

Si tu veux d'autres exemples ou que tu as des questions là dessus, n'hésite pas à me contacter

Si tu n'aimes pas coder les GUI à la main (ça fait beaucoup de "si" tout ça) je te conseille d'essayer Matisse qui est un GUI builder absolument génial pour Netbeans. J'en ai fait la démo à JavaOne pour construire cette interface :

Je n'aime pas utiliser des outils graphiques pour dessiner les GUI mais dans ce cas... si

**komando** · 11/08/2005, 08h44

Personellement, j'utilise le plus souvent les layout usuels du jdk mais jamis le gridbaglayout. il m'est arrivé d'utiliser d'autres layout tels que le sun.awt.VerticalBagLayout ou encore DialogLayout que j'ai trouvé dans un excellent livre sur swing

Je dessine toujours mes interfaces graphiques avec un crayon et je les analyse par la suite pour determiner les layout a utiliser et les nobre de jpanels nécessaires.

Java permet aussi d'obtenir des application avec des skin impressionnant grace aux look'n'feel (jgoodies, skinlf, .....)

**calogerogigante** · 11/08/2005, 08h51

Merci pour vos témoignages...
Intéressant tes blogs, Gfx, j'ai quelques exemples ainsi à regarder et tester... Et si possible à essayer de comprendre !! ;-)
(Impressionnant, le drop in motion...)

Je crois que la méthode de l'interface d'abord dessinée au crayon sur une feuille est la bonne, selon moi...

Je vais maintenant essayer de pousser plus loin mon exemple en essayant de faire une interface la plus détaillée possible pour encoder un client ou un fournisseur...

Je le mettrais à la suite de ce post pour avoir vos avis...
:-)

**Original Prankster** · 11/08/2005, 08h57

Après pas mal de difficultés j'ai réussi à me faire au GridBagLayout, et ne jure désormais que par ce dernier...

Je trouve son concept très puissant et surtout très maniable. En revanche je n'ai jamais testé l'imbrication de Layout...

**Gfx** · 11/08/2005, 08h57

Je te conseille de te procurer un bon bouquin sur le sujet. Je te conseille les bouquins que tu trouveras à cette adresse dans la catégorie Informatique / UI : http://www.progx.org/index.php?section=bookshelf

Dessiner l'UI sur papier est en effet une excellent technique. Consulte à ce sujet les articles de Karsten Lentzsch sur http://www.jgoodies.com

Tu peux aussi jeter un oeil aux PDF TS-3605 et TS-3603 dans le zip Desktop, English que tu trouveras après avoir cliqué sur le lien Download du paragraphe 2005 JavaOne Conference Presentations Now Available à l'adresse http://java.sun.com/javaone/

N'oublie pas que le layout, l'espacement, etc. est beaucoup plus important que l'aspect graphique de l'interface

**Regis.C** · 11/08/2005, 09h49

J'utilise aussi des Layout imbriqués.

Par contre j'ai tenté d'utiliser des L&F téléchargé sur le net, et je n'y suis jamais arrivé !
Quelle est la procédure pour changer le L&F d'une appli ?
Où placer les fichiers téléchargés ?
(pour info je travaille sous Eclipse).

**Gfx** · 11/08/2005, 09h51

Tu rajoutes le JAR dans ton projet, et ensuite tu rajoutes le JAR au Build Path (avec un bête clic droit sur le JAR).

Pour activer le look and feel dans le code il faut taper ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
try {
  UIManager.setLookAndFeel("nom.complet.du.look.and.feel");
} catch (Exception e) { }

Cela peut varier suivant les look and feels mais ça marchera dans la majorité des cas.

**Regis.C** · 11/08/2005, 10h10

http://www.developpez.net/forums/vie...ight=look+feel

**seiryujay** · 11/08/2005, 10h12

La démo de Matisse est assez impressionante : ça a l'air super simple d'utilisation...
Par contre, c'est dispo juste sur NetBeans, ou il existe une version utilisable sous Eclipse?

**Gfx** · 11/08/2005, 10h18

Ce n'est que pour NetBeans et ce n'est pas encore finalisé. Cela dit je confirme que c'est très facile à utiliser et surtout ça bénéficie de l'alignement sur les baselines du texte.

**calogerogigante** · 11/08/2005, 12h32

Bon, voici encore un test:

J'ai peiné un peu pour avoir ça, mais je suis assez content de moi :

Je donne mon code pour les autres débutants que ça intéresse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
import javax.swing.*;
import javax.swing.border.*;
import java.awt.*;
 
class MaFenetre extends JFrame
{
public static int A_x[]   = {  0, 1, 1, 1};
public static int A_y[]   = {  0, 0, 1, 2};
public static int A_larg[]= {  1, 1, 1, 1};
public static int A_haut[]= {  3, 1, 1, 1};
public static int A_px[]  = { 12,88, 0, 0};
public static int A_py[]  = {  0,46,46, 8};
 
//                            JLabel-------------  JTextField---------  Ch--- JLabBidon----
public static int B_x[]   = { 1, 4, 7, 1, 1, 5, 6, 2, 6, 8, 2, 2, 7, 7, 1, 3, 0, 4, 3, 5, 9};
public static int B_y[]   = { 1, 1, 1, 3, 5, 5, 7, 1, 1, 1, 3, 5, 5, 7, 7, 7, 0, 2, 4, 6, 8};
public static int B_larg[]= { 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 7, 3, 2, 2, 2, 3, 1, 1, 1, 1, 1};
public static int B_haut[]= { 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1};
public static int B_px[]  = {11,22,11,11,11,22,11,22,11,11,77,33,22,22,22,33, 6,11,11,11, 6};
public static int B_py[]  = {11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12};
 
public JPanel pan1;
public JPanel pan2;
public JPanel pan3;
public JPanel pan4;
 
public JButton pan1_but1;
public JButton pan1_but2;
public JButton pan1_but3;
 
public JTable jtable;
 
public JLabel pan3_lab1;
public JLabel pan3_lab2;
public JLabel pan3_lab3;
public JLabel pan3_lab4;
public JLabel pan3_lab5;
public JLabel pan3_lab6;
public JLabel pan3_lab7;
 
public JLabel pan3_bidon1;
public JLabel pan3_bidon2;
public JLabel pan3_bidon3;
public JLabel pan3_bidon4;
public JLabel pan3_bidon5;
 
public JTextField pan3_txt1;
public JTextField pan3_txt2;
public JTextField pan3_txt3;
public JTextField pan3_txt4;
public JTextField pan3_txt5;
public JTextField pan3_txt6;
public JTextField pan3_txt7;
 
public JCheckBox pan3_ch1;
public JCheckBox pan3_ch2;
 
public JButton pan4_but1;
public JButton pan4_but2;
public JButton pan4_but3;
public JButton pan4_but4;
 
public MaFenetre()
  {
  // Mise en place des 4 premiers grands PANELS : etape A)
  setTitle("Exemple n°2");
  setSize(1000,700);
  setDefaultCloseOperation(EXIT_ON_CLOSE);
  Container contenu = getContentPane();
  GridBagLayout gA = new GridBagLayout();
  contenu.setLayout(gA);
  GridBagConstraints c = new GridBagConstraints();
                     c.fill = c.BOTH ;
 
     pan1=new JPanel(); // pan1.setBackground(Color.blue);
	  // Dimension dim = new Dimension(100,700); pan1.setMaximumSize(dim);
     pan2=new JPanel(); // pan2.setBackground(Color.yellow);
     pan3=new JPanel(); // pan3.setBackground(Color.green);
	  pan3.setBorder(new TitledBorder("Données de l'externe"));
     pan4=new JPanel(); // pan4.setBackground(Color.red);
 
  for (int i=0; i < A_x.length; i++)
      {
      c.gridx = A_x[i]; c.gridy = A_y[i];
      c.gridwidth = A_larg[i]; c.gridheight = A_haut[i];
      c.weightx = A_px[i]; c.weighty = A_py[i];
      if (i==0) contenu.add( pan1, c );
      if (i==1) contenu.add( pan2, c );
      if (i==2) contenu.add( pan3, c );
      if (i==3) contenu.add( pan4, c );
      }
  // étape B) élaboration du pan1
  Box gB = Box.createVerticalBox();
  pan1.add(gB);
  pan1_but1 = new JButton("Liste des clients");
  gB.add(pan1_but1);
  pan1_but2 = new JButton("Liste des fournisseurs");
  gB.add(pan1_but2);
  pan1_but3 = new JButton("Nouvel externe");
  gB.add(pan1_but3);
 
  // étape C) élaboration du pan2
  pan2.setLayout(new BorderLayout());
  jtable=new JTable(60,6);
  JScrollPane defil=new JScrollPane(jtable);
  pan2.add(defil,BorderLayout.CENTER);
 
  // étape D) élaboration du pan3:
  GridBagLayout gD = new GridBagLayout();
  pan3.setLayout(gD);
                     c.fill = c.BOTH ;
  pan3_lab1 = new JLabel("Nom");
  pan3_lab2 = new JLabel("Prénom");
  pan3_lab3 = new JLabel("Age");
  pan3_lab4 = new JLabel("Adresse");
  pan3_lab5 = new JLabel("Ville");
  pan3_lab6 = new JLabel("Code Postal");
  pan3_lab7 = new JLabel("Tél");
 
  for (int i=0; i <= 6; i++)
      {
      c.gridx = B_x[i]; c.gridy = B_y[i];
      c.gridwidth = B_larg[i]; c.gridheight = B_haut[i];
      c.weightx = B_px[i]; c.weighty = B_py[i];
      if (i==0) pan3.add( pan3_lab1, c );
      if (i==1) pan3.add( pan3_lab2, c );
      if (i==2) pan3.add( pan3_lab3, c );
      if (i==3) pan3.add( pan3_lab4, c );
		if (i==4) pan3.add( pan3_lab5, c );
		if (i==5) pan3.add( pan3_lab6, c );
		if (i==6) pan3.add( pan3_lab7, c );
      }
  pan3_txt1=new JTextField("vide 1");
  pan3_txt2=new JTextField("vide 2");
  pan3_txt3=new JTextField("vide 3");
  pan3_txt4=new JTextField("vide 4");
  pan3_txt5=new JTextField("vide 5");
  pan3_txt6=new JTextField("vide 6");
  pan3_txt7=new JTextField("vide 7");
 
  for (int i=7; i <=13; i++)
      {
      c.gridx = B_x[i]; c.gridy = B_y[i];
      c.gridwidth = B_larg[i]; c.gridheight = B_haut[i];
      c.weightx = B_px[i]; c.weighty = B_py[i];
      if (i== 7) pan3.add( pan3_txt1, c );
      if (i== 8) pan3.add( pan3_txt2, c );
      if (i== 9) pan3.add( pan3_txt3, c );
      if (i==10) pan3.add( pan3_txt4, c );
		if (i==11) pan3.add( pan3_txt5, c );
		if (i==12) pan3.add( pan3_txt6, c );
		if (i==13) pan3.add( pan3_txt7, c );
      }
  pan3_ch1=new JCheckBox("Client");
  pan3_ch2=new JCheckBox("Fournisseur");
 
  for (int i=14; i <=15; i++)
      {
      c.gridx = B_x[i]; c.gridy = B_y[i];
      c.gridwidth = B_larg[i]; c.gridheight = B_haut[i];
      c.weightx = B_px[i]; c.weighty = B_py[i];
		if (i==14) pan3.add( pan3_ch1, c );
		if (i==15) pan3.add( pan3_ch2, c );
      }
 
  pan3_bidon1 = new JLabel(" ");
  pan3_bidon2 = new JLabel(" ");
  pan3_bidon3 = new JLabel(" ");
  pan3_bidon4 = new JLabel(" ");
  pan3_bidon5 = new JLabel(" ");
 
  for (int i=16; i <=20; i++)
      {
      c.gridx = B_x[i]; c.gridy = B_y[i];
      c.gridwidth = B_larg[i]; c.gridheight = B_haut[i];
      c.weightx = B_px[i]; c.weighty = B_py[i];
		if (i==16) pan3.add( pan3_bidon1, c );
		if (i==17) pan3.add( pan3_bidon2, c );
		if (i==18) pan3.add( pan3_bidon3, c );
		if (i==19) pan3.add( pan3_bidon4, c );
		if (i==20) pan3.add( pan3_bidon5, c );
      }
 
  // étape E) élaboration du pan4:
  FlowLayout pan4_fl = new FlowLayout(FlowLayout.CENTER);
  pan4_fl.setHgap(50);
  pan4.setLayout(pan4_fl);
  pan4_but1=new JButton("Précédent");
  pan4_but2=new JButton("Suivant");
  pan4_but3=new JButton("Valider");
  pan4_but4=new JButton("Annuler");
  pan4.add(pan4_but1);
  pan4.add(pan4_but2);
  pan4.add(pan4_but3);
  pan4.add(pan4_but4);
  }
}
 
 
public class GUI_complique_02
{
public static void main (String args[])
   {
   MaFenetre fen = new MaFenetre();
   fen.setVisible(true);
   }
}

J'ai deux nouvelles questions :

Malgré mon utilisation de GridBagLayout, et toutes les bonnes
proportions que j'ai bien noté correctement, quand je retaille ma
fenêtre, les poids relatifs des différentes largeurs et longueurs
des différents panels ne sont pas toujours respectés... C'est un
peu embêtant...

Comment donner la même longueur à mes 3 boutons en haut à gauche,
et à mes quatres boutons en bas ?

**Regis.C** · 11/08/2005, 12h36

...Et comment tu fais pour avoir ce genre d'affichage pour les boutons ???
C'est un Look&Feel différent ?

Comment qu'on faaaaiiiiiiit ??!!!!

**Gfx** · 11/08/2005, 12h39

Pour leur donner la même largeur, utilise setPreferredSize() sur chacun d'entre eux.

Pour ton problème de poids je répondrais bien mais ton code est trop compliqué pour moi à cette heure là

Note que ta façon de faire est heu... surprenante. Tes boucles notamment sont plutôt étranges. Mais bon ça vient forcément de la manière dont tu utilises GridBagLayout. Je te déconseille de commencer la création de GUI avec lui car il est difficile à maîtriser.

**Gfx** · 11/08/2005, 12h40

Regis : c'est le thème Ocean installé par défaut avec J2SE 1.5.

**Regis.C** · 11/08/2005, 12h42

Envoyé par Gfx

Regis : c'est le thème Ocean installé par défaut avec J2SE 1.5.

Les boules !!!

**calogerogigante** · 11/08/2005, 12h47

Gfx : tu as tout à fait raison !!

Mon code est vraiment cochonné ici, et vraiment pas optimisé...

Mais c'est parce que je me concentre sur le mécanisme de GridBagLayout et autres layouts...

Dans une application qui porte bien son nom, je ne programmerais jamais de cette façon, je te rassure !!!
;-)

Le design des composants est celui par défaut du JRE 5, si je ne me trompe pas ?

J'ai SDK 1.4.2.08 et JRE 5 sur ma bécane.

**Gfx** · 11/08/2005, 12h55

Oui c'est bien le design par défaut du JRE 5. Bon je retire ce que j'ai dit si tu as fait ça consciemment. Puis-je te suggérer, pour la prochaine étape, d'obtenir un meilleur alignement et des espacements plus consistants entre les composants ?

**calogerogigante** · 11/08/2005, 13h02

Je ne demande qu'à savoir comment on fait !!!!
;-) ;-) ;-) ;-)

Le SetPreferredSize, cela ne marche pas...
Mes buttons sont toujours pas de la même longueur...

J'ai fait ça pour voir, avec setSize et aussi avec setPreferredSize :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
  // étape B) élaboration du pan1
  Box gB = Box.createVerticalBox();
  pan1.add(gB);
  pan1_but1 = new JButton("Liste des clients"); pan1_but1.setSize(new Dimension(500,30));
  gB.add(pan1_but1);
  pan1_but2 = new JButton("Liste des fournisseurs"); pan1_but2.setSize(new Dimension(500,30));
  gB.add(pan1_but2);
  pan1_but3 = new JButton("Nouvel externe"); pan1_but3.setSize(new Dimension(500,30));
  gB.add(pan1_but3);

L'affichage est toujours pareil à mon screenshot ????

**Gfx** · 11/08/2005, 13h06

Tu as bien essayé avec setPreferredSize() ? Si cela ne marche pas c'est que le conteneur Box ne le prend pas en compte, ce qui ne m'étonnerait guère. Essaye de remplacer ta Box par un GridBagLayout. Dans un des exemples dont j'ai donné l'URL au début (le Drop In Motion) je change la preferred size des boutons pour qu'ils aient la même largeur.

[Débutant] Interfaces GUI sophistiquées

Interfaces Graphiques en Java

Discussions similaires

Partager

Partager