Interface utilisateur avec GridBagLayout

Version imprimable

Bonjour,

Je me débrouille assez bien en programmation, mais je suis franchement nulle pour les interfaces utilisateurs. Cette fois j'ai essayé d'utiliser GridBagLayout, mais comme d'hab je galère. Voilà mon résultat:

http://zepload.com/images/1279611103_Prog.jpg

Voilà le 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
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
JFrame frame = new JFrame("Info_Iphone");
        frame.setSize(550, 250);
        frame.setLocationRelativeTo(null);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JLabel consigne1 = new JLabel("Entrez les chemins d'accès vers les fichiers à traiter.");
        JLabel consigne2 = new JLabel("Si vous ne souhaitez pas traiter Safari ou Google Maps, laissez vide le champs en question.");
        consigne1.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        consigne2.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        JLabel consigneSafari = new JLabel("Safari :      ");
        JTextField cheminSafari = new JTextField();
        JLabel consigneGoogleMaps = new JLabel("Google Maps :      ");
        JTextField cheminGoogleMaps = new JTextField();
        JButton go = new JButton("Lancer le traitement");
        go.setSize(200, 50);
        go.addActionListener(new MyActionListener());
        frame.setVisible(true);
 
        Container contenuFenêtre = frame.getContentPane();
        GridBagLayout disposition = new GridBagLayout();
        contenuFenêtre.setLayout(disposition);
        //Composant étiquette "consigne1"
        GridBagConstraints contr1 = new GridBagConstraints();
        contr1.gridx = 0;
        contr1.gridy = 0;
        contr1.gridheight = 2;
        contr1.gridwidth = 3;
        contr1.fill = GridBagConstraints.BOTH;
        contr1.weightx = 1.0;
        contr1.weighty = 1.0;
        contr1.anchor = GridBagConstraints.CENTER;
        disposition.setConstraints(consigne1, contr1);
        contenuFenêtre.add(consigne1);
        //Composant étiquette "consigne2"
        GridBagConstraints contr2 = new GridBagConstraints();
        contr2.gridx = 0;
        contr2.gridy = 50;
        contr2.gridheight = 2;
        contr2.gridwidth = 3;
        contr2.fill = GridBagConstraints.BOTH;
        contr2.weightx = 1.0;
        contr2.weighty = 1.0;
        contr2.anchor = GridBagConstraints.CENTER;
        disposition.setConstraints(consigne2, contr2);
        contenuFenêtre.add(consigne2);
        //Composant étiquette "consigneSafari"
        GridBagConstraints contr3 = new GridBagConstraints();
        contr3.gridx = 0;
        contr3.gridy = 100;
        contr3.gridheight = 1;
        contr3.gridwidth = 1;
        contr3.weightx = 1.0;
        contr3.weighty = 1.0;
        contr3.insets = new Insets(10, 20, 20, 10);
        contr3.anchor = GridBagConstraints.WEST;
        disposition.setConstraints(consigneSafari, contr3);
        contenuFenêtre.add(consigneSafari);
        //Composant champs de texte "cheminSafari"
        GridBagConstraints contr4 = new GridBagConstraints();
        contr4.gridx = 200;
        contr4.gridy = 100;
        contr4.gridheight = 1;
        contr4.gridwidth = 3;
        contr4.fill = GridBagConstraints.REMAINDER;
        contr4.weightx = 0.9;
        contr4.weighty = 0.9;
        contr4.anchor = GridBagConstraints.WEST;
        disposition.setConstraints(cheminSafari, contr4);
        contenuFenêtre.add(cheminSafari);
        //Composant étiquette "consigneGoogleMaps"
        GridBagConstraints contr5 = new GridBagConstraints();
        contr5.gridx = 0;
        contr5.gridy = 150;
        contr5.gridheight = 1;
        contr5.gridwidth = 1;
        contr5.weightx = 0.3;
        contr5.weighty = 1.0;
        contr5.insets = new Insets(10, 20, 20, 10);
        contr5.anchor = GridBagConstraints.WEST;
        disposition.setConstraints(consigneGoogleMaps, contr5);
        contenuFenêtre.add(consigneGoogleMaps);
        //Composant champs de texte "cheminGoogleMaps"
        GridBagConstraints contr6 = new GridBagConstraints();
        contr6.gridx = 200;
        contr6.gridy = 150;
        contr6.gridheight = 1;
        contr6.gridwidth = 3;
        contr6.fill = GridBagConstraints.REMAINDER;
        contr6.weightx = 0.7;
        contr6.weighty = 0.7;
        contr6.anchor = GridBagConstraints.WEST;
        disposition.setConstraints(cheminGoogleMaps, contr6);
        contenuFenêtre.add(cheminGoogleMaps);
        //Composant bouton "go"
        GridBagConstraints contr7 = new GridBagConstraints();
        contr7.gridx = 0;
        contr7.gridy = 200;
        contr7.gridheight = 1;
        contr7.gridwidth = 1;
        contr7.weightx = 0.8;
        contr7.weighty = 0.8;
        contr7.anchor = GridBagConstraints.CENTER;
        disposition.setConstraints(go, contr7);
        contenuFenêtre.add(go);

