IHM et Layout

Version imprimable

IHM et Layout

Bonjour,

J'essaie depuis maintenant quelques temps de réaliser une IHM pour une application mais je n'arrive pas à mes fins avec la disposition des objets de mon IHM.
J'ai beau retourner le problème dans tous les sens, mes composants semblent n'en faire qu'à leur tête.

Voici une représentation de l'IHM que j'essaie d'obtenir dans ma JFrame :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |-----------------------------------------------------| |NomAppli V0.1 _ [] × | |-----------------------------------------------------| | JLabel1 | JTextField | JButton1 | |-----------------------------------------------------| | | JButton2 | | |-------------------------------------------------|---| | JTextArea |JSc| | |rol| | |lBa| | |r | | | | |-----------------------------------------------------| | JProgressBar | |-----------------------------------------------------|
Comment puis-je réaliser cette IHM ? utiliser un seul layout (GridBagLayout) ? Combiner les layout (lesquels) ?

Toutes mes tentatives jusque là ont été des échecs (taille identique pour tous les composants et/ou positionnement plus ou moins incompréhensible)

Pour ma part, je partirais sur un JPanel principal avec un BorderLayout dont on utiliserait les positions NORTH, CENTER et SOUTH :
. CENTER : Un JScrollPane (panel avec barres d'ascenseurs) qui contiendrait ton JTextArea dans la position centrale
. SOUTH : ta progressBar
. NORTH : un JPanel avec un GridLayout (1 colonne, 2 lignes) contenant :
- un JPanel avec un BoxLayout contenant tes JLabel, JTextfield, JButton
- un JPanel avec ton JButton

Exemple de code (non testé)
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 JFrame fenetre = new JFrame("NomAppli V0.1"); JPanel panelNord = new JPanel(); panelNord.setLayout(new GridLayout(1, 2); // 1 colonne, 2 lignes JPanel panelBarre = new JPanel(); BoxLayout layoutBarre = new BoxLayout(panelBarre, BoxLayout.X_AXYS); panelBarre.add(new JLabel("label 1")); panelBarre.add(new JTextField("texte field")); panelBarre.add(new JButton("bouton 1")); panelNord.add(panelBarre); panelNord.add(new JButton("Bouton 2")); JTextArea texte = new JTextArea(" texte area"); JScrollPane panelCentre = new JScrollPane(texte); JProgressBar barreProgression = new JProgressBar(...); JPanel panelPrincipal = new JPanel(); panelPrincipal.setLayout(new BorderLayout()); panelPrincipal.add(panelNord, BorderLayout.NORTH); panelPrincipal.add(panelCentre, BorderLayout.CENTER); panelPrincipal.add(barreProgression , BorderLayout.SOUTH); fenetre.setContentPane(panelPrincipal); ... fenetre.setVisible(true);

Merci beaucoup, bien que je trouve cela un peu compliqué juste pour mettre en forme quelques composants (j'ai plus l'habitude du développement web, où il est beaucoup plus facile de définir une mise en page d'IHM).

Par contre, il me reste 2 petits soucis avec ta solution.
1. Le bouton "Bouton 2" est gigantesque
2. Lorsque je modifie la taille (réduction) de ma JFrame, le layoutBarre passe les composants qui ne tiennent pas dans la largeur de la fenêtre sous le bouton "Bouton 2".

J'ai donc essayé de modifier le Layout du panelNord pour le transformer de GridLayout (2, 1) en BoxLayout(panelNord, BoxLayout.Y_AXIS) mais alors, tous mes composants sont placés sur la même ligne horizontale.
Code:

1 2 3 4 |----------------------------------------------------------------| | JLabel1 | JTextField | JButton1 | JButton2 | |----------------------------------------------------------------|
Je suis désolé de ne pouvoir mettre de copie d'écran pour l'instant, mais je n'ai pas la possibilité pour l'instant d'accéder à des sites permettant d'héberger des images.

15/12/2009, 15h37
sinok

Utilises un GridBagLayout pour le panel dans le NORTH. Le GridLayout n'est pas assez flexible pour ce que tu recherches.
18/12/2009, 14h59
bigben99

J'aimerais bien utiliser un GridBagLayout, mais j'ai lu tous les tuto, j'ai repris des dizaines d'exemples et je n'arrive toujours pas à comprendre le fonctionnement des contraintes !

Je viens encore d'essayer de modifier mon interface pour ajouter une liste de JLabel + JTextField entre mon bouton2 et ma TextArea et toute mon IHM a explosée :( j'en ai retrouvé des morceaux dans tous les sens...

Mon bouton2 a les dimensions de mes 12 lignes composées d'un JLabel + un JTextField, la moitié de mes 12 lignes est passée derrière ma TextArea.

Je suis désemparé, j'ai beau couché sur papier mon IHM et bien découper cette dernière, lorsqu'il s'agit de passer à la pratique, ca ne fonctionne pas...

Merci encore pour votre aide, mais je crois que je vais jeter l'éponge. Je vais réduire mon interface à un simple bouton exécuter et présenter les résultats dans un fichier texte ou HTML.

1 pièce(s) jointe(s)

Bon aller petit exemple/cours vite fait:

Pour commencer une capture d'écran du résultat

http://www.developpez.net/forums/att...1&d=1261156764

Ensuite un explication des composantes des GridBagContraints utilisées ici :

gridy: numéro de la ligne sur laquelle on place le composant
gridx: numéro de la colonne sur laquelle le composant est placé
gridwidth: nombre de cases horizontales que le composant va occuper à partir de celle précisée en gridx
gridheight: nombre de cases verticales que le composant va occuper à partir de celle précisée en gridy (non utilisé ici)
fill: Politique d'occupation de l'espace disponible dans la case: NONE pour que le composant reste sur lui même et n'occuper que la place minimale, HORIZONTAL pour que le composant occupe tout l'espace horizontal, VERTICAL pour le composant occupe tout l'espace vertical, BOTH pour occuper tout l'espace
weightx: Politique de redimensionnement horizontal de la case en elle même, plus la valeur est proche de 1, plus la case occupera l'espace horizontal disponible dans le conteneur. Si la valeur est 0 (valeur par défaut) la case ne grandit pas et occupe l'espace minimal nécessaire à son affichage
weighty: Idem mais en vertical
anchor: Précise l'endroit où se place le composant dans la case. Dans notre cas on restera avec les valeurs BASELINE_XXX permettant d'aligner verticalement le texte des différents composants sur une même ligne.BASELINE_LEADING: aligne tous les composants en fonction de la hauteur de leur texte et les place en début de ligne. BASELINE les place au centre et BASELINE_TRAILING en fin de ligne.

Et voilou le code d'exemple avec les deux boutons à la fin de la première ligne

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
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
 
package swing.tests;
 
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
 
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JProgressBar;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.JTextField;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
 
import com.sun.java.swing.plaf.nimbus.NimbusLookAndFeel;
 
public class GridBagTest extends JPanel {
 
    private JLabel label1;
    private JTextField textField1;
    private JButton button1;
    private JButton button2;
    private JButton button3;
    private JTextArea textArea;
    private JProgressBar progressBar1;
 
    public GridBagTest() {
 
 
        label1 = new JLabel("label1");
        textField1 = new JTextField("Textfield1");
        textField1.setColumns(50);
        button1 = new JButton("button1");
        button2 = new JButton("button2");
        button3 = new JButton("button3");
        textArea = new JTextArea("textarea1");
        progressBar1 = new JProgressBar();
        progressBar1.setValue(58);        
        JScrollPane scrollPane = new JScrollPane(textArea);
        scrollPane.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_ALWAYS);
        setLayout(new GridBagLayout());
 
        GridBagConstraints constraints = new GridBagConstraints();
 
        //Top-left Label - pas de redimensionnement
        constraints.gridy=0;                                        //Ligne du composant
        constraints.gridy=0;                                        //Position du composant sur la ligne
        constraints.fill=GridBagConstraints.VERTICAL;                //Precise que le composant doit remplir l'espace disponible afin d'avoir une taille homogène avec les autres composants de la ligne
        constraints.anchor = GridBagConstraints.BASELINE_LEADING;    //Sert a aligner le texte des composants sur la baseline, c'est à dire que le texte de tous les composants en BASELINE_XXX sera aligné sur une même ligne horizontale
        this.add(label1,constraints);
 
 
        constraints = new GridBagConstraints();
 
        //Top center textfields - redimensionnement horizontal
        constraints.gridy=0;
        constraints.gridx=1;        
        constraints.weightx=1.0f;                                    //Précise la politique de redimensionnement horizontal: 1.0 se redimensionner autant que possible, 0.0 (valeur par défaut) ne redimensionne pas, ne marche que si le fill est HORIZONTAL ou BOTH
        constraints.fill=GridBagConstraints.BOTH;
        constraints.anchor = GridBagConstraints.BASELINE_LEADING;
        this.add(textField1,constraints);
 
 
        constraints = new GridBagConstraints();
 
        //Top right button - pas de redimensionnement
        constraints.gridy=0;
        constraints.gridx=2;        
        constraints.fill=GridBagConstraints.VERTICAL;
        constraints.anchor = GridBagConstraints.BASELINE_LEADING;
        this.add(button1,constraints);
 
        //Top right button - pas de redimensionnement
        constraints.gridy=0;
        constraints.gridx=3;        
        constraints.fill=GridBagConstraints.VERTICAL;
        constraints.anchor = GridBagConstraints.BASELINE_LEADING;
        this.add(button2,constraints);
 
        constraints = new GridBagConstraints();
        //Second line button, centre, pas de redimensionnement, on occuppe toute la ligne
        constraints.gridy=1;
        constraints.gridx=0;
        constraints.gridwidth=4;                                    //On précise que le composant occupe 3 cases (ce qui correspond à l'intégralité de la ligne)
        constraints.fill=GridBagConstraints.VERTICAL;                //On lui précise de ne pas occuper l'espace horizontal
        constraints.anchor = GridBagConstraints.BASELINE;            //On précise que le composant doit se centrer sur la ligne
        this.add(button3,constraints);
 
        constraints = new GridBagConstraints();
        //Texarea, centre, redimensionnement global dans scrollPanel
        constraints.gridy=2;
        constraints.gridx=0;
        constraints.gridwidth=4;
        constraints.weightx=1.0f;
        constraints.weighty=1.0f;                                    //Précise la politique de redimensionnement vertical: 1.0 se redimensionner autant que possible, 0.0 (valeur par défaut) ne redimensionne pas, ne marche que si le fill est VERTICAL ou BOTH
        constraints.fill=GridBagConstraints.BOTH;
        constraints.anchor = GridBagConstraints.BASELINE_LEADING;
        this.add(scrollPane,constraints);
 
        constraints = new GridBagConstraints();
        //progressBar, centre, redimensionnement horizontal 
        constraints.gridy=3;
        constraints.gridx=0;
        constraints.gridwidth=4;
        constraints.weightx=1.0f;        
        constraints.fill=GridBagConstraints.BOTH;
        constraints.anchor = GridBagConstraints.BASELINE_LEADING;
        this.add(progressBar1,constraints);
 
    }
 
 
    public static void main(String[] args) {
        try {
            UIManager.setLookAndFeel(new NimbusLookAndFeel());
        } catch (UnsupportedLookAndFeelException e) {
            // TODO Bloc catch auto-généré
            e.printStackTrace();
        }
        JFrame f = new JFrame();
        f.add(new GridBagTest());
        f.pack();
        f.setLocationRelativeTo(null);
        f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        f.setVisible(true);
 
    }
}

De fait le GridBagLayout est puissant une fois maitrisé les concepts, comme les CSS. Je suppose que tes débuts sur des CSS n'ont pas été des plus simples sans parler des incohérences inter browsers, hacks IE &cie.

Bon ensuite il existe mieux comme layout que le GridBag, genre un FormLayout JGoodies ou un MigLayout.

[Edit] Tu peux retirer le dernier bouton de la première ligne, il vient d'une mécompréhension de ma part, ton seconed schéma m'ayant un peu paumé en fait :mouarf:[/Edit]

21/12/2009, 11h13
bigben99

Merci, comme tu as pris le temps de me faire un cours particulier, je vais refaire une tentative, qui sait, ce sera peut-être la bonne.

Sinon pour les CSS, c'est vrai qu'au début c'est un peu compliqué, mais cela me semble tout de même plus intuitif et surtout, je trouve que les dispositions par de faut sont bien plus efficace qu'en Java.
Enfin c'est une question de point de vue, mais comme c'est moi qui suis derrière la machine pour coder, c'est mon point de vue qui compte en ce qui me concerne ;)

[EDIT]
Nouvelle tentative ! et cette fois c'est bon ! ca fonctionne comme je veux. Je crois que j'ai enfin compris la signification des différentes contraintes et surtout les interactions entre chaque contrainte. Mais il me semble que j'avais compris avant aussi...
Par contre, j'ai constaté deux choses :

1. Si lors de l'ajout du composant dans le JPanel, on oublie d'y appliquer les contraintes, l'interface ne ressemble plus à rien. D'où, sans doute, quelques erreurs dans mes tentatives précédentes mais que je n'avais pas repérées.

2. Tu crées une nouvelle contrainte à chaque composant, alors que jusqu'ici, dans tous les exemples que j'avais vu, il s'agissait toujours de la même contrainte dont les valeurs étaient modifiées. Y a-t-il une raison à la création d'une nouvelle contrainte pour chaque composant ?

Quoi qu'il arrive, un grand MERCI pour cette nième explication qui fut la bonne.
22/12/2009, 23h42
Ivelios

Le mot de la fin : CSS est peut être plus simple à utiliser ( pour toi ) mais ça ne va pas donner forcement le même rendu selon les navigateurs web alors que le code est le même...
Alors qu'avec JAVA, si c'est beau sur ta machine, ça sera beau sur toutes les machines du monde " All around the world".

M'enfin bref. J'ai rien à faire là :dehors:

Bon, je ne dois pas encore avoir tout compris.

Dans le code ci-dessous, mes composants sont correctement placés, leur taille correspond à ce que je souhaite. Donc on pourrait se dire que tout va bien dans le meilleur des mondes... MAIS, lorsque je modifie la taille de ma fenêtre, mon IHM a une réaction un peu bizarre... je m'explique. Lorsque je clique sur Agrandir dans la barre de titre de ma JFrame, la fenêtre s'agrandit et les composants aussi en gardant les proportions que je souhaite.
Ensuite, je clique sur mon bouton qui entraine l'écriture dans mon JTextArea du bas puis, je tente de réduire ma fenêtre et alors, mon JTextArea en haut à gauche est reduit bien plus que ce que je souhaiterais...

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
 
package com.bigben.pointeuse;
 
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
 
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
 
public class Pointeuse extends JFrame {
	private static final long serialVersionUID = 1L;
 
	private TPointeuse tPointeuse;
 
	private JButton valider;
	private GridBagConstraints c;
	private JPanel contentPane;
	private JScrollPane scrollCommentaire;
	private JScrollPane scrollConsole;
	private JTextArea commentaire;
	private JTextArea console;
 
	Pointeuse() {
		super("Pointeuse v1.0");
 
		valider = new JButton("Valider");
 
		commentaire = new JTextArea(5, 20);
 
		scrollCommentaire = new JScrollPane(commentaire);
 
		console = new JTextArea(10, 1);
		console.setEditable(false);
 
		scrollConsole = new JScrollPane(console);
 
		contentPane = new JPanel(new GridBagLayout());
		c = new GridBagConstraints();
		c.gridy = 0;
		c.gridx = 0;
		c.fill = GridBagConstraints.BOTH;
		c.weightx = 1.0;
		contentPane.add(scrollCommentaire, c);
		c = new GridBagConstraints();
		c.gridy = 0;
		c.gridx = 1;
		c.fill = GridBagConstraints.VERTICAL;
		contentPane.add(valider, c);
		c = new GridBagConstraints();
		c.gridy = 1;
		c.gridx = 0;
		c.gridwidth = 2;
		c.weighty = 1.0;
		c.fill = GridBagConstraints.BOTH;
		contentPane.add(scrollConsole, c);
 
		tPointeuse = new TPointeuse(this);
		valider.addActionListener(tPointeuse);
 
		this.setContentPane(contentPane);
		this.pack();
//		this.setResizable(false);
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.setLocationRelativeTo(null);
		this.show();
	}
 
	protected void writeln(String text) {
		console.append(text + "\n");
	}
 
	public static void main(String[] args) {
		new Pointeuse();
	}
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
package com.bigben.pointeuse;
 
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
 
public class TPointeuse implements ActionListener {
	private Pointeuse pointeuse;
 
	TPointeuse(Pointeuse pointeuse) {
		this.pointeuse = pointeuse;
	}
 
	public void actionPerformed(ActionEvent ev) {
		pointeuse.writeln(ev.toString());
	}
}

Et ca continue, décidément, à chaque fois que je crois avoir compris le fonctionnement du GridBagLayout, je me retrouve devant un problème dont je n'arrive pas à me sortir... Cette fois, c'est mon JTree qui n'en fait qu'à sa tête.

Je l'ai placé dans un JScrollPane que j'ai lui-même placé dans mon JPanel resultPane lui-même placé dans mon JPanel principal contentPane.

Au final mon interface ressemble a peu prêt à ce que je souhaite sauf que mon JTree prend les dimensions qu'il veut !
J'aimerais qu'il prenne 50% de la fenêtre horizontalement et une hauteur dépendant de la hauteur de ma JFrame, mais rien à faire, il prend les dimensions qu'il veut sans que je n'arrive à les modifier à l'aide de contraintes...

Voici 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
		// Panel secondaire
		resultPane = new JPanel(new GridBagLayout());
 
		// Ligne 1
		resultPane.add(new JLabel("Nb enreg :"), getConstraints(0, 0, 1, 1, 0, 0, GridBagConstraints.EAST));
		resultPane.add(nbTotal, getConstraints(0, 1, 1, 1, 0, 0, GridBagConstraints.EAST));
		resultPane.add(new JLabel(" "), getConstraints(0, 2, 1, 1, 0, 0, GridBagConstraints.CENTER));
		resultPane.add(scrollArbre, getConstraints(0, 3, 4, 1, 0, 0, GridBagConstraints.CENTER));
 
		// Ligne 2 (JLabel + JTextField)
		resultPane.add(new JLabel("Compteur :"), getConstraints(1, 0, 1, 1, 0, 0, GridBagConstraints.EAST));
		resultPane.add(nbCompteur, getConstraints(1, 1, 1, 1, 0, 0, GridBagConstraints.EAST));
 
		// Ligne 3 (JLabel + JTextField)
		resultPane.add(new JLabel("Longueur d'enregistrement <> 1000 :"), getConstraints(2, 0, 1, 1, 0, 0, GridBagConstraints.EAST));
		resultPane.add(nbLongueur, getConstraints(2, 1, 1, 1, 0, 0, GridBagConstraints.EAST));
 
		// Panel principal
		contentPane = new JPanel(new GridBagLayout());
 
		// Ligne 1 (JLabel + JTextField + JButton)
		contentPane.add(new JLabel("Chemin du fichier : "), getConstraints(0, 0, 1, 1, 0, 0, GridBagConstraints.CENTER));
		contentPane.add(filePath, getConstraints(0, 1, 1, 1, 0, 0, GridBagConstraints.CENTER, GridBagConstraints.BOTH));
		contentPane.add(parcourir, getConstraints(0, 2, 1, 1, 0, 0, GridBagConstraints.CENTER));
 
		// Ligne 2 (JButton)
		contentPane.add(executer, getConstraints(1, 0, 1, 3, 0, 0, GridBagConstraints.CENTER));
 
		// Ligne 3 (JPanel[resultPane])
		contentPane.add(resultPane, getConstraints(2, 0, 1, 3, 0, 0, GridBagConstraints.WEST));
 
		// Ligne 4 (JScrollPane[JTextArea])
		contentPane.add(scrollConsole, getConstraints(3, 0, 1, 3, 0, 0, GridBagConstraints.CENTER, GridBagConstraints.BOTH));
 
		// Ligne 5 (JProgressBar)
		contentPane.add(barre, getConstraints(4, 0, 1, 3, 0, 0, GridBagConstraints.CENTER, GridBagConstraints.HORIZONTAL));

et la fonction getConstraints :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	private GridBagConstraints getConstraints(int row, int col, int rowspan, int colspan, double height, double width, int align) {
		return getConstraints(row, col, rowspan, colspan, height, width, align, GridBagConstraints.NONE);
	}
 
	private GridBagConstraints getConstraints(int row, int col, int rowspan, int colspan, double height, double width, int align, int fill) {
		GridBagConstraints gbc;
 
		gbc = new GridBagConstraints();
		gbc.gridy = row;
		gbc.gridx = col;
		gbc.gridheight = rowspan;
		gbc.gridwidth = colspan;
		gbc.weighty = width;
		gbc.weighty = height;
		gbc.fill = fill;
		gbc.anchor = align;
 
		return gbc;
	}