Afin de pouvoir personnaliser votre classeur sans détruire le classeur sur lequel travaille votre voisin, vous allez tout d'abord aller dans le menu File puis Make a copy.... Renommez le classeur en ajoutant votre nom à la fin du nom de fichier par exemple.

PySide 1 : Hello World

Introduction à PySide

L'heure est venue de commencer à développer des interfaces graphiques ! Il existe de nombreux outils pour développer des interfaces graphiques. Celui qui est habituellement livré avec Python est TkInter. Il est relativement simple à prendre en main et peut se manipuler sans trop avoir de notions sur la programmation orientée objet.

Nous allons ici étudier et utiliser PySide qui se base sur le framework Qt. Ce framework est libre, multiplateforme et offre une apparence agréable et cohérente avec le reste du système sur lequel il tourne. Il offre plus de possibilités grace à une bibliothèque de composants graphiques (widgets) riche. Enfin, Qt propose un outil graphique QtDesigner pour concevoir graphiquement vos interface graphiques lorsque celles-ci deviennent un peu complexes.

Néanmoins, au début, nous allons créer de petits programmes en utilisant exclusivement l'approche par programmation afin de bien comprendre comment fonctionne une interface graphique.

Des objets, encore des objets, toujours des objets !

Avec PySide, l'approche est exclusivement orientée objet. Tout est objet, depuis la fenêtre dans laquelle s'affiche notre application jusqu'aux boutons en passant par les textes que l'on affiche !

Si vous avez encore des questions sur ce qu'est l'approche orientée objet, je vous renvoie au classeur Python 6 sur la programmation objet.

A présent, plongeons dans le grand bain

Pour notre premier plongeon, nous n'éviterons pas le traditionnel Hello World !

Nous allons donc développer une application graphique qui affiche ce texte :

Etape 1 : Import des librairies nécessaires à PySide

In [ ]:
from PySide.QtCore import *
from PySide.QtGui import *
import sys

Etape 2 : On crée notre fenêtre

Les choses à présent se corsent. Nous allons créer notre fenêtre d'application contenant notre texte.

Nous allons pour cela créer une nouvelle classe :

In [ ]:
class MainWindow(QLabel):
    def __init__(self, parent=None):
        QLabel.__init__(self, parent)
        
        self.setText("Hello World")
        self.setWindowTitle("Mon appli")

Validez la cellule. Rien ne se passe... et c'est normal. Pourtant vous avez fait le plus dur. Revenons en détail sur l'objet que l'on vient de créer !

class MainWindow(QLabel):

Notre objet va hériter de la classe QLabel. En règle générale, dans Qt, les objets que l'on utilise commencent par la lettre Q. QLabel est un objet texte que l'on affiche, tout simplement.

def init(self, parent=None):

Comme tout objet que l'on crée, il va falloir l'initialiser. Il faut donc créer la méthode init(). La première action de cette méthode sera toujours d'appeler la méthode init() du parent, comme on l'a déjà vu quand notre classe Trinome appelait la méthode init_() de la classe Polynome. C'est l'objet de la ligne suivante :

QLabel.init(self, parent)

Il reste à personaliser notre classe QLabel en positionnant la valeur du texte que nous souhaitons afficher. Cela se fait au moyen de la méthode setText.

self.setText("Hello World")

La dernière ligne est assez explicite...

Et voila ! ce n'était pas si dur ! Il faut bien comprendre ce mécanisme car nous allons le retrouver tout le temps dans les applications plus complexes.

Etape 3 : On donne vie à notre application

Ouf, le plus dur est fait. Il ne nous reste plus qu'à doner vie à notre application en créant notre application et notre objet MainWindow.

Le code qui suit sera pratiquement toujours identique.

In [ ]:
try:
    app = QApplication(sys.argv)
except RuntimeError:
    app=QApplication.instance()
form = MainWindow()
form.show()
app.exec_()

Le code ci-dessus crée un objet QApplication.

La classe QApplication gère l'interface graphique de l'application.

Elle contient ce qu'on appelle la mainloop ou boucle événementielle. C'est principalement une boucle qui tourne sans cesse en attente d'événements concernant l'application (frappe au clavier, clic souris etc ...). Elle fait alors appel via un mécanisme de signaux que l'on va voir au prochain classeur aux méthodes qui auront la charge de traiter ces événements.

Pour chaque application utilisant Qt, il ne peut y avoir qu'un seul objet *QApplication, même si l'application comporte plusieurs fenêtres.

Une fois le contexte de l'application créé dans notre objet app, il ne reste qu'à instancier notre classe MainWindow et à l'afficher à l'utilisateur via la méthode show().

Pour finir, app.exec_() permet de lancer réellement l'application, en initiant la fameuse boucle événementielle dont on vient de parler. Notre application prend alors vie et s'affiche à l'utilisateur.

A vous de jouer !

Ce qu'il y a de cool avec les QLabels, c'est qu'ils acceptent le formatage HTML !

Modifiez votre application de manière à afficher le texte avec un formatage resemblant à celui-ci :


Hello World !!
In [ ]:
# Tapez votre classe MainWindow modifiée ici
# Puis revalidez le programme principal à l'étape 3

RTFM (Read The Fantastic Manual)

Il est impossible de parcourir dans ces classeurs l'intégralité des possibilités offertes par le Framework Qt. Vous allez donc devoir apprendre à naviguer dans la doc de PySide !

Celle-ci est consultable à l'adresse : https://deptinfo-ensip.univ-poitiers.fr/ENS/pyside-docs/index.html

Dans le champ Quick search, recherchez QLabel. Hélas la recherche est un peu large. Il vous faudra aller en bas des 58 liens pour trouver le lien qui nous intéresse - qui s'intitule

PySide.QtGui.QLabel (Python class, in QLabel)

Vous avez trouvé la doc de QLabel ! parfait !

Recherchez à présent la méthode setText() que nous avons utilisé.

La voyez-vous ? parfait !

Il est très intéressant aussi de regarder au début de la page l'arbre d'héritage : Arbre d'héritage

Vous voyez ainsi que QLabel hérite de QFrame donc les méthodes de QFrame s'appliquent aussi aux QLabel etc...

Félicitations, vous savez naviguer dans la doc :)

In [ ]: