使用 wxSmith 进行 wxWidgets GUI 编程简介

介绍

wxWidgets 是一个用 C++ 进行跨平台 GUI 开发的框架。该框架由爱丁堡大学人工智能应用研究所的 Julian Smart 于 1992 年发起,此后被移植到许多平台。

本文旨在指导初级程序员安装所需的资源,并使用 Code::Blocks 作为 IDE 使用 wxWidgets 开发单个应用程序。

什么是 wxWidgets

wxWidgets是一组符合多平台GUI开发框架的C++库。它提供了一个易于使用的 API,与 MFC API 非常相似。将其与适当的库链接并编译使您的应用程序看起来适合目标平台。wxWidgets 是一个非常完整的框架,提供了几乎所有您需要的解决方案,但保持了使用的简单性。

为什么选择 wxWidgets

有许多选项可用于跨平台 GUI 开发。也许最流行的语言之一是 Java,但对于某些应用程序来说,它并不是一个有效的替代方案。在C++中,有QT,一个很棒的框架,但是首先必须提到它的一些缺点,它模拟平台外观,而wxWidgets使用平台库来创建图形界面;其次,QT 有一种不同的方法,在您编写的代码和编译的最终 C++ 代码之间使用专有层。不要提及仅适用于 Windows 的基于 Microsoft Visual 的框架,或者某些像 mono.net 这样层层叠加的框架。

与该示例相反,wxWidgets 是 C++,因此具有这种效率并且不会向您的代码添加任何额外的层。它是一组库,因此您可以使用您想要的 C++ 编译器来编译它,不是每个 C++ 编译器,而是最常见的编译器。

其他优点和特点:

入门

 

我们开始谈正事吧。首先我们需要框架本身和一个IDE来帮助我们开发。然后我们就可以做一些魔法并在屏幕上放置一个“Hello World”窗口。

安装

我将展示 Windows 的安装步骤,但其他操作系统的安装步骤完全相同。我选择 Code::Blocks IDE 是因为它与 wxWidgets 集成,并且它是免费的并且有适用于 Windows 和 Linux 的稳定版本。

1. 下载并安装Code::Blocks

您可以从 Code::Blocks 自己的  网页下载二进制版本。我建议下载最新的稳定 mingw 版本,此时是 codeblocks-13.12mingw-setup,它附带 de mingw 编译器。只需下载安装程序并以经典的 Windows 方式安装即可。可能您必须将 mingw/bin 目录的路径添加到 PATH 环境变量中。如果有人对此有任何疑问,我可以添加更多信息。

2.下载、安装和编译wxWidgets

您可以从其存储库下载 wxWidgets 资源。下载 wxMSW 安装程序或 ZIP,因为 de 安装程序只是一个压缩文件夹。下载稳定版本 3.0.1, 因为它是推荐用于 Windows 7 的最后一个稳定版本。

下载安装程序或 ZIP 文件后,将其安装/解压缩到 C:\ 中。打开命令外壳(Windows 中的标准控制台),切换到 wxWidget 构建目录  

这里的关键是使用稍后开发时使用的相同编译器来编译 wxWidgets。如果您已使用 mingw 安装了 C::B IDE 并将路径添加到环境变量,则不会有任何问题。

cd <wxwidgets>\build\msw

其中 <wxwidgets> 是您将源代码提取到的路径(通常是 C:\wxWidgets-3.0.1)。

在那里你必须执行构建命令,对于 gcc 编译器来说它会像这样:

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

花点时间查看编译变量,以便您可以选择适合您的:

BUILD:wxWidget的构建类型。在大多数情况下,您将使用“release”,因为您不会调试 wxWidgets 本身。您可以调试链接到 wxWidgets 发行版本的自己的程序。

SHARED:此变量定义链接类型:动态链接 (SHARED=1),并且您必须与可执行文件或静态链接 (SHARED=0)共享所需的 DLL ,因此您只需共享可执行文件。动态构建生成的可执行文件尺寸较小,但您的 PC 中需要所需的 DLL 才能运行它。

