pys60

for Nikia s60 系列手机 ...

↑我也要推荐

wxPython 界面设计利器:wxFormBuilder 入门

发布时间:2011-06-27 09:26:03, 关注:+15669, 赞美:+43, 不爽:+10

本文标签: wxpython wxformbuilder

原始出处: JUSTIN @ LYCHEE

上一篇博客中,我专门介绍了 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

这部分就不做细致的叙述了,完整的代码见附件

至此,整个 wxPython 工程就完成了。当然,这个工程只是个 Demo,仅作示例用。其中有很多不完善之处,以及设计不合理的地方,具体细节后面继续探讨。

如果你觉得本站对你有帮助,欢迎向本站赞助 :P

使用支付宝捐赠

Copyright© Python4cn(news, jobs) simple-is-better.com, 技术驱动:powered by web.py 空间主机:Webfaction

版权申明:文章转载已注明出处,如有疑问请来信咨询。本站为 python 语言推广公益网站,与 python 官方没有任何关系。

联系/投搞/留言: en.simple.is.better@gmail.com 向本站捐赠