Comme vous vous en doutez, le problème vient des jTextField que j'aimerais beaucoup plus grands. Dans l'idéal, j'aimerais que les jLabel consigneSafari et consigneGoogleMaps occupent environ le premier tiers de la ligne, et les jTextField les deux tiers restants. Je vous serais vraiment reconnaissante du coup de main, ça fait un moment que je galère...

J'aurais bien voulu faire qqch d'assez officiel et sérieux, alors si vous avez d'autres propositions pour améliorer l'interface c'est bien volontiers. ;)

20/07/2010, 10h17
Ivelios

Heu, pourquoi tu mets des y =100 ou 200 8O Edit : et les x aussi 8O
Et après tu mets un gridwidth = 1;... ça sert pas à grand chose de remplir une case sur 100.

Déjà, remets les Y à 1,2,3,4 et 5
Et place un fill sur tes JTextField (horizontal)

J'ai fait les modifications que tu m'as conseillées mais le problème perdure.

EDIT: Après quelques modifications, j'arrive à ça:

http://img7.hostingpics.net/pics/90936prog2.jpg

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
Container contenuFenêtre = frame.getContentPane();
        GridBagLayout disposition = new GridBagLayout();
        contenuFenêtre.setLayout(disposition);
        //Composant étiquette "consigne1"
        GridBagConstraints contr = new GridBagConstraints();
        contr.gridx = 0;
        contr.gridy = 0;
        contr.gridheight = 1;
        contr.gridwidth = 2;
        contr.fill = GridBagConstraints.BOTH;
        contr.weightx = 1.0;
        contr.weighty = 1.0;
        contr.anchor = GridBagConstraints.CENTER;
        contr.insets = new Insets(10, 10, 10, 0);
        disposition.setConstraints(consigne1, contr);
        contenuFenêtre.add(consigne1);
        //Composant étiquette "consigne2"
        contr.gridx = 0;
        contr.gridy = 1;
        contr.gridheight = 1;
        contr.gridwidth = 2;
        contr.fill = GridBagConstraints.BOTH;
        contr.weightx = 1.0;
        contr.weighty = 1.0;
        contr.anchor = GridBagConstraints.CENTER;
        contr.insets = new Insets(0, 0, 0, 30);
        disposition.setConstraints(consigne2, contr);
        contenuFenêtre.add(consigne2);
        //Composant étiquette "consigneSafari"
        contr.gridx = 0;
        contr.gridy = 2;
        contr.gridheight = 1;
        contr.gridwidth = 1;
        contr.fill = GridBagConstraints.NONE;
        contr.weightx = 1.0;
        contr.weighty = 1.0;
        contr.insets = new Insets(20, 20, 0, 0);
        contr.anchor = GridBagConstraints.WEST;
        disposition.setConstraints(consigneSafari, contr);
        contenuFenêtre.add(consigneSafari);
        //Composant champs de texte "cheminSafari"
        contr.gridx = 1;
        contr.gridy = 2;
        contr.gridheight = 1;
        contr.gridwidth = 1;
        contr.fill = GridBagConstraints.HORIZONTAL;
        contr.weightx = 0.9;
        contr.weighty = 0.9;
        contr.insets = new Insets(30, 10, 20, 0);
        contr.anchor = GridBagConstraints.WEST;
        disposition.setConstraints(cheminSafari, contr);
        contenuFenêtre.add(cheminSafari);
        //Composant étiquette "consigneGoogleMaps"
        contr.gridx = 0;
        contr.gridy = 3;
        contr.gridheight = 1;
        contr.gridwidth = 1;
        contr.fill = GridBagConstraints.NONE;
        contr.weightx = 0.3;
        contr.weighty = 1.0;
        contr.insets = new Insets(0, 20, 0, 0);
        contr.anchor = GridBagConstraints.WEST;
        disposition.setConstraints(consigneGoogleMaps, contr);
        contenuFenêtre.add(consigneGoogleMaps);
        //Composant champs de texte "cheminGoogleMaps"
        contr.gridx = 1;
        contr.gridy = 3;
        contr.gridheight = 1;
        contr.gridwidth = 2;
        contr.fill = GridBagConstraints.HORIZONTAL;
        contr.weightx = 0.7;
        contr.weighty = 0.7;
        contr.insets = new Insets(10, 10, 10, 0);
        contr.anchor = GridBagConstraints.WEST;
        disposition.setConstraints(cheminGoogleMaps, contr);
        contenuFenêtre.add(cheminGoogleMaps);
        //Composant bouton "go"
        contr.gridx = 0;
        contr.gridy = 4;
        contr.gridheight = 1;
        contr.gridwidth = 2;
        contr.fill = GridBagConstraints.NONE;
        contr.weightx = 0.8;
        contr.weighty = 0.8;
        contr.anchor = GridBagConstraints.CENTER;
        contr.insets = new Insets(10, 0, 0, 10);
        disposition.setConstraints(go, contr);
        contenuFenêtre.add(go);

