Monday, October 30, 2017

Cross-platform C++ programming with wxWidgets

  1. Introduction
  2. Windows Setup
  3. Linux Setup
  4. Mac Setup
  5. References

Introduction

wxWidgets is a C++ library for creating cross-platform applications. It enables developers to create GUI code to compile and run on several computer platforms such as Windows, OS X, Linux and UNIX with minimal or no code changes.

wxWidgets is free and open source software which satisfies those who wish to produce for GPL and proprietary software without license costs [wxW98]. On the other hand, Qt is available for free under LGPLv3 license but has some limitations for commercial use unless you pay the license fee [Qt17].

wxWidgets uses Native platform , therefore GUI has more native look and feel [wxW12]. Qt extends the C++ language but wxWidgets does not extend the C++ language which is less surprising to developers expecting standard C++.

wxWidgets produces small and efficient binary applications. Therefore, it is suitable for embedded systems. In term of library size, Qt library is \(\approx 200\) MB where wxWidgets library is \(\approx 30\) MB.

wxWidgets not only works for C++, but also has bindings for python, perl, php, java, lua, lisp, erlang, eiffel, C# (.NET), BASIC, ruby and even javascript [wxW15a]. wxWidgets is one of the most complete and mature GUI toolkits. There are a lot of utility classes also.

wxWidgets is used by a huge range of organisations and individuals all over the world. Some of the better-known organisations who have used wxWidgets include NASA, AMD, Xerox, and Open Source Applications Foundation (OSAF). wxWidgets applications that you may be familiar with include AVG AntiVirus, Audacity, Filezilla, Code::Blocks, CodeLite.

Windows Setup

Several IDEs are available to use wxWidgets on Windows. Not only Microsoft Visual Studio IDE but also IDEs like wxDev-C++, CodeLite [Cod13; Cod17], Code::Blocks are good to use wxWidgets.

wxDev-C++

