Interface graphique pour le logiciel de verbes irréguliers

Objectifs

Le but de ce tutoriel est de programmer l'interface graphique du logiciel de verbes irréguliers.

Mise en place des fichiers

Créer deux nouveaux fichiers Python :

  • un fichier verbes_interface.py : il contiendra le programme principal permettant de faire fonctionner le programme.
  • un fichier arbre_widgets.py : il contiendra la description de l'interface graphique, en langage kivy.

L'arbre des widgets

Le module kivy permet de définir une interface graphique sous la forme d'un arbre de widgets. Un widget est soit un élément de l'interface graphique (bouton, zone de texte, case à cocher, image...), soit un conteneur de mise en page (layout) permettant d'organiser les différents éléments.

Un écran d'accueil

image200

Dans le fichier arbre_widgets.py, copier le code suivant :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# coding: utf-8
from kivy.lang import Builder

Interface = Builder.load_string('''
<EcranAccueil>
    BoxLayout:
        orientation: "vertical"
        padding: '10dp'
        spacing: '10dp'
        Label:
            text: "Verbes irréguliers anglais"
            font_size: "30dp"
        Image:
            source: "england.png"
        BoxLayout:
            orientation: "horizontal"
            padding: '10dp'
            spacing: '10dp'
            size_hint_y: 0.2
            Button:
                text: "Paramètres"
            Button:
                text: "Apprentissage"
            Button:
                text: "Tournoi"
''')

Ce code définit un widget de mise en page de type BoxLayout orientation verticale : les éléments sont empilés les uns sur les autres.

Le widget BoxLayout contient trois widgets fils : un Label (affichage de texte), une image, un autre BoxLayout horizontal qui contient, lui, trois boutons.

Pour tester cet écran, entrer le code suivant dans le fichier verbes_interface.py puis exécuter ce fichier.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
# coding: utf-8
from kivy.app import App
from kivy.uix.screenmanager import Screen, ScreenManager, FadeTransition
from arbre_widgets import *
from verbes_logique import *

class EcranAccueil(Screen):
    pass

class VerbesApp(App):

    def build(self):
        sm = ScreenManager(transition=FadeTransition())
        sm.add_widget(EcranAccueil(name='accueil'))
        return sm

VerbesApp().run()

Les autres écrans

On définit de la même manière un arbre de widgets pour chacun des autres écrans.

Cliquer ci-contre pour télécharger le fichier arbre_widgets.py complet

Pour tester ces écrans, entrer le code suivant dans le fichier verbes_interface.py puis exécuter ce fichier.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 coding: utf-8
from kivy.app import App
from kivy.uix.screenmanager import Screen, ScreenManager, FadeTransition
from arbre_widgets import *
from verbes_logique import *

class EcranApprentissage(Screen):
    pass

class EcranTournoi(Screen):
    pass

class EcranAccueil(Screen):
    pass

class EcranParam(Screen):
    pass

class VerbesApp(App):

    def build(self):
        sm = ScreenManager(transition=FadeTransition())
        sm.add_widget(EcranAccueil(name='accueil'))
        sm.add_widget(EcranParam(name='param'))
        sm.add_widget(EcranApprentissage(name='apprentissage'))
        sm.add_widget(EcranTournoi(name='tournoi'))
        return sm


VerbesApp().run()

Exercice

Analyser le contenu du fichier arbre_widgets.py et représenter l'organisation de l'écran d'apprentissage sous le forme d'un arbre de widgets.

Mise en place du jeu

Cliquer ci-contre pour télécharger le fichier verbes_interface.py complet

Exécuter ce programme et tester le programme.