【學(xué)習(xí)】第17章圖形用戶界面（GUI）

1、技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版第17章 圖形用戶界面（GUI）l用戶界面即是用戶與硬件、軟件交互、通信的中介，通過用戶界面，用戶向軟件發(fā)出執(zhí)行某項功能的指令，該軟件利用硬件、其他軟件執(zhí)行該指令，并以圖形或文字的形式將執(zhí)行結(jié)果返回給用戶。早期的用戶界面大多是基于文字的形式，最典型的莫過于DOS系統(tǒng)。用戶輸入某一指令，系統(tǒng)通過調(diào)用軟件、硬件資源執(zhí)行該指令，并以文字的形式返回執(zhí)行結(jié)果。現(xiàn)今，對大多數(shù)用戶來說，DOS（及類似的用戶界面系統(tǒng)）似乎是一個諱深莫測的世界，不僅單調(diào)乏味，而且工作效率也很低；人們更青睞于一種所見即所得的用戶界面系統(tǒng)，即圖形用戶界面（Graphical User

2、 Interface，簡稱GUI）。圖形用戶界面是由窗口、光標(biāo)、按鍵、菜單、文字等元素構(gòu)成的用戶視窗，用戶通過對這些元素的點擊、選中等就能很輕松地完成某項功能，這種所見即所得的特性尤其在圖形繪制等方面具有很好的應(yīng)用。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.1 兩種GUI設(shè)計方式l圖形用戶界面程序可以分為兩個相對較獨立的子模塊，即界面模塊和工作模塊，界面模塊接受用戶的輸入，并將輸入數(shù)據(jù)和操作請求提交給工作模塊；而工作模塊通常在后臺完成數(shù)據(jù)處理任務(wù)，并將結(jié)果提交到界面。相應(yīng)地，GUI程序設(shè)計可以分為界面設(shè)計和程序設(shè)計兩部分。l本節(jié)首先介紹GUI的界面元素及界面對象層次結(jié)構(gòu)，這是GUI

3、界面設(shè)計的基礎(chǔ)；第17.1.2節(jié)討論回調(diào)函數(shù)，這是GUI程序設(shè)計的主要部分。依據(jù)GUI界面設(shè)計方式的不同，本節(jié)將分別討論手工代碼式和GUIDE式兩種GUI程序設(shè)計方式。鑒于GUIDE式簡便、快捷、良好的所見即所得特性，本章后文中以GUIDE式為主討論GUIDE程序設(shè)計。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.1.1 GUI對象及層次結(jié)構(gòu)l圖形用戶界面程序的界面部分由各種類型的圖形對象組成，如窗口、菜單、按鈕等，圖是一個MATLAB GUI程序的簡單例子。lMATLAB的圖形對象是MATLAB用于顯示數(shù)據(jù)的基本元素，每個圖形對象都有一個唯一惟一的ID，稱之為句柄（handle），因

4、此MATLAB圖形對象也稱為句柄圖形對象。用戶可以通過圖形句柄查詢或設(shè)置對象的屬性，也可以經(jīng)由圖形句柄改變圖形對象的外觀。關(guān)于句柄圖像對象相關(guān)知識在第14章已有所介紹，這里不再贅述。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.1.2 回調(diào)函數(shù)lGUI程序完成初始化之后，其工作流程大致如下：用戶通過操作某個界面對象（如單擊圖17.1中的Resample按鈕）向GUI程序發(fā)出任務(wù)請求；MATLAB自動調(diào)用該界面對象的回調(diào)函數(shù)，響應(yīng)用戶請求并以某種形式返回執(zhí)行結(jié)果。l這里有必要澄清一個問題，即回調(diào)函數(shù)是用戶操作觸發(fā)，但由MATLAB系統(tǒng)調(diào)用；用戶不需要也不應(yīng)當(dāng)直接調(diào)用回調(diào)函數(shù)，用戶只需關(guān)注

5、回調(diào)函數(shù)本身。用戶也許會對MATLAB系統(tǒng)如何啟動回調(diào)函數(shù)心存疑問，實際上回調(diào)函數(shù)是界面對象的一個屬性，MATLAB系統(tǒng)通過界面對象的句柄查詢到回調(diào)函數(shù)的句柄，從而實現(xiàn)對回調(diào)函數(shù)的調(diào)用。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.1.3 手工代碼式GUI程序l手工代碼式的GUI程序要求用戶自行編碼創(chuàng)建各界面對象，并設(shè)置其屬性。下面先介紹一個簡單的例子，其目的是使讀者對MATLAB GUI程序的內(nèi)部結(jié)構(gòu)有一個更加直觀、清醒的認(rèn)識。總結(jié)GUI程序設(shè)計的基本步驟如下。l確定用戶需求，明確GUI程序的功能：用戶需要程序完成什么樣的任務(wù)？用戶如何向程序發(fā)出任務(wù)請求？程序如何將結(jié)果返回給用戶？

