Qt Jambi : disposer les choses

Plusieurs possibilités pour agencer les widgets (objets graphiques) dans une fenêtre : cela s'appelle les layouts (ou dispositions).

35 commentaires Donner une note à l'article (5)

Article lu   fois.

Les deux auteurs

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. 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.

Voici à quoi ça ressemble :

Image non disponible
QHBoxLayout
Image non disponible
QVBoxLayout
Image non disponible
QGridLayout

II. QHBoxLayout

 
Sélectionnez
import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QWidget;
import com.trolltech.qt.gui.QPushButton;
import com.trolltech.qt.gui.QHBoxLayout;
 
public class LoginBox extends QWidget
{
        public LoginBox()
        {
            QPushButton button1 = new QPushButton("One");
            QPushButton button2 = new QPushButton("Two");
            QPushButton button3 = new QPushButton("Three");
            QPushButton button4 = new QPushButton("Four");
            QPushButton button5 = new QPushButton("Five");
 
            QHBoxLayout layout = new QHBoxLayout();
            layout.addWidget(button1);
            layout.addWidget(button2);
            layout.addWidget(button3);
            layout.addWidget(button4);
            layout.addWidget(button5);
 
            setLayout(layout);
        }
        
        public static void main(String args[])
        {
            QApplication.initialize(args);
        
            LoginBox widget = new LoginBox();
            widget.show();
        
            QApplication.exec();
        }
}

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

 
Sélectionnez
QHBoxLayout layout = new QHBoxLayout();

On crée un layout.

 
Sélectionnez
layout.addWidget(button1);
layout.addWidget(button2);
layout.addWidget(button3);
layout.addWidget(button4);
layout.addWidget(button5);

Puis on lui ajoute des widgets (dans l'ordre).

 
Sélectionnez
setLayout(layout);

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

À 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().

III. QVBoxLayout

 
Sélectionnez
import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QWidget;
import com.trolltech.qt.gui.QPushButton;
import com.trolltech.qt.gui.QVBoxLayout;
 
public class LoginBox extends QWidget
{
        public LoginBox()
        {
            QPushButton button1 = new QPushButton("One");
            QPushButton button2 = new QPushButton("Two");
            QPushButton button3 = new QPushButton("Three");
            QPushButton button4 = new QPushButton("Four");
            QPushButton button5 = new QPushButton("Five");
 
            QVBoxLayout layout = new QVBoxLayout();
            layout.addWidget(button1);
            layout.addWidget(button2);
            layout.addWidget(button3);
            layout.addWidget(button4);
            layout.addWidget(button5);
 
            setLayout(layout);
        }
        
        public static void main(String args[])
        {
            QApplication.initialize(args);
        
            LoginBox widget = new LoginBox();
            widget.show();
        
            QApplication.exec();
        }
}

IV. QGridLayout

 
Sélectionnez
import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QWidget;
import com.trolltech.qt.gui.QPushButton;
import com.trolltech.qt.gui.QGridLayout;
 
public class GridBox extends QWidget
{
        public GridBox()
        {
            QPushButton button1 = new QPushButton("One");
            QPushButton button2 = new QPushButton("Two");
            QPushButton button3 = new QPushButton("Three");
            QPushButton button4 = new QPushButton("Four");
            QPushButton button5 = new QPushButton("Five");
 
            QGridLayout layout = new QGridLayout();
            layout.addWidget(button1, 0, 0);
            layout.addWidget(button2, 0, 1);
            layout.addWidget(button3, 1, 0, 1, 2);
            layout.addWidget(button4, 2, 0);
            layout.addWidget(button5, 2, 1);
 
            setLayout(layout);
        }
 
    public static void main(String args[])
    {
        QApplication.initialize(args);
   
        GridBox widget = new GridBox();
        widget.show();
   
        QApplication.exec();
    }
}

Pour chaque widget ou layout qu'on ajoute à notre Grid, on définit sa case de départ (ligne, colonne) et, si elle fait plus d'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, le premier bouton se trouve donc en (0,0), le deuxième sur la même ligne mais dans la cellule 1 (0,1). Le bouton de la deuxième ligne va prendre deux cases. Il commence à la cellule 1 de la deuxième ligne (0,1) et s'étend sur une ligne et deux colonnes (0, 1, 1, 2).

V. Exercice

Maintenant, il faut pratiquer un peu.Voici à quoi doit ressembler votre fenêtre :

Fenêtre de connexion jTalk

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.

V-A. Aide

V-A-1. Comment utiliser QGroupBox ?

 
Sélectionnez
QGridLayout loginLayout = new QGridLayout();
// On fabrique le layout ou le widget principal
loginGroup.setLayout(loginLayout);
// ou 
loginGroup.setWidget(loginWidget);

V-A-2. Comment utiliser QDialogButtonBox ?

 
Sélectionnez
QDialogButtonBox boutons = new QDialogButtonBox();
boutons.addButton(QDialogButtonBox.StandardButton.Ok);
boutons.addButton(QDialogButtonBox.StandardButton.Cancel);

V-A-3. Et pour les autres ?

Pour les autres widgets, on lit la documentation et on fait fonctionner ses méninges.

VI. Remerciements

Merci à Thibaut Cuvelier pour la mise en page et à Jacques Thery pour la relecture !

Qt en Java avec Qt Jambi
Du Qt en Java avec Qt Jambi
Utiliser Qt avec Java
Codons notre première fenêtre
Disposer les choses
Une boîte de dialogue
Une application avec des menus et des barres d'outils
Connecter les objets entre eux
Émettre un signal
JEditor, un simple éditeur de fichier texte
JViewer, un lecteur d'image
Image non disponible