1interfaces graphiques (gui) - tutorielfacepress.net/pdf/582.pdf · • boite à outils qt et pyqt....

24
Ce tutoriel est basé sur l'excellentissime tutoriel C++ http://www.siteduzero.com/tutoriel-3-11240-introduction-a-qt.html Je n'ai fait que l'adapter aux spécificité de python et PyQt Prérequis : POO (Programmation Orientée Objet) et Python. Nous supposerons que PyQt est déjà installé et configuré. Sommaire du chapitre : Interfaces graphiques Qt, PyQt et PiSide Boite à outils Qt et PyQt

Upload: vuongdien

Post on 15-Sep-2018

258 views

Category:

Documents


6 download

TRANSCRIPT

Page 1: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

Ce tutoriel est basé sur l'excellentissime tutoriel C++ http://www.siteduzero.com/tutoriel-3-11240-introduction-a-qt.htmlJe n'ai fait que l'adapter aux spécificité de python et PyQt

Prérequis : POO (Programmation Orientée Objet) et Python.

Nous supposerons que PyQt est déjà installé et configuré.

Sommaire du chapitre :

• Interfaces graphiques • Qt, PyQt et PiSide • Boite à outils Qt et PyQt

Page 2: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

1 Interfaces Graphiques (GUI)

Programme sans GUI (console)

Programme GUI, ici sous Linux

2 choix :• application écrite spécialement pour l'OS => non portable. • bibliothèque qui s'adapte à tous les OS, (multi-plateforme).

Page 3: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

Il existe pléthore de boites à outils pour le développement d'interfaces graphiques :

Qt Windows, Mac and GNU/Linux LGPL C++, Python, Java, C#, Ruby, Ada, Pascal, Perl, PHP, Lua, Dao, Tcl, Lisp, D, Harbour

FLTK UNIX/Linux (X11), Windows, and MacOS

LGPL 2 C++, Ruby, Tcl, Lua, Python

FOX Linux, FreeBSD, MS-Window LGPL C++, Python, Ruby and Eiffel

GTK+ Windows, GNU/Linux and Unix, OSX and mobile devices

LGPL 2.1 C++ ,C# , Java , Python , JavaScript, Vala, Perl, Lua, Guile , Ruby , PHP, Ada , OCaml, D , Harbour

Ultimate++ Windows, Linux/FreeBSD, Mac OS C++

MFC (Microsoft Foundation Classes) Windows Visual Studio obligatoire

Tkinter Windows, Mac OS, GNU/Linux Python Licence

python

VCF Windows BSD License C++, Lua

WideStudio Windows, Linux, FreeBSD, MacOSX

très permissive

C/C++, Java, Perl, Ruby, Python,Objective, Caml

wxWidgets Windows, Mac OS, GNU/Linux, FreeBSD

LGPL + C++, python, perl, java, lua, eiffel, C# (.NET), basic, ruby, javascript

Page 4: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

1.1 Les bibliothèques propres aux OS

Chaque OS propose au moins une bibliothèque qui permet de créer des fenêtres.

• Windows : API Win32. Bibliothèque Complexe utilisable dans tous les langages (C, C++, Java, Python...) • L'API Win32 est un ensemble de fonctions. • Non POO . => Surcouche MFC orientée objet• remplacée par la bibliothèque .NET multi-plateforme.

• Mac OS X : Cocoa. • "Objective C", java, python• orientée objet.

• Linux : X = base des interfaces graphiques de Linux. • Xlib, mais on programme rarement en Xlib.• plus simple d'utilisation et multi-plateforme : GTK+ ou Qt.

Page 5: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

1.2 Les bibliothèques multi-plateforme

Avantages :• Simplification de la création d'une fenêtre.• uniformisation, ensemble cohérent facile de s'y retrouver. Noms des fonctions et des classes choisis de manière logique. • indépendantes du système d'exploitation et de la version du système.• Bibliothèques pérennes.

Voici quelques-unes des principales bibliothèques multi-plateforme à connaître, au moins de nom :• .NET (prononcez "Dot Net") : successeur de Win32. Souvent associé à C#, langage créé par Microsoft. NET est portable car Microsoft

