图形用户界面

1、图形用户界面2 2GUI编程编程 首先首先:设计界面外观设计界面外观 其次其次:实现界面元素所对应的程序功能实现界面元素所对应的程序功能 事件驱动事件驱动:功能代码的执行与构件关联功能代码的执行与构件关联,由针由针对构件的事件决定执行什么代码以及何时执对构件的事件决定执行什么代码以及何时执行行.3 3Tkinter事件描述事件描述 事件描述事件描述 类型符类型符:指定事件类型指定事件类型,如如Button和和Key 修饰符修饰符(可选可选):描述双击描述双击,组合键等组合键等 细节符细节符(可选可选):指定具体鼠标或键盘按键指定具体鼠标或键盘按键 例如例如4 4常用鼠标事件常用鼠标事件 或或或

2、或:单单击左键击左键 类似有类似有和和 :按下左键并移动按下左键并移动类似有类似有和和 :双击左键双击左键 和和:鼠标指针进入鼠标指针进入/ /离开离开构件区域构件区域5 5常用键盘事件常用键盘事件 或或a:按下字母按下字母a 可打印字符都类似可打印字符都类似,但空格是但空格是,小于号是小于号是 注意注意:1和和不同不同! :按下回车键按下回车键 非可打印字符都类似非可打印字符都类似,如如:, , , , , 等等 :按下任意键按下任意键 :同时按下同时按下Shift和和键键 类似的有类似的有Alt组合、组合、Ctrl组合组合 6 6事件对象事件对象 每个事件都创建一个事件对象每个事件都创建一

3、个事件对象(Event类的实例类的实例),并将该对象传递给事件处理函数并将该对象传递给事件处理函数 事件对象具有若干描述事件的属性事件对象具有若干描述事件的属性: x和和y:鼠标点击位置鼠标点击位置(相对于构件左上角相对于构件左上角) x_root和和y_root:鼠标点击位置鼠标点击位置(相对于屏幕左上角相对于屏幕左上角) num:点击的鼠标键号点击的鼠标键号(1、2、3) char:按下的字符按下的字符(ASCII);如果按下特殊键则为空串如果按下特殊键则为空串 keysym:按下的字符按下的字符(ASCII);如果按下特殊键则为该如果按下特殊键则为该键的名称键的名称(是个字符串是个字符串

4、) 7 7 7事件处理事件处理 GUI应用程序在建立图形界面等初始化应用程序在建立图形界面等初始化工作后进入事件循环工作后进入事件循环,等待事件发生并触等待事件发生并触发绑定的事件处理程序发绑定的事件处理程序 mainloop()方法方法:进入事件循环进入事件循环 绑定绑定:建立事件与事件处理程序间的对应建立事件与事件处理程序间的对应8 8 8构件绑定事件构件绑定事件 语法语法:.bind(,) 语义语义:若针对若针对发生了与发生了与相匹配的事件相匹配的事件,则调用则调用 调用事件处理程序时调用事件处理程序时,系统传递系统传递Event对象作为实参对象作为实参. 一般是由用户自定义的函数一般是

5、由用户自定义的函数.这种函数在应用程序中定义但不由应用程序调用这种函数在应用程序中定义但不由应用程序调用,而是由系而是由系统调用统调用,一般称为回调一般称为回调(callback)函数函数GUI应用程序可封装为类应用程序可封装为类,这时事件处理程序常定义为应用这时事件处理程序常定义为应用程序类的方法程序类的方法. (详后详后)9 9 9例例:框架绑定鼠标事件框架绑定鼠标事件 eg8_6.pyfrom Tkinter import *def callback(event): print clicked at,event.x,event.yroot = Tk()f = Frame(root,wid

6、th=100,height=100)f.bind(,callback)f.pack()root.mainloop()101010例例:按钮绑定键盘事件按钮绑定键盘事件 按键时按键时,界面中哪个构件响应该键盘事件界面中哪个构件响应该键盘事件? 占有界面焦点的构件占有界面焦点的构件.例例eg8_7.py:from Tkinter import *def printInfo(event): print pressed, event.charroot = Tk()b = Button(root,text = Press any key) b.bind(,printInfo) b.focus_set()

