Création d’une application graphique de base

La création d’une application graphique est une étape avec laquelle beaucoup de développeurs veulent franchir. En effet, elle sert à fournir une interface visuelle à l’utilisateur pour interagir avec le système, améliorant ainsi grandement l’expérience utilisateur. Cependant, avant de plonger dans la conception d’une interface graphique, il est important de bien structurer votre solution. L’architecture de votre programme doit être claire et robuste pour supporter une interface graphique complexe. Il est donc fortement recommandé de commencer par l’implémentation des objets de base et de valider leur fonctionnement à l’aide de la console. Cela permet de s’assurer que le cœur de votre programme est solide et opérationnel avant de commencer à bâtir une interface utilisateur autour de celui-ci.

Après avoir assuré une base solide pour votre application, l’étape suivante consiste à choisir une bibliothèque pour vous aider à construire l’interface graphique. Pour le cours présent, il a été choisi d’utiliser PySimpleGUI, une bibliothèque Python qui offre un moyen simple et intuitif de créer des interfaces graphiques. Cette bibliothèque a été choisie pour plusieurs raisons. Tout d’abord, elle est compatible avec Windows, Mac et Linux, ce qui en fait une option versatile pour diverses plateformes. Ensuite, PySimpleGUI est connue pour sa facilité d’utilisation. Les programmeurs débutants peuvent rapidement commencer à créer des interfaces graphiques sans se perdre dans une abondance de détails compliqués.

Enfin, l’esprit de PySimpleGUI est de permettre aux développeurs de créer des interfaces rapidement et pratiques, sans se soucier de leur esthétique ou de l’installation de nombreuses dépendances. L’objectif est de vous permettre de vous concentrer sur la fonctionnalité de votre application plutôt que sur la beauté de l’interface. Bien sûr, cela ne signifie pas que les interfaces créées avec PySimpleGUI sont moches au point d’être inutilisable. Mais, l’accent est mis sur la rapidité et la praticité du développement, ce qui est une philosophie parfaitement adaptée à un cours axé sur la programmation orientée objet en Python.

Installation de PySimpleGUI

Pour installer PySimpleGUI, plusieurs méthodes peuvent être utilisées selon votre environnement de développement et votre système d’exploitation. Dans tous les cas, assurez-vous d’avoir une version de Python 3.6 ou supérieure installée sur votre système.

Installation avec PIP

Pip est le gestionnaire de paquets de Python. Il permet d’installer facilement des bibliothèques Python sur votre système. Pour installer PySimpleGUI avec pip, ouvrez une console (ou un terminal sur Mac et Linux) et tapez la commande suivante: pip install PySimpleGUI. Si vous avez plusieurs versions de Python installées sur votre système, il se peut que vous deviez utiliser pip3 à la place de pip.

Utilisation d’un fichier requirements.txt

Une autre méthode pour installer PySimpleGUI consiste à utiliser un fichier requirements.txt. Ce fichier contient une liste des dépendances de votre projet. Pour utiliser cette méthode, créez un fichier requirements.txt dans le répertoire racine de votre projet et ajoutez-y la ligne suivante: PySimpleGUI. Une fois que vous avez modifié votre fichier requirements.txt, de nombreux environnements de développement comme PyCharm le détectent automatiquement et peuvent gérer l’installation des dépendances pour vous. Il est donc inutile d’exécuter manuellement la commande pip dans la console dans de nombreux cas.

Néanmoins, si votre IDE ne détecte pas les changements ou si vous préférez directement travailler depuis la console, vous pouvez toujours utiliser pip pour installer toutes les dépendances de votre projet en une seule fois. Pour cela, naviguez jusqu’au répertoire contenant le fichier requirements.txt dans votre console et tapez la commande suivante : pip install -r requirements.txt. Cette commande indique à pip de lire le fichier requirements.txt et d’installer toutes les bibliothèques listées. 

Installation via PyCharm

Si vous utilisez PyCharm comme environnement de développement, vous pouvez installer PySimpleGUI directement depuis l’IDE. Pour ce faire, allez dans File > Settings > Project: [Your Project Name] > Python Interpreter. Cliquez sur le + à droite de la fenêtre qui s’ouvre. Dans la nouvelle fenêtre qui apparaît, cherchez “PySimpleGUI” dans la barre de recherche, sélectionnez-le et cliquez sur Install Package en bas à gauche.

Conception d’une interface graphique de base

