Disposer les choses

Avatar de Monsieur X
Description du chapitre et des ses objectifs :

Pour pouvoir organiser les objets Qt comme vous le souhaitez dans vos fenêtres, il va falloir apprendre à les disposer.
Et connaître les objets nécessaires.

Image de Partie

Accéder directement à une des parties du cours :

Trois types de disposition

Pour disposer les objets dans une fenêtre, on a trois possibilités :

  • QHBoxLayout : Pour placer les éléments horizontalement
  • QVBoxLayout : Pour placer les éléments verticalement
  • QGridLayout : Pour disposer les éléments comme on veut

Information : En Anglais, disposition se traduit par Layout.


Voici à quoi ça ressemble :

<image legende="QHBoxLayout">uploads/fr/files/92001_93000/92151.png</image>
QHBoxLayout


<image legende="QVBoxLayout">uploads/fr/files/92001_93000/92152.png</image>
QVBoxLayout


<image legende="QGridLayout">uploads/fr/files/92001_93000/92171.png</image>
QGridLayout

QHBoxLayout

Le QHBoxLayout permet d'aligner des objets horizontalement.

Code java - Numéro de ligne
  1. import com.trolltech.qt.gui.QApplication;
  2. import com.trolltech.qt.gui.QWidget;
  3. import com.trolltech.qt.gui.QPushButton;
  4. import com.trolltech.qt.gui.QHBoxLayout;
  5.  
  6. public class LoginBox extends QWidget
  7. {
  8.         public LoginBox()
  9.         {
  10.             QPushButton button1 = new QPushButton("One");
  11.             QPushButton button2 = new QPushButton("Two");
  12.             QPushButton button3 = new QPushButton("Three");
  13.             QPushButton button4 = new QPushButton("Four");
  14.             QPushButton button5 = new QPushButton("Five");
  15.  
  16.             QHBoxLayout layout = new QHBoxLayout();
  17.             layout.addWidget(button1);
  18.             layout.addWidget(button2);
  19.             layout.addWidget(button3);
  20.             layout.addWidget(button4);
  21.             layout.addWidget(button5);
  22.  
  23.             setLayout(layout);
  24.         }
  25.        
  26.         public static void main(String args[])
  27.         {
  28.             QApplication.initialize(args);
  29.        
  30.             LoginBox widget = new LoginBox();
  31.             widget.show();
  32.        
  33.             QApplication.exec();
  34.         }
  35. }


Comme on peut le voir, ce n'est pas bien compliqué.

Code java - Numéro de ligne
  1. QHBoxLayout layout = new QHBoxLayout();

On crée un Layout

Code java - Numéro de ligne
  1. layout.addWidget(button1);
  2. layout.addWidget(button2);
  3. layout.addWidget(button3);
  4. layout.addWidget(button4);
  5. layout.addWidget(button5);