Mais je ne comprends pas pourquoi ma première colonne est aussi large... Et puis, bizarrement la deuxième jLabel (consigne2) est mal centrée dans la fenêtre... Pourriez-vous m'aider?

20/07/2010, 14h28
Ivelios

Tu as mal géré tes gridheight & gridwidth. contr.gridwidth = 3 pour les deux premiers Label.

Suis ce petit dessin à la lettre et tu trouveras ton bonheur :

J'ai appliqué tes conseils, suivi scrupuleusement ton schéma, mais sans succès:

http://pics.imagup.com/ano1/1279694599.jpg

La deuxième JLabel n'est toujours pas centré, les jTextfield ne sont toujours pas comme prévu et ça a déplacé le bouton. J'ai l'impression que mes JLabel consigneSafari et consigneGoogleMaps sont beaucoup plus grandes qu'elles ne devraient...

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
103
104
105
JFrame frame = new JFrame("Info_Iphone");
        frame.setSize(570, 250);
        frame.setLocationRelativeTo(null);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JLabel consigne1 = new JLabel("Entrez les chemins d'accès vers les fichiers à traiter.");
        JLabel consigne2 = new JLabel("Si vous ne souhaitez pas traiter Safari ou Google Maps, laissez vide le champs en question.");
        consigne1.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        consigne2.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        JLabel consigneSafari = new JLabel("Safari :");
        JTextField cheminSafari = new JTextField();
        JLabel consigneGoogleMaps = new JLabel("Google Maps :");
        JTextField cheminGoogleMaps = new JTextField();
        JButton go = new JButton("Lancer le traitement");
        go.setSize(200, 50);
        go.addActionListener(new MyActionListener());
        frame.setVisible(true);
 
        Container contenuFenêtre = frame.getContentPane();
        GridBagLayout disposition = new GridBagLayout();
        contenuFenêtre.setLayout(disposition);
        //Composant étiquette "consigne1"
        GridBagConstraints contr = new GridBagConstraints();
        contr.gridx = 0;
        contr.gridy = 0;
        contr.gridheight = 1;
        contr.gridwidth = 3;
        contr.fill = GridBagConstraints.BOTH;
        contr.weightx = 1.0;
        contr.weighty = 1.0;
        contr.anchor = GridBagConstraints.CENTER;
        contr.insets = new Insets(10, 10, 10, 0);
        disposition.setConstraints(consigne1, contr);
        contenuFenêtre.add(consigne1);
        //Composant étiquette "consigne2"
        contr.gridx = 0;
        contr.gridy = 1;
        contr.gridheight = 1;
        contr.gridwidth = 3;
        contr.fill = GridBagConstraints.BOTH;
        contr.weightx = 1.0;
        contr.weighty = 1.0;
        contr.anchor = GridBagConstraints.CENTER;
        contr.insets = new Insets(0, 0, 0, 30);
        disposition.setConstraints(consigne2, contr);
        contenuFenêtre.add(consigne2);
        //Composant étiquette "consigneSafari"
        contr.gridx = 0;
        contr.gridy = 2;
        contr.gridheight = 1;
        contr.gridwidth = 1;
        contr.fill = GridBagConstraints.NONE;
        contr.weightx = 1.0;
        contr.weighty = 1.0;
        contr.insets = new Insets(20, 20, 0, 0);
        contr.anchor = GridBagConstraints.WEST;
        disposition.setConstraints(consigneSafari, contr);
        contenuFenêtre.add(consigneSafari);
        //Composant champs de texte "cheminSafari"
        contr.gridx = 1;
        contr.gridy = 2;
        contr.gridheight = 1;
        contr.gridwidth = 2;
        contr.fill = GridBagConstraints.HORIZONTAL;
        contr.weightx = 0.9;
        contr.weighty = 0.9;
        contr.insets = new Insets(30, 10, 20, 0);
        contr.anchor = GridBagConstraints.CENTER;
        disposition.setConstraints(cheminSafari, contr);
        contenuFenêtre.add(cheminSafari);
        //Composant étiquette "consigneGoogleMaps"
        contr.gridx = 0;
        contr.gridy = 3;
        contr.gridheight = 1;
        contr.gridwidth = 1;
        contr.fill = GridBagConstraints.NONE;
        contr.weightx = 0.3;
        contr.weighty = 1.0;
        contr.insets = new Insets(0, 20, 0, 0);
        contr.anchor = GridBagConstraints.WEST;
        disposition.setConstraints(consigneGoogleMaps, contr);
        contenuFenêtre.add(consigneGoogleMaps);
        //Composant champs de texte "cheminGoogleMaps"
        contr.gridx = 1;
        contr.gridy = 3;
        contr.gridheight = 1;
        contr.gridwidth = 2;
        contr.fill = GridBagConstraints.HORIZONTAL;
        contr.weightx = 0.7;
        contr.weighty = 0.7;
        contr.insets = new Insets(10, 10, 10, 0);
        contr.anchor = GridBagConstraints.CENTER;
        disposition.setConstraints(cheminGoogleMaps, contr);
        contenuFenêtre.add(cheminGoogleMaps);
        //Composant bouton "go"
        contr.gridx = 1;
        contr.gridy = 4;
        contr.gridheight = 1;
        contr.gridwidth = 1;
        contr.fill = GridBagConstraints.NONE;
        contr.weightx = 0.8;
        contr.weighty = 0.8;
        contr.anchor = GridBagConstraints.CENTER;
        contr.insets = new Insets(10, 0, 0, 10);
        disposition.setConstraints(go, contr);
        contenuFenêtre.add(go);