Pour commencer, il faut tout d’abord importer le module PySimpleGUI dans votre script. Ceci est effectué grâce à la commande import PySimpleGUI as sg. Cette ligne de code vous donne accès à toutes les fonctionnalités offertes par PySimpleGUI sous l’alias sg.

Après l’importation de PySimpleGUI, la première étape pour créer une interface graphique est de définir votre layout. Le layout est la structure de votre fenêtre et il détermine l’agencement des différents widgets (comme des boutons, des zones de texte, etc.) sur votre interface. En PySimpleGUI, le layout est simplement une liste de listes, où chaque liste intérieure représente une ligne dans la fenêtre. Voici un exemple de code pour un layout simple. Dans cet exemple, notre interface contient une ligne avec un texte de bienvenue.

layout = [
    [sg.Text('Bonjour, bienvenue dans notre application !')]
]

Après avoir défini le layout, vous pouvez créer une fenêtre en utilisant la classe sg.Window. Cette classe prend le titre de la fenêtre et le layout comme arguments principaux. Voici comment vous pouvez créer une fenêtre avec le layout que nous avons défini plus tôt :

window = sg.Window('Ma première interface', layout)

La dernière étape consiste à créer une boucle d’événements pour gérer les interactions de l’utilisateur avec l’interface. Cette boucle continuera de tourner tant que la fenêtre est ouverte, et elle réagira en conséquence lorsque l’utilisateur interagit avec les widgets de l’interface. Voici à quoi pourrait ressembler une boucle d’événements simple : Dans cet exemple, la boucle se termine (et donc la fenêtre se ferme) si l’utilisateur ferme la fenêtre.

while True:
    event, values = window.read()
    if event == sg.WINDOW_CLOSED:
        break

import PySimpleGUI as sg

layout = [
    [sg.Text('Bonjour, bienvenue dans notre application !')]
]

window = sg.Window('Ma première interface', layout)

while True:
    event, values = window.read()
    if event == sg.WINDOW_CLOSED:
        break

window.close()

Gestion des événements

Dans le cadre d’une application graphique, un « événement » se réfère à une action ou une occurrence spécifique détectée par le programme. Il peut s’agir de diverses interactions de l’utilisateur avec l’interface, comme un clic de souris sur un bouton, la saisie de texte dans un champ, le déplacement de la souris, etc. Chaque interaction avec un élément de l’interface (un widget) génère un événement que le programme peut ensuite traiter.

Le traitement des événements dans PySimpleGUI est basé sur une structure appelée « boucle d’événements ». Il s’agit en réalité d’une boucle qui vérifie constamment si de nouveaux événements se sont produits. Si c’est le cas, il exécute le code approprié pour cet événement.

Lors de la création d’un widget, vous pouvez assigner un « nom d’événement » ou une « clé » à ce widget. Cette clé est une chaîne unique que vous définissez et qui est utilisée pour identifier l’événement lorsqu’il se produit. En d’autres termes, lorsque l’utilisateur interagit avec le widget, un événement portant le nom de cette clé est généré. Les clés vous permettent de contrôler précisément le comportement de votre application en réponse à l’interaction de l’utilisateur. Vous pouvez associer différentes actions à différents événements, ce qui vous permet de créer des applications complexes et interactives.

Dans l’exemple ci-dessous, le bouton est créé avec la clé ‘OK_BUTTON’. Donc, lorsqu’un utilisateur clique sur ce bouton, un événement appelé ‘OK_BUTTON’ est généré. La boucle d’événements vérifie constamment les nouveaux événements et, lorsqu’elle détecte ‘OK_BUTTON’, elle exécute le code approprié (dans notre cas, elle affiche simplement dans la console “clic détecté!”).

import PySimpleGUI as sg

layout = [[sg.Button('OK', key='OK_BUTTON')]]

window = sg.Window('Mon application', layout)

while True:
    event, values = window.read()
    if event == sg.WINDOW_CLOSED:
        break
    if event == 'OK_BUTTON':
        print("Clic détecté!")

window.close()

Widgets de base de PySimpleGUI

