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! 🙂

About PraveenMax
My Interests: ------------------ Programming , Drawing & Music

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: