LES INTERFACES GRAPHIQUES

ACTIVITÉ 1 :
Soit l’interface graphique suivante :
CONSIGNE

A l’aide du logiciel QtDesigner,

concevoir une calculatrice en s’inspirant
du modèle à gauche.

ETAPE N°1 : CONCEPTION DE L’INTERFACE

Lancer Qt Designer
Sélectionner Main Window et valider.

Enregistrer l’interface dans le dossier de travail sous le nom calculatrice.ui.

Changer le titre MainWindow de l’interface par Activité1.

Taper le nom ICI.

3 SI - Algo. & Programmation 1

LES INTERFACES GRAPHIQUES
Insérer un titre dans votre espace de travail (Ma super calculatrice)

Glisser et déposer

Appliquer des styles au titre (des mises en forme)

Insérer un conteneur pour organiser les différents widgets à utiliser.

Glisser et déposer

Insérer les différents widgets à utiliser.

3 SI - Algo. & Programmation 2

LES INTERFACES GRAPHIQUES
Modifier les paramètres de chaque widget.

Dans l’inspecteur d’objet,

cliquer deux fois sur le
l’objet pour modifier le nom
(donner un nom facile à
retenir. On aura besoin de
ce nom dans le
programme Python).

ETAPE N°2 : LA PROGRAMMATION DES OBJETS EN PYTHON

Lancer l’IDE Python disponible.
Installer la bibliothèque graphique PyQt5 pour pouvoir utiliser les widgets utilisés au
niveau de l’interface graphique créée.

PYQT
PyQt est un module qui permet de lier le
langage Python avec la bibliothèque Qt.
Il permet ainsi de créer des interfaces
graphiques en Python.

Importer les bibliothèques nécessaires ( QtWidgets et uic)

QtWidgets :gère le flux de contrôle des différents signaux et slots des widgets
utilisés.
Uic permetd’utiliser la méthode de chargement de l’interface créée: load.

Faire la liaison entre QtDesigner et Thonny en ajoutant les lignes de code suivantes au
niveau du programme principal.

Activer les différents boutons en appelant les fonctions adéquantes.

3 SI - Algo. & Programmation 3

LES INTERFACES GRAPHIQUES
Récupérer le texte dans la variable a

a = u . x . text () )

Mettre un texte dans la zone de texte de l’interface

u. r . setText ( str ( a + b ) )

a = u .x .text () )
a 15

b = u.y.text () ) b 5

u.r.setText(str(a+b))

3 SI - Algo. & Programmation 4