Simple wxWidgets GUI Example

Over the last few days, I’ve been working on a project using wxWidgets as the GUI toolkit. The following program is a wxWidgets GUI example. It’s not the most elegant program, but relative to most of the examples I came across when I was trying to reacquaint myself with wxWidgets, it seems simpler to me.

Here’s a screenshot:

When the user clicks the “Hello” button, the following message box appears:

The text in the label control also changes when you click the “Hello” button:

What it does:

• This code creates a non-resizeable window (a wxFrame widget).
• It then creates one wxStaticBitmap, one wxStaticText and two wxButtons.
• It connects the two buttons to handler functions.
• When the user clicks the “Hello” button, a message box appears and the wxStaticText changes its text.
• All controls are positioned manually (no wxSizers or anything – I find these confusing!) and the window cannot be resized.
• No event table is used (I also find these confusing). Instead, the connect function is used to add handler functions to the buttons.

Here’s the complete C++ code:

//
// main.cpp - A simple wxWidgets GUI example
// Written by Ted Burke - last updated 25-2-2012
//

#include <wx/wx.h>

// The main window class
class MainFrame : public wxFrame
{
public:
	// Constructor
	MainFrame();

	// Controls
	wxStaticBitmap *image;
	wxStaticText *label;

	// Event handler functions
	void MainFrame::OnHelloButton(wxCommandEvent& WXUNUSED(event));
	void MainFrame::OnQuitButton(wxCommandEvent& WXUNUSED(event));
};

// Constructor for main window class
//
// NB The style flags passed to the parent class constructor
// create a non-resizeable window.
//
MainFrame::MainFrame()
	: wxFrame(NULL, wxID_ANY, "Ted's wxWidgets Example",
		wxDefaultPosition, wxSize(640, 480),
		wxDEFAULT_FRAME_STYLE & ~(wxRESIZE_BORDER|wxMAXIMIZE_BOX))
{
	// Set window font. This will be inherited by child controls.
	SetFont(wxFont(32, wxFONTFAMILY_SWISS,
		wxFONTSTYLE_NORMAL, wxFONTWEIGHT_NORMAL));

	// Calculate values for positioning controls
	int w, h, h1, h2, h3, w1, w2;
	GetClientSize(&w, &h);
	h1 = 0.6*h; h2 = 0.2*h; h3 = h-h1-h2;
	w1 = 0.5*w; w2 = w-w1;

	// Create controls
	image = new wxStaticBitmap(
		this, wxID_ANY,
		wxBitmap("pattern.bmp", wxBITMAP_TYPE_BMP),
		wxPoint(0,0), wxSize(w, h1));
	label = new wxStaticText(
		this, wxID_ANY, "Example Text",
		wxPoint(0,h1), wxSize(w, h2),
		wxALIGN_CENTRE | wxST_NO_AUTORESIZE);
	wxButton *helloButton = new wxButton(
		this, wxID_ANY, "Hello",
		wxPoint(0,h1+h2), wxSize(w1,h3));
	wxButton *quitButton = new wxButton(
		this, wxID_ANY, "Quit",
		wxPoint(w1,h1+h2), wxSize(w2,h3));

	// Connect buttons to handler functions
	helloButton->Connect(
		wxEVT_COMMAND_BUTTON_CLICKED,
		wxCommandEventHandler(MainFrame::OnHelloButton),
		NULL, this);
	quitButton->Connect(
		wxEVT_COMMAND_BUTTON_CLICKED,
		wxCommandEventHandler(MainFrame::OnQuitButton),
		NULL, this);

	// Display window on screen
	Show(true);
}

void MainFrame::OnHelloButton(wxCommandEvent& WXUNUSED(event))
{
	wxMessageBox("Hello world!");
	label->SetLabel("Hello button clicked");
}

void MainFrame::OnQuitButton(wxCommandEvent& WXUNUSED(event))
{
	Close(true);
}

// The application class
class MyApp : public wxApp
{
public:
	virtual bool OnInit();
};

bool MyApp::OnInit()
{
	// Create window
	MainFrame *window = new MainFrame();

	return true;
}

IMPLEMENT_APP(MyApp)

Here’s the makefile:

#
# Makefile for wxWidgets GUI example: hello.exe
# Written by Ted Burke - last updated 25-2-2012
#

hello.exe: main.cpp
	cl main.cpp \
		/I"C:\wxWidgets-2.9.2\include" /I"C:\wxWidgets-2.9.2\include\msvc" \
		-EHsc /D "WIN32" /D "_WINDOWS" /D "_UNICODE" /D "UNICODE" /MDd \
		-link /OUT:"hello.exe" /LIBPATH:"C:\wxWidgets-2.9.2\lib\vc_lib"

The bitmap image, “pattern.bmp”, needs to be in the same directory as “hello.exe” when you run it. Here’s the bitmap image I used (unfortunately, I had to convert it to PNG format to upload it to wordpress.com because BMP images aren’t allowed):

To build the application, I run nmake in a Visual Studio Command Prompt window. Here’s a screenshot of the command window where I built and ran it: