Initiation à la création d'applications graphiques avec Eric et QtDesigner

La première étape pour faire une installation correcte est d'installer Qt Designer sur votre machine. On verra ci-dessous comment réaliser cette installation sous un OS de type Linux et sous Windows.

II-A-1. Installation sous Linux▲

II-A-2. Installation sous Windows▲

Avant d'installer Eric sur votre machine, vous devez déjà vous assurer d'avoir d'installé un certain nombre de composants. Vous trouverez sur la page de téléchargement d'Eric la liste de ces composants. À noter qu'une installation récente de PyQt permet de s'assurer d'installer aussi Qt 4 et QScintilla. Une fois ces composants installés, vous pouvez télécharger la dernière version d'Eric.

Nota: il existe deux versions d'Eric. La version 4 pour la branche 2 de Python et la version 5 pour la branche 3. Veillez à bien prendre celle qui correspond à votre version de Python.

II-B-1. Installation sous Linux▲

II-B-2. Installation sous Windows▲

II-B-3. Remarques communes▲

Au cours de ce chapitre, on va apprendre à créer une application graphique avec QtDesigner, puis comment générer le code Python grâce à Eric, mais aussi comment le modifier et le rendre pleinement opérationnel.
Tout d'abord, on définit les objectifs de l'application graphique : la création d'un carnet d'adresses. Pour faire ceci convenablement, il faudra pour chacune d'elles permettre à l'utilisateur de renseigner au minimum :

• un nom ;
• un prénom ;
• une adresse ;
• un code postal ;
• une ville ;
• un n° de téléphone ;
• un n° de fax ;
• une adresse électronique.

Volontairement, dans ce tutoriel, on ne va pas rendre cette interface fonctionnelle : on ne va pas chercher à gérer la problématique base de données. Pour cela, on peut éventuellement consulter le tutoriel sur la présentation de PySide et principalement la section concernant l'utilisation des bases de données.

Pour commencer, on va créer un nouveau projet. Pour cela, utilisez le bouton vu précédemment pour gérer les projets. Ceci fait, la fenêtre ci-dessous apparaît. Remplissez le formulaire selon vos besoins. Pour commencer, on conseille cependant de choisir uniquement en tant que type de projet l'option GUI Qt4. Effectivement certaines fonctionnalités ne sont pas pleinement opérationnelles avec un choix tel que PySide GUI par exemple.

Une fois ceci fait, on va voir comment créer un nouveau fichier. Rien de bien exceptionnel, comme on peut s'en douter. On peut utiliser soit le menu Fichier / Nouveau, soit l'icône correspondante. Commencez à remplir le fichier avec un code de votre choix et enregistrez-le.

On va à présent ajouter ce fichier au projet afin de le faire apparaître dans l'arborescence. Pour cela, dans la zone gestionnaire de projet, choisissez l'onglet Python et faites un clic droit dans la fenêtre. Choisissez l'option Ajouter des fichiers sources, accédez au fichier voulu et validez. On conseille, pour des raisons d'organisation, de préalablement placer le fichier dans le dossier du projet.