MONOLITHIC:控制是构建单个 DLL (MONOLITHIC=1) 还是多个 DLL (MONOLITHIC=0)。使用单片构建开发会更加容易,并且您只有一个库可以与可执行文件共享,但是使用构建的多文件,链接过程会更加高效,因为您可以避免链接整个 wxWidget 代码库。

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

现在我们已经构建了 wxWidgets,因此可以开始开发一些基于框架的程序。

创建项目

1. 首先启动 Code::Blocks 并选择Create New Project

图1

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

图2

3. 现在你必须选择wxWidgets版本。请务必选择您已安装的那个。如果您按照此说明进行操作,请选择3.0.x

图3

4. 然后将出现命名项目窗口。您可以在此处输入项目名称和项目位置。我很有创意,把它命名为HelloWorld

图4

5. 现在您必须选择GUI Builder,它是帮助您以图形方式创建图形界面的工具。我们将使用xwSmith应用程序类型选择Frame Based

图5

6. 出现的下一个窗口要求您选择 wxWidgets 在计算机中的位置。更好的选择是保留全局变量。当您单击“下一步”时,将出现全局变量菜单,因此您必须在基本字段中输入 wxWidgets 路径。然后,如果您更改 wxWidgets 的位置,您可以从 Code::Blocks 配置中编辑全局变量。

图6

7. 选择编译器。保留默认即可(GCC 编译器。

图7

8. 现在我们有一些配置选项。在第一部分中,您必须将此选项与构建 wxWidgets 时使用的选项相匹配。

图8

使用 wxWidgets DLL,检查是否使用 SHARED=1 进行构建。

wxWidgets 是作为一个整体库构建的,检查您是否使用 MONOLITHIC=1 构建。

启用 unicode,检查您是否使用 UNICODE=1 进行构建。

例如,在屏幕截图中,我未选中“使用 wxWidgets DLL”,因为我使用 SHARED=0 构建了 wxWidgets。

并检查高级选项。

9. 至少在最后一个窗口中,不要选中Use __WXDEBUG__ 和 Debug wxWidgets lib选项

图9

当您按“完成”按钮时,可能会出现一个对话框窗口,告知没有调试版本,请单击“接受”。您可以使用发布的 wxWidget 版本进行调试,没有任何问题。

10. 现在,开发窗口就在我们面前。一定是这样的:

图10

添加一些东西到我们的窗口

如果您按下“构建并运行”按钮(带有齿轮和三角形(播放符号)的按钮),它将显示一个小窗口,其中有一个菜单栏,其中有两个选项:“菜单”和“帮助”,以及一个空的状态栏。但这是检查其是否一切正常的好方法。

现在我将解释如何向窗口添加文本标签和按钮。我不会深入介绍您可以使用的许多选项和小部件,因为本教程的目的是简单介绍该框架。但我会解释一些有关开发环境的事情。

在中心我们可以看到设计窗口。在那里我们可以根据我们正在编辑的文件来编辑图形界面或代码。在此窗口上方有两个按钮,一个用于打开菜单栏编辑器,另一个用于打开状态栏编辑器。但最重要的是,在设计窗口下方,我们有一组按钮,其中包含我们可以在按类别组织的开发中使用的小部件。

在左侧,我们看到两个不同的部分,向上的资源/文件浏览器和向下的属性编辑器。

资源/文件浏览器让我们可以轻松找到要编辑的文件或资源。顶部有一些选项卡。有了他们,我们就可以改变不同的观点。最重要的是“项目”选项卡和“资源”选项卡。

图11 图12

 在项目树中,我们可以找到程序中隐含的所有文件。在资源树中我们可以找到图形资源。

文件/资源导航器下方的属性编辑器将允许我们直接修改一些资源属性。

图13

稍后当我们处理窗口时我会回到这个话题。

右侧有一个按钮栏,它会影响一些资源。前四个确定将添加新资源的位置(在指针上、实际元素内部以及实际元素前面的 o 后面)。然后我们有用于删除当前元素的十字形按钮,其下方有“显示预览”按钮。最低打开属性面板,其中有一些位置和大小选项。

图14

 

添加一些东西

我将解释的前三个步骤是您可以用于每个新项目的基本步骤。

1. 从设计窗口下方的小部件菜单中选择“布局”选项卡。在这里我们找到尺寸测量器。大小调整器帮助我们在窗口中定位元素并调整其大小。当有人调整窗口大小时,大小调整器会负责调整元素和元素间空间的大小。

因此从Layout元素中选择基本的wxBoxSizer。该尺寸调整器将元素有机地排列在水平或垂直的一行中。要向窗口添加一些元素,请单击所需的元素(本例中为 wxBoxSizer),然后单击设计窗口中的虚线面板内部。现在窗口必须如下所示:

图15

2. 我们现在可以开始添加一些元素,但首先我们添加一些额外的东西。首先,选择小部件菜单的“标准”选项卡,单击 wxPanel,然后单击小方块内部以向其添加面板。确保选择了 boxSizer,要知道这一点,只需查看左侧的资源树,您将看到 sizer 已添加到树中,当您在图形屏幕中选择它时,它会在资源树中选择反之亦然。wxPanel会添加一个精美的背景并给窗口添加一些特性。

图16

3. 现在我们在面板内部添加另一个 wxBoxSizer。因此,选择 wxPanel 后,单击“布局”选项卡中的 wxBoxSizer,然后在框内再次单击。现在窗口可能如下图所示:

图17

对于大多数程序来说,这些步骤都是一个良好的开始。现在我们添加交互元素。

4. Hello Worl 程序必须显示 Hello World 文本,所以让我们添加它。在“标准”选项卡中选择“wxStaticText”并在框内单击。这会向窗口添加一个文本标签。

图18

如果您查看左侧的资源属性编辑器,您可以看到一个包含一些变量和值的表。

图19

第一个是元素的标签。它存在于显示文本的所有元素中,最初它表示“标签”。通过单击右列(值列),您可以对其进行编辑,因此,单击“标签”行的右列并编辑文本,添加诸如“Hello World”之类的巧妙内容(您知道,从另一个开始会带来霉运)文本)。

