wxWidgets GUI Programming Introduction

introduction

wxWidgets is a C ++ cross-platform development framework. It is in 1992 in application of Artificial Intelligence Research Institute of the University of Edinburgh initiated by Julian Smart, since then, the framework distributed to over many platforms.

This article is intended to guide the beginner and the resources required to install Code :: Blocks IDE using wxWidgets development as a single application.

What is wxWidgets

wxWidgets is a set of C ++ libraries, which follows the design rules of multi-platform GUI development framework. It has a similar API MFC easy to use. And it links libraries and compile specific, but similar to your target platform and application interface. wxWidgets is a very complete framework that provides a solution for almost any of your needs and simplify usage.

Why is wxWidgets

For cross-platform GUI development there are many alternative options. Perhaps the most popular is Java, but for many applications this is not an efficient choice. There are in C ++, QT, a very good framework, but it also has many shortcomings, the first point, it is a fake platform appearance, and wxWidgets using the platform library to create graphical interfaces; the second point, the code you write and between end compiled C ++ code, QT uses a different way to use a dedicated layer. Here, not to mention Microsoft's visual framework, it will only work on the windows, and it is similar as well mono.net, it is layer on layer structures.

In contrast to C ++ is wxWidgets example, it is efficient, and without adding additional layers in your code. It is a collection of a library, so you can use C ++ compiler to compile it, not to say that every C ++ compiler can be, but the most common are.

Other advantages and features:

It has been being developed, there are a lot of support, it is the collaborative open source community.
It is completely free, whether for private use or commercial use.
There are plenty of online documentation.
Easy to learn, it is C ++.
There are many ready-made classes and libraries, see here .

Start

Let's get to work. First we need to frame itself and IDE so that we can begin to develop. Then we can do magic, the "hello, world" to hit our screens.

installation

I will show the installation steps windows environment, and other operating systems is similar. I'm using Code :: Blocks IDE as well as a combination of it and wxWidgets, and its windows and linux have stable free version.

1. Download and install Code :: Blocks

You can from its own official website [URL] http://www.codeblocks.org/downloads/26 to download the binary version, I suggest you download the latest stable version of mingw it is now the most stable version codeblocks-13.12mingw- setup, it comes with mingw compiler. Download and install like any other classic windows installer the same. Perhaps you need to mingw / bin writes the PATH environment variable, if someone does not know how to do, I can add more detailed steps.

2. Download, install and compile wxWidgets

You can download wxWidgets wxWidgets resources from the repository. Download wxMSW installer or ZIP, because the installation program is a compressed folder. Download the stable realease 2.8.12 version, because it is the most compatible with Code :: Block of branches.

If you have downloaded the installer or ZIP file, put it installed or unzip to C: \ directory. Then open a command on a standard windows console line shell (cmd), change the wxWidgets build directory.

The key is to compile wxWidgets time, using the same compiler, you can use the time to later development. If you have installed Code :: Block IDE and mingw, and add the path (mingw / bin) into the environment variable, so you will not have any problems.

cd <wxwidgets>\build\msw

<Wxwidgets> is the path you extract resources (typically C: \ wxWidgets-2.8.12).

You have to execute commands generated, gcc compiler can be entered like this:

mingw32-make -f makefile.gcc BUILD=release SHARED=1 MONOLITHIC=1 UNICODE=1 CXXFLAGS=-fno-keep-inline-dllexport

Take a moment to look at the variables compiled, so you can choose more suitable for your needs variable options:

BUILD: wxWidget generation type. In most cases you will use the 'release' option, because you are not going to debug wxWidgets itself. You can debug your program is linked to a release version of wxWidgets.

SHARED: This variable defines the link types: Dynamic Link (SHARED = 1) you have to put together publish the required DLL and your procedures, and in the static link under (SHARED = 0) You only need to publish your program itself. The program generates a dynamic link smaller volume, but you need the appropriate DLL to run it.

MONOLITHIC: controls compiler generates a DLL (MONOLITHIC = 1) or a plurality of DLL (MONOLITHIC = 0). When the monolithic switch is turned on, the development of more simple, you only need to carry a DLL when you publish your application; however, when the monolithic switch is turned off, the linking process will be more efficient because it avoids the whole wxWidget link code base.

