图形用户界面(GUI).ppt

《图形用户界面(GUI).ppt》由会员分享，可在线阅读，更多相关《图形用户界面(GUI).ppt（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、技术凝聚实力技术凝聚实力专业创新出版专业创新出版第17章 图形用户界面（GUI）l用户界面即是用户与硬件、软件交互、通信的中介，通过用户界面，用户向软件发出执行某项功能的指令，该软件利用硬件、其他软件执行该指令，并以图形或文字的形式将执行结果返回给用户。早期的用户界面大多是基于文字的形式，最典型的莫过于DOS系统。用户输入某一指令，系统通过调用软件、硬件资源执行该指令，并以文字的形式返回执行结果。现今，对大多数用户来说，DOS（及类似的用户界面系统）似乎是一个讳深莫测的世界，不仅单调乏味，而且工作效率也很低；人们更青睐于一种所见即所得的用户界面系统，即图形用户界面（Graphical User

2、 Interface，简称GUI）。图形用户界面是由窗口、光标、按键、菜单、文字等元素构成的用户视窗，用户通过对这些元素的点击、选中等就能很轻松地完成某项功能，这种所见即所得的特性尤其在图形绘制等方面具有很好的应用。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.1 两种GUI设计方式l图形用户界面程序可以分为两个相对较独立的子模块，即界面模块和工作模块，界面模块接受用户的输入，并将输入数据和操作请求提交给工作模块；而工作模块通常在后台完成数据处理任务，并将结果提交到界面。相应地，GUI程序设计可以分为界面设计和程序设计两部分。l本节首先介绍GUI的界面元素及界面对象层次结构，这是GUI

3、界面设计的基础；第节讨论回调函数，这是GUI程序设计的主要部分。依据GUI界面设计方式的不同，本节将分别讨论手工代码式和GUIDE式两种GUI程序设计方式。鉴于GUIDE式简便、快捷、良好的所见即所得特性，本章后文中以GUIDE式为主讨论GUIDE程序设计。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.1.1 GUI对象及层次结构l图形用户界面程序的界面部分由各种类型的图形对象组成，如窗口、菜单、按钮等，图是一个MATLAB GUI程序的简单例子。lMATLAB的图形对象是MATLAB用于显示数据的基本元素，每个图形对象都有一个唯一惟一的ID，称之为句柄（handle），因此MATLA

4、B图形对象也称为句柄图形对象。用户可以通过图形句柄查询或设置对象的属性，也可以经由图形句柄改变图形对象的外观。关于句柄图像对象相关知识在第14章已有所介绍，这里不再赘述。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.1.2 回调函数lGUI程序完成初始化之后，其工作流程大致如下：用户通过操作某个界面对象（如单击图17.1中的Resample按钮）向GUI程序发出任务请求；MATLAB自动调用该界面对象的回调函数，响应用户请求并以某种形式返回执行结果。l这里有必要澄清一个问题，即回调函数是用户操作触发，但由MATLAB系统调用；用户不需要也不应当直接调用回调函数，用户只需关注回调函数本身

5、。用户也许会对MATLAB系统如何启动回调函数心存疑问，实际上回调函数是界面对象的一个属性，MATLAB系统通过界面对象的句柄查询到回调函数的句柄，从而实现对回调函数的调用。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.1.3 手工代码式GUI程序l手工代码式的GUI程序要求用户自行编码创建各界面对象，并设置其属性。下面先介绍一个简单的例子，其目的是使读者对MATLAB GUI程序的内部结构有一个更加直观、清醒的认识。总结GUI程序设计的基本步骤如下。l确定用户需求，明确GUI程序的功能：用户需要程序完成什么样的任务？用户如何向程序发出任务请求？程序如何将结果返回给用户？l绘出GUI的

6、布局（Layout）草图。GUI界面设计，界面设计要着重考虑到界面的美观、简洁，可操作性强。lGUI程序设计，主要是回调函数的设计，包括回调函数与界面的通信及回调函数之间的数据共享等，这是GUI程序设计的主要难点之一。l验证和调试GUI。l以上GUI程序设计的步骤通常不能一蹴而就，往往需要数次的循环迭代才能设计出优秀的GUI 程序。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.1.4 GUIDE式GUI程序l通过前面的例子可以看出，手工代码式GUI程序设计方法的缺点在于界面设计不具有直观性。另外回调函数的设计也很烦琐，为了实现数据的共享，经常要用到大量的全局变量，这些全局变量不利于程序