Les widgets sont des éléments graphiques de base qui constituent l’interface utilisateur d’une application. Ils sont les briques qui vous permettent de concevoir et de construire votre interface utilisateur. PySimpleGUI offre une variété de widgets, également appelés « éléments », qui facilitent la création d’interfaces utilisateur interactives. Ces widgets peuvent être combinés de diverses manières pour créer une interface utilisateur complexe. PySimpleGUI offre par ailleurs d’autres widgets plus avancés, mais ces éléments vous permettront déjà de créer une grande variété d’interfaces utilisateur. Nous verrons comment utiliser chacun de ces widgets dans les sections suivantes.

Text

L’élément Text est probablement le widget le plus simple de PySimpleGUI. Il est utilisé pour afficher du texte sur l’interface utilisateur, nous l’avons déjà remarqué dans l’exemple de base. Vous pouvez contrôler différents aspects du texte avec les paramètres de l’objet Text. Par exemple, vous pouvez modifier la couleur du texte et la police utilisée pour l’afficher. Voici comment vous pouvez afficher le texte en rouge avec une police différente :

sg.Text('Bonjour tout le monde!', text_color='red', font=('Helvetica', 20))

Button

Le widget Button de PySimpleGUI est un élément fondamental dans la construction d’interfaces utilisateurs interactives, nous l’avons déjà remarqué dans l’exemple de base. Comme son nom l’indique, il crée un bouton sur lequel l’utilisateur peut cliquer pour déclencher une action spécifique. Ce widget est très utile, car il permet d’interagir avec l’utilisateur et d’effectuer des actions basées sur les interactions de l’utilisateur.

Dans l’exemple ci-dessous, nous avons créé un bouton avec le texte ‘Cliquez moi’. Lorsqu’on clique sur ce bouton, le message ‘Le bouton a été cliqué!’ est affiché dans la console. Le programme attend un événement grâce à la méthode window.read(). Cette méthode renvoie le nom de l’événement et les valeurs de tous les widgets de la fenêtre. Lorsque l’utilisateur clique sur le bouton, l’événement est capturé et son nom, qui est par défaut le texte du bouton, est comparé aux conditions définies dans la boucle while. Si l’événement correspond à ‘Cliquez moi’, alors le message ‘Le bouton a été cliqué!’ est affiché.

import PySimpleGUI as sg

layout = [[sg.Button('Cliquez moi')]]

window = sg.Window('Titre de la Fenêtre', layout)

while True:
    event, values = window.read()
    if event == sg.WINDOW_CLOSED:
        break
    if event == 'Cliquez moi':
        print('Le bouton a été cliqué!')

window.close()

InputText

Le widget InputText est un élément de saisie de texte dans PySimpleGUI. C’est un champ de texte interactif qui permet à l’utilisateur d’entrer une chaîne de caractères. Cette entrée peut être récupérée et utilisée ailleurs dans votre application. Dans l’exemple ci-dessous, on crée un champ InputText avec une clé -INPUT-. Les clés sont importantes, car elles vous permettent de récupérer la valeur entrée par l’utilisateur dans le widget InputText. Ensuite, un bouton Ok est ajouté. Lorsque l’utilisateur clique sur ce bouton, le programme lit l’événement et récupère la valeur du champ InputText grâce à values['-INPUT-']. 

Notez que le texte entré sera récupéré comme chaîne de caractères, même si l’utilisateur a entré des nombres. Si vous avez besoin de manipuler des nombres, vous devrez convertir cette chaîne en un nombre approprié avec les fonctions int() ou float().

import PySimpleGUI as sg

layout = [[sg.InputText(key='-INPUT-')],
          [sg.Button('Ok')]]

window = sg.Window('Input Text Example', layout)

while True:
    event, values = window.read()
    if event == sg.WINDOW_CLOSED or event == 'Ok':
        break

window.close()

print('Vous avez entré: ', values['-INPUT-'])

Checkbox et RadioButton

Un Checkbox en PySimpleGUI est un widget qui permet à l’utilisateur de sélectionner ou de désélectionner une option. L’option est généralement représentée comme une case qui peut être cochée ou décochée. Dans l’exemple ci-dessous, deux options sont présentées à l’utilisateur. Les valeurs True et False du paramètre défaut déterminent si la case est initialement cochée ou non. Lorsque l’utilisateur coche ou décoche une case, les valeurs associées (values['-CHECKBOX1-'] et values['-CHECKBOX2-']) sont mises à jour.

import PySimpleGUI as sg

layout = [[sg.Checkbox('Option 1', default=True, key='-CHECKBOX1-')],
          [sg.Checkbox('Option 2', default=False, key='-CHECKBOX2-')]]

