Activités de ce TD :

• comprendre les principaux éléments d'une interface graphique.
• apprendre à utiliser tkinter pour créer des interfaces graphiques en Python.
• enrichir l'interface graphique de PistusResa avec une fenêtre de connexion.

Introduction

Une interface graphique (GUI) permet à tout utilisateur de PistusResa d'accéder à toutes les fonctionnalités de l'application de manière simple et intuitive.

La figure suivante montre la fenêtre de connexion de PistusResa. Les principaux éléments d'une interface graphique sont les suivants :

• Fenêtre, c'est-à-dire un conteneur qui inclut tous les autres éléments de l'interface graphique, généralement appelés widgets (en français, composants d'interface graphique).
• Barre de titre : où apparaît le titre de la fenêtre.
• Champs de texte : où les utilisateurs peuvent saisir du texte.
• Étiquettes : utilisées pour expliquer la fonction des autres widgets.
• Boutons : utilisés par les utilisateurs pour déclencher une réaction.

Ces widgets ne sont généralement pas ajoutés directement à la fenêtre ; ils sont plutôt regroupés dans des "frames". Dans la figure, il y a trois frames (invisibles dans la figure) :

• le premier contient les étiquettes et les champs de texte Username et Password ;
• le deuxième contient l'étiquette du message (Enter the username (at least 5 characters)) ;
• le troisième contient les boutons.

L'avantage d'utiliser des frames est que l'on peut disposer les widgets selon différents critères, comme nous le verrons plus loin.

The PistusResa login window

Se familiariser avec l'interface graphique

Dans la première partie de ce TD, vous apprendrez à utiliser tkinter.

⏰ Temps à consacrer à cette partie : au maximum 1 heure.

👉 Continuez à lire sur cette page.

La fenêtre de connexion

Vous êtes maintenant prêt à créer la fenêtre de connexion.

Il est important de comprendre comment l'application PistusResa est exécutée en premier lieu.

Le point d'entrée de l'application est le fichier pistus.py.

Lorsque vous exécutez pistus.py, les instructions suivantes sont exécutées (lisez le code pour identifier ces actions) :

1. Charger la configuration de l'application du fichier ./config/config.
2. Charger le paquet de messages dans la langue spécifiée dans la configuration. Le paquet de messages contient le texte associé aux widgets.
3. Se connecter à la base de données, dont le chemin d'accès est spécifié dans le fichier de configuration.
4. Si l'autorisation est activée dans le fichier de configuration, PistusResa appelle la fonction open_login_window() définie dans le fichier ./gui/login.py.
5. Si l'autorisation n'est pas activée, la fenêtre principale de l'application s'affiche.
6. Chaque fois que l'utilisateur ferme la fenêtre principale de l'application, PistusResa ferme la connexion à la base de données et arrête son exécution.

👉 Si vous regardez le fichier de configuration, l'autorisation est activée. Cependant, si vous exécutez le fichier pistus.py maintenant, aucune fenêtre n'apparaîtra car la fenêtre de connexion n'est pas encore implémentée.

L'interface graphique de la fenêtre de connexion

Vous allez maintenant créer les widgets de la fenêtre de connexion.

Ouvrez le fichier ./gui/login.py et allez à la fonction open_login_window().

Cette fonction est appelée lorsque PistusResa est exécuté et que l'authentification est activée. La fonction crée l'interface graphique de la fenêtre. En particulier, elle appelle les trois fonctions suivantes :

• _credentials_frm_widgets(). Crée le frame contenant les champs de texte pour saisir le nom d'utilisateur et le mot de passe.
• _message_frm_widgets(). Crée le frame contenant une étiquette utilisée pour afficher des messages à l'utilisateur (par exemple, "mot de passe incorrect").
• _buttons_frm_widgets(). Crée le frame contenant les boutons.

👉 Votre tâche consiste à mettre en œuvre ces trois fonctions. Pour chaque fonction :

• Lisez les commentaires dans le code pour comprendre ce qu'il faut faire.
• Les variables pour les champs de texte, les étiquettes et les boutons sont déjà définies au début de la fonction. Utilisez ces variables et ne changez pas leur nom.
• Ecrivez le code à l'endroit indiqué (après la phrase "TODO").

ANSWER ELEMENTS

    ttk.Label(credentials_frm, text = username_lbl_text)\
        .grid(row=0, column=0, padx=10, pady=10, sticky = "w")

    # Adds the text field "username"
    username_tf_content = tk.StringVar(value="")
    username_tf = ttk.Entry(credentials_frm, textvariable=username_tf_content)
    username_tf.grid(row = 0, column = 1, sticky='ew')

    # Adds the label "password".
    ttk.Label(credentials_frm, text = password_lbl_text)\
        .grid(row = 1, padx=10,pady=10, column = 0, sticky = "W")

    # Adds the text field "password".
    password_tf_content = tk.StringVar(value="")
    password_tf = ttk.Entry(credentials_frm, show='*', \
                            textvariable=password_tf_content)
    password_tf.grid(row = 1, column = 1, sticky='ew')

    # The text fields will span the entire column.
    credentials_frm.columnconfigure(1, weight=1)    

ANSWER ELEMENTS

    message_lbl = ttk.Label(message_frm, style="Check.TLabel")
    message_lbl.grid(row=0, column=0, sticky='ew')

Gestion des événements

L'automate suivant montre comment la fenêtre de connexion change en fonction des actions de l'utilisateur sur ses widgets.

L'animation suivante peut vous aider à comprendre le comportement de la fenêtre de connexion en fonction des actions de l'utilisateur.

Implémentation de l'automate

Vous allez maintenant implémenter les fonctions nécessaires pour réaliser le comportement décrit dans l'automate discuté ci-dessus.

👉 Vous trouverez les fonctions à implémenter dans le fichier login.py.

ANSWER ELEMENTS

Fonction init_state:

    text_fields["username"][0].configure(state=["!disabled"])
    text_fields["password"][0].configure(state=["disabled"])
    buttons["login"].configure(state=["disabled"])
    control_labels["message_ctrl"].\
        configure(text=messages_bundle["enter_username"])

Fonction username_entered_state:

    text_fields["username"][0].configure(state=["!disabled"])
    text_fields["password"][0].configure(state=["!disabled"])
    buttons["login"].configure(state=["disabled"])
    control_labels["message_ctrl"].\
        configure(text=messages_bundle["enter_password"])

Fonction credentials_entered_state:

    text_fields["username"][0].configure(state=["!disabled"])
    text_fields["password"][0].configure(state=["!disabled"])
    buttons["login"].configure(state=["!disabled"])
    control_labels["message_ctrl"].configure(text=message)

Fonction username_updated:

    if utils.username_ok(get_username()):
        if not utils.password_ok(get_password()):
            username_entered_state()
        else:
            credentials_entered_state(messages_bundle["login_authorized"])
    else:
        init_state()

Fonction password_updated:

    if utils.password_ok(get_password()):
        if not utils.username_ok(get_username()):
            init_state()
        else:
            credentials_entered_state(messages_bundle["login_authorized"])
    else:
        if not utils.username_ok(get_username()):
            init_state()
        else:
            username_entered_state()

Dans la fonction _credentials_frm_widgets, nous devons ajouter les deux instructions suivantes afin d'associer les deux fonctions de rappel username_updated et password_updated aux champs de texte username et password.

username_tf_content.trace("w", username_updated)
password_tf_content.trace("w", password_updated)

Connexion

Vous allez maintenant mettre en œuvre trois fonctions qui vous permettront de vous connecter à PistusResa.

👉 Le nom d'utilisateur est admin et le mot de passe est Adm1n!

ANSWER ELEMENTS

Fonction login :

    if res[0]:
        window.destroy()
        open_main_window(cursor, conn, messages_bundle, lang)
    elif res[1] == auth.INCORRECT_PASSWORD:
        credentials_entered_state(messages_bundle["incorrect_password"])
    elif res[1] == auth.USERNAME_NOT_FOUND:
        credentials_entered_state(messages_bundle["username_not_found"])

Function clear :

    text_fields["username"][1].set("")
    text_fields["password"][1].set("")

Fonction cancel :

    clear()
    window.destroy()

Dans la fonction _buttons_frm_widgets, nous devons ajouter les arguments command=login, command=clear et command=cancel lorsque nous créons les boutons login, clear et cancel respectivement.

La fenêtre principale

Si vous vous connectez à PistusResa, vous devriez voir la fenêtre principale de l'application. Cette fenêtre comporte un menu sur la gauche avec trois options qui permettent aux utilisateurs d'ouvrir des fenêtres pour ajouter et modifier les données et les inscriptions des élèves.

Jouez avec l'interface et vérifiez que les fonctions que vous avez codées dans le module Student fonctionnent correctement.

Que faire ensuite ? (Facultatif)

Si vous avez encore du temps, vous pouvez compléter l'application et implémenter le module d'authentification et le module deadline.