图形用户界面.ppt
图形用户界面 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望2 2GUI编程编程首先首先:设计界面外观设计界面外观用什么构件用什么构件,怎么布局怎么布局其次其次:实现界面元素所对应的程序功能实现界面元素所对应的程序功能事件驱动事件驱动:功能代码的执行与构件关联功能代码的执行与构件关联,由针由针对构件的事件决定执行什么代码以及何时执对构件的事件决定执行什么代码以及何时执行行.3 3Tkinter事件描述事件描述事件描述事件描述类型符类型符:指定事件类型指定事件类型,如如Button和和Key修饰符修饰符(可选可选):描述双击描述双击,组合键等组合键等细节符细节符(可选可选):指定具体鼠标或键盘按键指定具体鼠标或键盘按键例如例如4 4常用鼠标事件常用鼠标事件或或 或或:单单击左键击左键类似有类似有和和:按下左键并移动按下左键并移动类似有类似有和和:双击左键双击左键 和和:鼠鼠标标指指针针进进入入/离离开开构件区域构件区域5 5常用键盘事件常用键盘事件或或a:按下字母按下字母a可可打打印印字字符符都都类类似似,但但空空格格是是,小小于于号号是是注意注意:1和和不同不同!:按下回车键按下回车键非非 可可 打打 印印 字字 符符 都都 类类 似似,如如:,等等:按下任意键按下任意键:同时按下同时按下Shift和和键键类似的有类似的有Alt组合、组合、Ctrl组合组合 6 6事件对象事件对象每个事件都创建一个每个事件都创建一个事件对象事件对象(Event类的实例类的实例),并将该对象传递给事件处理函数并将该对象传递给事件处理函数事件对象具有若干描述事件的属性事件对象具有若干描述事件的属性:x和和y:鼠标点击位置鼠标点击位置(相对于构件左上角相对于构件左上角)x_root和和y_root:鼠标点击位置鼠标点击位置(相对于屏幕左上角相对于屏幕左上角)num:点击的鼠标键号点击的鼠标键号(1、2、3)char:按下的字符按下的字符(ASCII);如果按下特殊键则为空串如果按下特殊键则为空串keysym:按下的字符按下的字符(ASCII);如果按下特殊键则为该如果按下特殊键则为该键的名称键的名称(是个字符串是个字符串)7 7 7事件处理事件处理GUI应用程序在建立图形界面等初始化应用程序在建立图形界面等初始化工作后进入事件循环工作后进入事件循环,等待事件发生并触等待事件发生并触发绑定的事件处理程序发绑定的事件处理程序mainloop()方法方法:进入事件循环进入事件循环绑定绑定:建立事件与事件处理程序间的对应建立事件与事件处理程序间的对应8 8 8构件绑定事件构件绑定事件语法语法:.bind(,)语义语义:若针对若针对发生了与发生了与相匹配的事件相匹配的事件,则调用则调用调用事件处理程序时调用事件处理程序时,系统传递系统传递Event对象作为实参对象作为实参.一般是由用户自定义的函数一般是由用户自定义的函数.这种函数在应用程序中定义但不由应用程序调用这种函数在应用程序中定义但不由应用程序调用,而是由系而是由系统调用统调用,一般称为回调一般称为回调(callback)函数函数GUI应用程序可封装为类应用程序可封装为类,这时事件处理程序常定义为应用这时事件处理程序常定义为应用程序类的方法程序类的方法.(详后详后)9 9 9例例:框架绑定鼠标事件框架绑定鼠标事件eg8_6.pyfrom Tkinter import*def callback(event):print clicked at,event.x,event.yroot=Tk()f=Frame(root,width=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()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.bind(,callback1)f.bind(,callback2)f.pack()root.mainloop()121212应用程序作为对象应用程序作为对象GUI编程经常将整个应用程序封装成类编程经常将整个应用程序封装成类.在类中建立图形界面在类中建立图形界面,定义事件处理方法定义事件处理方法.好处好处事件处理函数是类的方法事件处理函数是类的方法,自然可以访问类中所自然可以访问类中所有实例变量有实例变量只要将构件存储为实例变量只要将构件存储为实例变量,就能实现处理代码就能实现处理代码与图形界面的与图形界面的“无缝集成无缝集成”.例例:程序类独立创建根窗口程序类独立创建根窗口class 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=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=MyApp()15161616模型模型-视图视图复杂程序常可分解成核心逻辑和用户界复杂程序常可分解成核心逻辑和用户界面两个部分面两个部分模型模型:为应用问题建模为应用问题建模,管理应用问题的数据管理应用问题的数据和行为和行为,对来自对来自UI的数据请求或数据更新指的数据请求或数据更新指令进行响应令进行响应视图视图:负责显示模型的当前数据状态负责显示模型的当前数据状态,响应用响应用户的交互动作户的交互动作模型和视图相互独立模型和视图相互独立,可以分开设计和测试可以分开设计和测试171717模型模型-视图方法的优点视图方法的优点由于模型与视图的相对独立性由于模型与视图的相对独立性,可以为一可以为一个模型配用不同的视图个模型配用不同的视图,以达到不同的目以达到不同的目的的.后例中后例中,先设计一个基于文本界面的简单视图先设计一个基于文本界面的简单视图来测试模型的正确性来测试模型的正确性,然后再设计更美观易用然后再设计更美观易用的的GUI视图视图编程案例编程案例:汇率换算器汇率换算器模型模型:存储当前汇率存储当前汇率,进行外币与人民币进行外币与人民币之间的换算之间的换算类类CCApp:ccapp.py复杂程序也许需要多个类来实现模型复杂程序也许需要多个类来实现模型注意注意_init_的参数的参数inter:代表程序的界面代表程序的界面(尚尚未设计未设计)18基于文本的用户界面基于文本的用户界面先实现一个简单界面先实现一个简单界面,以测试模型是否能以测试模型是否能正确工作正确工作.类类TextInterface:ti.py测试测试CCApp和和TextInterface是否能配合是否能配合完成预定功能完成预定功能.testti.py19GUI经测试模型没有问题经测试模型没有问题,即可实现复杂的即可实现复杂的GUI.类类GUInterface:gui.py测试测试CCApp和和GUInterface是否能配合完是否能配合完成预定功能成预定功能.testgui.py202121End
