Transcript 12_CH9_图形用户界面程序设计

Introduction to Computer
Programming
School of Computer and Information Science
Southwest Forestry University
2014.5
计算机编程导论
西南林业大学
计算机与信息学院
2014.5
Chapter 9 GUI Programming
• GUI ：Graphical User Interface（图形用户界面）
• 常用GUI工具
– Tkinter：Python的标准GUI库
– wxPython：功能强于Tkinter，跨平台
– Jython：基于Java
– IronPython：增加了对.NET应用程序的支持
• wxPython下载安装
– http://wxpython.org/download.php
– wxPython 2.8（与Python 2.7对应）
Chapter 9 GUI Programming
命令行界面：
Chapter 9 GUI Programming
GUI界面：
Chapter 9 GUI Programming
（0，0）
窗体在屏幕中的位置
Chapter 9 GUI Programming
• GUI设计方法——搭积木：
– 命令式：以明确的文字命令，按一定的
顺序添加窗体和控件（9.2〜9.4）
– 可视操作式：用鼠标拖拽的方式将控件
放置到窗体的合适位置（9.5）
Chapter 9 GUI Programming
命令式：
1. 请在黑板上画一个边长为10的正方形，其左下角距黑板左边10CM，
距下边0CM；
2. 请在黑板上画一个等边三角形，三角形边长为10CM，左下角距黑板
左边10CM，距下边10CM；
3. 请在黑板上画一个高为6，宽为4的长方形，其左下角距黑板左边
13CM，距下边0CM；
1. 请在黑板上画一个边长为15的正
方形；
2. 请在黑板上画一个等边三角形；
……
——无法（正确）执行
Chapter 9 GUI Programming
可视操作式：
9.2 Basic Questions
[Q9-1] Create a form
9.2 Basic Questions
#Ques9_1.py
#coding=GBK
import wx #导入wxPython包
class Frame0(wx.Frame):
def __init__(self,superior):
#创建frame对象
wx.Frame.__init__(self,parent=superior, title=u'第一个窗
体', size=(300, 300))
#创建一个wx.Panel（面板）实例以容纳框架上的所有内容
panel = wx.Panel(self)
#把响应鼠标移动事件wx.EVT_MOTION绑定到函数
OnMove
panel.Bind(wx.EVT_MOTION, self.OnMove)
#在panel上放置静态文本框，以显示“Pos”提示信息
wx.StaticText(parent=panel,label="Pos:", pos=(10, 20))
#在panel上放文本框，用来输出信息
self.posCtrl = wx.TextCtrl(parent=panel,pos=(40, 20))
9.2 Basic Questions
def OnMove(self, event):
#获取鼠标的位置
pos = event.GetPosition()
#将鼠标位置在文本框中显示出来
self.posCtrl.SetValue("%s, %s" % (pos.x, pos.y))
#主程序
if __name__ == '__main__':
app =wx.App()
frame = Frame0(None)
frame.Show(True)
app.MainLoop()
图形界面程序的工作原理：
(1) 当鼠标在panel上移动时，会发生wx.EVT_MOTION事件；
(2) 函数OnMove在鼠标移动事件wx.EVT_MOTION发生时被调用，
称为事件处理函数。
9.3 Frame
wx.Frame的格式:
•
Frame：框架（窗体），容器，可移动、缩放，包
含标题栏、菜单等。是所有框架的父类。
•
子类的构造函数格式：
wx.Frame. __init__ (parent, id, title, pos, size,
style, name )
–
parent：框架的父窗体。对于顶级窗体，该值为None。
–
id：新窗体的wxPython ID号。我们可以明确地传递一个
，也可传递-1，这时wxPython将自动生成一个新的ID。
–
title：窗体的标题
9.3 Frame
– pos：wx.Point对象，它指定这个新窗体的左上角
在屏幕中的位置。通常（0,0）是显示器的左上角
。当将其设定为wx.DefaultPosition，其值为（1,-1），表示让系统决定窗体的位置。
– size：一个wx.Size对象，它指定这个新窗体的初
始尺寸。当将其设定为wx.DefaultSize时，其值为
（-1,-1），表示由系统决定窗体的初始尺寸。
– style：指定窗体的类型的常量。
– name：框架的名字，指定后我们可以使用它来寻
找这个窗体。
当一个参数前面的所有参数都被设定的时候
，该参数可以省略其名称直接填写其值，否则需要
使用 “参数名=值”的格式。
9.3 Frame
【EG9-1】：Create a frame
#Exp9_1.py
#步骤1:
import wx
#导入wx模块
#步骤2:
class Frame1(wx.Frame):
#程序的框架类继承于wx.Frame类
def __init__(self, superior):
wx.Frame.__init__(self, parent=superior, title="My Window",
pos= (100,200), size= (400,200))
#步骤3:
#主程序
if __name__ == '__main__':
app = wx.App( )
#建立应用程序对象
frame=Frame1(None)
#建立框架类对象
frame.Show(True)
#显示框架
app.MainLoop( )
#建立事件循环
9.3 Frame
建立GUI程序的三大步骤：
•
导入必须的wxPython包
•
建立框架类：框架类的父类为wx.Frame，在框架类的
构造函数中必须调用父类的构造函数。
•
建立主程序：通常做4件事——建立应用程序对象、建
立框架类对象、显示框架、建立事件循环
–
执行frame.Show(True)后，框架才看得见，执行
app.MainLoop( )后，框架才能处理事件。

如需在窗体上增加其他控件，可在步骤二的框架类的构
造函数中增加代码

如需处理事件，可增加框架类的成员函数，如问题9-1
9.3 Frame
【EG9-1’】：Create a frame
#Exp9_1.py
#步骤1:
import wx
#导入wx模块
#步骤2:
class Frame1(wx.Frame):
#程序的框架类继承于wx.Frame类
def __init__(self, superior):
wx.Frame.__init__(self, parent=None)
#步骤3:
#主程序
if __name__ == '__main__':
app = wx.App( )
frame=Frame1(None)
frame.Show(True)
app.MainLoop( )
#建立应用程序对象
#建立框架类对象
#显示框架
#建立事件循环
由于wx.Frame.__init__( )方法只有一个参数parent没有默认值，因而
最简单的调用方式将生成一个默认位置、默认大小的窗体
9.3 Frame
wx.Frame的样式：
•
•
•
•
•
•
•
•
•
wx.CAPTION：增加标题栏
wx.DEFAULT_FRAME_STYLE：默认样式
wx.CLOSE_BOX：标题栏上显示“关闭”按钮
wx.MAXIMIZE_BOX：标题栏上显示“最大化”按钮
wx.MINIMIZE_BOX：标题栏上显示“最小化”按钮
wx.RESIZE_BORDER：边框可改变尺寸
wx.SIMPLE_BORDER：边框没有装饰
wx.SYSTEM_MENU：增加系统菜单（有“关闭”、
“移动”、“改变尺寸”等功能）。
wx.FRAME_TOOL_WINDOW：给框架一个比正常小
的标题栏，使框架看起来像一个工具框窗体。
9.3 Frame
对一个窗体控件可以使用多个样式，使用或运算符（|）
连接即可。
比如：wx.DEFAULT_FRAME_STYLE样式等价于：
wx.MAXIMIZE_BOX | wx.MINIMIZE_BOX |
wx.RESIZE_BORDER | wx.SYSTEM_MENU |
wx.CAPTION | wx.CLOSE_BOX
要从一个组合样式中去掉个别的样式可以使用^操作符。
例如要创建一个默认样式的窗体，但要求用户不能缩放
和改变窗体的尺寸，可以使用这样的组合：
wx.DEFAULT_FRAME_STYLE ^
(wx.RESIZE_BORDER | wx.MAXIMIZE_BOX
| wx.MINIMIZE_BOX)
9.3 Frame
【例9-2】不同样式的组合效果
9.4 Controls
【例9-3】计算1+2+…+n（使用文本框 ）
9.4 Controls
1. Button
【例9-4】在窗体上放置“关闭”按钮
9.4 Controls
2. StaticText
【例9-5】使用静态文本框
9.4 Controls
3. TextCtrl
【例9-6】使用文本框
9.4 Controls
4. Menu
5. ToolBar
6. StatusBar
7. MessageDialog
8. TextEntryDialog
9. SingleChoiceDialog
10. CheckBox
11. RadioButton
12. ListBox
13. ComboBox
14. TreeCtrl
9.5 Boa-constructor
Boa-constructor:
• 一款优秀的界面设计软件
• 功能强大的Idle
• 设计界面时可通过鼠标调整控件的大小
和位置
• 下载地址：
http://sourceforge.net/projects/boaconstructor/?source=dlp
9.5 Boa-constructor
1. 安装
Windows：
boa-constructor-0.6.1.src.win32.exe
2. 运行Boa.py文件
启动软件：用Python2.7的Idle打开并运行
Boa.py文件，或直接运行也可。
（C:\Python27\Lib\site-packages\boaconstructor\Boa.py ）
9.5 Boa-constructor
窗口组成：
控件窗口：包含界面设计用到的各种控件
编辑器：可管理用户文件，包含交互式窗
口Shell，错误信息和运行信息显示窗口
检视器：可用来修改控件的属性
9.5 Boa-constructor
【例9-12】数学运算：用两个文本框输入运算数
，用一个文本框输出运算结果，用一个组合
框来选择运算符，用一个按钮来进行“确定
”计算的操作。
步骤：
1. 启动Boa Constructor
2. 在“编辑器”的“文件”菜单下“新建”一
个“wx.Frame”
9.5 Boa-constructor
3. 添加主程序
在编辑器窗口中单击“源”页，显示代码。在显示出的
代码未尾增加下列主程序：
#主程序
if __name__=="__main__":
app=wx.App( )
frame=Frame1(None)
frame.Show(True)
app.MainLoop( )
为了能在程序中正常使用汉字，还需要在程序的最前面
加上下面这行代码：
#coding=GBK
9.5 Boa-constructor
4. 保存文件
9.5 Boa-constructor
5. 显示框架设计器
9.5 Boa-constructor
6. 添加控件
9.5 Boa-constructor
7. 修改控件属性
9.5 Boa-constructor
8. 为按钮添加单击事件处理函数
9.5 Boa-constructor
9. 在按钮的事件处理函数中编写代码
在编辑器窗口中单击“源”页，显示出代码。在刚才添加的事件处
理函数OnButton1Button( )内用下列代码替换该处的
“event.Skip()”语句：
operator=self.cmb1.GetValue( ) #获得cmb1中的字符串
x=self.textCtrl1.GetValue( ) #获得textCtrl1中的字符串
y=self.textCtrl2.GetValue( ) #获得textCtrl2中的字符串
x=float(x)
y=float(y)
if operator=='+':
z=x+y
if operator=='-':
z=x-y
if operator=='*':
z=x*y
if operator=='/':
z=x/y
self.textCtrl3.SetValue(str(z)) #在textCtrl3内显示计算结果
9.5 Boa-constructor
10. 运行程序