5. 现在添加一些交互。我们将添加一个按钮来退出窗口。因此,单击“标准”选项卡上的“wxButton”按钮。你会看到我们正在设计的窗口变成了蓝色,现在当你将鼠标光标移到我们在上一步中添加的标签上时,它的一侧变成浅蓝色,这表明新资源将添加在哪一侧,因为 wxStaticText里面不能有任何元素,所以它会自动添加到它的一侧。单击右侧添加按钮。

 图20

转到属性编辑器并编辑按钮的标签,就像我们对静态文本标签所做的那样,然后放置参考文本。由于 aur 按钮将关闭窗口,因此我在其上添加了“退出”。

6. 您现在可以通过单击“构建并运行”按钮来尝试构建并运行该程序。它必须出现一个小窗口,其中包含 Hello World 文本和一个无用的按钮。因此,为按钮添加一些功能。要关闭窗口,您可以单击栏的关闭按钮(传统的十字)或转到“文件/退出”。

在设计器中,双击我们添加的按钮,它会将我们带到 HelloWorldMain.cpp 文件(或您为项目指定的名称的主文件)。

图21

也许你必须向下滚动才能找到一个名为类似的函数

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

该函数接受按钮单击事件并执行某些操作,每当您单击按钮时都会调用该函数。好吧,目前它还没有做太多事情,所以我们将编辑这个函数以赋予 saome 功能。Soo 添加到函数主体:

 

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

Close() 函数关闭窗口,因此现在当您再次编译时,您可以使用我们自己的按钮关闭窗口。

这是最终结果

图22

最后一些注意事项

如果您选择设计的任何资源,您可以在属性编辑器中看到的属性之一是尺寸(宽度和高度)和位置(x 和 y)变量。您可以为它们指定值,或者仅检查“默认大小”和“默认位置”选项,以便布局管理器为任何元素和窗口本身选择适当的位置和大小。对于我们将要制作的大部分程序来说,这是更好的开始选择。

这是一个非常基础的教程。Mi的想法是制作更多教程来解释其他特性。不过你可以自己尝试一下,有很多资源可以使用。

欢迎任何建议、更正、疑问或意见。感谢您的阅读。


Powered By Z-BlogPHP 1.5.2 Zero

175.es

. theme by Plat together