第4章 感受(二)——4.1. Hello GUI 基础篇

[回到目录]

白话C++

4.1. Hello GUI 基础篇

（配套光盘中提供本节教程的动画版）

我们回到了一个原点，准备再次写一个“Hello world”，但这一次，我们将和“Hello world”重逢于“GUI”的平台。

我们采用支持跨平台的wxWidgets C++图形界面库，在学习本节课程之前，您需要确信已经完成《第2章 准备》所提及的，有关wxWidgets的编译、及配置工作。

4.1.1. Code::Blocks配置——全局文件默认编码

之 前我们一直都在创建“控制台”应用项目，每回都不厌其烦地提及将文件编码改成“系统默认”，现在事情有些改变：由于我们准备的是unicode版本的 wxWidgets，所以，本章中所有GUI项目，它的文件编码都应该改为“UTF-8”（UNICODE编码格式之一）。采用UTF-8编码应该是一种 发展趋势，所以我们通过以下操作，将Code::Blocks的文件编码，设置为默认采用“UTF-8”。

Code::Blocks主菜单“设置→编辑器 ”，弹出的对话框中，左边列表选中第一项“常规设置”，右边面板中找到“打开文件时的默认编码”项，将其选项改为“UTF-8”。

4.1.2. 向导－wxWidgets project

步骤1：Code::Blocks主菜单“文件”→“新建”→“项目…”，在弹出的对话框中，选中“GUI”类型，再选“wxWidgets project”，然后点“出发”。

图 57 wxWidgets project 项目向导

步骤2：开始向导后，首先出现的是欢迎页面，直接点下一步。

步骤3：选“wxWidgets 2.8.x”。

步骤4：本步为本项目输入名称：“HelloGUI”。

步骤5：输入您的姓名、email、网站等信息。

步骤6：选择wxWidets的可视设计器和应用类型。前者我们选择Code::Blocks自带的“wxSmith”，后者选择“Dialog Base”，表示我们将创建一个“对话框”为主界面的应用：

图 58 选择可视化设计器及应用类型

步骤7：这一步要求我们输入wxWidgets的安装路径，请保持默认值：${#wx}。因为我们已经在之前配置过wx这个全局路径变量。

步骤8：编译相关的配置，编译器选择“GNU GCC Complier”。编译设置则“调试/Debug”与“发行/Release”两项都打勾，这是最常用的配置，虽然本次我们并不会需要调试该程序。

步骤9：仅选中“Enable unicode”。因为我们仅仅编译了UNICODE版本的wxWidgets库，所以这是一项我们将一直使用的选择。

图 59 使用UNICODE版本的wxWidgets库

不选择“Use wxWidgets DLL”，表示我们将使用“静态”、而非“动态”的wxWidgets库，目的在于生成独立的可执行文件。

步骤10：选择额外要用到的wxWidgets库。当使用静态库时（步骤9），我们需要额外选择对Tiff和Jpeg的支持模块（请按住Ctrl键点击选项，以实现多选）：

图 60 需要额外用到的wxWidgetes库

在本步，点击“完成”按钮结束向导。

4.1.3. 界面设计

完 成以上向导，Code::Blocks将打开自动生成的对话框资源文件：“HelloGUIdialog.wxs”。请直接按F9键，开始编译并运行程 序。如果一切正常，则将显示一个写着“Welcome to wxWidgets”的对话框，请点击其中的“Quit”按钮退出。

接下来，我们将对前述的界面进行“汉化”。

步骤1：按Shift + F2，确保出现“Management”面板，并选中“资源文件”页面。在该页面中，上部将是对话框包含的各个控件，下面是选中控件的属性表：

图 61控件树及属性表

步骤2：在 “HelloGUIdialog.wxs”的设计界面，通过鼠标点击，选中内容为：“Welcome to wxWidgets”的文字标签，然后选中上图中“Label”属性设置行右边的“...”按钮，在弹出的对话框中，将编辑内容改为“欢迎使用 wxWidgets”，包括换行。

图 62 修改Label内容

步骤3：点击“好的”退出，此时设计窗口结果如下：

图 63 Label属性值修改结果

步骤4：保存以上修改结果。选中“About”按钮，在控件属性面板修改其Label属性值为“关于”。同样方法，修改“Quit”按钮的Label属性值为“退出”。可以直接在属性的右边编辑中修改，修改之后需要回车确认。最终结果如下：

图 64 Hello GUI 界面设计最后结果

步骤5：在控件树上，选中“HelloGUIDialog/”节点，以选中整个对话框，修改对话框的“Title”（标题）属性值为：“Hello GUI”，如下图：

图 65 修改对话框标题

请保存以上设计结果（热键：Ctrl + S）。

4.1.4. 编译运行

编译(Ctrl + F9)，运行(F9)，结果如下：

图 66 Hello GUI 运行结果

 

4.1.5. 发布程序

所谓的“发布程序”，就是将程序安装到“用户”的机器上使用。

〖轻松一刻〗：“用户”是谁？

对我们自己而言，“第一个GUI程序”当然具备莫大的意义，不过对于他人，我们的工作成果的确是一个毫无用处的程序——所以，谁是我们的用户呢？

请找一个彻底和编程无关的人——他的机器上肯定没有装Code::Blocks或wxWidgets，然后通过软磨硬泡加死缠蛮打，再加上你的数十年来的优质人格保证，好让他放心地允许你把程序拷到他的机器上并运行。

 

前面我们几次编译，都使用“Debug”配置。 为了 请首先将编译选项配置，修改为“Release”版，方法是在下图所示的工具栏中，修改“构建目标”为“Release”。

图 67 修改构建目标为Release

重新编译（上图第1个按钮），即可得到Release版的可执行文件。一个wxWidgets应用项目，其Release版可执行文件的典型特征，就是可执行文件的块头比Debug版大大缩水。

Code::Blocks 默认将新工程保存在“我的文档”下的“CodeBlocks Projects”目录下。请到该目录下找到“Hello GUI”子目录。而工程的所生成的两个版本的可执行文件，默认位于其内的bin子目录下的Debug和Release中。因此，Release版的可执行 文件，位于以下目录：

“_我_的_文_档_所在目录/CodeBlocks Projects/Hello GUI/bin/Release”。

〖课堂作业〗：对比Debug和Release版可执行文件大小

请对比Debug版和Release版的文件大小。可能你会对Debug文件之大感到惊讶。wxWidgets应用程序的调试版，包含了大量的调试信息。

 

请通过U盘，或者网络等方式，将你的第一个GUI应用程序（Release版），“发布”到“用户”的机器上，并运行，正确结果是可以运行，如果不能，很有可能是因为在前述的“wxWidgets project”项目向导过程中，你搞错了什么，尤其是步骤9。

 

白话C++

[回到目录]