a expliqué son fonctionnement. .NET porté sous Linux avec Mono.• GTK+ : une des plus importantes bibliothèques utilisées sous Linux. Elle est portable : Linux, Mac OS et Windows. GTK+ est utilisable

en C, en C++ (GTKmm)Très utilisée par Gnome, mais fonctionne aussi sous KDE. =>Firefox par exemple.

• Qt : très utilisée sous Linux, en particulier KDE. à partir de Qt 4.5, licence LGPL v2.1[• wxWidgets : bibliothèque objet très complète, comparable à Qt. Licence plus ouverte que celle de Qt. Mais Qt plus facile à prendre en

main au début. • FLTK : légère. Dédiée à la création d'interfaces graphiques multi-plateforme.

Alors Qt ou wxWidgets ?

Qt plus facile à prendre en main (plus "pédagogique").Qt très bien documentéQt plus qu'une bibliothèque de widgets, mais un framework comple

Page 6: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

2 Qt, PyQt, PySideQt est une bibliothèque multi-plateforme pour créer des GUI (programme sous forme de fenêtre).Qt écrite en C++, elle est faite pour être utilisée à la base en C++, mais il est aujourd'hui possible de l'utiliser dans d'autres langages comme Java, Python, etc.

PyQt est un module libre qui permet de lier le langage Python avec la bibliothèque Qt distribué sous deux licences : une commerciale et la GNU GPL. Il permet ainsi de créer des interfaces graphiques en python. Une extension de QtDesigner (utilitaire graphique de création d'interfaces Qt) permet de générer le code Python d'interfaces graphiques.Le 18 août 2009, après des pourparlers avec les auteurs de PyQt pour un changement de licence[1], Nokia distribue sa propre bibliothèque de lien entre Python et Qt : pyside[2], sous une licence plus permissive, la licence publique générale limitée GNU (LGPL).

Page 7: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

2.1 Plus qu'une bibliothèque : un framework

plus qu'une bibliothèque : un ensemble de bibliothèques. On parle plutôt de framework.Qt est à la base faite pour créer des fenêtres, c'est sa fonction centrale. Mais ce serait dommage de limiter Qt à ça.

Les modules Qt :• Module GUI : c'est toute la partie création de fenêtres. Nous nous concentrerons surtout sur le module GUI dans ce cours. • Module OpenGL : Qt peut ouvrir une fenêtre contenant de la 3D gérée par OpenGL. • Module de dessin : pour dessiner dans leur fenêtre (en 2D), module de dessin très complet ! • Module réseau : pour accéder au réseau, Chat, client FTP, client Bittorent, lecteur de flux RSS... • Module SVG : création images et animations vectorielles, à la manière de Flash. • Module de script : Qt supporte le Javascript (ou ECMAScript), • Module XML : échanger des données avec des fichiers formés à l'aide de balises, un peu comme le XHTML. • Module SQL : accès aux bases de données (MySQL, Oracle, PostgreSQL...).

Avec l'évolution de Qt 4, d'autres modules sont conçus :• QtDBus : pour la communication inter-processus en utilisant D-Bus (uniquement sous Unix à partir de Qt 4.2) ; • QtSvg : pour l'affichage d'images aux formats SVG (à partir de Qt 4.1) ; • QtUiTools : pour charger dynamiquement les interfaces graphiques créées avec Qt Designer (à partir de Qt 4.1) ; • QtTest : pour effectuer des tests unitaires (à partir de Qt 4.1) ; • QtScript : pour l'évaluation de scripts utilisant Qt Script (à partir de Qt 4.3) ; • QtWebKit : portage du moteur de rendu web WebKit (à partir de Qt 4.4) ; • QtXmlPatterns : pour manipuler des documents XML via XQuery et XPath (à partir de Qt 4.4); • Phonon : intégration de Phonon, framework multimédia de KDE 4, développé en collaboration avec la communauté KDE (à partir de Qt

4.4) ; • QtScriptTools : divers outils pour QtScript comme un débogueur (à partir de Qt 4.5).

Qt n'est pas gros, Qt est énormeOn se concentrera ici surtout sur la partie GUI.Pour aller plus loin, lire la documentation officielle (uniquement en anglais, comme toutes les documentations pour les programmeurs de toute façon). Documentation est très bien faite.

Cf chapitre suivant comment naviguer dans cette documentation.

Page 8: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

2.2 Qt est multiplateforme

Qt est un framework multiplateforme. Je le sais je me répète, mais c'est important de l'avoir bien compris. Tenez, d'ailleurs voilà un schéma qui illustre le fonctionnement de Qt :

Vous codez pour Qt, et Qt traduit les instructions pour l'OS.

Voici une démonstration de ce que je viens de vous dire. Vous avez ci-dessous le même programme, donc la même fenêtre créée avec Qt, mais sous différents OS. Vous allez voir que Qt s'adapte à chaque fois :

Page 9: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

Sous Windows Vista Sous Windows XP

Sous Linux Sous Mac OS X

Le même programme python s'adapte automatiquement à tous les OS.L'avantage du C++ par rapport à python est sa rapidité (bien que la différence se sente de moins en moins, sauf pour dans les jeux vidéo qui ont besoin de rapidité et qui sont donc majoritairement codés en C++), mais le programme C++ nécessite une compilation distincte pour chaque OS.

Page 10: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

2.3 L'histoire de Qt

Qt s'écrit "Qt" et non "QT", donc avec un "t" minuscule )Qt signifie "Cute" (prononcez "Quioute"), ce qui signifie "Mignonne", parce que les développeurs trouvaient que la lettre Q était jolie dans leur éditeur de texte.

Qt est une framework développé par la société Trolltech, basée à Oslo en Norvège.Développement de Qt initié en 1991 et il a été dès le début utilisé par KDE, un des principaux environnements de bureau de Linux.

En janvier 2008, Nokia lance une OPA amicale pour racheter Qt et Trolltech. Trolltech, renommé en Qt Software, devient une division de Nokia. En janvier 2009 Nokia abaisse au maximum les barrières pour faciliter l'adoption de Qt, qui depuis est utilisé par leur développements en interne :

• ajout d'une licence plus permissive que la GPL, la LGPL ; • ouverture du développement à des développeurs externes en rendant accessible le dépôt de Qt.

Page 11: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

2.4 Qui utilise Qt ?

Une bibliothèque comme Qt a besoin de références, c'est-à-dire d'entreprises célèbres qui l'utilisent, pour montrer son sérieux.De ce point de vue là, pas de problème. Qt est utilisée par de nombreuses entreprises que vous connaissez sûrement :

Qt est utilisée pour réaliser de nombreux GUI, comme :• les interfaces des portables Nokia• Adobe Photoshop Elements• Google Earth• Skype• VLC media player• opera

Page 12: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

3 Installation de Qt4 et PyQt4 pour les distributions UbuntuSous Linux, on suppose que Qt4 ainsi que les outils de développement, documentations et démonstrations sont installés et configurés. (packages qt4­demo, qt4­dev­tools, qt4­designer, qt4­doc) On installera également PyQt4 (packages python­qt4 et python­qt4­doc)Ces installations se font en ligne de commande :

puiseux@laptop>

puiseux@laptop>

Sudo apt­get install  qt4­designer 

qt4­demo  qt4­dev­tools  qt4­doc

Sudo apt­get install  python­qt4  

python­qt4­doc 

Page 13: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

3.1 Les programmes installés par Qt

En plus de tous les fichiers nécessaires au développement de GUI, Qt installe 4 programmes qui pourront vous être utiles par la suite.Je vais rapidement vous les présenter mais on ne va pas rentrer dans le détail de chacun d'eux, il est trop tôt.

3.1.1 Qt Examples and Demos

Lancez la commande$ qtdemo

Vous obtenez cet écran

Page 14: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

Le bouton Demonstrations vous donne accès à toutes les démonstrations qui sont documentées en profondeur.Par exemple, Text Edit :

• le bouton Launch vous permet d'éxécuter l'application, • Documentation vous donne accès à la documentation de l'exemple.

Page 15: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

3.1.2 Qt Assistant

Un merveille de documentation

Qt Assistant est la documentation de Qt (C++). Dedans, il y a tout. Tout ce que vous avez besoin de savoir, toutes les fonctionnalités de Qt, toutes les fonctions, toutes les classes que vous pouvez utiliser.C'est ce que vous trouverez de plus complet.

Certes, la documentation est en anglais, comme la plupart des documentations pour développeurs. Elle est néanmoins très bien faite, et savoir s'en servir est indispensable si on veut essayer d'autres choses que ce que j'expliquerai dans le tuto. Je vous apprendrai donc à la lire

dans un prochain chapitre On peut également installer la documentation spécifique PyQt que l'on trouve dans le package python-qt4-doc (debian, ubuntu)

Page 16: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

3.1.3 Qt Linguist

Page 17: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

Qt Linguist est une application à destination des traducteurs. Si votre programme doit être décliné en plusieurs langues, Qt vous offre donc tous les outils dont vous pourriez avoir besoin pour les traduire.

Le gros avantage est qu'il n'y a pas besoin d'être programmeur pour traduire l'application. Il vous suffira de donner un fichier qui contient tout le texte de votre application (généré par Qt), de le donner à traduire à un traducteur avec Qt Linguist, et hop, votre application est multilingue !

Page 18: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

3.1.4 Qt Designer

Qt Designer vous permet, vous l'aurez deviné, de créer les fenêtres de vos applications à la souris.

Normalement, une fenêtre se code (on peut créer une fenêtre rien qu'avec du code sans passer par Qt Designer). Qt Designer vous fera gagner du temps... lorsque vous saurez vous servir de Qt. Avant d'utiliser Qt Designer, il faut savoir coder la fenêtre à la main !

Attention Qt Designer est un piège pour les débutants ! Il est très attirant, on pense que ça va être super simple de créer des fenêtres, mais en fait c'est bien plus complexe que cela. Vous ne DEVEZ PAS vous ruer dessus : vous ne pourriez pas vous en servir et l'exploiter correctement.

Page 19: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

Je vous expliquerai comment fonctionne Qt Designer, mais ce sera plus tard dans le cours. Il est impératif que vous sachiez d'abord coder une fenêtre à la main, sinon vous ne pourrez pas l'utiliser correctement.

Sous ses apparences simples, Qt Designer est en fait une application complexe qu'on ne peut maîtriser que lorsqu'on a déjà de l'expérience

avec Qt. Et cette expérience, on va l'acquérir au fil des chapitres qui suivent

Page 20: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

3.2 Les programmes installés par PyQT

ou par PySide

Page 21: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

3.2.1 Les demonstrations et exemples

Sur ma distribution (ubuntu) les exemples et démonstrations de PyQt sont à lancer en python par le script : /usr/share/doc/python­qt4­doc/examples/tools/qtdemo/qtdemo.py. Pour une raison obscure (trop de niveaux de lien symboliques), il faut que je lance explicitement python suivi du nom du script.puiseux@laptop:~/PyQt/$ >python /usr/share/doc/python­qt4­doc/examples/tools/qtdemo/qtdemo.py

On obtient les exemples python. Les codes sources de ces exemples constituent une mine de renseignements.

Page 22: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

3.2.2 Les autres indispensables PyQt4

• pyuic4 pour traduire designer ==> Python• pylupdate4 - create or update Qt Linguist translation files for PyQt4 applications

pylupdate4 reads a qmake project file (.pro), finds the translatable strings in the specified sources and updates the translation files (.ts files) specified in it. The translation files are given to the translator who can use Qt Linguist to read the files and insert the translations. The .ts file format is a simple human-readable XML format that can be used with version control systems if required.

• pyrcc4 compile Qt resource files for PyQt4 applications

3.2.3 Analogues PySide

• pyside-uic• pyside-lupdate• pyside-rcc4

Page 23: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

3.2.4 La documentation PyQt4

Page 24: 1Interfaces Graphiques (GUI) - Tutorielfacepress.net/pdf/582.pdf · • Boite à outils Qt et PyQt. 1Interfaces Graphiques (GUI) ... 3.1.2 Qt Assistant Un merveille de documentation

3.2.5 Documentation PySide