Monday, August 17, 2015

GUI Designer for wxWidgets using wxFormBuilder

I used wxFormBuilder frequently in recent years as GUI Designer when coding with wxWidgets. This RAD tools very much help programmer to build GUI up and running in a snap. Following tutorial will guide you in quick simple steps to configure and work with wxFormBuilder.

Installing wxFormBuilder in Ubuntu

$ sudo apt-get install libwxgtk3.0-0 libwxgtk-media3.0-0

$ sudo add-apt-repository -y ppa:wxformbuilder/release
$ sudo apt-get update

$ sudo apt-get install wxformbuilder

Installing wxFormBuilder in Windows

Get download wxFormBuilder_v3.5.1-rc1.exe

Work with the Tools, Begin wxFormBuilder

Starting the program and you will be greeted with new blank project with MyProject1 as an intial name.

For easy associating with the UI naming, then I would like to alter this name into UI. Take a look at Object Properties on the right pane, and make change to this properties:
name : UI
file : UI

Then save the project into your netbeans project (let say into folder wxApp) and make the name UI.fbp

Adding Frame

Activate tab [Forms], then select/click Frame to insert it into project and adjust properties: 
name : MainFrame
title : My wxApp

You basic GUI is now ready and to make a test, just press [F5]

Working with Window Controls

To enrich the GUI and to have full featured application  window, you may can follow the step below:
Adding layout:
[Layout] + wxFlexGridSizer
Properties :
growablecols : 1
Adding Label or StaticText
[Common] + wxStaticText
Properties :
label : What is your name:
Adding TextControl
[Common] + wxTextCtrl
Properties :
flag : wxEXPAND [v]
Adding Spacer
[Layout] + spacer
Adding Button
[Common] + wxButton
Properties :
flag : wxALIGN_RIGHT [v]
Preview the Window, press [F5]

Generate C++/wxWidgets codes

After make a GUI design, you may then generate C++ code, just press :
[F8] to Generate base class and yield you with 2 files UI.cpp and UI.h. PLEASE DO NOT make any MODIFICATION directly to these files
[F6] to Generate Inherited Class inside the files UIMainFrame.cpp and UIMainFrame.h, on which you will work with directly

Complete File is Here !

Get fresh wxApp from my Github repository, clone to your local folder and try to figure out the files inside this netbeans projects.

Happy coding …………………… / Ddy