wxpython avec wxFormBuilder (Python 3.13.2, wxPython 4.2.2 wxFormBuilder 4.2.1)

Notes (temporaires) de Musclor13

Page créé suite a un manque d'infos en francais et un bel échange sur https://discuss.afpy.org/t/probleme-wxformbuilder-wxpython-et-print/2544 Des erreurs possibles car je débute en GUI. Page en cours de création.

Après avoir créé pleins de petits modules qui deviennent des grand modules puis des programmes en ligne de commande on a parfois envie de rendre le tout plus joli et plus accessible avec des fenêtres, des barres d'outils et des menus et cases a cocher en tout genre... Malheureusement il faut tout faire a la main et pour débuter devoir écrire pleins de lignes de codes juste pour une boite de dialogue... Ca peu faire peur ou démotiver... Quel dommage qu'il n'y ai pas d'applications de dessins comme LibreOffice Draw, Inkscape ou Adobe Illustrator mais ou on remplacerait les elipses et autres flèches de diagrammes par des barres, boutons, champs de textes et palettes de couleurs?...

Visiblement c'est ce que certains développeurs ont du se dire alors ils ont créé ces fameux outils de "dessin" (et oui, ils y en a plusieurs!):

Ces outils sont généralement fait pour créer automatiquement le code correspondant a l'affichage des fenêtres dans des bibliothèques (QT, GTK wx...) et des langages de programmations divers (C++, Java, Python...). Il existe même des moteurs de jeux comme Godot qui permettent de dessiner ses fenêtre et boutons pour n'avoir plus qu'a coder le gameplay en Gdscript.

Une de ces applications s'appelle XxFormBuilder. Elle permet de dessiner ses interfaces graphique puis d'exporter le tout dans plusieurs langages y compris le C++... Vous suivez?... Bien sur le Python est supporté également et ici on code en python (enfin normalement).

Cette application ainsi que la bibliothèque sont compatible avec Windows Linux et mac. Malheureusement pas de portage Android ou IOS a l'heure actuelle. Si vous souhaitez créer des applications pour votre smartphone il faudra trouver une autre bibliothèque graphique mais si c'est pour ordinateurs allez-y! Surtout que la bibliothèque fonctionne pareille sur l'OS du voisin même si c'est pas le même que le votre (enfin sauf si il a Windows98 et dans ce cas Python ne marchera même pas).