window = sg.Window('Checkbox Example', layout)

while True:
    event, values = window.read()
    if event == sg.WINDOW_CLOSED:
        break
    print(values['-CHECKBOX1-'], values['-CHECKBOX2-'])

window.close()

Le widget RadioButton fonctionne de manière semblable à une Checkbox, à la différence que les boutons radio sont généralement utilisés lorsque vous voulez que l’utilisateur sélectionne une seule option parmi plusieurs. Dans PySimpleGUI, un groupe de boutons radio est représenté par plusieurs objets RadioButton avec le même group_id. Dans l’exemple ci-dessous, lorsque l’utilisateur sélectionne l’une des options, l’option précédemment sélectionnée est automatiquement désélectionnée. Les valeurs associées (values['-RADIO1-'] et values['-RADIO2-']) sont mises à jour en conséquence.

import PySimpleGUI as sg

layout = [[sg.Radio('Option 1', "RADIO1", default=True, key='-RADIO1-')],
          [sg.Radio('Option 2', "RADIO1", default=False, key='-RADIO2-')]]

window = sg.Window('Radio Button Example', layout)

while True:
    event, values = window.read()
    if event == sg.WINDOW_CLOSED:
        break
    print(values['-RADIO1-'], values['-RADIO2-'])

window.close()

ComboBox

Le widget ComboBox est un élément d’interface utilisateur qui présente à l’utilisateur une liste déroulante d’options parmi lesquelles choisir. Il est particulièrement utile lorsque vous avez un ensemble fixe d’options et que vous souhaitez que l’utilisateur en sélectionne une. Dans l’exemple ci-dessous, fruits est la liste des options qui seront affichées dans le ComboBox. Le key attribué à l’élément Combo est -COMBO-. Nous utilisons cette clé pour accéder à la valeur sélectionnée par l’utilisateur quand l’événement ‘OK’ est déclenché. La boucle while lit les événements et les valeurs de la fenêtre jusqu’à ce que l’utilisateur ferme la fenêtre ou clique sur le bouton ‘OK’. Ensuite, nous fermons la fenêtre et affichons l’option que l’utilisateur a sélectionnée à partir du ComboBox.

import PySimpleGUI as sg

fruits = ["Pomme", "Banane", "Cerise", "Dattes", "Figue"]
layout = [[sg.Combo(fruits, key='-COMBO-')],
          [sg.Button('OK')]]

window = sg.Window('ComboBox Example', layout)

while True:
    event, values = window.read()
    if event == sg.WINDOW_CLOSED or event == 'OK':
        break

window.close()
print('Vous avez choisi :', values['-COMBO-'])

Image

Enfin, le widget Image de PySimpleGUI est un outil qui vous permet d’afficher une image dans votre interface graphique. Il est capable de gérer plusieurs formats d’images, comme PNG et JPEG, entre autres. Pour utiliser le widget Image, vous devez spécifier le chemin vers l’image que vous voulez afficher lors de l’instanciation de l’objet Image. Dans l’exemple ci-dessous, dans le layout, nous instancions un objet Image et nous lui fournissons le chemin de l’image que nous voulons afficher à l’aide du paramètre filename. Notez que le chemin d’accès à l’image doit être valide, sinon une erreur sera générée. Si l’image est dans le même dossier que le script, vous pouvez simplement donner le nom du fichier de l’image. Si l’image est dans un autre dossier, vous devez fournir le chemin d’accès complet ou relatif à l’image.

import PySimpleGUI as sg

layout = [
    [sg.Image(filename='chemin_vers_votre_image.png')]
]

window = sg.Window("Exemple d'Image", layout)

while True:
    event, values = window.read()
    if event == sg.WINDOW_CLOSED:
        break

window.close()

Avec cette introduction à PySimpleGUI, vous avez désormais les clés pour comprendre et construire des interfaces graphiques. La manipulation des widgets élémentaires, ainsi que l’assimilation de la boucle des événements constituent les fondations nécessaires à tout développement d’interfaces utilisateurs efficaces et interactives. La prochaine section de notre cours vous conduira plus loin, en se concentrant sur la création de fenêtres plus complexes et sur l’intégration de ces interfaces avec les objets définis dans votre application. Nous allons aborder la manière dont ces interfaces graphiques peuvent être imbriquées dans la logique de votre code, permettant ainsi l’élaboration d’applications plus sophistiquées et entièrement intégrées.