UNICODE: wxWidget and define your program is using wide-character string (UNICODE = 1) or ANSI (UNICODE = 0). It is strongly recommended to use wxWidget of _ ( "string") and _T ( "string") macro to ensure that your hard-coded string in the correct format.

Now, wxWidgets have been compiled, then let us begin to write a few use it as a framework program it.

New Construction

1. First start Code :: Blocks, click on "Create New Project"

2. Select wxWidget in the project selection window

3. Now you need to select wxWidgets versions. Be sure to select your currently installed version. For this tutorial, select 2.8.x

4. 然后会出现一个项目命名窗口。在这里，你可以为命名项目并且选择存储位置。我这里取名为HelloWorld

5. 现在，你需要选择GUI Builder，这是一个帮助你在图形化界面下创建图形化界面的工具。我们这里选择xwSmith。在应用类型中，选择Frame Based

6. 下一步，请选择你电脑本地wxWidgets的位置。最好的选择是保持全局环境变量不变。点击下一步时，将会弹出全局变量菜单，所以你必须在base栏中填入wxWidgets的路径。如果你改变了wxWidgets的位置，你需要在Code::Blocks配置中编辑全局变量。

7. 选择编译器。默认GCC编译器就可以了。

8. 现在，你有许多配置选项。在第一个选项中，你需要保证这个选项和你构建wxWidgets时使用同样的选项。

“Use wxWidgets DLL”, 如果你构建时SHARED=1，请选择该项。

“wxWidgets is built as a monolithic library”, 如果你构建时MONOLITHIC=1，请选择该项。

“Enable unicode”, 构建时UNICODE=1，请选择该项。

举例来说，在上述截图中我并没有选择Use wxWidgets DLL是因为我在构建wxWidgets时使用了SHARED=0.

在Configure Advance Options前打勾。

9. 最后一个窗口，确保Use __WXDEBUG__ and Debug wxWidgets lib 选项不被选中

有可能在你按下Finish的时候。屏幕上出现了一个对话框，告诉你没有调试版，点击Accept 。你可以没有任何问题的使用发布版wxWidget来调试。

10. 现在，我们面对着开发的窗口，事情应该像下图一样。

给我们的窗口加点东西

如果你按下了Build and Run按钮（有齿轮和三角形[播放图标]的那个），就会显示一个有一个菜单栏和两个选项（Menu和Help）的小窗口，上面还有一个空的Status Bar。但是检查一下一切是否工作正常总是好的。

现在我将叙述如何给我们的窗口加上文本标签和按钮。我并不会对你能使用的许多选项和窗口部件深入论述，因为这篇教程的目的仅仅是一个对于该框架的简介。但是，我还是会说一些关于开发环境的内容。

在屏幕中央我们能看到“设计”窗口。在该窗口中我们可以编辑图形界面或是代码，具体是什么取决于我们正在编辑的文件。在其之上有两个按钮，一个打开菜单按钮编辑器，另一个打开状态栏编辑器。但是最重要的是在设计窗口下面的部分，在那里我们可以看到很多代表部件的按钮，它们以目录形式被整理起来，可以用于开发。

在左边，我们看到了两个不同的部分，资源/文件浏览器在上方，属性编辑器在下方。

资源/文件浏览器让我们容易找到我们想要去编辑的文件或者资源。在顶部有一些tab里，我们可以改变他们的视图。最重要的是工程tab和资源tab。

在工程树中，我们可以发现所有隐含在程序中的文件。在资源树中，我们可以发现图片资源。

在属性编辑器中的文件/资源导航器下方，我们将可以直接修改一些资源属性。

我将会在稍后回来，（介绍）在窗口上工作。

在右边有能影响一些资源的按钮栏。从上往下前四个决定了新的资源会在哪里被添加（是在指针处、在实有元件内、实有元件后，还是在实有元件前）。之后我们有一个画着叉的按钮，它是用于删除当前元件的。在它下面的是显示预览按钮。最下面的能打开一个包含有位置、大小选项的属性面板。

添加一些东西

一开始的三个步骤，我要说的是它们是用于一个新工程的最基本步骤。

