Python tutorial- Graphical User Interface(GUI)


Graphical User Interface(GUI)


Graphic user interface (GUI) applications increase the user interactivity. Many users like to work with graphical applications rather than with text- based applications. In this section, we will guide you how to build GUI applications with wxPython module and pyGTK module with Glade library. GUI with wxPython  

First of all you need to install wxPython module. It can be found at http://wxpython.org. In Window OS, you just simply double-click the exe file (e.g. wxPython2.8-win32-unicode-2.8.4.0-py25.exe) to install it.
After installing wxPython module, you can write code to load a simple window form as shown below:

import wx
app = wx.App()
win = wx.Frame(None, title="Simple Editor", size=(410, 335))
win.Show()
app.MainLoop()

app main logo 


Now, let try to load some widgets in the window form by adding a text box, tow buttons, and a text area.
import wx
app = wx.App()
win = wx.Frame(None, title="Simple Text Editor", size=(500, 500))
win.Show()
 
filename = wx.TextCtrl(win, pos=(5, 5), size=(210, 25))
contents = wx.TextCtrl(win, pos=(5, 35), size=(390, 260),
style=wx.TE_MULTILINE | wx.HSCROLL)
openButton = wx.Button(win, label='Open',
pos=(225, 5), size=(80, 25))
saveButton = wx.Button(win, label='Save',
pos=(315, 5), size=(80, 25))
app.MainLoop()
 

python gui 

If you need help on the TextCtrl widget, you can type:
>>>help(wx.TextCtrl)
You will get the text that describes the TextCtrl class including some common methods that you will need.
To get help on the Button widget, you also can type:
>>>help(wx.Button)
If you are not sure what contain in Frame class, just type:
>>>help(wx.Frame)
 
Note: When you load widgets on window, you need to supply their position and size by using pos=(x,y) and size=(width,height) parameters.
 
Ok, now you have a very nice window. However, if you click on maximizing button to maximize the window. What do you see?
The widgets are not smart enough to resize automatically. To make them smarter, you can use BoxSize() method of wx module to get the resizer object to manage the sizes of the widgets and then set the object to the panel by using setSizer() method. A panel is a container widget that can contain other widgets. Now modify the Simple Text Editor program to make the widgets resizable:
 
import wx
app = wx.App()
win = wx.Frame(None, title="Simple Text Editor", size=(500, 500))
container=wx.Panel(win)
filename = wx.TextCtrl(container)
contents = wx.TextCtrl(container, style=wx.TE_MULTILINE | wx.HSCROLL)
openButton = wx.Button(container, label='Open')
saveButton = wx.Button(container, label='Save')
 
hbox = wx.BoxSizer(wx.HORIZONTAL)
hbox.Add(filename, proportion=1, flag=wx.EXPAND)
hbox.Add(openButton, proportion=0, flag=wx.LEFT, border=5)
hbox.Add(saveButton, proportion=0, flag=wx.LEFT, border=5)
vbox = wx.BoxSizer(wx.VERTICAL)
vbox.Add(hbox, proportion=0, flag=wx.EXPAND | wx.ALL, border=5)
vbox.Add(contents, proportion=1,
flag=wx.EXPAND | wx.LEFT | wx.LEFT | wx.LEFT, border=5)
container.SetSizer(vbox)
 
win.Show()
app.MainLoop( )
 
Note: the proportion argument is used to allocate spaces for the widgets. For example,  in the first sizer box(hbox), filename widget occupies all extra space with the window resizes as shown below.

 gui resize controls 


The flag argument controls the expansions of the widgets. The values of the flag can be wx.LEFT, wx.RIGHT,wx.BOTTOM,wx.TOP, and wx.ALL that determine which sizes the border argument applies.



Comments




This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.