Met de programmeertaal Python kunnen verschillende bibliotheken en frameworks worden gebruikt om grafische interfaces te ontwikkelen. Sommige zijn Tinker, Wxwidget en QT, platform waarop we de tutorials zagen:
- Cross-platform applicaties met Python, PyQT en QT Desginer 5
- Toepassingen met Sqlite Database, PyQT en QT Desginer.
In deze tutorial zullen we zien hoe grafische interfaces te ontwikkelen met WxWidget en de wxFormBuilder ontwerptool. wxFormBuilder is een applicatie voor het ontwerpen van grafische gebruikersinterfaces, het is gratis en open source maakt het gebruik van de wxWidgets-bibliotheken mogelijk, het wordt veel gebruikt voor de ontwikkeling van multiplatform-applicaties.
wxFormBuilder is een visuele ontwikkeltool met als grote voordeel dat het tijdens het ontwerp code kan genereren in C++, Python, PHP, Lua en XRC. Het werkt op Windows, Linux en Mac OS.
Voor deze tutorial zullen we een installatie doen in Linux en in een virtuele machine met VirtualBox en Windows 7, om te bewijzen dat we de multiplatform-applicatie kunnen ontwikkelen, op dezelfde manier waarop we zouden kunnen installeren in Linux en een virtuele machine hebben met Linux.
We moeten de volgende tools installeren:
PythonHet is een programmeertaal op hoog niveau, het belangrijkste doel van python is om de leesbaarheid van de code te vergemakkelijken en stelt programmeurs in staat om applicaties te ontwikkelen in minder regels code in vergelijking met programmeertalen zoals C++, C# of Java.
Een van de voordelen van Python is dat het meerdere programmeerparadigma's ondersteunt, zoals objectgeoriënteerd, imperatief en functioneel of procedureel programmeren. We kunnen Python downloaden van de officiële website.
wxPythonHet is platformonafhankelijk, het kan zonder aanpassingen op Windows, Linux en Mac OS draaien. Het resultaat van het interface-ontwerp is een native uiterlijk van de applicatie, afhankelijk van het besturingssysteem waarop deze wordt uitgevoerd.
Het is een set bibliotheken waarmee de grafische bibliotheek van wxWidgets kan worden geporteerd en gebruikt met behulp van de programmeertaal Python. De wxWidgets-bibliotheek wordt gekenmerkt door platformonafhankelijk te zijn.
Het kan worden gedownload van de officiële WxPython-website, in Linux komt het in de repositories of het kan worden toegevoegd
wxFormBuilderHet is een gratis, platformonafhankelijke en open source IDE. Het wordt gebruikt om grafische interfaces te ontwerpen GUI wxWidgets of in dit geval wxPython, het maakt het mogelijk om platformonafhankelijke applicaties te creëren. Net als Qt Designer wordt de tool wxFormBuilder gebruikt voor visuele ontwikkeling.
wxFormbuilder maakt het mogelijk om code te genereren in C++-, Python-, PHP-, Lua- en XRC-code. De code wordt gemaakt terwijl we ontwerpen.
We kunnen het downloaden van de officiële website, we moeten een versie hoger dan 3.4 installeren die alle bovengenoemde talen ondersteunt.
Toepassingsvoorbeelden met wxPython en wxFormBuilder
In deze tutorial zullen we de applicatie onder Linux ontwikkelen en daarna ook op Windows draaien. In Linux is python al geïnstalleerd, dus we zullen wxPython en wxFormbuilder installeren, vanuit een terminalvenster schrijven we de volgende opdracht:
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 wxformbuilderDan moeten we wxpython toevoegen als een omgevingsvariabele om het vanuit elke map te kunnen gebruiken:
export PYTHONPATH = "$ PYTHONPATH": / usr / lib / python2.7 / dist-packages / wx-2.8-gtk2-unicode /Vervolgens openen we wxFormbuilder vanuit het hoofdmenu:
wxFormBuilder presenteert een bureaublad met een linkerkolom waar het project of scherm en de componenten die we gebruiken zich zullen bevinden, in het midden het ontwerptabblad en een tabblad voor elke taal, aan de rechterkant hebben we de eigenschappen van zowel het project als de componenten die we gebruiken.
Het eerste dat we moeten configureren, is het project, hiervoor klikken we op de naam van het project en dan gaan we naar de eigenschappen waar we een naam en de taal zullen toewijzen die we zullen gebruiken.
Vervolgens gaan we naar het tabblad Formulier en voegen een formulier toe dat de container van het scherm zal zijn.
Vervolgens kunnen we vanuit de eigenschappen de naam wijzigen van het formulier waaraan we MyForm toewijzen en de titel die zal zijn Voorbeeld01- ZelfstudieDaarnaast kunnen we veel opties wijzigen, zoals de achtergrondkleur, de grootte, het type venster en nog veel meer.
We kunnen naar het tabblad Python gaan en zien hoe de code wordt gegenereerd.
Om de code in een bestand te genereren, moeten we eerst het project vanuit het menu opslaan Bestand> Opslaan als, en we slaan het op als example01.fbp
Vervolgens gaan we naar de menuoptie Bestand> Code genereren, dan gaan we naar de map waar we het projectbestand opslaan en we zien het bestand noname.py
Dit bestand noname.py bevat de Python-code die is gegenereerd met het interface-ontwerp, we kunnen het bestand hernoemen naar example01.py
Vervolgens moeten we de code toevoegen zodat dit ontwerp wordt weergegeven wanneer de toepassing wordt uitgevoerd, hiervoor openen we het bestand en voegen we de volgende code hieronder toe, waarbij het als volgt blijft:
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, grootte = wx.Size (500.300), stijl = wx.DEFAULT_FRAME_STYLE |wx.TAB_TRAVERSAL) self.SetSizeHintsSz (wx.DefaultSize, wx.DefaultSize) self.Centre (wx.BOTH) def __del __ (zelf) : Pass # End of Form ontwerpcode ## Code die de toepassing toont bij het uitvoeren van app = wx.App (False) frame = MyForm (Geen) frame.Show (True) app.MainLoop ()Vervolgens gaan we vanuit een terminalvenster naar de toepassingsmap en voeren we python example01.py uit
Vervolgens gaan we naar wxFormbuilder en beginnen we met het ontwerpen van het scherm. De componenten worden op het scherm verdeeld met behulp van Lay-out en rasters, in dit geval zullen we een verticale wxBoxSizer selecteren, wat het doet is het scherm in drie rijen verdelen, waar we de componenten zullen toevoegen.
Vervolgens zullen we een menu toevoegen, hiervoor gaan we naar het tabblad Menu / Toolbar, eerst zullen we de MenuBar-component toevoegen die het hoofdmenu zal zijn. Vervolgens voegen we hiërarchisch een Open Menutitem, een separator en een ander Menuitem met de naam Exit toe.
We kunnen zien dat de objecten zijn gerangschikt volgens een hiërarchie waarbij de hoogste de laagste omvat, we kunnen hun positie wisselen door gewoon te slepen. Dan gaan we naar het tabblad Gegevens en we zullen een toevoegen wxGrid-besturing Om een gegevensraster te tonen, plaatsen we ons voor hen in de lay-out, zodat het volgende besturingselement onder het menu staat.
We genereren de nieuwe code en het bestand wordt aangepast noname.py, we kunnen het hernoemen als example02.py, en de aangebrachte wijzigingen toevoegen. Vervolgens starten we vanuit een terminalvenster met behulp van de opdracht:
python voorbeeld02.py
Nu gaan we wxFormbuilder en we zullen een scheidingsbalk toevoegen onder het raster, van de Algemeen tabblad en selecteer het onderdeel wxStaticLine.
Vervolgens gaan we velden aanmaken om een detailmaster te maken, hiervoor gaan we onszelf in de Layout plaatsen en een component toevoegen.
Naast het ontwerpen van grafische interfaces kunnen we evenementen toevoegen, we klikken bijvoorbeeld op de opnameknop en gaan naar het tabblad Evenementen, we zoeken naar het type evenement, in dit geval AanLinksOmlaag, klik met de linkermuisknop ingedrukt.
In dit geval schrijven we de naam van de functie die de gebeurtenis zal aanroepen, bij het genereren van de code zal het alleen de functie voor ons creëren, dan zullen we de code met de functionaliteit moeten schrijven. Wanneer we het bestand hebben gegenereerd, voegen we de volgende volledige code toe aan het einde:
wx importeren wx.xrc importeren wx.grid importeren ######################################## ##################################### Class MyFrame1 ########### ################################################## ############## class MyForm (wx.Frame): def __init __ (self, parent): wx.Frame .__ init__ (self, parent, id = wx.ID_ANY, title = wx.LegeString, pos = wx.DefaultPosition, grootte = wx.Size (417.350), stijl = wx.DEFAULT_FRAME_STYLE |wx.TAB_TRAVERSAL) self.SetSizeHintsSz (wx.DefaultSize, wx.DefaultSize) bSizerVER1 = wx.BoxTICSAL (zelf) m_grid1 = wx.grid.Grid (self, wx.ID_ANY, wx.DefaultPosition, wx.DefaultSize, 0) # Grid 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) # Columns self.m_grid1.EnableDragColMove (False) self.m_grid1.EnableDragColSize (Trueabel) self.m_grid1.Set_TolLize SetColLabel.mSize ( .SetColLabelAlignment (wx.ALIGN_CENTRE, wx.ALIGN_CENTRE) # Rijen self.m_grid1.EnableDragRowSize (True) self.m_grid1.SetRowLabelSize (80) self.m_grid1.SetRowLabelAlignment (wx.ALIGN_CENTRE, wx.ALIGN_CENTRE) # Label Appearance # Cell Defaults self.LIGN DefaultC /w grid .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) fgSlexible1.GrowMoondeFlexible (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. ALLE | wx.EXPAND, 5) zelf .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. Toevoegen (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 "Invoerdatum", 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. Toevoegen (self.m_staticline3, 0, wx.EXPAND | wx.ALL, 5) bSizer2 = wx.BoxSizer (wx.HORIZONTAAL) 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 "Verwijderen", 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 "Open", 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 "Afsluiten", wx .EmptyString Leeg .ITEM_NORMAL) self.m_menu1.AppendItem (self.m_menuItem3) self.m_menubar1.Append (self.m_menu1 of "Files") self.SetMenuBar (self.m_menubar1) self.Centre (wx.BOTH) # klikgebeurtenis die de functie record self.m_button4.Bind (wx.EVT_LEFT_DOWN, self.Record) def __del __ (self): pass # maak een aangepast bericht of dialoogvenster def Message (self, msg, title, style): dlg = wx.MessageDialog ( parent = None, message = msg, caption = title, style = style) dlg.ShowModal () dlg.Destroy () # Record functie die reageert op de gebeurtenis klik def Record (self, event): self.Message ("Dit is a click! event "," Information - Tutorial ", wx.OK | wx.ICON_INFORMATION) app = wx.App (False) frame = MyForm (Geen) frame.Show (True) app.MainLoop ()
Vervolgens gaan we dezelfde applicatie testen in een Windows 7-installatie met Python en wxpython eerder geïnstalleerd en het resultaat is het volgende:
Wanneer we onze volledige ontwikkeling hebben voltooid, kan de applicatie worden gedistribueerd met behulp van software zoals InnoSetup, zoals we in de tutorials hadden gezien:
- Installatieprogramma's maken met Inno Setup
- Aangepast installatieprogramma om onze software te distribueren.
wxFormBuilder is een visuele omgeving waarmee we Python-code kunnen genereren met het wxPython-platform, een ander alternatief om grafische interfaces voor Python te ontwikkelen, is aan de gebruiker om PyQt of wxPython te gebruiken.
Een van de grote voordelen van wxFormBuilder is dat het veel componenten en widgets bevat, in hoge mate aanpasbaar, zelfs meer dan in andere, meer populaire omgevingen. We kunnen de resultaten zien terwijl we de applicaties maken, dus we kunnen verschillende versies hebben van de grafische interface en de code die we toevoegen. In tegenstelling tot Qt Designer, maakt wxFormBuilder het mogelijk om gebeurtenissen te genereren en vervolgens een bepaalde functionaliteit aan te roepen.
.
