Le langage de programmation Python permet l'adoption de diverses bibliothèques et frameworks pour développer des interfaces graphiques. Certains sont Tinker, Wxwidget et QT, plateforme sur laquelle on a vu les tutos :
- Applications multiplateformes avec Python, PyQT et QT Desginer 5
- Applications avec Sqlite Database, PyQT et QT Desginer.
Dans ce tutoriel, nous verrons comment développer des interfaces graphiques avec WxWidget et l'outil de conception wxFormBuilder. wxFormBuilder est une application pour la conception d'interfaces utilisateur graphiques, elle est gratuite et open source permet d'utiliser les librairies wxWidgets, elle est largement utilisée pour le développement d'applications multiplateformes.
wxFormBuilder est un outil de développement visuel dont le grand avantage est qu'il peut générer du code en C++, Python, PHP, Lua et XRC pendant sa conception. Il fonctionne sous Windows, Linux et Mac Os.
Pour ce tutoriel, nous allons faire une installation sous Linux et dans une machine virtuelle avec VirtualBox et Windows 7, afin de prouver que nous pouvons développer l'application multiplateforme, de la même manière que nous pourrions installer sous Linux et avoir une machine virtuelle avec Linux.
Nous devrons installer les outils suivants :
PythonC'est un langage de programmation de haut niveau, l'objectif principal de python est de faciliter la lisibilité du code et permet aux programmeurs de développer des applications en moins de lignes de code par rapport aux langages de programmation tels que C++, C# ou Java.
L'un des avantages de Python est qu'il prend en charge plusieurs paradigmes de programmation, tels que la programmation orientée objet, impérative et fonctionnelle ou procédurale. Nous pouvons télécharger Python sur le site officiel.
wxPythonIl est multiplateforme, il peut fonctionner sur Windows, Linux et Mac OS sans modifications. Le résultat de la conception de l'interface est une apparence native de l'application en fonction du système d'exploitation qu'elle exécute.
Il s'agit d'un ensemble de bibliothèques permettant de porter et d'utiliser la bibliothèque graphique wxWidgets à l'aide du langage de programmation Python. La bibliothèque wxWidgets se caractérise par être multiplateforme.
Il peut être téléchargé à partir du site Web officiel de WxPython, sous Linux, il vient dans les référentiels ou il peut être ajouté
wxFormBuilderC'est un IDE gratuit, multiplateforme et open source. Il sert à concevoir des interfaces graphiques GUI wxWidgets ou dans ce cas wxPython, il permet la création d'applications multiplateformes. Comme Qt Designer, l'outil wxFormBuilder est utilisé pour le développement visuel.
wxFormbuilder permet de générer du code en code C++, Python, PHP, Lua et XRC. Le code est créé au fur et à mesure que nous concevons.
Nous pouvons le télécharger depuis son site officiel, nous devons installer une version supérieure à 3.4 qui est celle qui prend en charge toutes les langues mentionnées ci-dessus.
Exemples d'applications avec wxPython et wxFormBuilder
Dans ce tutoriel, nous développerons l'application sous Linux puis nous l'exécuterons également sous Windows. Sous Linux, python est déjà installé, nous allons donc installer wxPython et wxFormbuilder, à partir d'une fenêtre de terminal, nous écrivons la commande suivante :
sudo add-apt-repository -y ppa: wxformbuilder / wxwidgets sudo apt-get update sudo apt-get install libwxgtk3.0-0 libwxgtk-media3.0-0 sudo add-apt-repository -y ppa: wxformbuilder / release sudo apt -get update sudo apt-get install wxformbuilderEnsuite, nous devons ajouter wxpython en tant que variable d'environnement pour pouvoir l'utiliser depuis n'importe quel répertoire :
export PYTHONPATH = "$ PYTHONPATH": / usr / lib / python2.7 / dist-packages / wx-2.8-gtk2-unicode /Ensuite, nous ouvrons wxFormbuilder à partir du menu principal :
wxFormBuilder présente un bureau avec une colonne de gauche où se trouveront le projet ou l'écran et les composants que nous utilisons, au centre l'onglet de conception et un onglet pour chaque langue, à droite nous aurons les propriétés du projet et du composants que nous utilisons.
La première chose que nous devrons configurer sera le projet, pour cela nous cliquons sur le nom du projet puis nous allons dans les propriétés où nous attribuerons un nom et la langue que nous utiliserons.
Ensuite, nous allons dans l'onglet Formulaire et ajoutons un formulaire qui sera le conteneur de l'écran.
Ensuite, à partir des propriétés, nous pouvons modifier le nom du formulaire auquel nous attribuons MyForm et le titre qui sera Exemple01- TutorielDe plus, nous pouvons modifier de nombreuses options telles que la couleur de fond, la taille, le type de fenêtre et bien d'autres.
Nous pouvons aller dans l'onglet Python et voir comment le code est généré.
Pour générer le code dans un fichier, il faut d'abord enregistrer le projet depuis le menu Fichier> Enregistrer sous, et nous l'enregistrons sous example01.fbp
Ensuite, nous allons à l'option de menu Fichier> Générer le code, puis nous allons dans le répertoire où nous enregistrons le fichier de projet et nous verrons le fichier noname.py
Ce fichier noname.py contient le code Python généré avec la conception de l'interface, nous pouvons renommer le fichier en example01.py
Ensuite, nous devons ajouter le code pour que ce design soit affiché lorsque l'application est exécutée, pour ce faire, nous ouvrons le fichier et ajoutons le code suivant ci-dessous, en restant comme suit :
import wx import wx.xrc class MyForm (wx.Frame): def __init __ (self, parent): wx.Frame .__ init__ (self, parent, id = wx.ID_ANY, title = u "Example01 - Tutorial", pos = wx .DefaultPosition, taille = wx.Size (500 300), style = wx.DEFAULT_FRAME_STYLE | wx.TAB_TRAVERSAL) self.SetSizeHintsSz (wx.DefaultSize, wx.DefaultSize) self.Centre (wx.BOTH) def __del __ (self) : Passer # Code de conception de fin de formulaire ## Code qui affiche l'application lors de l'exécution de l'application = wx.App (False) frame = MyForm (None) frame.Show (True) app.MainLoop ()Ensuite, à partir d'une fenêtre de terminal, nous allons dans le répertoire de l'application et exécutons python example01.py
Ensuite, nous allons à wxFormbuilder et commençons à concevoir l'écran. Les composants sont répartis sur l'écran à l'aide de Layout et de grilles, dans ce cas, nous sélectionnerons un wxBoxSizer vertical, ce qu'il fait est de diviser l'écran en trois lignes, où nous ajouterons les composants.
Ensuite, nous allons ajouter un menu, pour cela, nous allons dans l'onglet Menu / Toolbar, nous allons d'abord ajouter le composant MenuBar qui sera le menu principal. Ensuite, nous ajouterons hiérarchiquement un élément de menu ouvert, un séparateur et un autre élément de menu avec le nom Exit.
Nous pouvons voir que les objets sont organisés selon une hiérarchie où le plus haut englobe le plus bas, nous pouvons échanger leur position en faisant simplement glisser. Ensuite, nous irons à l'onglet Données et nous ajouterons un Contrôle wxGrid Pour afficher une grille de données, pour eux, nous nous plaçons dans la mise en page afin que le prochain contrôle soit situé sous le menu.
Nous générons le nouveau code et le fichier sera modifié noname.py, nous pouvons le renommer en exemple02.py, en ajoutant les modifications apportées. Ensuite, nous exécutons à partir d'une fenêtre de terminal en utilisant la commande :
exemple python02.py
Maintenant, nous allons wxFormbuilder et nous allons ajouter une barre de séparation sous la grille, à partir du Onglet commun et sélectionnez le composant wxLigneStatique.
Ensuite, nous allons créer des champs pour créer un maître de détail, pour cela nous nous placerons dans la mise en page et ajouterons un composant.
En plus de concevoir des interfaces graphiques, nous pouvons ajouter des événements, par exemple, nous cliquons sur le bouton d'enregistrement et allons dans l'onglet Événements, nous recherchons le type d'événement, dans ce cas OnGaucheBas, cliquez sur le bouton gauche de la souris enfoncé.
Dans cet événement, nous écrivons le nom de la fonction qui invoquera l'événement, lors de la génération du code, il ne créera que la fonction pour nous, puis nous devrons écrire le code avec la fonctionnalité. Lorsque nous aurons généré le fichier, nous ajouterons le code complet suivant à la fin :
importer wx importer wx.xrc importer wx.grid ######################################## #################################### Classe MyFrame1 ########### ##################################################### ############## class MyForm (wx.Frame): def __init __ (self, parent): wx.Frame .__ init__ (self, parent, id = wx.ID_ANY, title = wx. EmptyString, pos = wx.DefaultPosition, size = wx.Size (417 350), style = wx.DEFAULT_FRAME_STYLE | wx.TAB_TRAVERSAL) self.SetSizeHintsSz (wx.DefaultSize, wx.DefaultSize) bSizerVER1 = wx.BoxTICSAL (self m_grid1 = wx.grid.Grid (self, wx.ID_ANY, wx.DefaultPosition, wx.DefaultSize, 0) # Grille self.m_grid1.CreateGrid (4, 4) self.m_grid1.EnableEditing (True) self.m_grid1.EnableGridLines ( True) self.m_grid1.EnableDragGridSize (False) self.m_grid1.SetMargins (0, 0) # Colonnes self.m_grid1.EnableDragColMove (False) self.m_grid1.EnableDragColSize (True) self.m_grid1.SetColLabel.mize (_True) self.m_grid1.EnableDragColSize (True) self.m_grid1.SetColLabel.mize (_True) SetColLabel.mSize ( .SetColLabelAlignment (wx.ALIGN_CENTRE, wx.ALIGN_CENTRE) # Lignes self.m_grid1.EnableDragRowSize (True) self.m_grid1.SetRowLabelSize (80) self.m_grid1.SetRowLabelAlignment (wx.ALIGN_CENTRE, wx.ALIGN_CENTRE) # Apparence de l'étiquette # Cellule par défaut self.m_grid1.SetLIGNDefault /wx.ALIGN_CENTRE) .SetLignment_OPELL, w / w Defaults w / wm_grid1.SetLIGNDefaultCell_FT ) bSizer1.Add (self.m_grid1, 0, wx.ALL, 5) self.m_staticline4 = wx.StaticLine (self, wx.ID_ANY, wx.DefaultPosition, wx.DefaultSize , wx.LI_HORIZONTAL) bSizer1.Add (self.m_staticline4 , 0, wx.EXPAND | wx.ALL, 5) fgSizer1 = wx.FlexGridSizer (0, 4, 0, 0) fgSizer1.SetFlexibleDirection (wx.BOTH) fgSizer1.SetNonFlexibleGrow (wx.FLEX_GROWMODE1_SPECIFIED) selfText.SelfText.(self, wx.ID_ANY, u "Product", wx.DefaultPosition, wx.DefaultSize, 0) self.m_staticText1.Wrap (-1) fgSizer1.Add (self.m_staticText1, 0, wx.ALL | wx.ALIGN_CENTER_VERTICAL, 5 ) self.m_textCtrl1 = wx.TextCtrl (self, wx.ID_ANY, wx.EmptyString, wx.DefaultPosition, wx.DefaultSize, 0) fgSizer1.Add (self.m_textCtrl1, 1, wx. ALL | wx.EXPAND, 5) self .m_staticText2 = w x.StaticText (self, wx.ID_ANY, u "Code", wx.DefaultPosition, wx.DefaultSize, 0) self.m_staticText2.Wrap (-1) fgSizer1.Add (self.m_staticText2, 0, wx.ALL | wx. ALIGN_CENTER_VERTICAL, 5) self.m_textCtrl2 = wx.TextCtrl (self, wx.ID_ANY, wx.EmptyString, wx.DefaultPosition, wx.DefaultSize, 0) fgSizer1.Add (self.m_textCtrl2, 1, wx.EXPAND | wx.ALLPAND | wx.ALLPAND | wx.ALIGN_BOTTOM, 5) self.m_staticText3 = wx.StaticText (self, wx.ID_ANY, u "Category", wx.DefaultPosition, wx.DefaultSize, 0) self.m_staticText3.Wrap (-1) fgSizer1. Ajouter (self. m_staticText3, 0, wx.ALL | wx.ALIGN_CENTER_VERTICAL, 5) m_comboBox1Choices = [] self.m_comboBox1 = wx.ComboBox (self, wx.ID_ANY, u "Select", wx.DefaultPosition, wx.DefaultSize, m_comboBox1 ) .Add (self.m_comboBox1, 0, wx.ALL, 5) self.m_staticText4 = wx.StaticText (self, wx.ID_ANY, u "Date d'entrée", wx.DefaultPosition, wx.DefaultSize, 0) self.m_staticText4 . Wrap (-1) fgSizer1.Add (self.m_staticText4, 0, wx.ALL | wx.ALIGN_CENTER_HORIZONTAL | wx.ALIGN_CENTE R_VERTICAL, 5) self.m_datePicker1 = wx.DatePickerCtrl (self, wx.ID_ANY, wx.DefaultDateTime, wx.DefaultPosition, wx.DefaultSize, wx.DP_DEFAULT) fgSizer1.Add (self.m_datePickerALL1, 1, wx. Wx. Wx. EXPAND, 5) bSizer1.Add (fgSizer1, 1, wx.EXPAND | wx.ALL, 5) self.m_staticline3 = wx.StaticLine (self, wx.ID_ANY, wx.DefaultPosition, wx.DefaultSize, wx.LI_HORIZONTAL) bSizer1. Ajouter (self.m_staticline3, 0, wx.EXPAND | wx.ALL, 5) bSizer2 = wx.BoxSizer (wx.HORIZONTAL) bSizer2.AddSpacer ((0, 0), 1, wx.EXPAND, 5) self.m_button4 = wx.Button (self, wx.ID_ANY, u "Burn", wx.DefaultPosition, wx.DefaultSize, 0) bSizer2.Add (self.m_button4, 0, wx.ALL, 5) self.m_button5 = wx.Button (self , wx.ID_ANY, u "Supprimer", wx.DefaultPosition, wx.DefaultSize, 0) bSizer2.Add (self.m_button5, 0, wx.ALL, 5) bSizer1.Add (bSizer2, 1, wx.EXPAND | wx. ALL, 5) self.SetSizer (bSizer1) self.Layout () self.m_menubar1 = wx.MenuBar (0) self.m_menu1 = wx.Menu () self.m_menuItem1 = wx.MenuItem (self.m_menu1, wx.ID_ANY, u "Ouvrir", wx .EmptyString, wx.ITEM_NORMAL) self.m_menu1.AppendItem (self.m_menuItem1) self.m_menu1.AppendSeparator () self.m_menuItem3 = wx.MenuItem (self.m_menu1, wx.ID_ANY, u "Exit", wx.EmptyString ,. Vide .ITEM_NORMAL) self.m_menu1.AppendItem (self.m_menuItem3) self.m_menubar1.Append (self.m_menu1 ou "Files") self.SetMenuBar (self.m_menubar1) self.Centre (wx.BOTH) # événement click invoquant le enregistrement de fonction self.m_button4.Bind (wx.EVT_LEFT_DOWN, self.Record) def __del __ (self): pass # crée un message personnalisé ou une boîte de dialogue def Message (self, msg, title, style): dlg = wx.MessageDialog ( parent = None, message = msg, caption = title, style = style) dlg.ShowModal () dlg.Destroy () # Fonction d'enregistrement qui répond à l'événement click def Record (self, event): self.Message ("Ceci est a click! event "," Information - Tutorial ", wx.OK | wx.ICON_INFORMATION) app = wx.App (False) frame = MyForm (None) frame.Show (True) app.MainLoop ()
Ensuite, nous allons tester la même application dans une installation Windows 7 avec Python et wxpython précédemment installés et le résultat est le suivant :
Lorsque nous avons terminé notre développement complet, l'application peut être distribuée à l'aide d'un logiciel comme InnoSetup comme nous l'avions vu dans les tutoriels :
- Créer des installateurs avec Inno Setup
- Installateur personnalisé pour distribuer notre logiciel.
wxFormBuilder est un environnement visuel qui nous permet de générer du code Python avec la plateforme wxPython, une autre alternative pour développer des interfaces graphiques pour Python sera à l'utilisateur d'utiliser PyQt ou wxPython.
L'un des grands avantages de wxFormBuilder est qu'il contient de nombreux composants et widgets, hautement personnalisables encore plus que dans d'autres environnements plus populaires. Nous pouvons voir les résultats au fur et à mesure que nous créons les applications, nous pouvons donc avoir différentes versions de l'interface graphique et du code que nous ajoutons. Contrairement à Qt Designer, wxFormBuilder permet de générer des événements puis d'invoquer une certaine fonctionnalité.
.
