Using Wx Form Builder Alt
wxFormBuilder Tutorial v3.0
Welcome to wxFormBuilder. To fully enjoy this tutorial, you will need the following:
- wxFormBuilder v3.0 or greater if you only need to generate the source code for the GUI design.
- wxWidgets v2.8.x or greater and a compatible compiler if you would like to build the generated code into an actual application and see your design in action (please refer to wxWidgets homepage for details).
Let’s start with a new project in wxFormBuilder. The window should look similar to the following picture.
<pic 1>
On the left you will notice the object tree (still empty of course). On the right side at the top you will find the component palette. Just below the component palette on the left is the editor pane and on the right the object properties pane.
The component palette will show the available components for the currently selected tab. Feel free to browse through them to see the multitude of GUI components that are available to you. You may or may not see the tab wxAdditions in your component palette. This tab will only show if you have installed the optional wxAdditions plug-in which is not required to complete this tutorial.
In this tutorial, you will be creating a simple frame that will feature a two panel wxNotebook (similar to the MS Windows TabCtrl). One of the panels will contain a static text label and the other an ordinary button that will do something interesting (see preview below).
<pic 2>
To continue with our design, select the project in the object tree. We need a main frame that will contain all our GUI components so select the Forms tab in the component palette. You will now see three GUI components in your component palette (see picture below).
<pic 3>
Select the left most component (if you hover over it, the tooltip should show Frame). Click it once and a couple of things will happen; a new object will be added to your object tree, and an actual frame will be visible in the Designer tab in your editor pane. You may want to resize the main wxFormBuilder window so you can see the entire frame. Your main window should look similar to the following picture.
<pic 4>
In order to continue with our design, we need to add a sizer to our frame. A sizer is similar to a Java layout manager and will control how components will be arranged. Sizers or layout managers will take care of properly displaying components consistently across different platforms or screen resolutions.
Select the layout tab and then click once on the leftmost component called wxBoxSizer (see below picture).
<pic 5>
This will add another object to our object tree on your right and you will also notice a red border inside your frame in the designer pane.
Now it is time to add the wxNotebook component. Select the Additional tab which can be found right next to the common tab in the component palette. Click once on the wxNotebook component and your designer pane should look like the following.
<pic 6>
Our wxNotebook doesn’t contain any panels yet, so let’s put some in there by selecting the common tab and click twice on the rightmost component called wxPanel. You will notice that your object tree now shows two wxPanels as child components below the wxNotebook object. This hierarchy is there for a reason because to continue, you will have to select the first panel in the object tree pane. Notice that once you select the first panel, an orange highlight will appear at the top of the tab in the designer tab of your editor pane. With the first panel selected, we need to add a sizer to the panel by clicking once on the wxBoxSizer in the layout tab like you did for the main frame. Do the same for the second panel. Your main window should look like the following picture.
<pic 7>
Continue by selecting the wxBoxSizer object of the first wxPanel in the object tree. Notice the thin red border? That means we can now add components to this panel. Let’s keep it simple and add one button to our design by clicking once on the wxButton in the common tab of the component palette. By default the button will be labeled ‘MyButton’ and left justified, which is fine for our tutorial.
Now select the wxBoxSizer object below the second panel in your object tree and click once on wxStaticText. A label with the default text of ‘MyLabel’ will be added to the second panel – again this is fine for our tutorial.
We now come to a new feature in wxFormBuilder as of version 3, namely adding Event handlers for components in the common tab of the component palette. Our goal is to add an event handler for our button. An event handler will allow us to add custom code that will be executed when a particular event occurs – in this case once the button is clicked.
Select the wxButton in your object tree. Notice that a red border will be drawn around the button in the designer tab? Now I want to draw your attention to another pane in wxFormBuilder and that is the object properties pane which can be found to the right of the Editor pane. The object properties pane also contains different tabs, which are the Properties tab and the Events tab. Select the Events tab and your window should look like the following picture.
<pic 8>
Now click on the text box next to the OnButtonClick property and a blinking cursor will be shown. Enter a name for your handler, for example ‘MyButtonClick’ and press <enter>.
We haven’t given any of our objects a proper ID yet, plus the Project and the Frame still have their default names which should be changed before we do the code generation, so let’s do that now.
Select the Project (topmost) object in the Object Tree, and change the name property in the Object Properties pane by clicking on the textbox to the right. The path property contains the directory where the generated code will be placed. The file property contains the name of the files (without the extension) for your generated code. To summarize, your generated GUI design files will be: <path>\<file>.h <path>\<file>.cpp
As of wxFormBuilder v3.0 you will also be able to generate the GUI inherited class. The name of the GUI class will be <Project name><Frame name>.
Select the Frame in the Object Tree on the left. On the right, you can now change the name of the Frame by clicking in the textbox next to name. Also, change the id in the wxWindow section to something unique, for example wxID_MYFRAME.
Select the notebook object in the object tree and change its id to wxID_NOTEBOOK for example.
Select the first panel in the Object Tree and change its id to wxID_PANEL1. Then select the button and change its id to wxID_MYBUTTON.
Finally, select the second panel and change its id to wxID_PANEL2.
You are now ready to generate the GUI design code by clicking on the Generate Code button.