Chapter 4. Working with wxGlade

The program wxGlade is a tool for designing Graphical User Interfaces (GUI). It is intended to be used with the wxWidgets framework in all its flavors: C++, Lisp, Perl, Python and XRC.

You use a visual editor for creating forms, menus and toolbars with the mouse.

Your design is saved in a .wxg file, which is the wxGlade file format. Then you generate source code or XRC by using visual tools or invoking wxGlade on the command line. You can also use wxGlade in your makefile by generating source code only when the .wxg file changes.

A .wxg file can contain multiple forms, panels, menus and toolbars and generate either a single file containing all classes or multiple files containing one class each.

wxGlade does not manage events, file inclusion, function names, stubs or anything else but graphic interface code.

First Steps

These sections provided you a short introduction into wxGlade. Advanced topics like escaping special characters or naming convention will be discussed in the section called “Next Steps”.

The used abbreviations are described in Appendix A, Glossary of Terms, Abbreviations, and Acronyms.

Quick Example

We will design a simple form.

Start wxGlade by running the wxglade program on Unix or the wxglade.pyw program on Microsoft Windows.

You will see a Main Palette with several buttons, and a Tree Window with an icon marked Application. A Properties Window shows the properties of the Application. If you move the mouse over a button in the Main Palette, a tooltip will display its function.

To add a frame in the design window, from the Main Palette choose the first button: Add a frame and choose wxFrame as the base class.

Look at the tree window and see that two icons are generated under the application icon, a frame icon and a sizer icon.

If you double click on the frame icon, the designer window appears. Notice that the sizer is displayed as a set of gray hatched boxes: they are the slots of the sizer where you will place the widgets.

You place a widget on a sizer by selecting it on the Main Palette, then click on an empty slot on the frame on the designer window. Try adding a static text, a text control and a button.

If you want to add something else, add empty slots on the sizer by right-clicking on the sizer on the Tree Window and selecting Add slot.

Play around, adding four or five widgets on the frame.

Now look at the properties form; there are three tabs. In the Common tab you can specify the name, size and color of the widget.

In the Layout tab you can adjust borders and alignments and the Widget tab enables you to change the properties of the widget.

You can select the properties of a widget by clicking on the designer window or the corresponding icon on the tree window.

Try adjusting widgets with the properties form until you know you have played enough.

Now let's generate the code.

Select the Application icon on the tree window and go to the Properties window.

Check Name and Class, choose a Top window, check Single file and choose the language and set the Output path by pushing the button for selecting a path and a filename.

Finally press the Generate code button, and the code is generated.

Compile and enjoy.