圖形用戶界面GUI設計學習教案

1、圖形用戶界面圖形用戶界面GUI設計設計(shj)第一頁，共23頁。2GUIDE界面界面(jimin)組成組成 “GUIDE Quick Start”界面包括兩個選項：界面包括兩個選項：“Create New GUI”（創(chuàng)建新的圖形用戶界面）和（創(chuàng)建新的圖形用戶界面）和“Open Existing GUI”（打開已存在的圖形用戶界面）。其中（打開已存在的圖形用戶界面）。其中“Create New GUI”提供四種基本類型的提供四種基本類型的GUI模模板板(mbn)： Black GUI（Default）：空白模板）：空白模板(mbn)（缺省）。（缺?。?GUI with Uicontrols：

2、帶有控件對象的：帶有控件對象的GUI模板模板(mbn)。 GUI with Axes and Menu：帶有坐標軸與菜單的：帶有坐標軸與菜單的GUI模板模板(mbn)。 Modal Question Dialog：問答式對話框的：問答式對話框的GUI模板模板(mbn)。通過這些模板通過這些模板(mbn)可快速創(chuàng)建可快速創(chuàng)建GUI。選定一種模板。選定一種模板(mbn)以后，它的預覽效果顯示在右邊的面以后，它的預覽效果顯示在右邊的面板中。譬如選中板中。譬如選中“GUI with Uicontrols”，顯示在面板中的預覽效果如圖所示，顯示在面板中的預覽效果如圖所示第1頁/共23頁第二頁，共23頁。

3、在“GUIDE Quick Start”對話窗中，點擊“Create New GUI”選項卡，選擇“Black GUI”選項，打開的就是“帶有空白GUI模板(mbn)的輸出編輯器”窗口，如圖所示。 11.1.2 輸出輸出(shch)編輯器編輯器 第2頁/共23頁第三頁，共23頁。1控件與組件的功能輸出編輯器中的控件大致可分為兩種：一種為動作控件，鼠標點擊這些控件時會(sh hu)產(chǎn)生相應的響應；另一種為靜態(tài)控件，是一種不產(chǎn)生響應的控件，如文本框等。控件的功能如表11-1所示。11.1.3 控件功能(gngnng)與屬性 Edit Text Pop-up MenusActiveX Contro2

4、. 控件屬性每種控件都有一些可以設置的參數(shù)，用于表現(xiàn)控件的外形(wi xn)、功能及效果，即屬性?？丶傩园▽傩悦蛯傩灾担渥饔萌绫?1-2所示。 第3頁/共23頁第四頁，共23頁。11.1.4 界面(jimin)的存儲及運行點擊輸出編輯器界面，工具欄中保存圖標，或者(huzh)選擇菜單“Fiel”“Save as”命令，彈出“Save as”對話框，填寫用戶定義的文件名.(如gui)點擊“保存”按鈕，這時輸出編輯器界面變成名稱為“gui.fig”的窗口，如圖所示， 首頁首頁保存的同時會在當前路徑下自動(zdng)產(chǎn)生兩個文件：一個是“gui. fig”文件，另一個是“gui.m”文件。其

5、中，“gui.fig”文件包含對GUI和GUI組件的完整描述，它也是打開輸出編輯器界面“gui.fig”窗口的文件；“gui.m”文件包含控制GUI的代碼、組件的回調(diào)函數(shù)。 第4頁/共23頁第五頁，共23頁。點擊(din j)運行圖標，顯示結果就是我們所要設計的GUI功能界面，如圖所示。 首頁首頁第5頁/共23頁第六頁，共23頁。11.1.5 回調(diào)函數(shù)回調(diào)函數(shù)(hnsh) 實現(xiàn)GUI的基本(jbn)機制是對控件的Callback（回調(diào)函數(shù)）屬性編程，當在設計界面上選中一個控件后，選擇菜單欄中的“View”“View Callbacks”命令，或點擊鼠標右鍵，從彈出的活動菜單選擇“View Ca

