wxPython 界面设计利器：wxFormBuilder 入门

浏览数：37 / 时间：2015年06月08日

在上一篇博客中，我专门介绍了 wxPython 的 UI 设计工具：wxFormBuilder。这篇博客中将对 wxFormBuilder 进行细致深入的介绍。

此文注定是一篇长长的文章，一共分为如下几个部分：
1、wxFormBuilder 的安装；
2、创建工程前的准备；
3、创建第一个工程；
4、编写业务逻辑代码。

本文中示例所使用的操作系统是 Ubuntu 10.04 LTS，wxFormBuilder 版本为 3.2.3-beta。

第一部分：wxFormBuilder 的安装

在 Ubuntu 中安装 wxFormBuilder 可以选择从 Launchpad 上下载，地址：

https://launchpad.net/~wxformbuilder/+archive/release

对于其他 Linux 发行版，可以通过系统自带的软件包管理器进行检索；如果无法通过软件包管理器进行安装，可以从 wxFormBuilder 的网站上获取：

http://sourceforge.net/apps/wordpress/wxformbuilder/downloads/

第二部分：创建工程前的准备

首先，介绍一下我在这篇博客中将要实现的工程的功能：
1、对用户输入的字符串进行 Base64 编解码；
2、对用户指定的文件进行 Base64 编解码，将结果保存到另外的文件中。
这个工程主要介绍 UI 部分的设计，我画了一份手写稿如下：

这个窗口中，大体上分为两个部分：上半部分是对字符串进行编解码的操作空间；下半部分是对文件进行编解码的操作空间。上下两个部分是基本对称的。

继续观察上部分空间，可以发现，这个空间可以再分解为两个部分：上面的部分是字符串输入与输出的空间，下面的部分是两个操作按钮。

继续分解上面的字符串输入与输出空间，这个部分很像汉字中的“田”字，左侧两个窗口中显示的是标签，右侧的两个窗口中显式的是用户输入/输出的字符串。

这样一步步分解下来，这个窗口的组成就十分清晰了，在下图中进行了标注：

上面这部分内容，通过对 UI 设计的草稿进行分解，使得 UI 的结构变得很清晰；这些框框在 wxPython 中有专门的名称，叫做“Sizer”。而 sizer 是 wxFormBuilder 设计的基础。

第三部分：创建第一个工程

好了，是时候通过 wxFormBuilder 进行创作了。

要想将上面图片中的各个按钮、文本输入框等组件组合在一起，首先要有一个“容器”来装载，这个容器可以是一个窗口（Frame）、面板（Panel）或者对话框（Dialog）。所以，首先到“Forms”面板中选择“Frame”容器。wxFormBuilder 是一个 wysiwyg 的 IDE，即刻就可以看到你选择的 Frame。

注意：Frame 的属性中，有一个属性是“name”，这个属性就是最终生成代码中 Frame 对象的类名。

OK，有了 Frame 之后呢，就要提到上个章节中的 Sizer 了，可以说掌握 Sizer 是掌握 wxFormBuilder 设计的关键。

我首先将设计好的 Sizer 贴上来，然后和上面的图片进行关联讲解，图片如下：

这张截图中，gSizer1 就是上图中的蓝色框体部分，它的类型是 wxGridSizer。wxGridSizer 的图标就像一个“田”字格，可以指定“田”字中行和列的数量。根据草稿的描述，gSizer 应该是一个两行一列（2X1）的 Sizer。

gSizer2 与 gSizer3 并列于 gSizer1 中，显然，它们对应的是草稿中的绿色框体了。并且，与 gSizer1 一样，都是 2X1 的 Sizer。

接下来是 fgSizer1，这个 Sizer 与前面提到的 Sizer 不同，它属于 wxFlexGridSizer，对应于草稿中的红色“田”字格。

剩下还有一个 bSizer1，这是另外一种 Sizer，称为“wxBoxSizer”，也是最简单的一种 Sizer。它的属性只有一个：组件的排列方向（水平还是垂直摆放）。

按照上面的步骤，将组件排列好之后，按 F8 生成代码。这样就完成了 UI 部分的设计。

但是请注意，F8 所生成的代码并不能直接运行，因为要展示这个 Frame，需要首先创建一个 wx.App 程序，可以拷贝如下代码到一个 py 文件中，然后放入与上面生成的代码相同的目录中，运行这个 py 程序即可看到我们在上面设计的 Frame。

import wx
import Base64CodecMainFrame # 这是 F8 所生成的代码；

app = wx.App()
main_frm = Base64CodecMainFrame.Base64CodecFrame(None) # 这个类是我们设计的 Frame

main_frm.Show()
app.MainLoop()

运行之后，就可以看到这个 Frame了，但是工作到此还没有结束，因为 Frame 中有 4 个按钮（Button），用户需要点击这几个按钮来实现不同的功能。以 “Encode String” 为例，我们希望用户点击这个按钮之后，能够在“Result”右侧的文本框中输出编码后的结果，这就涉及到 UI 设计的另外一个问题：定义按钮的响应事件，这是实现 UI 交互的关键。

选中这个 Button 之后，选择右侧的“事件（Events）”页签，这个页签中显示了这个按钮所能够触发的各种不同的事件，比如点击按钮就是“OnButtonClick”，比如我们希望点击按钮后就可以进行字符串的编码，可以这样设置：

这样将所有按钮的动作设置完成之后，UI 部分的设计才算结束，重新按 F8 生成代码吧。

第四部分：编写业务逻辑代码

业务逻辑部分的代码，主要是对上一部分最后定义的按钮动作进行处理。比如我们定义了“EncodeString”接口，那么在生成的代码中，这个接口就需要我们来实现预设定的编码处理逻辑。
代码部分如下：

  def EncodeString( self, event ):
  try:
  import base64
  except:
  self.m_textCtrl2.SetValue("ERROR: Could NOT load module ``base64''")
  return
_istr = self.m_textCtrl1.GetValue()
_ostr = None
  try:
_ostr = base64.encodestring(_istr)
  except:
  self.m_textCtrl2.SetValue("ERROR: Could NOT decode string: %s" % _istr)
  return
  self.m_textCtrl2.SetValue(_ostr.strip())

event.Skip()
  return