On Windows, wxDev-C++ is a good IDE to create wxWidgets applications. It has a nice book called Pragramming with wxDev-C++ (http://wxdevcpp-book.sourceforge.net/) so that you can learn to create wxWidgets applications easily. wxDev-C++ is available to download at http://wxdsgn.sourceforge.net/.

After installing wxDev-C++, a project can be created by clicking File menu → New... → Project. When New project dialog pop up, select wxWidgets Frame in Basic tab, give a name such as wxTest, and click OK.


Figure. Creating a wxWidgets frame based project in wxDev-C++.


Then, in New wxFrame window, select Window style , compiler such as MingW gcc, and click Create.

Figure. Defining the new frame.


After creating the Project, the GUI design can be seen in wxTestFrm.wxform tab. Source files such as wxTestFrm.cpp can be altered for testing. GUI application is run when clicking Run button or pressing F8.

Figure. Running a GUI application example in wxDev-C++.


In a Windows application, you can set an icon to your form. That icon file is usually included in xpm format. For example, if we want to use favicon.xpm, we can include it at the top of the cpp file of the form as follows. 
#include "favicon.xpm"
Then, set the icon in the code as follows. 
SetIcon(wxIcon(favicon_xpm));
An icon file in xpm format can be created using the image manipulation program, GIMP. After creating the xpm file, you might need to open it using a text editor program and change the path that can be found near the top of the file. In our case, deleting all the path in front and leaving only the file name worked well.
To change the icon of your program that shows in the Windows explorer, you need to edit the resource file with extension rc. For example, if you want to use favicon48.ico, you can edit the file by adding a line as follows. 
aaaaAppIcon ICON "favicon48.ico"
#include <wx/msw/wx.rc>
The name of the icon in this case is aaaaAppIcon. The reason of having too many 'a' in front of the name is to make sure that it will be first when ordering icon files alphabetically.

Visual Studio

Visual Studio is available to download at https://www.visualstudio.com/downloads/. After downloading, you can select the components for it and install it.

Figure. Visual Studio Community 2017 free download.



Figure. Installing Visual Studio Community 2017.


Thereafter, we can download wxWidgets at https://www.wxwidgets.org/downloads/. In this example, the latest stable release - 3.0.3 Windows installer is selected and installed.

Figure. wxWidgets free download.



Figure. wxWidgets latest stable release installer for Windows.


A guide for Microsoft Visual C++ compilation can be found in install.txt which is in C:/wxWidgets303/docs/msw or available online at online [wxW15b]. At first, an environment variable called WXWIN musth be defined. Right click start menu and choose command prompt (admin) to open the command window as an administrator. Then, enter the following command to set WXWIN. 
setx -m WXWIN C:\wxWidgets303

Figure. Defining WXWIN environment variable.


Then, open a solution called wx_vc12.sln which is located in C:/wxWidgets303/build/msw with Visual Studio 2017.

Figure. Building wxWidgets.


Click OK when asking for Retargeting.

Figure. Upgrading the Project.


Thereafter, you can build the solution for many different configurations.

Figure. Building for different configurations.


To compile and run an example wxWidgets application, duplicate 'minimal' folder in C:/wxWidgets303/samples/. Then, open 'minimal_vc9.vcproj' with Visual Studio.

Figure. Testing an example wxWidgets project.


When the project is built and run, the GUI as shown in the following figure will be seen. You can modify source files such as minimal.cpp to try out different styles.

Figure. Running wxWidgets minimal project.


To modify the default icon, you can replace 'C:/wxWidgets303/samples/sample.ico' with your own icon.

Linux Setup

You can use the following commands to setup wxWidgets on Linux [wxW14]. 
sudo apt-get update
sudo apt-get install build-essential
sudo apt-get install libwxgtk3.0-dev
Listing. Setting up wxWdigets on Linux.

In case, you need a terminal application, xterm can be installed as follow. 
sudo apt-get install xterm
As an example, wxsimple.cpp shown in the following listing is created [Zet13]. 
#include < wx/wx.h >
class Simple : public wxFrame
{
public:
    Simple(const wxString& title);

};
Simple::Simple(const wxString& title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(250, 150))
{
  Centre();
}

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

IMPLEMENT_APP(MyApp)
bool MyApp::OnInit()
{
    Simple *simple = new Simple(wxT("Simple"));
    simple->Show(true);

    return true;
}
Listing. wxsimple.cpp

And, you can compile it as follow. 
g++ wxsimple.cpp `wx-config --cxxflags --libs` -o wxsimple
`wx-config --cxxflags` produces flags for compiling and `wx-config --libs` produces flags for linking. When you run the binary application as follow, the GUI can be seen as illustrated in the following figure. 
./wxsimple

Figure. Running an wxWidgets example, wxsimple.cpp, on BeagleBone Black, Debian Stretch.


Building wxWidgets from Source

If you want to build wxWidgets from source, you can build and install it as follows. [wxW14]. 
sudo apt-get update
sudo apt-get install build-essential
sudo apt-get install libgtk-3-dev
wget https://github.com/wxWidgets/wxWidgets/releases/download/v3.0.3/wxWidgets-3.0.3.tar.bz2
tar xjvf wxWidgets-3.0.3.tar.bz2
cd wxWidgets-3.0.3
mkdir gtk-build
cd gtk-build
../configure --enable-unicode --disable-shared --with-gtk=3
make
sudo make install
wx-config --version
When running minimal example in the samples folder, the output is as follows. 
cd gtk-build/samples/minimal
make
./minimal

Figure. Running minimal example on BeagleBone Black, Debian Wheezy.


Code::Blocks

To develop cross platform GUI application using wxWidgets C/C++ , an open source free IDE called Code::Blocks is popular. It has a lot of extensions, and it can be configured for different situations. The following commands can be used to install Code::Blocks. 
sudo apt-get install build-essential
sudo apt-get install gdb
sudo add-apt-repository ppa:damien-moore/codeblocks-stable
sudo apt-get update
sudo apt-get install codeblocks codeblocks-contrib
Listing. Installing Code::Blocks

After installing Code::Blocks, a new project is created by clicking File menu → New → Project... or Start here tab → Create a new project. Then, choose wxWidgets project and click Go button.

Figure. Creating a new project in Code::Blocks IDE


In the following window, choose wxWidgets 3.0.x can be chosen for wxWidgets version, and click Next. Then, you can define project name and location. Thereafter, choose None for GUI builder, and Frame Based for Application type as follows.

Figure. Defining project name and location



Figure. Application type



Figure. Compiler



Figure. Configuration


အဲဒီလို Project ကို ဖန်တီးပြီးတဲ့ အခါ အောက်ပုံ မှာလို ညာဘက် preject explorer ဝင်းဒိုး ထဲက wxtestMain.cpp ၊ wxtestApp.cpp စတဲ့ source တွေကို အမျိုးမျိုး ပြုပြင် စမ်းသပ် ကြည့်နိုင် ပါတယ်။ ပြီးတဲ့ အခါ F9 ခလုပ် နှိပ်ပြီး Build and run လုပ်လိုက်ရင် နောက်တစ်ပုံ မှာ ပြထား တဲ့ အတိုင်း ပရိုဂရမ် ရဲ့ GUI output ကို တွေ့နိုင် ပါတယ်။

Figure. Testing an example wxWidgets application



Figure. GUI output of the example wxWidgets application


Mac Setup


On Mac OSX, Mac Ports is installed first. Then the following command is used to install wxWidgets. 
port search wxWidgets
sudo port -v install wxWidgets-3.0
wx-config

Codelite

After that, we install CodeLite on Mac. To properly compile wxWidgets code, Compiler settings in CodeLite need to be changed. Go to Settings menu -> Build Settings command. When the Bulid Settings pop up windows appeared, select gnu g++ -> Tools. And change the PATH environment variable: field as follows. 
/opt/local/bin:/usr/local/bin:/usr/bin:/bin
To produce the output of your project properly, right click on the project folder in the Workspace windows of the CodeLite IDE and click Make this project output a bundle command. Then, you can select both Debug and Release targets to bundle-ize. You can also define the icon file for your application there. The icon file must be icns format. To create an icon with icns extension, you can use a free version application that is available in the App store called Img2icns.

Source code examples for this post on Github

References

[Cod13] CodeLite. Download CodeLite bundled with MinGW and wxWidgets. 2013.
url: https://sourceforge.net/projects/codelite/files/Releases/codelite-5.0/codelite-5.0.6213-mingw4.7.1-wx2.9.4.exe/download.

[Cod17] CodeLite Wiki. Compiling wxWidgets with MinGW. 2017.
url: http://codelite.org/Developers/BuildingWxWidgetsWin.

[Qt17] Qt. Licensing - Before you begin, make the right license choice. 2017.
url: https://www1.qt.io/licensing/.

[Zet13] ZetCode. wxWidgets tutorial. 2013.
url: http://zetcode.com/gui/wxwidgets/.

[wxW12] wxWiki. WxWidgets Compared To Other Toolkits. 2012.
url: https://wiki.wxwidgets.org/WxWidgets_Compared_To_Other_Toolkits.

[wxW14] wxWiki. Compiling and getting started. 2014.
url: https://wiki.wxwidgets.org/Compiling_and_getting_started.

[wxW15a] wxWiki. Bindings. 2015.
url: https://wiki.wxwidgets.org/Bindings.

[wxW15b] wxWiki. Microsoft Visual C++ Guide. 2015.
url: https://wiki.wxwidgets.org/Microsoft_Visual_C%2B%2B_Guide.

[wxW98] wxWidgets. wxWindows Library Licence. 1998.
url: https://www.wxwidgets.org/about/licence/.

Related post:
Posted by at
Labels: , , , , , , , ,

No comments:

Post a Comment

Comments are moderated and don't be surprised if your comment does not appear promptly.

Subscribe to: Post Comments (Atom)