1. 从设计窗口下面的widget菜单选择Layout选项卡。在这里我们能找到sizers。Sizes能帮助我们调整元件在窗口中的位置和大小。一旦有人改变了窗口大小，sizers就会相应地改变元件大小和内部元件的空间。

从布局元素中选择基本的wxBoxSizer。这个调节器可以以一条水平或者垂直方向组织元素。在wxBoxSizer的虚线内点击设计窗口的面板，点击所需的元素，添加它们到窗口。

2. 现在我们可以开始把一些元素放入这里面，但是，在这之前，我们还要添加一些额外的东西。首先，在wxPanel上选择标准的widget目录tab，之后点击内部的小方块去添加一个panel到这个地方。确定选择了boxSizer，在左侧资源树中你可以立即看到sizer被添加到树中，并且在图形界面上，你选了它，在资源树中也会被选择，反之亦然。wxPanel不仅会添加一个不错的背景，还会添加一些特性到窗口中。

3. 现在我们来在Panel内添加另一个wxBoxSizer。选中wxPanel后，在Layout选项卡内单击wxBoxSizer，再在框内点击一次。现在窗口应该看起来像下面这样：

这些步骤构成了绝大多数程序的一个好的开始。现在，让我们加入一些交互性元素。

4. 一个Hello World程序必须要显示Hello World文本，那么就让我们加上它。在Standard选项卡选中wxStaticText然后在框内单击。这个步骤给窗口增加了一个文本标签。

如果你看一看左边的资源属性编辑器，你就能看到一份具有一些变量名和其对应值的表格。

第一行是这个元素的标签，在所有元素中它都会显示出一段文字，默认是"Label"。点击右边一栏(值列)，你就能编辑这些值。那么现在就让我们动手，点击Label右边的一列，编辑文本，把它改成一些新颖独特的词语，比如"Hello World"（你知道的，如果以其它文本开始会带来坏运气）。

5. 现在添加一些互动。我们将添加一个按钮退出窗口。在标准tab上点击wxButton按钮。你将会看到我们设计的窗口变成了蓝色，现在当你将鼠标指针移出Label时，我们在最后一步添加的那一侧变成了淡蓝色，这说明它的这一侧有新资源被添加，因为wxStaticText内部不能有任何元素，所以它会自动将其它元素添加到另一侧。点击右侧添加按钮。

进入属性编辑区去编辑按钮的标签（label），类似于Static Text label，写上引用文本。因为点击按钮将会关闭窗口，所以我在按钮上标注“Quit”。

6.你现在可以通过点击 Build & Run按钮，组建并运行程序。然后会出现一个小窗口，上面有Hello World文本和一些无效的按钮。那么，就给按钮加些功能吧。你可点击菜单栏上的关闭按钮或通过文件->退出来关闭窗口。

在设计器中双击我们添加的按钮，进入HelloWorldMain.cpp文件中(或你自己命名的主文件)。

你可能要滑动滚轮来找到这样的一个函数

void HelloWorldFrame::OnButton1Click(wxCommandEvent& event)
{
}

该函数处理按钮点击事件，并在你点击按钮的时候调用。当然，该函数现在还没这个功能，我们来写写这个函数，赋予它这些功能。在函数体下加上以下内容

void HelloWorldFrame::OnButton1Click(wxCommandEvent& event)
{
    Close();
}

当你重新编译时，Close()函数关闭窗口，你可使用我们的按钮关闭窗口。
以下是最终结果

最后的一些注意事项

如果你选择任何设计资源，它的属性你都可以在属性编辑框中看到它的尺寸（宽和高）和位置（X和Y）变量。你还可以设一个值给他们或者调整检查默认的尺寸和默认的位置，这样层管理器会选择合适的位置和尺寸给任何的元素和窗口自身。对于我们将要开始做的项目来说，这是一个好选择。

这是一个非常基本的教程。我的想法是做更多的教程去解释另外一些特性。但是你还是要通过你自己去实验，这里有许多资源可以使用。

任何建议，纠正，疑问或者评论都欢迎。感谢您的阅读。

本文地址：https://www.oschina.net/translate/introduction-to-wxwidgets-gui-programming

原文地址：http://www.codeproject.com/Articles/803106/Introduction-to-wxWidgets-GUI-programming