À présent on va déboguer notre projet. Mais, avant, on peut ajouter une ligne print pour avoir une vraie sortie. Une fois ceci fait, on peut lancer le débogage en passant par le menu Lancer / Déboguer le script ou plus simplement en appuyant sur la touche de raccourci correspondante (F5 avec l'installation standard).

Avant d'aller plus loin et pour ne pas surcharger l'arborescence du projet, on peut supprimer le fichier page1.py une fois tous les tests effectués.

On peut maintenant créer notre application graphique. Pour cela, cliquez sur l'onglet Qt dans le gestionnaire de projet et faites un clic droit dans la fenêtre. Choisissez Nouvelle feuille pour créer un nouveau fichier .ui ou éventuellement l'option Ajouter des feuilles si ce fichier existe déjà. Dans le cas Nouvelle feuille, le programme vous demande quel type de feuille il faut créer. Choisissez QWidget, pour cet exemple.

Comme plus haut, on conseille d'enregistrer le fichier dans le répertoire du projet.

Une fois ceci validé, Eric lance automatiquement QtDesigner avec la fenêtre précédemment créée. Il ne nous reste plus qu'à remplir cette fenêtre avec les widgets voulus.

Avant tout, on peut mettre au point la grille de positionnement des widgets, afin d'avoir plus de latitude dans les manœuvres. Pour cela, cliquez sur Configuration puis Préférences.

Comme évoqué plus haut, l'utilisation de QtDesigner est très intuitive. De simples glisser-déposer permettent de placer les widgets voulus. En recliquant dessus il est possible assez facilement de les dimensionner comme souhaité.

Exercez-vous et essayez d'obtenir une vue similaire à celle ci-dessous.

À ce stade, vous devez déjà commencer à comprendre les mécanismes et petites subtilités de QtDesigner. Il est temps à présent d'utiliser le fichier généré par QtDesigner avec Eric afin de le rendre compatible avec Python.

Retournez sur Eric. Dans le Gestionnaire de projet, cliquez sur l'onglet permettant d'accéder aux fichiers .ui (ci-dessus, le numéro 6). C'est en cliquant sur cette icône, que l'on va lister les fichiers appartenant au projet et générés par QtDesigner. Ici, on a donc le fichier article.ui présent. Faites un clic droit sur ce fichier : dans le menu contextuel, cliquez sur Compiler la feuille. Cette action va générer automatiquement le code Python qui correspondant à l'interface graphique créée précédemment. Théoriquement, le nom du fichier Python ainsi généré doit être de la forme Ui_nomdemonfichierui.py.

Il y a cependant une petite subtilité à prendre en compte. Ce code est généré dès l'opération ci-dessus. Comprenez par là qu'il sera réécrit en fonction de ce qui est fait dans QtDesigner. Il n'est donc pas pensable d'écrire manuellement des morceaux de codes dans ce fichier généré. Eric permet de contourner ce problème.

Faire un nouveau clic droit sur le fichier article.ui : dans le menu contextuel, choisir Générateur de code. Une fenêtre comme ci-dessous doit apparaître.

Commencez par cliquer sur Nouveau afin de faire apparaître une nouvelle fenêtre comme ci-dessous. Normalement, les champs Nom de classe, Nom de fichier et Chemin sont automatiquement remplis. On conseille de les laisser tels quels pour le moment. Validez en cliquant sur OK.

Vous aurez certainement remarqué que, dans la fenêtre Générateur de code pour les feuilles, sont listés les différents widgets créés dans QtDesigner, avec la possibilité pour chacun d'eux d'afficher des cases à cocher. En fonction des widgets, plusieurs choix sont offerts. Dans le cas ci-dessous, on a coché on_pushButton_clicked(). Il n'aura pas échappé au lecteur que ceci ressemble grandement à un slot avec un nom composé ainsi on_monwidget_signal(). On verra plus bas en quoi cette subtilité d'Eric va être utile par la suite.

Retournez dans l'onglet regroupant les codes Python. On se concentre sur les deux fichiers Ui_article.py et article.py

(note : __init__.py est créé en même temps que le projet).

Le fichier Ui_article.py est donc celui qui regroupe les différents widgets créés avec QtDesigner. L'étude de son code n'est pas nécessaire à l'initiation d'Eric et QtDesigner, mise à part la ligne

QtCore.QMetaObject.connectSlotsByName(Form).

On verra ci-après ce que cette ligne de code apporte de particulier. D'une manière générale, il est fortement déconseillé d'effectuer des modifications sur le code du fichier Ui_article.py, puisque celles-ci seront automatiquement effacées lors de la prochaine compilation.
On revient sur le fichier article.py. Souvenez-vous : lors de la création de ce code, on avait la possibilité de cocher des slots correspondant aux widgets présents dans l'interface graphique. On retrouve dans ce fichier article.py diverses parties dont plus précisément le slot sélectionné ci-dessus.

Deux lignes sont particulièrement intéressantes. Il s'agit de

@pyqtSignature("")

et de

def on_pushButton_clicked(self)

Dans un premier temps, on peut écrire manuellement le code qui sera exécuté dans ce slot. Une fois le slot défini et complété, il faut bien évidemment intercepter un signal afin de l'exécuter. C'est là qu'Eric devient très intéressant. Rappelez-vous, on a vu plus haut qu'une ligne particulière était créée lors de la compilation du fichier article.ui. Il s'agit de la ligne

QtCore.QMetaObject.connectSlotsByName(Form)

Cette ligne permettra de connecter un signal émis par un widget à un slot grâce à la relation entre la méthode setObjectName(str) du widget et le nom du slot. Cela dit ce nom devra être écrit d'une manière bien particulière :

on_nomduwidget_signal(self)

Un autre point impératif sera de s'assurer que le nom de ce slot soit précédé de la ligne :

@pyqtSignature("")

Cette subtilité de Qt est gérée naturellement par Eric qui permet donc à la fois de créer un fichier permettant d'écrire son propre code mais aussi de prévoir les slots et l'interception des signaux permettant de les exécuter.

Pour tester ceci, on peut écrire la ligne suivante dans le slot vu ci-dessus :

print "Hello world"

On peut aussi effacer la ligne :

raise NotImplementedError

À ce stade du tutoriel, on a donc l'essentiel de notre application réalisé. Il reste cependant à écrire le morceau de code qui permettra de lancer l'application. Pour cela on conseille fortement de créer un nouveau fichier Python. On l'appellera Main.py.

Ce fichier devra contenir le code permettant de lancer notre application. Allez dans votre fichier Main.py et copiez le code suivant :

#! /usr/bin/python
#-*- coding: utf-8 -*-
from PyQt4 import QtGui
from article import Form
import sys
if __name__ == "__main__":
   app = QtGui.QApplication(sys.argv)
   myapp = Form()
   myapp.show()
   sys.exit(app.exec_())

Ce code est très simpliste mais indispensable pour lancer l'application. Enregistrez et déboguez le script Main.py. Si tout se passe correctement l'application devrait apparaître.