7、 b.pack() root.mainloop()111111例例:绑定多个事件绑定多个事件 按键时按键时,界面中哪个构件响应该键盘事件界面中哪个构件响应该键盘事件? 占有界面焦点的构件占有界面焦点的构件.例例eg8_7.py:from Tkinter import *def callback1(event): print pressed, event.chardef callback2(event): f.focus_set() print clicked at, event.x, event.yroot = Tk()f = Frame(root,width=100,height=100)f

8、.bind(,callback1)f.bind(,callback2)f.pack()root.mainloop()121212应用程序作为对象应用程序作为对象 GUI编程经常将整个应用程序封装成类编程经常将整个应用程序封装成类. 在类中建立图形界面在类中建立图形界面,定义事件处理方法定义事件处理方法. 好处好处事件处理函数是类的方法事件处理函数是类的方法, 自然可以访问类中所自然可以访问类中所有实例变量有实例变量只要将构件存储为实例变量只要将构件存储为实例变量,就能实现处理代码就能实现处理代码与图形界面的与图形界面的“无缝集成无缝集成”. 例例:程序类独立创建根窗口程序类独立创建根窗口cla

9、ss MyApp: def _init_(self): root = Tk() b = Button(root,.) . root.mainloop() def f(): .app = MyApp()13例例:程序类依赖外部根窗口程序类依赖外部根窗口class MyApp: def _init_(self,master): f = Frame(master,.) b = Button(f,.) .root = Tk()app = MyApp(root)root.mainloop() 14例例:myapp.pyclass MyApp: def _init_(self): self.root =

10、Tk() self.t = Label(self.root,text=Spam) self.t.pack() Button(self.root,text=Play,command=self.changeText).pack() Button(self.root,text=Quit,command=self.root.quit).pack() self.root.mainloop() self.root.destroy() def changeText(self): if self.ttext = Spam: self.ttext = Egg else: self.ttext = Spamapp

11、 = MyApp()15161616模型模型-视图视图 复杂程序常可分解成核心逻辑和用户界复杂程序常可分解成核心逻辑和用户界面两个部分面两个部分 模型模型:为应用问题建模为应用问题建模,管理应用问题的数据管理应用问题的数据和行为和行为,对来自对来自UI的数据请求或数据更新指的数据请求或数据更新指令进行响应令进行响应 视图视图:负责显示模型的当前数据状态负责显示模型的当前数据状态,响应用响应用户的交互动作户的交互动作 模型和视图相互独立模型和视图相互独立,可以分开设计和测试可以分开设计和测试171717模型模型-视图方法的优点视图方法的优点 由于模型与视图的相对独立性由于模型与视图的相对独立性,

12、可以为一可以为一个模型配用不同的视图个模型配用不同的视图,以达到不同的目以达到不同的目的的. 后例中后例中,先设计一个基于文本界面的简单视先设计一个基于文本界面的简单视图来测试模型的正确性图来测试模型的正确性,然后再设计更美观然后再设计更美观易用的易用的GUI视图视图编程案例编程案例:汇率换算器汇率换算器 模型模型:存储当前汇率存储当前汇率,进行外币与人民币之进行外币与人民币之间的换算间的换算 类类CCApp: ccapp.py 复杂程序也许需要多个类来实现模型复杂程序也许需要多个类来实现模型 注意注意_init_的参数的参数inter:代表程序的界面代表程序的界面(尚尚未设计未设计)18基于文本的用户界面基于文本的用户界面 先实现一个简单界面先实现一个简单界面,以测试模型是否能以测试模型是否能正确工作正确工作. 类类TextInterface: t