6、llback”，就會出現(xiàn)“Callbacks”、“CreateFcn”、“DeleteFcn”、“ButtonDownFcn”和“KeyPressFcn”子選單項，這些選項都是用來編寫回調(diào)函數(shù)的 首頁首頁 CallBack：為一般回調(diào)函數(shù)，因不同的控件而不同，譬如，按鈕被按下時發(fā)生(fshng)、下拉框改變值時發(fā)生(fshng)、sliderbar 拖動時發(fā)生(fshng)等等。大多數(shù)MATLAB程序代碼都在這里編寫，它實現(xiàn)諸多功能。 CreateFcn：是在控件對象創(chuàng)建的時候發(fā)生(fshng)(一般為初始化樣式，顏色，初始值等)。 DeleteFcn：是在空間對象被清除的時候發(fā)生(fshng

7、)。 ButtonDownFcn：為鼠標點擊事件的回調(diào)函數(shù)。 KeyPressFcn：為按鍵事件的回調(diào)函數(shù)。第6頁/共23頁第七頁，共23頁。11.2 GUI的創(chuàng)建(chungjin)創(chuàng)建創(chuàng)建GUIGUI主要包括設計主要包括設計GUIGUI（界面（界面(jimin)(jimin)布局）、控件屬性設置、回調(diào)函數(shù)編寫布局）、控件屬性設置、回調(diào)函數(shù)編寫和保存運行等步驟。下面以簡單四則運算器界面和保存運行等步驟。下面以簡單四則運算器界面(jimin)(jimin)為例，說明用為例，說明用GUIDEGUIDE創(chuàng)建創(chuàng)建GUIGUI的全過程。的全過程。 首頁首頁1打開輸出編輯器點擊MATLAB主界面工具欄G

8、UIDE圖標，選擇(xunz)空模板“Blank GUI”，點擊“OK”，即可打開GUIDE的輸出編輯器設計界面“untitled.fig”。 2界面布局添加需要的控件擺放到輸出編輯器添加需要的控件擺放到輸出編輯器“untitled.figuntitled.fig”中合適的位置，對多個同樣的控件，為擺放中合適的位置，對多個同樣的控件，為擺放整齊、選擇等間距，可以打開工具欄中的排列整齊、選擇等間距，可以打開工具欄中的排列“Align ObjectsAlign Objects”圖標，進行各種方式處理。圖標，進行各種方式處理。并可用鼠標選中右下角的版面大小控制句柄來縮放版面。并可用鼠標選中右下角的版

9、面大小控制句柄來縮放版面。第7頁/共23頁第八頁，共23頁。選擇4個靜態(tài)文本塊“Static Text”，2個編輯文本塊“Edit Text”，4個按鈕“Pushbutton按鈕”，分別用鼠標拖到“untitled.fig”窗口中，其擺放(bi fn)位置如圖所示。 首頁首頁第8頁/共23頁第九頁，共23頁。3編輯(binj)控件的屬性利用屬性查看器（Property Inspector），設置各個控件的參數(shù)。首頁首頁4存儲GUIDE輸出編輯器界面點擊菜單欄中的保存(bocn)圖標，在“Save as”對話框中填寫文件名“yunsuanqi”，單擊“保存(bocn)”按鈕，則圖的界面最上角的名

10、稱變?yōu)椤皔unsuanqi.fig”。此時在當前目錄下，MATLAB將自動生成“yunsuanqi.m”和“yunsuanqi.fig”兩個文件。5編寫GUI回調(diào)函數(shù)(hnsh)（Callback）代碼第9頁/共23頁第十頁，共23頁。6運行結果產(chǎn)生GUI功能界面(jimin)點擊文件“yunsuanqir.m”工具欄運行按鈕，或點擊名稱為“yunsuanqi.fig”界面(jimin)中工具欄運行按鈕，運行結果產(chǎn)生的具有操作功能的GU I界面(jimin)，如圖所示。 首頁首頁若在圖中第一個編輯文本框中填寫450，第二個編輯文本框中填寫567，點擊“加法”按鈕，則立即顯示(xinsh)出結果