EDIT: ça y est, j'ai trouvé. J'ai lu la doc que tu avais mise en lien dans ton premier message et j'ai supprimé du code tous les weightx et weighty. Maintenant c'est bon. (y a des docs sur le net qui disent tout l'inverse de la vôtre!!! Si j'avais su...)
Par contre ma deuxième JLabel n'est toujours pas centrée correctement (elle reste comme dans l'image ci-dessus). Mais bon, ça c'est vraiment du détail.
En tout cas merci beaucoup du coup de main! ;)

Par contre, le GridBagLayout devient très vite imbuvable. Donc n'hésite pas à faire une fonction annexe pour compresser tous ça.

C'est pas plus lisible mais ça évite de N**** sa molette de souris :mrgreen:

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
 /**
    * Ajoute un composant à la fenetre avec les parametres du GridBagLayout
    * @param composant
    * @param colonne
    * @param ligne
    * @param largeur
    * @param hauteur
    * @param ins
    * @param weightx
    * @param weighty
    * @param fill
    * @param anchor
    */
   private void ajouterComposant(Component composant, int colonne, int ligne, int largeur, int hauteur,Insets ins, float weightx,float weighty,int  fill, int anchor){
		gbc.gridx = colonne;
		gbc.gridy = ligne;
		gbc.gridwidth = largeur;
		gbc.gridheight = hauteur;
		gbc.insets = ins;
                gbc.fill =fill;
                gbc.anchor =  anchor;
                gbc.weightx=weightx;
                gbc.weighty=weighty;
		layout.setConstraints(composant, gbc);//gbc = GridBagConstraints
		this.add(composant);//this = JPanel
	}

Code:

1
2
3
4
5
6
7
 //Exemple de placement des composants dans la fenêtre
        this.ajouterComposant(entete, 0, 0, 3, 1, new Insets(10, 10, 5, 5), 0.0f, 0.0f, GridBagConstraints.NONE, GridBagConstraints.LINE_START);
        this.ajouterComposant(scrollResume, 0, 1, 2, 1, new Insets(5, 10, 5, 5), 1.0f, 1.0f, GridBagConstraints.BOTH, GridBagConstraints.CENTER);
        this.ajouterComposant(message, 0, 2, 1, 1, new Insets(5, 10, 10, 5), 1.0f, 0.0f, GridBagConstraints.HORIZONTAL, GridBagConstraints.CENTER);
        this.ajouterComposant(envoyer, 1, 2, 1, 1, new Insets(5, 5, 10, 5), 0.0f, 0.0f, GridBagConstraints.BOTH, GridBagConstraints.CENTER);
        this.ajouterComposant(participant, 2, 1, 1, 1, new Insets(5, 5, 5, 10), 0.0f, 1.0f, GridBagConstraints.BOTH, GridBagConstraints.CENTER);
        this.ajouterComposant(ampoule, 2, 2, 1, 1, new Insets(5, 5, 10, 10), 0.0f, 0.0f, GridBagConstraints.BOTH, GridBagConstraints.CENTER);