wxWidgets GUI 编程介绍

导论

wxWidgets 是C++的跨平台开发框架。它由 Julian Smart 于1992年在爱丁堡大学人工智能应用研究院发起的，自那之后，该框架分发到了众多平台之上。

本文旨在引导初学者安装所需资源并以Code::Blocks作为IDE使用wxWidgets开发一个单应用程序。

什么是wxWidgets

wxWidgets 是一系列C++库，它遵循多平台GUI开发框架的设计规则。它有类似于MFC易于使用的API。把它和特定的库链接并编译，可是你的应用程序与目标平台的界面相似。wxWidgets 是一个非常完整的框架，它几乎为你任何需求提供解决方案，并简化使用习惯。

为什么是wxWidgets

对于跨平台GUI开发有很多可选的选项。可能最流行的是Java，但是对于许多应用程序而言这不是一个有效率的选择。在C++中有QT，一个非常不错的框架，但是它也有许多不足之处，第一点，它是仿平台外观的，而wxWidgets使用平台库创建图形接口；第二点，在你写的代码与最终被编译的C++代码之间，QT采用了一种与众不同的方式去使用一个专属的层。这里不提及微软的可视化框架，它只能工作在windows上，与它类似还有mono.net，它是搭建在层上的层。

与之相反的例子wxWidgets是C++的，它是高效的，并且不用在你的代码上添加额外的层。它是一个类库的集合，因此你可以使用C++编译器去编译它，不是说每一种C++编译器都可以，但是大多数通用的都可以。

其他的优势和特点:

• 它一直在被开发，还有很多支持，更是协作的开放源代码社区。

• 它完全免费，无论是私人用途还是商业用途。

• 有大量的在线文档。

• 容易学习，它就是C++。

• 有很多现成的类和库，参看这里。

开始

让我们开始工作吧. 首先我们需要框架本身和IDE让我们可以开始开发。然后我们可以做些魔术，把“hello，world“打到我们的屏幕上。

安装

我会展示windows环境的安装步骤，其他操作系统也类似。我使用Code::Blocks作为IDE因为它和wxWidgets结合的很好，并且它对windows和linux都有免费的稳定版本。

1. 下载和安装Code::Blocks

你可以从它自己的官网网址【http://www.codeblocks.org/downloads/26】去下载二进制版本，我建议你下载最新的mingw的稳定版本呢，现在最稳定版本是codeblocks-13.12mingw-setup，它会自带mingw编译器。下载并且安装，就像其他经典的windows安装程序一样。或许你需要把 mingw/bin写到环境变量PATH中，如果有人不知道怎么做，我可以增加更详细的步骤。

2. 下载，安装和编译wxWidgets

你可以从wxWidgets的存储库中下载wxWidgets资源。下载wxMSW安装器或者ZIP，因为安装程序就是一个压缩文件夹。下载稳定的realease 2.8.12版本，因为它是最兼容Code::Block的分支。

如果你已经下载安装器或者ZIP文件，就把它安装或者解压到C:\目录下。然后在标准的windows控制台上打开命令行shell（cmd），更改wxWidgets的生成目录。

关键是去编译wxWidgets的时候，使用一样的编译器，你会在稍后开发的时候使用到。如果你已经安装了Code::Block IDE和mingw，并且添加路径（mingw/bin）到环境变量中，这样你就不会有任何问题。

cd <wxwidgets>\build\msw

<wxwidgets>是你提取资源的路径（典型的是 C:\wxWidgets-2.8.12）。

你必须执行生成命令，gcc编译器可以像这样输入：

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

花点时间去看看编译的变量，这样你就可以选择更适合你的需要变量选项：

BUILD：wxWidget的生成类型。在大多数情况下你会使用‘release’选项，因为你不会去调试wxWidgets本身。你可以调试你自己的程序链接到一个release版本的wxWidgets。

SHARED: 这个变量定义了链接类型: 动态链接 (SHARED=1)下你必须把所需要的DLL和你的程序一同发布，而在静态链接(SHARED=0)下你只需要发布你的程序本身。动态链接下生成的程序体积更小，但你需要相应的DLL才能运行它。

MONOLITHIC: 控制编译生成一个DLL(MONOLITHIC=1)还是多个DLL(MONOLITHIC=0)。当monolithic开关打开时，开发更加简单，你只需要在发布你的程序时携带一个DLL；然而monolithic开关关闭时，链接过程会更有效率，因为这样避免了链接整个wxWidget代码库。

UNICODE: 定义wxWidget和你的程序是使用宽字符字符串(UNICODE=1)还是ANSI(UNICODE=0)。强烈建议使用wxWidget的 _("string") 和 _T("string") 宏来确保你的硬编码字符串格式正确。

现在，wxWidgets已经编译完毕，那么就让我们开始写几个以它为框架的程序吧。

新建工程

1.首先启动Code::Blocks，点击“创建新工程”

2.在项目选择窗口中选择wxWidget

3.现在你需要选择wxWidgets版本。请确保选择你当前安装的版本。本教程中，请选择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）变量。你还可以设一个值给他们或者调整检查默认的尺寸和默认的位置，这样层管理器会选择合适的位置和尺寸给任何的元素和窗口自身。对于我们将要开始做的项目来说，这是一个好选择。

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

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