11、為1017，如圖所示。第10頁/共23頁第十一頁，共23頁。11.3 GUI菜單菜單(ci dn)設計設計 利用利用GUIDEGUIDE輸出編輯器工具欄中的菜單圖標創(chuàng)建帶有輸出編輯器工具欄中的菜單圖標創(chuàng)建帶有“菜單欄菜單欄”的的GUIGUI界面的界面的方法方法(fngf)(fngf)如下：如下：首頁首頁（1 1）選擇）選擇(xunz)(xunz)空模板空模板“Blank GUI”“Blank GUI”，點擊，點擊“OK”“OK”，即可打開，即可打開GUIDEGUIDE輸出編輯器，如圖所示。輸出編輯器，如圖所示。 第11頁/共23頁第十二頁，共23頁。（2 2）點擊工具欄上的菜單編輯器圖標，打開

12、）點擊工具欄上的菜單編輯器圖標，打開(d ki)(d ki)菜單編輯器菜單編輯器“Menu “Menu Editor”Editor”窗口，如圖所示，并在圖中我們給出了工具欄圖標的功能。窗口，如圖所示，并在圖中我們給出了工具欄圖標的功能。首頁首頁第12頁/共23頁第十三頁，共23頁。(3(3）在界面）在界面“Menu Bar”“Menu Bar”選項卡中，點擊選項卡中，點擊(din j)“(din j)“ToTo add a add a menu,”menu,”處，或者工具欄中的圖標，則窗口中出現(xiàn)菜單圖標處，或者工具欄中的圖標，則窗口中出現(xiàn)菜單圖標“Untitled 1”“Untitled 1”

13、，再點擊，再點擊(din j)(din j)圖標圖標“Untitled 1”“Untitled 1”，則顯，則顯示帶有菜單屬性示帶有菜單屬性“Menu Properties”“Menu Properties”的界面，如圖所示。的界面，如圖所示。首頁首頁（4 4）將圖中）將圖中“Label”“Label”選項的菜單選項的菜單(ci dn)(ci dn)名名“Untitled 1”“Untitled 1”改為改為“文件文件”，“Tag”“Tag”欄選項改為欄選項改為“m_file”“m_file”，“Accelerator: Ctrl+”“Accelerator: Ctrl+”欄選項改為欄選項改為

14、“F”“F”，其它選項默認，設置如圖所示。其它選項默認，設置如圖所示。 第13頁/共23頁第十四頁，共23頁。（5 5）在新建的）在新建的“文件文件(wnjin)”(wnjin)”菜單下添加子菜單項：菜單下添加子菜單項：“打開打開”、“保存保存”和和“退出退出”，且設置其屬性，且設置其屬性， 首頁首頁（6 6）繼續(xù)添加其它菜單項。）繼續(xù)添加其它菜單項。點擊點擊“Menu Editor”“Menu Editor”界面界面(jimin)(jimin)中工具欄新建圖標，依次添加中工具欄新建圖標，依次添加“編輯編輯”、“查看查看”、“工工具具”、“幫助幫助”菜單項，并設定各自菜單項，并設定各自“Tag

15、”“Tag”選項（譬如選項（譬如“幫助幫助”中的中的“Tag”“Tag”選項設為選項設為“m_help”“m_help”，其余類似），如圖所示。當編輯完所有菜單項以后，單擊圖中的，其余類似），如圖所示。當編輯完所有菜單項以后，單擊圖中的“OK”“OK”按鈕。按鈕。 第14頁/共23頁第十五頁，共23頁。（7）保存界面(jimin)并運行界面(jimin)名稱變?yōu)椤癵ui1.fig”，如圖所示。 首頁首頁 （8）改寫界面名稱（用中文表示）。在輸出編輯器界面中，單擊鼠標右鍵，選擇(xunz)“Property Inspector”，即可打開界面屬性窗口“Inspector”。對窗口的“Name”（

16、標題）屬性改為“圖形界面1”，如圖所示。第15頁/共23頁第十六頁，共23頁。首頁首頁（10）通過菜單編輯窗口上的按鈕“View”，可以查看各菜單項的回調(diào)函數(shù)，也就是Callback 函數(shù)。也可以在M文件gui1.m 中找到回調(diào)函數(shù)，比如“打開”的“Tag” 屬性是“m_file_open”，那么它對應的Callback 函數(shù)的名字就是“m_file_open_Callback”。在回調(diào)函數(shù)程序的下方編寫代碼，就可激活(j hu)該菜單項的功能。第16頁/共23頁第十七頁，共23頁。11.4 對話框設計對話框設計(shj) 1信息對話框（msgbox）格式 msgbox(Message,Tit

17、le,Icon)說明(shumng) Message：顯示的信息（字符串）；Title：對話框標題（字符串）；Icon：對話框圖標，可選擇none（默認值，無圖標）、error（錯誤提示圖標）、help（幫助提示圖標）、warn（警告提示圖標）和custom（用戶自創(chuàng)圖標）。首頁首頁2錯誤對話框（errordlg）格式 errordlg(ErrorString,DlgName)說明(shumng) ErrorString：顯示錯誤信息的字符串；DlgName：對話框標題（字符串）。 第17頁/共23頁第十八頁，共23頁。3警告對話框（warndlg）格式 warndlg(WarnString,

18、DlgName )說明(shumng) WarnString：顯示警告信息的字符串；DlgName：對話框標題（字符串）首頁首頁4幫助對話框（helpdlg）格式(g shi) helpdlg(HelpString,DlgName)說明 HelpString：顯示幫助信息的字符串；DlgName：對話框標題（字符串）。5進度條對話框（waitbar）格式 waitbar(X, title)說明 X為進度條的比例(bl)長度，其值必須在0都1之間；title：顯示提示信息 第18頁/共23頁第十九頁，共23頁。6輸入對話框（inputdlg）格式 inputdlg(Prompt,Title,Nu

19、mlines,DefAns,Resize)說明 Prompt：顯示提示信息（單元數(shù)組）；Title：對話框標題（字符串）；Numlines：指定輸入數(shù)據(jù)的行數(shù)；DefAns：是一單元數(shù)組，存儲每個輸入數(shù)據(jù)的默認值，元素個數(shù)必須與Prompt 所定義的輸入窗口數(shù)相同，所有元素必須是字符串；Resize：設定(sh dn)對話框尺寸是否可調(diào)節(jié)（on/off）。首頁首頁7列表對話框（listdlg）格式 sel,ok=listdlg (ListString,S)說明 ListString設置備選項，備選項S為字符串或者字符串數(shù)組。輸入?yún)?shù)項還可以添加其它成對的屬性(shxng)及屬性(shxng)值

20、。如：Name設置對話框標題；PromptString設置提示字符；SelectionMode設置是否多選，single為單選，multiple為多選。文件選擇成功后，單擊“OK”按鈕，系統(tǒng)將選擇好的文件序號存入相應向量sel，參數(shù)ok的值為1。8問題對話框（questdlg）格式 questdlg(Question,Title ) %默認值，回答按鈕有三個：Yes、No、Cancelquestdlg(Question,Title,Btn1,Btn2,Btn3,Default) %自定義回答按鈕說明(shumng) Question：顯示的問題信息（字符串）；Title：對話框標題（字符串）。

21、 第19頁/共23頁第二十頁，共23頁。9 打開文件對話框（uigetfile）格式 FileName,PathName,FilterIndex = uigetfile(FilterSpec,Title)FileName,PathName,FilterIndex = uigetfile(FilterSpec,Title,File)說明 FilterSpec：文件類型設置；Title：對話框標題(biot)；File：默認指向的文件名；FileName：返回的文件名；PathName：返回的文件的路徑名；FilterIndex：選擇的文件類型。 首頁首頁10文件保存(bocn)對話框（uiputfile）格式 FileNa