GUI application in Python using wxPython

This is a simple login application created using wxPython in python.Only the front-end is shown here.The backend working is in another tutorial.

Note:Make sure that you know the Classes  and inheritance concepts of python before reading this.See this tutorial for short intro of the same https://praveenmax.wordpress.com/2011/02/17/creating-class-in-python/

The Source:


import wx; #importing wxpython packages
class myframe(wx.Frame):#Inheriting the "wx.Frame" class into our myframe class
    #our constructor
    def __init__(self,parent,title):
        #calling the constructor of wx.Frame
        wx.Frame.__init__(self,parent,-1,title);
        #Our panel
        basepanel=wx.Panel(self,-1);

        #some custom fonts
        #syntax:wx.Font(size,font_family,font_style,font_weight)
        font1 = wx.Font(12, wx.DEFAULT, wx.FONTSTYLE_NORMAL, wx.LIGHT);
        font = wx.Font(15, wx.DEFAULT, wx.FONTSTYLE_NORMAL, wx.BOLD)

        #this is the BoxSizer
        #syntax:wx.BoxSizer(orientation)
        basebox=wx.BoxSizer(wx.VERTICAL);

        #This is our name field
        ip_box=wx.BoxSizer(wx.HORIZONTAL);#A boxresizer
        ip_label=wx.StaticText(basepanel,label="User name");#Label "Username"
        ip_label.SetFont(font1)#setting custom font to label
        ip_text=wx.TextCtrl(basepanel,-1,"enter text here");#TextField for Username

        #adding Username label & its textfield to ip_box BoxSizer
        #syntax:Add(parent,id,proportion,spacing)
        ip_box.Add(ip_label,-1,wx.ALL,5);#wx.ALL means spacing of 5px in "all direction"
        ip_box.Add(ip_text,-1,wx.ALL,5);

        #password field
        pwd_box=wx.BoxSizer(wx.HORIZONTAL);
        pwd_label=wx.StaticText(basepanel,label="Password");
        pwd_label.SetFont(font1);
        pwd_text=wx.TextCtrl(basepanel,-1);

        pwd_box.Add(pwd_label,-1,wx.ALL,5);
        pwd_box.Add(pwd_text,-1,wx.ALL,5);

        #WELCOME title
        title_box=wx.BoxSizer(wx.HORIZONTAL);
        title_text=wx.StaticText(basepanel,label="Login Frame");#a non-editable text
        title_text.SetFont(font);
        title_box.Add(title_text,-1);

        #OK button
        bt_box=wx.BoxSizer(wx.HORIZONTAL);
        ok_bt=wx.Button(basepanel,-1,"Login");
        cancel_bt=wx.Button(basepanel,-1,"Cancel");
        bt_box.Add(ok_bt,-1,wx.ALL,5);
        bt_box.Add(cancel_bt,-1,wx.ALL,5);

        #adding everything to basebox
        basebox.Add(title_box,0,wx.CENTER,10);
        basebox.Add(wx.StaticLine(basepanel),0,wx.ALL|wx.EXPAND,5);
        basebox.Add(ip_box,0,wx.CENTER,10);
        basebox.Add(pwd_box,0,wx.CENTER,10);
        basebox.Add(bt_box,0,wx.CENTER,10);

        #adding basebox to basepanel
        basepanel.SetSizer(basebox);
        #automatically setting up the frame size
        basebox.Fit(self);

myapp=wx.App();
tempframe=myframe(None,"MyFrame");#our frame instance
tempframe.Show(True);#making frame visible
myapp.MainLoop();

Login Frame using wxPython

The comments in the corresponding lines will explain most of the meanings except the “wx.BoxSizer()” stuff.The image below explains it

BoxSizers revealed

