What is wxGlade?

wxGlade is a GUI designer for wxPython. It makes it very easy to create a user interface using drag and drop techniques without writing a single line of code. Anyone who has ever written wxPython code will understand that you can save a lot of time using a GUI designer such as wxGlade. wxGlade also generates C++, Perl and XRC (wxWidgets' XML resources) code. More information about this great piece of software here.

Lets start

I assume you had no problems installing wxPython and/or wxGlade, so now it's time to start wxGlade. Click on the button "Add a frame" in the wxGlade's main window and choose for wxFrame, as a result a Frame will be created. wxGlade automatically adds a sizer to the frame, a sizer is a container for our widgets like buttons, etcetera.

It is very important to add a panel to the sizer, otherwise your application will look funny in Windows. So please add a sizer with 3 rows. Now we will add two buttons and one text field to the frame. Just click on the "Add TextCtrl" in the main window and than click on the upper row in your panel. Repeat this for both buttons. Now you should have something like this:

Time to save our work! Saving is done by "File" --> "Save as..." in the main window, should not be difficult if you've come this far.
When you click on a widget (e.g. text_ctrl_1) in your frame, its properties will be displayed in the "Properties" window. Now edit the properties of you widgets like I did and you should have something like this:

Hey, did you notice that I added a status bar? Find out how I did it yourself...
Generating Python code is also easy, just keep some things in mind. Click on "Application" in the "Tree" window and the "Properties" window appears. Now, look at the picture below and I'll explain it to you.

Check "Name" and "App" to create a class and mainloop in your code. Select "frame_1" as the Top window. Generate a single file for this application, a more complex application would require separate files, at least this would be recommendable. Check the "Python" radiobutton, select "wx namespace" and do NOT overwrite existing sources (I'll explain this later). Set the output path and filename and "Generate code".
Open this file in your favorite editor and examine the code. It should run now, your wxPython program without having to write a single line of code. Isn't it amazing?
But if you click the buttons, nothing happens. That's because there are no events in this program yet. I will explain below how to add events to this little application.

Adding events

Adding events should be done "by hand", wxGlade cannot do this because it is a GUI builder and not an IDE. So you will need an editor or IDE, such as SPE , to add events and other lines of code. It is VERY important to add your code outside the # begin wxGlade # end wxGlade section! That is because whenever wxGlade (re)generates a new version (because you have added another button, for example) it leaves your code outside the # begin wxGlade # end wxGlade section intact. And that's why you have to uncheck "Overwrite existing sources" in the properties window!
Now fire up your editor and look for the # end wxGlade line in the  def __init__ section ot he class MyFrame. Below this line you should add: wx.EVT_BUTTON(self,self.button_1.GetId(), self.pushA) wx.EVT_BUTTON(self,self.button_2.GetId(), self.pushB) This is where the events bindings to the buttons 1 and 2 take place. The self.button_1.GetId() code sees to it that each buttons has a unique ID (well, actually it is a bit more complicated). The self.pushA code is there to let the button know what event should be executed. When you run this code, you will get an error message like "AttributeError: MyFrame has no attribute pushA". That is because we haven't defined the pushA and pushB definitions yet. So let's add the following outside the def __init__: def pushA(self, event): self.text_ctrl_1.WriteText("You pressed A\n") def pushB(self, event): self.text_ctrl_1.WriteText("You pressed B\n") Both function definitions (def) are very simple and a good example of the straightforward logic of wxPython. The text "You pressed ..." is written to (WriteText) the text_ctrl_1 widget we created earlier. By the way, \n is a special character and it means newline. And yes, it creates a new line after the text that's been written.Run the program and see what happens. Something like this should be the result:

Now let's enhance this program a bit! We will add another button and another text_ctrl. First we need to add two extra rows to the grid sizer. To do this right click on grid_sizer_1 in the Tree window and add two rows, one by one. After that's done add a button to the fourth row and a textctrl to the fifth as depicted in the illustrations below.

Add the following event for the new button: wx.EVT_BUTTON(self, self.button_3.GetId(), self.doSilly) Also, add the following function definition: def doSilly(self, event): n = list(self.text_ctrl_1.GetValue()) n.reverse() n = ''.join(n) self.text_ctrl_2.WriteText(n) This function reads the content from text_ctrl_1 (GetValue()), turns it into a list, reverses the string and joins the characters. The output is then sent to text_ctrl_2. Pretty silly, but hey, this tutorial is for demonstration purposes only.

Try to understand the code, add more functionality as you learn more. And study the excellent examples that come with the wxPython package.
Here is another excellent site on wxPython.
The source code for this tutorial is available here

discuss this topic to forum