Code::Blocks中关于wxSmith设计器的"Hello World 导引"

Code::Blocks中关于wxSmith设计器的"Hello World 导引"

2012年10月2日               

在网上找了好些Code::Blocks的资料，都不是很新。好不容易找到了一个关于简介wxSmith设计器的文档，但此文档也是基于旧的Code::Block了，从文章上也看不出作者是谁，看了看，翻译了下，写在这里。本文基于Code::Blocks 10.05，目前的此版本已自带wxSmith设计器，因此这里我加上了自己的一些试验，遂成此文。

我的环境是Code::Blocks 10.05+wxWidgets 2.8.12。

警告：wxSmith还有些不稳定。因此使用它是有风险的。

注：红色的部分是本人还有些不理解之处。

一、开始

wxSmith可以任一wxWidgets项目中使用。然而，当前我们只有一个选择，来容易地创建一个wxWidgets程序。即，只需从菜单里选择：File -> New Project -> wxWidgets Application。若已经使用wiki上的指导来编译了wxWidgets，则在Project Options中，选择Using wxWidgets DLL。点击创建并保存项目。若在windows上运行，可能将必须改变WX_DIR自定义变量。此变量指出了wxWidgets的根目录，且可在Project -> Build Options菜单的Custom variables页面进行修改。(红色部分我并没有遇到。)

此步完成后，应该能产生出如下的程序。

 

 起点

 现在是时候给这个空的框架窗口添加我们的“Hello World”消息了。通过在这个框架中放置一个panel，来实现此能力。选择wxSmith -> Add Panel菜单。若是第一次，应该出现下面的消息框。注：在当前的Code::Blocks 10.05中，下面的消息框应该没有了，因为它默认使用wxSmith。

 

 点击Yes后，就会出现一个配置对话框，可设置下面的选项：1、类名：包含这个panel的类的名字；2、头文件/源文件：包含panel的类的文件；3、Xrc文件：选择此选项就可使用一个xrc文件包含panel的数据。

在我们的这个指导中，使用一个叫做“HelloWorldPnl”的类。——注意，通常当键入类名时，就会自动产生头文件和源文件。这个配置文件对话框在Code::Blocks 10.05中如下图：(注：上面的两个图我偷懒，用了原文件的图，)

点击Create，panel就在编辑器中了，即，panel代码在项目文件夹中(下面左侧)，资源在资源编辑器中(下面右侧)

                                            

二、构建窗口

wxWidgets提供了一些叫做Sizer的布局器，如下图。

但这些布局器的用处是什么？如果你曾经用于java，你会记得一些叫做布局管理器的东西。在wxWidgets中，实现有点不同，但几乎是一样的。首先，通常当向窗口添加项目时，必须指定项目的位置和大小，wxWidgets会使用sizer设法自动地完成这一过程。这些sizer自动地决定窗口项目的位置及大小。Sizer有一个大的优点：当写一个跨平台的应用时，你不能假定字体、按钮等在平台间是一样大小的；这种情况在同一个平台上甚至都有可能发生；当你使用sizer时，不用担心这一点；所有的决定大小的过程都是自动的；并且当窗口本身改变大小时，sizer甚至也能重新定位和重新决定窗口项目的大小。因此，在这里要使用sizer。

1、如何才能添加一些东西

添加了panel之后，在一个新打开的编辑器中，就能看见8个黑色的小框，围绕着一个像是一个没有标签的按钮的东西。

这些黑色小框围绕的是一个当前选中的项目。在我们的这种情况下，它就是一个panel。通过点击如下图的窗口中的按钮，就能很简单地添加上一个新的项目。

这些按钮都有一些小的图片，表明它们自己是什么。如果你还是不确定，在按钮上停留一会鼠标，就会看见这个按钮所代表的wxWidgets类的名字，这就是我们的项目。

新项目的添加总是相对于当前的选中的项目的，可以下列四种方式添加新项目，可在编辑器右侧看见它们所对应的图标。

a. Insert new widgets by pointing with mouse 
b. Insert new widgets into current seletion
c. Insert new widgets before current seletion  
d. Insert new widgets after current seletion  

图标为

通过选择点击上面这些相应的按钮，就可选择相应的方法，但有的情况下，有的按钮不可用，这需注意。比如，不能在一个按钮中添加项目。下面是一些特定的你不能添加新项目的情况)(下面三个内容还有些不理解)
• When an item has sizer inside, it cannot contain anything else. Items can be added into the sizer only (当一个项目中有sizer时，这个项目就不能包含其它东西了。只能是把多个项目添加到sizer中。)
• When an item has anything but a sizer inside, you cannot add a sizer into it. (当一个项目只有一个sizer，就不能添加一个sizer到项目中了。)
• Spacers (empty fields added into sizers instead of real items) can be added into a sizers only (sizer只能被添加到Spacers(就是一些空的域，这些域中能被添加进sizer，而不是真实的项目)中)

总是要确保选择一个有效的项，并且要选中一个有效的插入方法。

2、添加项目

wxWidgets有五种sizer(但目前在CB中，有9种)，其中4种在wxSmith中内置支持。如果要学习sizer，可见wxWidgets的文档。在当前我们的例子中，我们添加wxFlexGridSizer。进行如下操作：

• Select panel by clicking on it. (点击panel，以选择它。)
• Click on the wxFlexGridSizer button (third in Layout row)(点击wxFlexGridSizer按钮).

这时可能会发现panel会变小，这是因为sizer会自动地调整至其父窗口的最小尺寸。然后就会发现有另外的一个红色的边框——这显示了sizer的位置。如下图：