Puis on ajoute des widgets dedans (dans l'ordre)

Code java - Numéro de ligne
  1. setLayout(layout);

On fixe le layout comme élément principal du Widget.

Information : À noter qu'il y a deux méthodes pour fixer l'élément central :
  • setLayout()
  • setWidget()

De même, si on voulait ajouter un layout dans un autre layout on utiliserait addLayout() et non addWidget()
.

QVBoxLayout

Cela fonctionne exactement de la même manière que pour QHBoxLayout sauf que c'est vertical.

Code java - Numéro de ligne
  1. import com.trolltech.qt.gui.QApplication;
  2. import com.trolltech.qt.gui.QWidget;
  3. import com.trolltech.qt.gui.QPushButton;
  4. import com.trolltech.qt.gui.QVBoxLayout;
  5.  
  6. public class LoginBox extends QWidget
  7. {
  8.         public LoginBox()
  9.         {
  10.             QPushButton button1 = new QPushButton("One");
  11.             QPushButton button2 = new QPushButton("Two");
  12.             QPushButton button3 = new QPushButton("Three");
  13.             QPushButton button4 = new QPushButton("Four");
  14.             QPushButton button5 = new QPushButton("Five");
  15.  
  16.             QVBoxLayout layout = new QVBoxLayout();
  17.             layout.addWidget(button1);
  18.             layout.addWidget(button2);
  19.             layout.addWidget(button3);
  20.             layout.addWidget(button4);
  21.             layout.addWidget(button5);
  22.  
  23.             setLayout(layout);
  24.         }
  25.        
  26.         public static void main(String args[])
  27.         {
  28.             QApplication.initialize(args);
  29.        
  30.             LoginBox widget = new LoginBox();
  31.             widget.show();
  32.        
  33.             QApplication.exec();
  34.         }
  35. }


La seule chose qui change, c'est la classe du layout utilisé de QHBoxLayout à QVBoxLayout.

QGridLayout

Avec QGridLayout, les choses se modifient un petit peu.

Code java - Numéro de ligne
  1. import com.trolltech.qt.gui.QApplication;
  2. import com.trolltech.qt.gui.QWidget;
  3. import com.trolltech.qt.gui.QPushButton;
  4. import com.trolltech.qt.gui.QGridLayout;
  5.  
  6. public class GridBox extends QWidget
  7. {
  8.         public GridBox()
  9.         {
  10.             QPushButton button1 = new QPushButton("One");
  11.             QPushButton button2 = new QPushButton("Two");
  12.             QPushButton button3 = new QPushButton("Three");
  13.             QPushButton button4 = new QPushButton("Four");
  14.             QPushButton button5 = new QPushButton("Five");
  15.  
  16.             QGridLayout layout = new QGridLayout();
  17.             layout.addWidget(button1, 0, 0);
  18.             layout.addWidget(button2, 0, 1);
  19.             layout.addWidget(button3, 1, 0, 1, 2);
  20.             layout.addWidget(button4, 2, 0);
  21.             layout.addWidget(button5, 2, 1);
  22.  
  23.             setLayout(layout);
  24.         }
  25.  
  26.     public static void main(String args[])
  27.     {
  28.         QApplication.initialize(args);
  29.    
  30.         GridBox widget = new GridBox();
  31.         widget.show();
  32.    
  33.         QApplication.exec();
  34.     }
  35. }


Pour chaque Widget ou Layout qu'on ajoute à notre Grid, on définie sa case de départ (ligne, colonne) et si elle fait plus de une case on donne le nombre de cases qu'elle prend sur la ligne et sur la colonne. (rowspan, colspan)

La première ligne et la première colonne commencent à 0 donc, le premier bouton se trouve en (0,0), le deuxième sur la même ligne mais dans la cellule 1 (0,1).

Le bouton de la ligne deux va prendre 2 cases. Il commence à la cellule 1 de la 2ème ligne (0,1) et s'étend sur une ligne et deux colonnes (0, 1, 1, 2).

Exercice

Maintenant, il faut pratiquer une peu.

Voici à quoi doit ressembler votre fenêtre :

<image legende="Fenêtre de connexion jTalk">uploads/fr/files/92001_93000/92180.jpg</image>


Cette fenêtre vous permet de mettre en pratique tous les types de dispositions vus précédemment (Bien qu'on puisse tous les faire avec des Grilles) :
  • QHBoxLayout
  • QVBoxLayout
  • QGridLayout

Pour les widgets, on utilise :
  • QGroupBox
  • QLabel
  • QLineEdit
  • QCheckBox
  • QDialogButtonBox

Aide



Comment utiliser QGroupBox ?



Code java - Numéro de ligne
  1. QGridLayout loginLayout = new QGridLayout();
  2. // On fabrique le layout ou le widget principal
  3. loginGroup.setLayout(loginLayout);
  4. // ou
  5. loginGroup.setWidget(loginWidget);


Comment utiliser QDialogButtonBox ?



Code java - Numéro de ligne
  1. QDialogButtonBox boutons = new QDialogButtonBox();
  2. boutons.addButton(QDialogButtonBox.StandardButton.Ok);
  3. boutons.addButton(QDialogButtonBox.StandardButton.Cancel);


Et pour les autres ?



Pour les autres widget, on lit la documentation et on fait marcher ses méninges

Vous pouvez maintenant commencer à créer vos propres fenêtres.
Mais il va nous falloir apprendre à les utiliser.

Sommaire - Chapitre suivant

Nos rédacteurs et membres sont pour la plupart ouverts à des remarques constructives et servir à alerter le rédacteur du cours, des fautes éventuelles ou de propositions et nouvelles perspectives de cours etc ...
Pour ce faire cliquez ici

Postez vous aussi un commentaire à cette partie via le lien que voici