7、的组织和扩展。l用户也许希望像在VC、VB中那样，只需通过鼠标把需要的对象拖曳到目的位置，并设置相关的属性就能得到一个设计良好的GUI界面，这正是下面将要介绍的GUIDE。为此，下面通过一个简单的例子介绍GUIDE式的GUI程序设计方法，其目的主要是了解其设计的主体思路，更详细的内容将在本章后续内容中讨论。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.1.5 GUIDE界面环境l本小节在前文的基础上进一步介绍GUIDE，主要是GUI界面编辑环境，并简要介绍GUI M文件编辑器的相关操作。lGUIDE创建的GUI程序由两个文件组成：lFIG文件，即用户界面文件；lM文件，保存了GUI程序

8、所有的代码，用户所有的编码工作都在该文件中完成。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.2 GUI界面设计l界面设计在软件设计中具有重要的地位，有时界面的好坏甚至决定了软件的命运，对图形用户界面程序更是如此。本节首先给出了MATLAB GUI程序界面设计的一些原则和要考虑的主要问题，这对后面的界面设计工作具有重要的指导意义；接着将对窗口、轴、菜单、控件等界面对象逐一进行详细介绍，主要是各类对象的相关属性。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.2.1 界面设计原则l用户界面是人与计算机之间的媒介，用户通过用户界面来与计算机进行信息交换，所以软件的友好性、易用性对于软

9、件系统至关重要。用户界面设计的最高原则应该是用户无须阅读操作手册就知道如何使用软件。l软件系统的发展已经进行了很多年，每类软件都有其流行的界面风格和设计惯例，既然不是每个人都能成为界面大师，那么作者认为东施效颦也未尝不是一个有效的方法。这里列出常见的界面设计方面的原则以供读者参考，相信这些原则对读者在设计用户界面方面能有所借鉴。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.2.2 窗口和轴l窗口是GUI各类界面对象的容器，是任何GUI程序界面不可缺少的元素。从对象继承关系看，各类界面对象、轴、菜单都是窗口对象的子类，是一些特殊类型的窗口，表列出了窗口对象常用的属性。窗口常用属性属 性

10、名说 明Name窗口标题Position窗口位置，14行向量，单位为像素MenuBar决定窗口是否包含菜单栏ToolBar决定窗口是否包含工具栏UIContextMenu决定窗口是否上下文菜单Unit窗口内对象的尺寸单位，一般设为normalizedTag窗口对象标签技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.2.3 菜单l对于某些GUI程序，菜单栏是必需的。关于菜单栏的设计，GUIDE已经为用户提供了一个标准菜单，用户可以在该标准菜单的基础上通过新增和修改菜单项定义自己菜单。表列出了菜单经常使用的属性。菜单常用属性属 性 名说 明Label菜单项标题属性Accelerator快捷键

11、Tag标签属性Callback回调函数Sperator上面是否有分隔线，On/OffChecked菜单项状态属性，On/Off，On时菜单项前为Enable菜单项是否可用，On/Off，菜单不可用时为灰色Visible是否可见属性，On/Off技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.2.4 控件l对控件对象，有几类属性是共有的，且含义、用法是相似的：lStyle，所有的控件都由函数uicontrol创建，因此在创建控件时需要传入控件类型参数，如pushbutton、Checkbox、EditText等；lTag，关于标签属性的含义及其用法，前文已有介绍，这里不再赘述。lCallb

12、ack，即控件的回调函数。lString，该属性包含了对象的一些文字描述，对按钮、复选框、列表框、编辑框和静态文本框，String是显示在对象上或紧邻对象的文字。lValue包含了对象的数值描述，该数值必须在Min和Max之间，其中Min和Max分别由Min、Max属性决定。对无线电按钮和复选框，Max、Min为1和0。当无线电按钮、复选框被选中时，Value为1，否则为0。对滚动条，Value是随滚动条位置变化的数值。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.3 GUI程序设计lGUIDE创建的GUI程序文件由两部分组成，其一是界面文件，保存了GUI程序的界面对象及其布局；其二是

13、GUI M文件，保存了GUI程序所有的代码，相当于GUI程序的引擎，用户所有的编码工作都在该文件中完成，其中主要是各类回调函数的设计。l本节首先对GUI M文件的结构进行详细剖析，从而了解GUI程序的大致框架；随后将详细讨论GUIDE的数据组织方式，这对理解GUI程序至关重要；本节最后要对窗口对象、轴对象及用户界面对象的回调函数进行详细介绍。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.3.1 GUI M文件结构lGUI M文件包含了所有运行GUI程序所需的代码，完成GUI界面设计之后，GUIDE会自动产生相应的M文件框架。虽然回调函数是用户主要的编程工作，但GUI M文件的结构对理解

