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

| Charles-Élie Gentil | Jiyuu |

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

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

- Auteurs : Charles-Élie Gentil, Jiyuu

- Parution : 23 septembre 2011

- Mise à jour : 23 septembre 2011

- Licence : Copyright ® 2011 Charles-Élie Gentil. Aucune reproduction, même partielle, ne peut être faite de ce site et 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.

Sommaire

- 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 le forum PyQt / PySide de Developpez.com 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

@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 :

Main.py

#! /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.

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.