Bien sur il ne faudra pas jeter son éditeur de code. L'application ne fait pas tout a votre place. Ne jetez pas non plus votre machine a café car cette application ne vous servira pas d'expresso. Et surtout ne jetez pas votre chien ou votre chat car... Il aimerait pas (le chien ou le chat, pas l'application).

Il faut installer quoi?

Python (oui-oui) en version 3 (la version 3.13.2 est utilisé ici)
wxPython (ici c'est la version 4.2.2)
wxFormBuilder (les tests pour ce tutoriel ont été réalisés avec la version 4.2.1)

L'installation

Normalement python est déjà installé sur votre ordinateur donc on ne s'attarde pas là-dessus.

wxPython

SI on regarde le site officiel a la page des téléchargements...

https://wxpython.org/pages/downloads/

...On a toutes les informations qu'il faut.

Sous windows et mac il suffit d'utiliser PIP (pas de tuto sur PIP sur ce livre?):

pip install -U wxPython

Sous linux c'est différent donc regardez la page en lien ci-dessus

wxFormBuilder

La c'est comme pour n'importe quel applications (sous windows en tout cas).

Il faut télécharger la version qui correspond a son système sur

https://github.com/wxFormBuilder/wxFormBuilder/releases ATTENTION: le projet a encore les reste d'une page sur Sourceforge mais il a été déplacé sur GitHub vers 2015 donc si vous ne trouvez pas la version 4.2.1 ou plus c'est que vous vous êtes trompé de site.

Les bases sans codage ni scripts

Une fois l'application installez lancez-la. En plus elle a été faite en wxWidgets donc en théorie vous pourriez la recopier.

L'interface graphique

Quand on ouvre l'application on a:

Une barre de menu et d'outils en haut
Un panneau "Object Tree" a gauche avec une racine "MyProject1 : Project"
Un "éditeur" au milieux avec deux barres d'outils juste au dessus: "Editor" avec Designer selectionné et "Component Palette" Normalement c'est un gros rectangle gris.
A droite on a le panneau "Object Properties" avec 2 boutons tout en haut: Properties qui est normalement déja selectionné et Event. Au milieux on a tout un tas de réglages que l'on peu faire avec une souris et en bas un espace vide qui affich une aide en anglais dés qu'on clic sur un de ces réglages.

Vous pouvez toujours échanger l'emplacement de "'éditeur" et la barre "Object propretés" dans le menu View.

Du coté de "Component Palette" si vous cliquez sur un dés boutons de la deuxième ligne vous pouvez dessiner votre fenêtre... Ou pas car bizarrement y a un message d'erreur. Si vous avez déja utilisé Tkinter ou une autre bibliothèque d'interface graphique vous savez déjà pourquoi. Mais si vous débutez alors...

Apprenez les base du dessin d'interfaces graphiques

Le premier conseil que je donnerais c'est de s'amuser a "dessiner" des trucs sans chercher a faire des trucs sérieux avec du code. Il y a quand même une logique qui fait par exemple qu'on ne peut pas mettre une barre d'outils ou une fenêtre dans une case a cocher (logique).

Une fenêtre bien ordonnée

Dans le menu "Components" et la barre "Component palette" on peu voir que chaques composent de fenêtres est triés par catégorie.

Voici un trie non exhaustif par "niveaux"

- "Forms" pour créer la base des fenêtres ("frame", "dialog" et "panels" sont courement utilisés)

- "Layout" permet de créer des positionnement de futurs objets. "wxWrapSizer" est bien pour creer des trucs vite fait sans se soucier de l'ordre ni de la mise en page. il vaut mieux toutefois tester et utiliser les autres "Layout" et faire quelque chose de propre dés le départ

- "Conteners" contiens de quoi créer des onglets entre autre (faodra remêttre un "Layout" dedans).

- "Common" contiens les boutons, textes et autres cases a cochers souvent utilisés

- "Menu/Toolbars" est un peu a part car il permet d'ajouter des menus et des barres d'outils ou de status sans nécessiter de "Layout".

Dans le panneau "Object Tree" un clic droit sur la fenêtre créé ouvre un menus permettant entre autre d'acceder au "Menu Editor..." qui permet de creer simplement ses menus et sous-menus.

Et maintenant...

Vous en savez assez pour vous amuser sans codage. Ne cherchez pas a creer une interface graphique complexe ou pro mais testez juste des petits trucs pour voir ce que ca peu donner. Jouez avec les propriétés "properties" et voyez ce que ca peu donner. Le résultat sera inutile sans code mais peut être beau a regarder tout de même.

Le retour du code

Vous ne vous y attendez pas? Pourtant il reviens tapis dans l'ombre: Le code Python :D .

Sachez que dans "Object Tree" vous pouvez cliquer sur le neux racine (par défaut "MyProject1 :project" ) et dans "Object Properties" (onglet "Properties") vous pouvez double-cliquer sur code-generator pour par exemple désactiver C++ et activer Python (Eventuellement XRC peu aussi être activé en même temps mais n'aura d'intérês qu'en cas de gros projets). En faisant "File/Generate Code" vous aurez les scripts dans tout les langages que vous avez activé. Malheureusement les scripts en Python générés ne semblent pas s'exécuter et quand on ouvre ceux-ci dans un bloc-note ou un IDE ba... Il y a un long commentaire

PLEASE DO *NOT* EDIT THIS FILE!

Traduction très approximatif: "ne modifiez pas ce fichier sinon ca fera BOUM et un serpent viendra vous manger" (Si vous avez un niveau d'anglais catastrophique alors bienvenue au club).

Run.py

import wx
import wx.xrc

import genwx


class MaFenetre(genwx.Fenetre):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        combien_de_clics = 0
        
    def clicsurlebouton(self, event):
        print("clic sur le bouton")
        combien_de_clics += 1


app = wx.App()
MaFenetre(None).Show()
print("avant MainLoop")
app.MainLoop()
print(f"apres MainLoop et {MaFenetre.combien_de_clics} clics")