因为这是一个"Hello World"程序，我们会把这个文本放入到一个新创建的sizer中。做下面步骤：)
• 选择sizer，即点击红框内的某处。
• 确保右侧的选择类型是Into
• 点击wxStaticText按钮
• 点击新创建的这个“Label”静态文本框，并到其属性页，即在Management窗口下面。
• 改变“Label”静态文本框的“Label”属性为"Hello World !!"。

情况如下图：

                        

然后，我们再添加另一个按钮
• 选择刚才新创建的文本，即"Hello World !!"
• 选择“After”这种插入方式。
• 点击wxButton 图标。
现在，有如下的状态了。

但是我想把按钮放在文本的下面，如何做到呢？正如前面提及的，sizer是自动地放置项目的位置，对于我们的这个情况，sizer决定把这些窗口小组件以水平行的方式放置，一个挨一个。若我们要把他们垂直放置，我们需要改变sizer的属性。如下：
• 在左侧的资源窗口中选择wxFlexGridSizer，这时右侧的编辑器窗口中就会选中wxFlexGridSizer。
• E在wxFlexGridSizer的属性列表中修改行列属性。如下图：

我们在这一步，让sizer只在一列上创建窗口组件。或者，我们也能把行数设置为2，效果会是一样的。如果行列值为0的话，sizer就会自己设置其值。上面的右侧是设置好的窗口样子。

3、使用创建的panel

在这个指导中，我们会把panel放到主窗口上。如下：)
• 打开主窗口的类实现文件，一般为XXMain.cpp
• 在上面打开的文件中的开始处，包含文件helloworldpnl.h，即#include "helloworldpnl.h"。
• 在主窗口类的构造函数中，在堆上创建HelloWorldPnl的指针，即new HelloWorldPnl(this)
• 编译并运行。
应该得到如下的窗口：

4、如何使窗口更好看？

要想使panel更有趣，需要在改变窗口大小时，panel也随之改变。或许需要更大的字体，不同的字体颜色等。首先我们需要在前面创建wxFlexGridSizer的基础上进行下面的修改：)
• 从资源编辑器中选择wxFlexGridSizer。
• 设置属性growable cols为0。
• 设置属性growable rows为0。
这些被改变的值意味着当窗口大小改变时，行和列应该被扩大。

下面第二步：
• 在资源编辑器中选择wxStaticText
• 找到字体属性。
• 点击字体属性右侧的带有“…”的按钮。
• 选择新字体，这里使用"Times New Roman", 粗体, size: 20
• 找到foreground属性，改变它就可修改字体颜色。
现在，编译并运行。发现字体变大了，颜色也改变了。当我们改变窗口大小时，我们的panel也会动态地改变。如下图：

5、如何使按钮响应

现在为按钮添加一些动作。如果要让它关闭程序，首先，把按钮的标签改为“Close”。然后再加上一些动作。
wxWidgets与许多其它的GUI系统类似——都是通过事件。事件是代表了一种信息，说明有事发生——比如，用户点击了按钮。但我们需要在事件发生时做一些事。为把事件和要做的动作联系到一起，必须创建事件处理器。wxSmith能如下自动地处理：
• 选择按钮
• 切换到事件表，如按钮的是下图：

• 如下选择“Add new handler”

• 把事件处理器的名字改成你想要的，然后点击OK。
如下，就创建了一个空的函数。
 void HelloWorldPnl::OnButton1Click(wxCommandEvent& event)
 {
 }
在这里，就能写一些代码，这些代码在按下按钮时，就能被执行。因此，添加一个Close()函数。
 void HelloWorldPnl::OnButton1Click(wxCommandEvent& event)
 {
   Close();
 }
现在看看发生了什么，我点击了Close按钮，但是，什么事都没有发生。Why?因为我们是关闭了panel，而不是整个窗口。如何修改？我们的这个事件处理函数是HelloWorldPnl类的成员函数。在事件处理函数中的任何事都是从属于panel的，而不是外部的窗口。当调用Close()，我就只是调用了wxPanel类的这个函数。如果要关闭主窗口，应该如下代码：
 void HelloWorldPnl::OnButton1Click(wxCommandEvent& event)
 {
   GetParent()->Close();
 }
GetParent()函数返回一个指定父窗口的指针。现在的Close()就是在panel的父窗口上调用的了。但是要注意，我们的这个例子很简单，只是假定了主窗口是panel的父窗口。通过并不能如此确定。

三、提示

下面尝试解译wxSmith如何影响代码的，如何使用它来工作，为什么不用担心丢失代码？
wxSmith 在哪里产生它的代码?
wxSmith并不如它看起来的那么智能。当它产生代码时，它只是替换了整片可放置代码的位置，而不管代码是否被放置在正确的位置上了。但代码工作了，如何做到的？
当看看wxSmith中产生文件时，可能找到一些特别的注释，如：
 //(*Headers(HelloWorldPnl)
 //*)
这些注释就是被wxSmith用于找到新的代码应该被应用于何处。//(*表示所产生的代码的自动开始处，则//*)则是关闭处。这些注释之间的东西都要重新产生过，即便你在那里添加了一些东西。
*Handlers注释开头的代码块。wxSmith只能添加这块代码。如果你要手动地写事件处理函数，可在此处放置此声明。
在注释//(* - //*)之外的代码，就不要碰了。
Loading XRC resources
当使用XRC文件时，不要忘记初始化wxXMLResouce处理函数和XRC文件。如在你的App::OnInit中，可写：
   // Loading XRC resource file (not in a zip file).
   wxXmlResource::Get()->InitAllHandlers();
   wxXmlResource::Get()->Load("<your XRC File name>.xrc");

 

好了，打完收工！有不当指正请拍砖，我上面有不理解的地方请帮助！谢谢！