Il linguaggio di programmazione Python consente l'adozione di varie librerie e framework per sviluppare interfacce grafiche. Alcuni sono Tinker, Wxwidget e QT, piattaforma su cui abbiamo visto i tutorial:
- Applicazioni multipiattaforma con Python, PyQT e QT Desginer 5
- Applicazioni con database Sqlite, PyQT e QT Desginer.
In questo tutorial vedremo come sviluppare interfacce grafiche con WxWidget e lo strumento di progettazione wxFormBuilder. wxFormBuilder è un'applicazione per la progettazione di interfacce grafiche utente, è gratuita e open source permette di utilizzare le librerie wxWidgets, è ampiamente utilizzata per lo sviluppo di applicazioni multipiattaforma.
wxFormBuilder è uno strumento di sviluppo visuale Il grande vantaggio è che può generare codice in C++, Python, PHP, Lua e XRC mentre è in fase di progettazione. Funziona su Windows, Linux e Mac OS.
Per questo tutorial faremo un'installazione in Linux e in una macchina virtuale con VirtualBox e Windows 7, per dimostrare che possiamo sviluppare l'applicazione multipiattaforma, allo stesso modo in cui potremmo installare in Linux e avere una macchina virtuale con Linux.
Dovremo installare i seguenti strumenti:
PitoneÈ un linguaggio di programmazione di alto livello, l'obiettivo principale di python è facilitare la leggibilità del codice e consente ai programmatori di sviluppare applicazioni in meno righe di codice rispetto ai linguaggi di programmazione come C++, C# o Java.
Uno dei vantaggi di Python è che supporta più paradigmi di programmazione, come la programmazione orientata agli oggetti, imperativa e funzionale o procedurale. Possiamo scaricare Python dal sito ufficiale.
wxPythonÈ multipiattaforma, può essere eseguito su Windows, Linux e Mac OS senza modifiche. Il risultato del design dell'interfaccia è un aspetto nativo dell'applicazione a seconda del sistema operativo in esecuzione.
È un insieme di librerie che consentono di portare e utilizzare la libreria grafica wxWidgets utilizzando il linguaggio di programmazione Python. La libreria wxWidgets è caratterizzata dall'essere multipiattaforma.
Può essere scaricato dal sito Web ufficiale di WxPython, in Linux è disponibile nei repository o può essere aggiunto
wxFormBuilderÈ un IDE gratuito, multipiattaforma e open source. Viene utilizzato per progettare interfacce grafiche GUI wxWidgets o in questo caso wxPython, permette la creazione di applicazioni multipiattaforma. Come Qt Designer, lo strumento wxFormBuilder viene utilizzato per lo sviluppo visivo.
wxFormbuilder permette di generare codice in C++, Python, PHP, Lua e codice XRC. Il codice viene creato mentre progettiamo.
Possiamo scaricarlo dal suo sito ufficiale, dobbiamo installare una versione superiore alla 3.4 che è quella che supporta tutte le lingue sopra menzionate.
Esempi di applicazioni con wxPython e wxFormBuilder
In questo tutorial svilupperemo l'applicazione sotto Linux e poi la eseguiremo anche su Windows. In Linux python è già installato quindi installeremo wxPython e wxFormbuilder, da una finestra di terminale scriviamo il seguente comando:
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 wxformbuilderQuindi dobbiamo aggiungere wxpython come variabile di ambiente per poterlo utilizzare da qualsiasi directory:
export PYTHONPATH = "$ PYTHONPATH": / usr / lib / python2.7 / dist-packages / wx-2.8-gtk2-unicode /Quindi apriamo wxFormbuilder dal menu principale:
wxFormBuilder presenta un desktop con una colonna di sinistra in cui saranno posizionati il progetto o schermo e i componenti che stiamo utilizzando, al centro la scheda di progettazione e una scheda per ogni lingua, a destra avremo le proprietà sia del progetto che del componenti che utilizziamo.
La prima cosa che dovremo configurare sarà il progetto, per questo facciamo clic sul nome del progetto e poi andiamo alle proprietà dove assegneremo un nome e la lingua che utilizzeremo.
Successivamente andiamo alla scheda Modulo e aggiungiamo un modulo che sarà il contenitore dello schermo.
Quindi dalle proprietà possiamo modificare il nome del form a cui assegniamo MyForm e il titolo che sarà Esempio01- TutorialInoltre, possiamo modificare molte opzioni come il colore di sfondo, le dimensioni, il tipo di finestra e molte altre.
Possiamo andare alla scheda Python e vedere come viene generato il codice.
Per generare il codice in un file, dobbiamo prima salvare il progetto dal menu File> Salva con nome, e lo salviamo come esempio01.fbp
Quindi andiamo all'opzione di menu File> Genera codice, quindi andiamo nella directory in cui salviamo il file del progetto e vedremo il file noname.py
Questo file noname.py contiene il codice Python generato con il design dell'interfaccia, possiamo rinominare il file in example01.py
Quindi dobbiamo aggiungere il codice in modo che questo disegno venga visualizzato quando l'applicazione viene eseguita, per fare ciò apriamo il file e aggiungiamo il seguente codice di seguito, rimanendo come segue:
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, size = 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) : Passa # Codice di progettazione di fine modulo ## Codice che mostra l'applicazione durante l'esecuzione di app = wx.App (False) frame = MyForm (Nessuno) frame.Show (True) app.MainLoop ()Quindi da una finestra di terminale andiamo nella directory dell'applicazione ed eseguiamo python example01.py
Successivamente andiamo su wxFormbuilder e iniziamo a progettare lo schermo. I componenti sono distribuiti sullo schermo utilizzando Layout e griglie, in questo caso selezioneremo un wxBoxSizer verticale, quello che fa è dividere lo schermo in tre righe, dove aggiungeremo i componenti.
Successivamente aggiungeremo un menu, per questo andremo alla scheda Menu / Barra degli strumenti, prima aggiungeremo il componente MenuBar che sarà il menu principale. Quindi aggiungeremo gerarchicamente un Open Menuitem, un separatore e un altro Menuitem con il nome Exit.
Possiamo vedere che gli oggetti sono disposti secondo una gerarchia dove quello più alto racchiude quello più basso, possiamo scambiare la loro posizione con il solo trascinamento. Poi andremo alla scheda Dati e aggiungeremo a wxGrid control Per mostrare una griglia di dati, per loro ci posizioniamo nel Layout in modo che il prossimo controllo si trovi sotto il menu.
Generiamo il nuovo codice e il file verrà modificato noname.py, possiamo rinominarlo come example02.py, aggiungendo le modifiche apportate. Quindi eseguiamo da una finestra di terminale usando il comando:
python esempio02.py
Ora stiamo per wxFormbuilder e aggiungeremo una barra di separazione sotto la griglia, da Scheda comune e seleziona il componente wxStaticLine.
Successivamente creeremo campi per creare un master di dettaglio, per questo ci posizioneremo nel Layout e aggiungeremo un componente.
Oltre a progettare interfacce grafiche possiamo aggiungere eventi, ad esempio clicchiamo sul pulsante registra e andiamo alla scheda Eventi, cerchiamo il tipo di evento, in questo caso SuSinistraGiù, fare clic con il tasto sinistro del mouse premuto.
In questo caso scriviamo il nome della funzione che invocherà l'evento, durante la generazione del codice creerà solo la funzione per noi, quindi dovremo scrivere il codice con la funzionalità. Quando avremo generato il file, aggiungeremo alla fine il seguente codice completo:
import wx import wx.xrc import wx.grid ######################################## ##################################### Class 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.Box.TICSAL (self) 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) # Colonne self.m_grid1.EnableDragColMove (False) self.m_grid1.EnableDragColSize (True) self.m_grid1.SetColLabelMize.m_Trugried1. SetColLabel.mSize ( .SetColLabelAlignment (wx.ALIGN_CENTRE, wx.ALIGN_CENTRE) # Righe self.m_grid1.EnableDragRowSize (True) self.m_grid1.SetRowLabelSize (80) self.m_grid1.SetRowLabelAlignment (wx.ALIGN_CENTRE, wx.ALIGN_CENTRE) # Aspetto etichetta # Default cella self.m_grid1.FTLIGNDefaultCFT. .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.SetMoFle (wx.FLEX_GROWMODE1_SPECIFIED) selfText.SelfText. (self, wx.ID_ANY, u "Prodotto", 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.ALL 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. Aggiungi (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 "Data di inserimento", 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. Add (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 "Delete", 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 "Apri", 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 ,. Vuoto .ITEM_NORMAL) self.m_menu1.AppendItem (self.m_menuItem3) self.m_menubar1.Append (self.m_menu1, o "Files") self.SetMenuBar (self.m_menubar1) self.Centre (wx.BOTH) # click sull'evento invocando il funzione record self.m_button4.Bind (wx.EVT_LEFT_DOWN, self.Record) def __del __ (self): pass # crea un messaggio o una finestra di dialogo personalizzati def Message (self, msg, title, style): dlg = wx.MessageDialog ( parent = None, message = msg, caption = title, style = style) dlg.ShowModal () dlg.Destroy () # Funzione di registrazione che risponde all'evento click def Record (self, event): self.Message ("Questo è a click! event "," Informazioni - Tutorial ", wx.OK | wx.ICON_INFORMATION) app = wx.App (False) frame = MyForm (Nessuno) frame.Show (True) app.MainLoop ()
Successivamente testeremo la stessa applicazione in un'installazione di Windows 7 con Python e wxpython precedentemente installati e il risultato è il seguente:
Al termine del nostro sviluppo completo, l'applicazione può essere distribuita utilizzando software come InnoSetup come abbiamo visto nei tutorial:
- Crea programmi di installazione con Inno Setup
- Installatore personalizzato per distribuire il nostro software.
wxFormBuilder è un ambiente visuale che ci permette di generare codice Python con la piattaforma wxPython, un'altra alternativa per sviluppare interfacce grafiche per Python spetterà all'utente se utilizzare PyQt o wxPython.
Uno dei grandi vantaggi di wxFormBuilder è che contiene molti componenti e widget, altamente personalizzabili anche più che in altri ambienti più diffusi. Possiamo vedere i risultati mentre creiamo le applicazioni, quindi possiamo avere diverse versioni dell'interfaccia grafica e del codice che aggiungiamo. A differenza di Qt Designer, wxFormBuilder consente di generare eventi e quindi di invocare una certa funzionalità.
.