6、l繪出GUI的布局（Layout）草圖。GUI界面設(shè)計，界面設(shè)計要著重考慮到界面的美觀、簡潔，可操作性強。lGUI程序設(shè)計，主要是回調(diào)函數(shù)的設(shè)計，包括回調(diào)函數(shù)與界面的通信及回調(diào)函數(shù)之間的數(shù)據(jù)共享等，這是GUI程序設(shè)計的主要難點之一。l驗證和調(diào)試GUI。l以上GUI程序設(shè)計的步驟通常不能一蹴而就，往往需要數(shù)次的循環(huán)迭代才能設(shè)計出優(yōu)秀的GUI 程序。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.1.4 GUIDE式GUI程序l通過前面的例子可以看出，手工代碼式GUI程序設(shè)計方法的缺點在于界面設(shè)計不具有直觀性。另外回調(diào)函數(shù)的設(shè)計也很煩瑣，為了實現(xiàn)數(shù)據(jù)的共享，經(jīng)常要用到大量的全局變量，這些全局

7、變量不利于程序的組織和擴展。l用戶也許希望像在VC、VB中那樣，只需通過鼠標(biāo)把需要的對象拖曳到目的位置，并設(shè)置相關(guān)的屬性就能得到一個設(shè)計良好的GUI界面，這正是下面將要介紹的GUIDE。為此，下面通過一個簡單的例子介紹GUIDE式的GUI程序設(shè)計方法，其目的主要是了解其設(shè)計的主體思路，更詳細(xì)的內(nèi)容將在本章后續(xù)內(nèi)容中討論。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.1.5 GUIDE界面環(huán)境l本小節(jié)在前文的基礎(chǔ)上進(jìn)一步介紹GUIDE，主要是GUI界面編輯環(huán)境，并簡要介紹GUI M文件編輯器的相關(guān)操作。lGUIDE創(chuàng)建的GUI程序由兩個文件組成： lFIG文件，即用戶界面文件；lM文件，

8、保存了GUI程序所有的代碼，用戶所有的編碼工作都在該文件中完成。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.2 GUI界面設(shè)計l界面設(shè)計在軟件設(shè)計中具有重要的地位，有時界面的好壞甚至決定了軟件的命運，對圖形用戶界面程序更是如此。本節(jié)首先給出了MATLAB GUI程序界面設(shè)計的一些原則和要考慮的主要問題，這對后面的界面設(shè)計工作具有重要的指導(dǎo)意義；接著將對窗口、軸、菜單、控件等界面對象逐一進(jìn)行詳細(xì)介紹，主要是各類對象的相關(guān)屬性。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.2.1 界面設(shè)計原則l用戶界面是人與計算機之間的媒介，用戶通過用戶界面來與計算機進(jìn)行信息交換，所以軟件的友好

9、性、易用性對于軟件系統(tǒng)至關(guān)重要。用戶界面設(shè)計的最高原則應(yīng)該是用戶無須閱讀操作手冊就知道如何使用軟件。l軟件系統(tǒng)的發(fā)展已經(jīng)進(jìn)行了很多年，每類軟件都有其流行的界面風(fēng)格和設(shè)計慣例，既然不是每個人都能成為界面大師，那么作者認(rèn)為東施效顰也未嘗不是一個有效的方法。這里列出常見的界面設(shè)計方面的原則以供讀者參考，相信這些原則對讀者在設(shè)計用戶界面方面能有所借鑒。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.2.2 窗口和軸l窗口是GUI各類界面對象的容器，是任何GUI程序界面不可缺少的元素。從對象繼承關(guān)系看，各類界面對象、軸、菜單都是窗口對象的子類，是一些特殊類型的窗口，表列出了窗口對象常用的屬性。窗口