14、MATLAB GUI程序的本质及进一步的程序设计是非常重要的。下面以第节的MyGuideGUI程序为例，为读者逐一剖析GUI M文件结构。lMyGuideGUI.m函数文件除一个主函数之外，还包含6个子函数，可以将这些函数（包括主函数）分为以下四类：lGUI创建函数，即主函数（MyGuideGUI），用于创建GUI界面、GUI程序实例等，用户可以在该函数内完成一些必需的初始化工作，如设置程序运行相关的环境变量等。GUI创建函数可以返回程序窗口的句柄；l初始化函数（MyGuideGUI_OpeningFcn），完成程序的初始化工作，如GUI界面的初始化等；l输出函数（MyGuideGUI_Out

15、putFcn），将程序执行后的状态输出至命令行，或向其他GUI程序传递参数；l回调函数（pushbuttonk_Callback），用于响应用户操作。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.3.2 GUIDE的数据组织lGUIDE将GUI程序分成多个子函数，子函数有各自的函数空间，因此回调函数之间的数据共享便成为一个重要的问题。关于数据共享，有两种方案可以考虑，其一是利用全局变量；其二是通过函数的参数传递。由于回调函数之间不能直接调用，因此方案二显然不可行，并且出于安全、规范的考虑，回调函数的接口（即输入输出参数的格式）是固定的；方案一利用自定义的全局变量能够实现数据共享，但容易

16、破坏程序的结构。但现在GUIDE已经为用户较好地解决了这个问题，GUIDE利用了handles这一全局构架变量，不仅能够较好地实现回调函数之间的数据共享问题，而且能够方便地访问GUI界面数据。l全局构架变量handles是每个回调函数的输入参数，回调函数可以方便地访问handles的每个数据。另外，回调函数还可以通过下面的方法向其他回调函数传递参数。例如回调函数希望将变量X共享给其他函数，首先需要将X增加到handles中，该功能由下述代码实现。lhandles.current_data=X;lguidata(hObject,handles)技术凝聚实力技术凝聚实力专业创新出版专业创新出版17

17、.3.3 设计回调函数l本小节首先介绍回调函数的基本格式，然后详细讨论各类对象回调函数编程过程中值得注意的问题。回调函数的一般格式如下：lfunction tag_Callback(hObject,eventdata,handles)技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.4 GUI应用实例l前面从GUI界面设计、程序设计两个方面分别对MATLAB GUI设计进行了详细的介绍，内容相对分散，本节打算通过一个完整GUI设计实例将前文内容组织起来，通过这个例子，一方面，用户可以学习GUI设计的流程，另一方面也可以加深对前文内容的理解。技术凝聚实力技术凝聚实力专业创新出版专业创新出版1

18、7.4.1 分析用户需求l设计一个GUI程序，该程序具备以下功能：用户随机输入两个频率值和，以及一个时间向量，GUI计算时间序列，并对该时间序列作傅立叶分析；分别作该时间序列的时域波形图和频域波形图。l对一些大型复杂程序，设计者往往需要对用户的需求进行分析、转换、拆分，从而得到一组由软件语言描述、相对独立的子任务。本例中的用户需求较简单，可以直接跳至GUI界面设计阶段。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.4.2 设计GUI界面lGUI界面设计的第一步是界面草图，用户可以在纸板上作出界面的大致框架，然后转到计算机中进行详细设计。由于本例比较简单，为了用户理解的方便，下面直接给出

19、了界面设计的最终结果技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.4.3 设计GUI程序l本例GUI程序的大致执行流程如下：用户输入频率值f1、f2和时间向量t，单击波形分析按钮后，按钮的回调函数启动，显示时序波形和频率波形。因此，本例程序设计的任务即是波形分析按钮回调函数的编码。右键单击波形分析按钮，并在弹出的上下文菜单中选择菜单路径【View CallbacksButtonDownFcn】进入按钮的回调函数，技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.4.4 GUI程序发布lGUIDE创建的GUI程序由Fig文件和M文件组成，用户可以将GUI程序打包为单个的M文件，不需要Fig文件的支持。在GUI界面编辑窗口中选择菜单路径【FileExport】,如图所示，选择合适的路径和文件名并保存。技术凝聚实力技术凝聚实力专业创新出版专业创新出版17.5 小结l本章介绍了MATLAB GUI程序设计的两种方法，并以GUIDE设计方法为主，详细讨论了GUI程序设计中的相关问题，通过本章的学习，读者应当熟练掌握以下内容：lGUI对象及层次结构；lGUI界面设计，包括各类对象的创建方法及相关的属性设置；lGUI程序设计，熟悉GUI M文件的结构和handles数据结构，熟悉各类界面对象的回调函数；l熟悉完整的GUI设计流程。