Initiation à la création d'applications graphiques avec Eric et QtDesigner
Date de publication : 23 septembre 2011. Date de mise à jour : 23/09/2011.
Par
Charles-Élie Gentil
Cet article a pour but de présenter rapidement l'EDI Eric et le concepteur d'interfaces graphiques QtDesigner.
Au terme de ce tutoriel, l'utilisateur aura les bases pour créer sa première application.
I. Introduction
II. Installation
II-A. Installation de QtDesigner
II-A-1. Installation sous Linux
II-A-2. Installation sous Windows
II-B. Installation d'Eric
II-B-1. Installation sous Linux
II-B-2. Installation sous Windows
II-B-3. Remarques communes
III. Présentation d'Eric
IV. Présentation de QtDesigner
V. Création de notre première application
V-A. Introduction
V-B. Premiers pas avec Eric
V-C. Débogage et test de notre code
V-D. Création de l'interface graphique
V-E. Finalisation du projet
VI. Conclusion
VII. Remerciements
I. Introduction
Si vous avez lu le tutoriel
Apprentissage de PySide, le binding Qt de Nokia pour Python et création d'une première application, vous
avez appris à créer une application graphique en codant tout à la main. Ici, je vous propose d'apprendre
à utiliser un logiciel permettant de créer graphiquement l'interface. C'est ce que l'on appelle un
logiciel WYSIWYG (
what you see is what you get, comprenez : ce que vous voyez est ce que vous
obtenez). Bien que je ne sois pas fan de ce genre de façon de procéder, notamment du fait que, bien
souvent, le code obtenu n'est pas assez propre à mon goût, je dois reconnaître qu'il existe un outil
intéressant qui produit, selon moi, un code réellement réutilisable. Il s'agit de QtDesigner. Comme
vous l'aurez compris, ce logiciel permettra de produire un code Qt pour Python et en particulier
pour le binding PyQt.
Malheureusement, l'utilisation de QtDesigner comporte deux principaux problèmes :
-
il ne produit pas directement du code Python. Il faut passer par une commande particulière pour transformer
le code obtenu en code Python ;
-
il ne permet pas d'avoir directement la main sur le code Python. Il est par exemple impossible de créer
des slots personnalisés directement avec QtDesigner.
Heureusement, il existe un logiciel permettant de travailler rapidement et efficacement avec les fichiers
produits par QtDesigner. Ce logiciel en question est Eric, un EDI pour Python très performant. Nous
verrons donc, au cours de ce tutoriel, comment créer une application graphique grâce au couple QtDesigner
/ Eric.
II. Installation
Supposant que Python et PyQt soient correctement installés sur votre PC, on rappelle comment faire une bonne
installation de QtDesigner et d'Eric.
À noter que, à ce jour et à ma connaissance, seule la distribution Fedora 15 permet d'installer, via
le gestionnaire de paquets, PyQt pour Python3. Pour les autres distributions, l'installation devra
se faire manuellement en téléchargeant les archives nécessaires sur le site
de PyQt. Vous trouverez dans la FAQ PyQt / PySide de Developpez.com
(note : lien à faire avec la faq ou le forum), la marche à suivre pour installer correctement PyQt pour cette version de
Python.
II-A. Installation de 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
On ne peut que conseiller d'utiliser le gestionnaire de paquets pour installer simplement et sûrement
QtDesigner. En théorie, les dépendances devraient être gérées correctement. On peut, cependant,
vérifier tout de même que le paquet pyuic est installé.
À noter que peu importe votre version de Python, QtDesigner reste le même. Pour ma part, j'ai juste
dû faire un petit réglage dans Eric pour la version Python3 (voir plus bas).
II-A-2. Installation sous Windows
Habituellement QtDesigner est installé directement avec PyQt. Malgré tout, il vous est possible au moment
de l'installation de PyQt de ne pas installer QtDesigner. Si tel est votre cas, vous pouvez relancer
l'installation de PyQt.
II-B. Installation d'Eric
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
Pour installer Eric 4, c'est-à-dire pour la branche 2 de Python, sur une machine Linux, je vous conseille
d'utiliser votre gestionnaire de paquets. C'est la manière la plus sûre.
Pour la version 5, peu de distributions offrant la possibilité d'installer Qt pour Python 3 avec les
gestionnaires de paquets, il en est de même avec Eric. Il va donc falloir dans la plupart des cas
télécharger les archives soi-même et procéder aux compilations. Cela dit, la documentation est
bien faite et l'installation est relativement facile. Après avoir ouvert l'archive téléchargée
et vérifié que les dépendances sont assurées (voir le fichier README pour plus de détails), lancer
la commande python install.py en tant que root. L'installation devrait parfaitement
se dérouler.
II-B-2. Installation sous Windows
Une fois l'archive téléchargée et décompressée, il suffit de lancer l'invite de commande, de se rendre
dans le répertoire ainsi obtenu et de lancer la commande python install.py.
Cette étape aura créé une liste de .bat dans le répertoire d'installation de Python en fonction
de la version choisie. Double-cliquer sur eric4.bat ou eric5.bat pour lancer Eric.
II-B-3. Remarques communes
Que ce soit sur Linux ou Windows, pour modifier la langue, il faudra télécharger et décompresser l'archive
voulue (deux lettres identifiant le nom de la langue permettront de choisir celle qui vous convient).
De la même manière, pour installer Eric, lancer la commande python install-i18n.py -p dans
le dossier obtenu après avoir extrait l'archive téléchargée.
III. Présentation d'Eric
Eric est un EDI Python. Il permet, entre autres, de créer, modifier et déboguer du code Python. Il possède
toutes les fonctionnalités que l'on peut attendre d'un EDI digne de ce nom. Ci-dessous, une série
de captures d'écran présentant Eric.
Lors du premier lancement, Eric propose de modifier la configuration de base. On passe cette étape si
l'installation reste standard. Dans tous les cas on pourra revenir ici en cliquant sur Configuration
|
Pour les utilisateurs d'Eric sous un environnement Linux, on devra compléter la partie Qt de la configuration.
Après une installation standard, les renseignements suivants doivent être ajoutés.
|
Voici les principaux outils, boutons, zones à connaître :
Eric possède, comme la majorité des EDI, des outils permettant de créer, ouvrir, fermer ou enregistrer un projet (1) et
une console Python (2). Outre ces fonctionnalités, cet EDI dispose aussi d'un outil permettant un accès direct à QtDesigner (3)
et d'un gestionnaire de projet (4) possédant deux onglets très importants :
-
le premier regroupant la liste des fichiers Python du projet (5) ;
-
le deuxième regroupant la liste des fichiers .ui -QtDesigner- du même projet (6).
Nous verrons plus bas comment utiliser les principales fonctions qu'Eric offre pour gérer nos projets.
IV. Présentation de QtDesigner
QtDesigner est un logiciel qui permet de créer des vues graphiques de programmes. Il bénéficie d'une
bibliothèque de widgets parmi les plus courants. Il offre donc la possibilité de créer une fenêtre
en y insérant un, par un glisser-déposer. Par la suite, il permet de modifier leurs propriétés. Ci-dessous,
une capture d'écran présentant QtDesigner. L'utilisation de QtDesigner est très intuitive, c'est
aussi l'une des raisons qui me l'ont fait l'adopter. Cela dit, il semble important de présenter quatre
sections principales :
-
(1) : une fenêtre permettant de créer une nouvelle fenêtre ou d'ouvrir un projet existant ;
-
(2) : deux boutons pour naviguer entre la vue conception graphique et la vue "éditions" de slots ;
-
(3) : la boîte à outils contenant les widgets Qt que l'on pourra utiliser ;
-
(4) : le gestionnaire de projet, permettant d'éditer et de modifier les propriétés de notre fenêtre et
des widgets enfants.
V. Création de notre première application
V-A. Introduction
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.
V-B. Premiers pas avec Eric
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.
V-C. Débogage et test de notre code
À 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.
V-D. Création de l'interface graphique
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.
V-E. Finalisation du projet
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
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 :
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 :
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 :
Main.py |
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.
VI. Conclusion
On vient de voir dans ce tutoriel comment le couple Eric - QtDesigner permet de créer rapidement des
applications graphiques tout en offrant aux développeurs la possibilité d'ajouter facilement leurs propres morceaux
de code. Les principales fonctionnalités et subtilités ont été détaillées ici, ce qui devrait aider le lecteur dans la réalisation
de ses premières applications avec une meilleure productivité, puisque toute la partie graphique
est codée depuis le travail dans QtDesigner.
VII. Remerciements
J'adresse ici tous mes plus sincères remerciements à l'équipe Qt de Developpez.com et particulièrement
à Thibaut Cuvelier pour sa patience, ses conseils et sa relecture ainsi qu'à Claude Leloup pour sa relecture
orthographique.
Copyright © 2011 Charles-Élie Gentil.
Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de
son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur.
Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 €
de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.