Learn Quickly Creating Professional Looking Desktop Application Using Python - Part 5 of 7

Creating the GUI

Quick links to other parts of this blog series:
Part-1 | Part-2 | Part-3 | Part-4 | Part-5 | Part-6 | Part-7 
This is where the fun begins!
It is in this section we will start to make use of the wxPython GUI library.
There are lots of codes to learn in wxPython library which we cannot cover at once in this tutorial. I will only introduce you to the basics of wxPython code and to a tool (wxFormBuilder) that generates the wxPython GUI codes for us.

wxPython is primarily used for making GUIs, and largely all GUI apps most have a frame. It is the frame that holds all bunch of elements (such as button, text Boxes, labels, menus, status Bar, combo Boxes, images etc) for any app.
So the minimum code needed to create a frame using wxPython just like in any programming language is seen attached below on image-13 or as quoted below.

import wx

app = wx.App()

frame = wx.Frame(None, -1, 'My First Window App')

frame.Show()

app.MainLoop()

Save the code in a python file (I saved mine as frame.py) and run it, you should see a blank frame/window pops up on your screen (image-14).
To add elements such as buttons, text Boxes, labels etc on the frame, we need to write the codes for all of that! But with wxFormBuilder, we don’t have to as it can be use to easily generate most of the python GUI codes needed on the fly with its WYSIWYG interface. It can also be used to generate codes for C++, PHP, XRC and Lua programming languages.

It is worthy to note that generally in any GUI development, coding is divided into two aspects namely; the GUI coding and the logical coding. We will use wxFormBuilder to generate the GUI code while we get our logical code from the console version of the program we developed earlier.

~~ Let’s get started with wxFormBuilder by creating the GUI interface for our Expression Evaluator App! Now let’s launch our wxFormBuilder software and save it as “Eval_Project” in the project’s folder.

~~ On the right hand side, you will see “Object Properties”, under the “Properties” tab set the Project name to “EvalProject”, set the file name to “gui” (this is the name for the generated python file) and set “code generation” to python. See image-15

~~ Under the “Form” tab in the designer view, create a frame and set its size to 250-Width by 300-Height (see image-16). Note the name of the frame is “MyFrame1”. This name will be used for our frame object class (that an OOP thing...).

Creating the GUI Continue...

~~ Switch to the “Layout” tab and add a “wxBoxSizer”, leave the orient property on wxVERTICAL, see image-17.

Let’s add the remaining widgets to our frame.

~~ Under the “Common” tab, select “wxStaticText” then EXPAND and STRETCH it by clicking on the respective icons on the toolbar (see image-18 below).
On the object property panel to the right-hand side, set the “wxStaticText” as follow;-
- Name to “DisplayResult”
-Style to wxALIGN_CENTRE
-Label to “DisplayResult”
-Font point size to 20

~~ Add the next widgets on the sketch, which is a Text box (“TextCtrl” as its being called in wxPython). Then EXPAND and STRETCH it as we did above see image-19.
On the object property, set the “wxTextCtrl” as follow;-
-Name to “EnterExpression”
-Style to “wxTE_CENTRE”
-Font point size to 20

The last two widgets on our sketch are the two buttons (Evaluate and Close buttons).



~~ Add the first “wxButton” (Evaluate button), then EXPAND and STRETCH it as we did above for “wxTextCtrl”.
On the object property, set the “wxButton” as follow;-
-Name to “Button1”
-Label to “Evaluate”
-Font point size to 20
Repeat this process for the second button (Close button); remember to change the name appropriately. See image-20

~~ Boom! We are done with our Expression Evaluator GUI design, now save you work and generate the python code by clicking “Generate Code” button icon on the tool bar. See image-21.
Check your project folder, you should see a file named “gui.py” that is the file containing wxpython code for our program’s GUI.

Open “gui.py” file in your text editor and type the minimum required wxpython code at the end of the file. See the code below;-

app = wx.App()

frame = MyFrame1(None)

frame.Show()

app.MainLoop()

If you have followed the tutorial correctly to this point, running/launching the “gui.py” file should present something similar to the screen (image-22) below;-

Wow! Our desktop application is working... But at the moment, our Expression Evaluator app is dormant (it doesn’t evaluate anything). This is because we have not binded the widgets events to methods/functions.

We will bind the events to functions next time.

Nice day to you....