10、常用屬性屬 性 名說 明Name窗口標(biāo)題Position窗口位置，14行向量，單位為像素MenuBar決定窗口是否包含菜單欄ToolBar決定窗口是否包含工具欄UIContextMenu決定窗口是否上下文菜單Unit窗口內(nèi)對象的尺寸單位，一般設(shè)為normalizedTag窗口對象標(biāo)簽技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.2.3 菜單l對于某些GUI程序，菜單欄是必需的。關(guān)于菜單欄的設(shè)計，GUIDE已經(jīng)為用戶提供了一個標(biāo)準(zhǔn)菜單，用戶可以在該標(biāo)準(zhǔn)菜單的基礎(chǔ)上通過新增和修改菜單項定義自己菜單。表列出了菜單經(jīng)常使用的屬性。菜單常用屬性屬 性 名說 明Label菜單項標(biāo)題屬性Accele

11、rator快捷鍵Tag標(biāo)簽屬性Callback回調(diào)函數(shù)Sperator上面是否有分隔線，On/OffChecked菜單項狀態(tài)屬性，On/Off，On時菜單項前為Enable菜單項是否可用，On/Off，菜單不可用時為灰色Visible是否可見屬性，On/Off技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.2.4 控件l對控件對象，有幾類屬性是共有的，且含義、用法是相似的：lStyle，所有的控件都由函數(shù)uicontrol創(chuàng)建，因此在創(chuàng)建控件時需要傳入控件類型參數(shù)，如pushbutton、Checkbox、EditText等；lTag，關(guān)于標(biāo)簽屬性的含義及其用法，前文已有介紹，這里不再贅

12、述。lCallback，即控件的回調(diào)函數(shù)。lString，該屬性包含了對象的一些文字描述，對按鈕、復(fù)選框、列表框、編輯框和靜態(tài)文本框，String是顯示在對象上或緊鄰對象的文字。lValue包含了對象的數(shù)值描述，該數(shù)值必須在Min和Max之間，其中Min和Max分別由Min、Max屬性決定。對無線電按鈕和復(fù)選框，Max、Min為1和0。當(dāng)無線電按鈕、復(fù)選框被選中時，Value為1，否則為0。對滾動條，Value是隨滾動條位置變化的數(shù)值。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.3 GUI程序設(shè)計lGUIDE創(chuàng)建的GUI程序文件由兩部分組成，其一是界面文件，保存了GUI程序的界面對象

13、及其布局；其二是GUI M文件，保存了GUI程序所有的代碼，相當(dāng)于GUI程序的引擎，用戶所有的編碼工作都在該文件中完成，其中主要是各類回調(diào)函數(shù)的設(shè)計。l本節(jié)首先對GUI M文件的結(jié)構(gòu)進(jìn)行詳細(xì)剖析，從而了解GUI程序的大致框架；隨后將詳細(xì)討論GUIDE的數(shù)據(jù)組織方式，這對理解GUI程序至關(guān)重要；本節(jié)最后要對窗口對象、軸對象及用戶界面對象的回調(diào)函數(shù)進(jìn)行詳細(xì)介紹。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.3.1 GUI M文件結(jié)構(gòu)lGUI M文件包含了所有運行GUI程序所需的代碼，完成GUI界面設(shè)計之后，GUIDE會自動產(chǎn)生相應(yīng)的M文件框架。雖然回調(diào)函數(shù)是用戶主要的編程工作，但GUI M

14、文件的結(jié)構(gòu)對理解MATLAB GUI程序的本質(zhì)及進(jìn)一步的程序設(shè)計是非常重要的。下面以第17.1.4節(jié)的MyGuideGUI程序為例，為讀者逐一剖析GUI M文件結(jié)構(gòu)。lMyGuideGUI.m函數(shù)文件除一個主函數(shù)之外，還包含6個子函數(shù)，可以將這些函數(shù)（包括主函數(shù)）分為以下四類：lGUI創(chuàng)建函數(shù)，即主函數(shù)（MyGuideGUI），用于創(chuàng)建GUI界面、GUI程序?qū)嵗?，用戶可以在該函?shù)內(nèi)完成一些必需的初始化工作，如設(shè)置程序運行相關(guān)的環(huán)境變量等。GUI創(chuàng)建函數(shù)可以返回程序窗口的句柄；l初始化函數(shù)（MyGuideGUI_OpeningFcn），完成程序的初始化工作，如GUI界面的初始化等；l輸出函數(shù)（

