Premier bouton

Un composant graphique (appelé “widget” en anglais) est un élément de base d’une interface graphique avec lequel un utilisateur peut interagir (par exemple une fenêtre ou un champ de saisie de texte). Il existe de nombreux composants susceptibles d’intervenir dans une interface graphique. Afin d’étudier leur fonctionnement, nous allons aborder le cas d’un composant graphique simple : un bouton. Nous travaillons ici avec PyQt, voir Les bases de la programmation des interfaces graphiques avec Qt et PyQt.

Création d’un bouton - QPushButton

On crée un bouton en utilisant le constructeur de la classe QPushButton, auquel on communique le texte qu’on souhaite voir figurer à l’intérieur du bouton.

class QPushButton(text)

Bouton dont le constructeur reçoit un texte qui sera affiché sur le bouton.

Paramètres:text (string) – texte qui sera affiché sur le bouton

Exemple

import sys
from PyQt4.QtGui import QApplication, QPushButton

app = QApplication.instance() 
if not app: 
    app = QApplication(sys.argv)

bouton = QPushButton("Voici mon premier bouton avec python")
bouton.show()

app.exec_()

Résultat

Lorsqu’on exécute ce programme on constate que le bouton occupe toute la fenêtre.

_images/bouton1.jpg

La notion de gestionnaire de mise en forme

Un gestionnaire de mise en forme permet de gérer la disposition (en anglais layout) de plusieurs composants. Nous allons ici utiliser un gestionnaire de mise en forme de la classe QVBoxLayout qui permet de positionner les composants les uns sous les autres verticalement. Il possède une méthode addWidget() pour ajouter les composants à gérer. Il faut indiquer à la fenêtre qu’elle doit utiliser ce gestionnaire de mise en forme grâce à la méthode setLayout() de la classe QWidget.

class QVBoxLayout

Gestionnaire de mise en forme qui crée une boite (en anglais box) dans laquelle les composants seront disposés les uns sous les autres verticalement. Horizontalement, ils occuperont toute la largeur de la boite.

Paramètres:text (string) – texte qui sera affiché sur le bouton
addWidget(composant)

Ajoute un composant dans le gestionnaire de mise en forme.

Paramètres:composant – référence du composant à ajouter

Exemple

import sys
from PyQt4.QtGui import QApplication, QWidget, QPushButton, QVBoxLayout

app = QApplication.instance() 
if not app:
    app = QApplication(sys.argv)

# creation de la fenetre
fen = QWidget()

# creation du gestionnaire de mise en forme de type QVBoxLayout
layout = QVBoxLayout()
# on fixe le QVBoxLayout comme gestionnaire de mise en forme de la fenetre
fen.setLayout(layout)

# creation du premier bouton
bouton1 = QPushButton("mon premier bouton dans un QVBoxLayout")
# ajout du premier bouton au gestionnaire de mise en forme
layout.addWidget(bouton1)

# creation du deuxieme bouton
bouton2 = QPushButton("mon deuxieme bouton dans un QVBoxLayout")
# ajout du deuxieme bouton au gestionnaire de mise en forme
layout.addWidget(bouton2)

fen.show()

app.exec_()

Résultat

_images/bouton2.jpg

Exemple dans une fenêtre personnalisée

import sys
from PyQt4.QtGui import QApplication, QWidget, QPushButton, QVBoxLayout

class Fenetre(QWidget):
    def __init__(self):
        QWidget.__init__(self)
        self.setWindowTitle("Ma fenetre")
  
        # creation du gestionnaire de mise en forme
        self.layout = QVBoxLayout()
        # on fixe le gestionnaire de mise en forme de la fenetre
        self.setLayout(self.layout)

        # creation du premier bouton
        self.bouton1 = QPushButton("mon premier bouton dans un QVBoxLayout")
        # ajout du premier bouton au gestionnaire de mise en forme
        self.layout.addWidget(self.bouton1)

        # creation du deuxieme bouton
        self.bouton2 = QPushButton("mon deuxieme bouton dans un QVBoxLayout")
        # ajout du deuxieme bouton au gestionnaire de mise en forme
        self.layout.addWidget(self.bouton2)

        self.show()

app = QApplication.instance() 
if not app:
    app = QApplication(sys.argv)
fen = Fenetre()
app.exec_()

Exemple avec positionnement horizontal

import sys
from PyQt4.QtGui import QApplication, QWidget, QPushButton, QHBoxLayout

app = QApplication.instance() 
if not app:
    app = QApplication(sys.argv)

fen = QWidget()
layout = QHBoxLayout()
fen.setLayout(layout)

bouton1 = QPushButton("mon premier bouton dans un QHBoxLayout")
layout.addWidget(bouton1)

bouton2 = QPushButton("mon deuxieme bouton dans un QHBoxLayout")
layout.addWidget(bouton2)

fen.show()

app.exec_()

Résultat

_images/bouton4.jpg

Gestion du bouton

On va connecter le signal clicked de la classe QPushButton avec l’appel d’une fonction.

Exemple

import sys
from PyQt4.QtGui import QApplication, QPushButton

def appui_bouton():
    print("Appui sur le bouton")

app = QApplication.instance() 
if not app: 
    app = QApplication(sys.argv)

# creation du bouton
bouton = QPushButton("mon bouton avec une gestion d'appui")
# on connecte le signal "clicked" a la fonction appui_bouton
bouton.clicked.connect(appui_bouton)
# le bouton est rendu visible
bouton.show()

app.exec_()

Exemple dans une fenêtre personnalisée

import sys
from PyQt4.QtGui import QApplication, QWidget, QPushButton, QVBoxLayout

class Fenetre(QWidget):
    def __init__(self):
        QWidget.__init__(self)
        self.setWindowTitle("Ma fenetre")
  
        # creation du gestionnaire de mise en forme
        self.layout = QVBoxLayout()
        # on fixe le gestionnaire de mise en forme de la fenetre
        self.setLayout(self.layout)

        # creation du bouton
        self.bouton = QPushButton("mon bouton avec une gestion d'appui")
        # on connecte le signal "clicked" a la methode appui_bouton
        self.bouton.clicked.connect(self.appui_bouton)
        # ajout du bouton au gestionnaire de mise en forme
        self.layout.addWidget(self.bouton)
 
        self.show()

    def appui_bouton(self):
        print("Appui sur le bouton")

app = QApplication.instance() 
if not app:
    app = QApplication(sys.argv)
fen = Fenetre()
app.exec_()