BoxSizer is a layout manager which is used to arrange widgets either vertically or horizontally.It holds the widgets together.
In the image,there are 5 BoxSizer.The blue box shows the main BoxSizer of our Frame and it also contains 4 more BoxSizer.Refer to the colors.

 #WELCOME title
        title_box=wx.BoxSizer(wx.HORIZONTAL);
        title_text=wx.StaticText(basepanel,label="Login Frame");#a non-editable text
        title_text.SetFont(font);
        title_box.Add(title_text,-1);

The above code is the First BoxSizer.This contains a static text “Frame Login” .Similarly,…..

        ip_box=wx.BoxSizer(wx.HORIZONTAL);#A boxresizer 
        ip_label=wx.StaticText(basepanel,label="User name");#Label "Username"
        ip_label.SetFont(font1)#setting custom font to label
        ip_text=wx.TextCtrl(basepanel,-1,"enter text here");#TextField for Username 
        
        #adding Username label & its textfield to ip_box BoxSizer
        #syntax:Add(parent,id,proportion,spacing)
        ip_box.Add(ip_label,-1,wx.ALL,5);#wx.ALL means spacing of 5px in "all direction"
        ip_box.Add(ip_text,-1,wx.ALL,5);

The second BoxSizer contains the “Username” label  and a Textfield.

    #password field
        pwd_box=wx.BoxSizer(wx.HORIZONTAL);
        pwd_label=wx.StaticText(basepanel,label="Password");
        pwd_label.SetFont(font1);
        pwd_text=wx.TextCtrl(basepanel,-1);
        
        pwd_box.Add(pwd_label,-1,wx.ALL,5);
        pwd_box.Add(pwd_text,-1,wx.ALL,5);

The third BoxSizer contains the “Password” label and a Textfield.

 # button
        bt_box=wx.BoxSizer(wx.HORIZONTAL);
        ok_bt=wx.Button(basepanel,-1,"Login");
        cancel_bt=wx.Button(basepanel,-1,"Cancel");
        bt_box.Add(ok_bt,-1,wx.ALL,5);
        bt_box.Add(cancel_bt,-1,wx.ALL,5);

The fourth BoxSizer contains the “Login” and “Cancel” button.

All these 4 BoxSizers are enclosed by another BoxSizer which is then added to wx.Panel(refer Line 60).

Done! 🙂

Creating Class in Python

class Employee:
    #these are the instance variables
    sal=0;
    name="none";

    #This is a function definition.
        #the keyword "self" is MUST!It is similar to "this" in java.It says that this method belongs to Employee class.(explicitly saying)
    #"__init__() is the constructor in python.

    def __init__(self,name,sal):
        self.name=name;
        self.sal=sal;
        print "instance created";

    #a normal method
    def display(self):
        print "*"*20;
        print "Name:",self.name;
        print "Salary:",self.sal;
        print "*"*20;

#class ends

#creating class instance and storing in variable "temp_var"
temp_var=Employee("max",10000);
#display the values
temp_var.display();

Output:

instance created
********************
Name: max
Salary: 10000
********************

Creating Frame in wxPython

Code:

Note:Use “portable python” IDE since it has wxPython by default.

import wx                      //importing the core package of wxPython

class MyApp(wx.App):           //creating a class "MyApp" instantiating the "wx.App" 
 def OnInit(self):             //constructor for the class
     myframe=wx.Frame(parent=None,title="A sample Frame")  //creating a frame(parent,title)
     myframe.Show()             //set the frame to be visible
     return True               //true if the constructor runs without errors else return false implicitly
//-------------end of the class------------------
myapp=MyApp()                  //creating an instance of MyApp class
myapp.MainLoop()               //starting a loop for dispatching  events.

Output:

This is the output

A simple frame

NOTE:Make sure you indent your python codes properly before running to prevent compilation errors!

Installing Python the easy way


Instead of downloading the Python from the official site,download the portable version of Python 2.6 which comes with several modules such wxPython(GUI programming ) , Iron Python(For C# ) ,pyGame …

 

Download Python IDE from this link

Do not download Python 3.0.1 at least for now.Python 2.6 is enough for most of the tasks.