15、MyGuideGUI_OutputFcn），將程序執(zhí)行后的狀態(tài)輸出至命令行，或向其他GUI程序傳遞參數(shù)；l回調(diào)函數(shù)（pushbuttonk_Callback），用于響應(yīng)用戶操作。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.3.2 GUIDE的數(shù)據(jù)組織lGUIDE將GUI程序分成多個子函數(shù)，子函數(shù)有各自的函數(shù)空間，因此回調(diào)函數(shù)之間的數(shù)據(jù)共享便成為一個重要的問題。關(guān)于數(shù)據(jù)共享，有兩種方案可以考慮，其一是利用全局變量；其二是通過函數(shù)的參數(shù)傳遞。由于回調(diào)函數(shù)之間不能直接調(diào)用，因此方案二顯然不可行，并且出于安全、規(guī)范的考慮，回調(diào)函數(shù)的接口（即輸入輸出參數(shù)的格式）是固定的；方案一利用自定義的全局

16、變量能夠?qū)崿F(xiàn)數(shù)據(jù)共享，但容易破壞程序的結(jié)構(gòu)。但現(xiàn)在GUIDE已經(jīng)為用戶較好地解決了這個問題，GUIDE利用了handles這一全局構(gòu)架變量，不僅能夠較好地實現(xiàn)回調(diào)函數(shù)之間的數(shù)據(jù)共享問題，而且能夠方便地訪問GUI界面數(shù)據(jù)。l全局構(gòu)架變量handles是每個回調(diào)函數(shù)的輸入?yún)?shù)，回調(diào)函數(shù)可以方便地訪問handles的每個數(shù)據(jù)。另外，回調(diào)函數(shù)還可以通過下面的方法向其他回調(diào)函數(shù)傳遞參數(shù)。例如回調(diào)函數(shù)希望將變量X共享給其他函數(shù)，首先需要將X增加到handles中，該功能由下述代碼實現(xiàn)。lhandles.current_data = X;lguidata(hObject,handles)技術(shù)凝聚實力技術(shù)凝聚

17、實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.3.3 設(shè)計回調(diào)函數(shù)l本小節(jié)首先介紹回調(diào)函數(shù)的基本格式，然后詳細(xì)討論各類對象回調(diào)函數(shù)編程過程中值得注意的問題。回調(diào)函數(shù)的一般格式如下：lfunction tag_Callback(hObject, eventdata, handles)技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.4 GUI應(yīng)用實例l前面從GUI界面設(shè)計、程序設(shè)計兩個方面分別對MATLAB GUI設(shè)計進(jìn)行了詳細(xì)的介紹，內(nèi)容相對分散，本節(jié)打算通過一個完整GUI設(shè)計實例將前文內(nèi)容組織起來，通過這個例子，一方面，用戶可以學(xué)習(xí)GUI設(shè)計的流程，另一方面也可以加深對前文內(nèi)容的理解。技術(shù)凝聚實力技

18、術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.4.1 分析用戶需求l設(shè)計一個GUI程序，該程序具備以下功能：用戶隨機輸入兩個頻率值和，以及一個時間向量，GUI計算時間序列，并對該時間序列作傅立葉分析；分別作該時間序列的時域波形圖和頻域波形圖。l對一些大型復(fù)雜程序，設(shè)計者往往需要對用戶的需求進(jìn)行分析、轉(zhuǎn)換、拆分，從而得到一組由軟件語言描述、相對獨立的子任務(wù)。本例中的用戶需求較簡單，可以直接跳至GUI界面設(shè)計階段。技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.4.2 設(shè)計GUI界面lGUI界面設(shè)計的第一步是界面草圖，用戶可以在紙板上作出界面的大致框架，然后轉(zhuǎn)到計算機中進(jìn)行詳細(xì)設(shè)計。由于本例比較簡單，為了用戶理解的方便，下面直接給出了界面設(shè)計的最終結(jié)果技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.4.3 設(shè)計GUI程序l本例GUI程序的大致執(zhí)行流程如下：用戶輸入頻率值f1、f2和時間向量t，單擊波形分析按鈕后，按鈕的回調(diào)函數(shù)啟動，顯示時序波形和頻率波形。因此，本例程序設(shè)計的任務(wù)即是波形分析按鈕回調(diào)函數(shù)的編碼。右鍵單擊波形分析按鈕，并在彈出的上下文菜單中選擇菜單路徑【View CallbacksButtonDownFcn】進(jìn)入按鈕的回調(diào)函數(shù)，技術(shù)凝聚實力技術(shù)凝聚實力專業(yè)創(chuàng)新出版專業(yè)創(chuàng)新出版17.4.4 GUI程序發(fā)布lGUIDE創(chuàng)建的GUI程序由Fig文件和M文件