Mr.

Anis ELBAHI Programmation 3SI-1

12. Les Interfaces graphiques

11.1 – Qu’est-ce qu’une interface graphique ?
En informatique, une interface graphique (GUI ) est un
système qui permet à un utilisateur de communiquer avec
son ordinateur, smartphone, TV, … autrement dit c'est le
…………………………………………. (menus, boutons,
zones de texte, cases à cocher, …) sur une fenêtre de l’écran.

Les premières interfaces étaient uniquement textuelle. Il fallait taper du code textuel pour que l'ordinateur lance un
logiciel. Xerox fut la première entreprise à proposer un ordinateur avec une interface graphique, c'est à dire une
interface composée d'image sur lesquelles on clique avec une souris, puis Apple avec popularisa l'interface graphique.
Aujourd'hui tous les ordinateurs sont équipés d'interface graphique.

Dans le présent Cours on utilisera Qt Designer

pour créer des interfaces Graphiques et Python pour
les programmer.

11.2 – Exercices d’apprentissage

Exercice 40 (Préparation de l’environnement « Installation »)

1- Installer python (www.python.org) et choisir la dernière version

2- Vérifier qu’il est installé (cmd → python - - version)
3- Installer PyQt5 (cmd → pip install pyqt5)
4- Puis installer les outils de pyqt5 : (cmd → pip install pyqt5-tools)
5- Télécharger et installer QT designer (https://build-system.fman.io/qt-designer-download)

Exercice 41 (Espace de Travail)

……………………
Compléter par le nom de chaque rubrique. ……………………
……………………
…………………… ………………

………………
……………………
……………………

………………

Boite à widgets …………………… ……………………

…………………… ……………………

……………… ………………

Espace de travail
41
 Mr. Anis ELBAHI Programmation 3SI-1

Exercice 42 (Application1 : Hello)

1- Lancer QtDesigner et créer l’interface graphique suivante et enregistrer-la sous le nom "hello.ui" :

Label Line_edit : portant le nom "n"

Line_edit : portant le nom "p"

PushButton : portant le nom "b"

Line_edit : portant le nom "msg"

2- Après avoir remplir les zones nom et prénom et à la suite

du clic sur le bouton valider , le message «Bienvenue nom
prénom" sera affiché dans la zone « msg » comme le montre
l’interface ci-contre .

Solution :

42
 Mr. Anis ELBAHI Programmation 3SI-1

Exercice 43 (Application 2 : Somme 2 nombres)

1- Lancer QtDesigner et créer l’interface graphique suivante et enregistrer-la sous le nom "somme.ui" :

Line_edit : "x"
Label
Line_edit : "y"

Push Button : "b"

Line_edit : "r"
2- Le clic sur le bouton calculer permet de calculer et d’afficher la somme de x et y dans la zone
correspondante.
3- Modifier le texte du bouton « Calculer » par « Somme »
4- Ajouter un bouton pour la multiplication, un autre pour la division et un autre pour la soustraction
Solution :

Exercice 44 (Application 3 : PGCD(X,Y))

1- Lancer QtDesigner et créer l’interface graphique suivante et enregistrer-la sous le nom "pgcd.ui" :

2- Le clic sur le bouton « PGCD » permet de calculer et

d’afficher le PGCD de x et y dans la zone correspondante.

43
 Mr. Anis ELBAHI Programmation 3SI-1

Exercice 45 (Application 4 : Produits de facteurs premiers)

1 -Lancer QtDesigner et créer l’interface

graphique suivante et enregistrer-la sous
le nom "facteurs.ui" :

2- le clique sur le bouton « décomposer »

permet de :
Vérifier si l’entier saisi est positif ou non.
dans le cas négatif un message d’erreur doit être
affiché dans la zone de résultat et dans le cas
affirmatif l’entier saisi doit être écrit sous forme
de produit de facteurs premiers comme le montre
l’exemple d’exécution ci-contre :

Solution :

44
 Mr. Anis ELBAHI Programmation 3SI-1

Avancé :
Exercice 46 (Application 5 : Manipulation d’un tableau )

1 -Lancer QtDesigner et créer l’interface graphique suivante et enregistrer-la sous

le nom "tableau.ui" en respectant l’object Inspector:

3 4 8
1
2
9 3
1 7 4
5
6
2 6
7
8
9
5

1 Le bouton « ajouter l’élément » : Ajout un élément (x) à la fin du tableau t1

5 Le bouton « vider le tableau » : supprimer le contenu du tableau

Le bouton « Somme tableau » : calculer la somme du tableau et afficher le

2
résultat dans la zone
6

Le bouton « valider » : vérifie si l’entier saisi dans la zone 4 est compris

8
entre 1 et 10 ou non. Si oui il autorise le remplissage du tableau

2- Commenter le code suivant :

45
 Mr. Anis ELBAHI Programmation 3SI-1

Code :

46
 Mr. Anis ELBAHI Programmation 3SI-1

Manipulation de l’objet Combo Box

Exercice 47 (Application 6 : Combo Box )

1 -Lancer QtDesigner et créer l’interface graphique suivante et enregistrer-la sous
le nom « PPCM_PGCD.ui »

Combo Box contenant deux

éléments (PGCD et PPCM)

2- Après avoir saisir deux entiers X et Y , l’utilisateur doit choisir PGCDE

l’opération à effectuer (PGCD ou
PPCM) à partir du ComboBox et suite au clique sur le bouton « Calculer » le résultat correspondant à
l’opération choisie doit être affiché dans la zone correspondante.

Exercice 48 (Application 7 : Combobox )

1 -De l’interface créée dans l’exercice précèdent, supprimer le bouton « Calculer »

2- Pour exécuter la commande adéquate, utiliser la commande activated.

47
 Mr. Anis ELBAHI Programmation 3SI-1

Manipulation de l’objet Radio Button

Exercice 49 (Application 8 : Radio Button )

1 -Sur l’interface de l’exercice précèdent supprimer le ComboBox et remplacer-le par deux boutons
radio comme le montre la figure suivante :

Deux boutons radio

2- Après avoir saisir deux entiers X et Y , l’utilisateur PGCDE

doit choisir l’opération à effectuer (PGCD ou
PPCM) en cochant le bouton radio correspondant et suite au clique sur le bouton « Calculer » le
résultat correspondant à l’opération choisie doit être affiché dans la zone correspondante.
3- Supprimer le bouton « Calculer » et lancer l’exécution de la fonction adéquate en utilisant la
commande :

Manipulation de l’objet Check Box

Exercice 50 (Application 9 : Check Box )

1- Créer l’interface suivante à l’aide de QtDesigner .

2- Après avoir cocher les réponses et suit au clique sur le bouton « Répondre », la note obtenue par le
participant sera affichée dans le label sachant que chaque réponse correcte est sur 4 points

48