wxWidgets 是C++的跨平台开发框架。它由 Julian Smart 于1992年在爱丁堡大学人工智能应用研究院发起的,自那之后,该框架分发到了众多平台之上。
本文旨在引导初学者安装所需资源并以Code::Blocks作为IDE使用wxWidgets开发一个单应用程序。
wxWidgets 是一系列C++库,它遵循多平台GUI开发框架的设计规则。它有类似于MFC易于使用的API。把它和特定的库链接并编译,可是你的应用程序与目标平台的界面相似。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)变量。你还可以设一个值给他们或者调整检查默认的尺寸和默认的位置,这样层管理器会选择合适的位置和尺寸给任何的元素和窗口自身。对于我们将要开始做的项目来说,这是一个好选择。
这是一个非常基本的教程。我的想法是做更多的教程去解释另外一些特性。但是你还是要通过你自己去实验,这里有许多资源可以使用。
任何建议,纠正,疑问或者评论都欢迎。感谢您的阅读。
本文地址:https://www.oschina.net/translate/introduction-to-wxwidgets-gui-programming
原文地址:http://www.codeproject.com/Articles/803106/Introduction-to-wxWidgets-GUI-programming