12/31/2006

第十三章 圖形介面

(編譯及圖示摘自mathworks.com)

什麼是圖形介面 GUI?

圖形介面(GUI)是藉圖形展示裝置、指令元件或程式執行結果,使用者因此可以在交談的模式下執行特定的軟體。因此,利用 GUI介面,可以不經由敘述檔或輸入指令群,只要利用滑鼠選擇參數及執行指令即可。在這種情況下,使用者不必知道程式的內容或其執行的方式,可立即獲得所要的答案。

圖形介面GUI元件包括選單、工具欄、按鈕、點圈鈕、列單盒、滑尺等等。在MATLAB中,亦可利用 GUI 顯示表格式的資料或圖形,亦可設為群組件使用。

下面為一個簡單之圖形介面之示範:



在此圖形介面中,包括下列組件:
  • 一組圖形座標元件。
  • 一組下拉式選單,例如對應於三個函數peaks, membrane及 sinc之選擇。
  • 固定文字元件以標明跳出式選單。
  • 三個按鈕可以提供不同繪圖功能,包括:表面圖 surface、表面網線圖mesh及等高線圖 contour等。
這個程式儲存於simple_gui.m檔案中,每次執行時即可出現上述之圖面。再利用滑鼠進行點選即可得到不同的結果。但是,如何做才能達到這等境界呢?

GUI如何工作?

在GUI介面中,每一元件均與一或數個使用者自定的函數或程式相關,此相關之程序稱為回叫程式(callbacks)。每一個回叫程式可以經由按鈕觸動、滑鼠點入、選單項目選定或游標滑過特定元件等動作後產生的事件下執行。這些回叫程式都要經過 GUI之程式設計者加以事先規劃。

前節所述之GUI中,利用跳出式選單可以選定資料組合,然後按鍵進入執行繪圖型式。在按下特定按鈕時即會依其內容執行相對應於該按鈕之回叫程式,執行後即會繪出所期盼的圖形。

這種程式設計的過程通常屬事件驅型。亦即當某特定事件發生時(例如按下按鈕、更換數據等等),則該事件立即形成。利用這事件之發生,再觸發對應程式之執行。這些事件通常都是使用者藉GUI介面以交談的形式產生。

在程式執行過程中,回叫程式並無法控制事件發生之順序,亦無法確定何者會被執行。有時甚至另一個回叫在執行期間,另一個回叫程式又被啟動,且同時進行,其情況變得更為複雜。

要從何處起頭呢?


當然首先必須設計一個屬於自己的 GUI介面。但是事先必須決定要做什麼事,而且要使用者怎樣操作。在這些界面之應用元件中,到底要使用那些元件或幾個元件,設計者必須胸有成竹才能順利完成,有時必須先列出相關參考資料,以為備用。

其次,必須決定使用何種技巧去產生新的 GUI介面。還好,MATLAB讓初學者有機會使用GUIDE這個輔助指令進行圖形設計。它的名稱因為前三個字母是 GUI,配合起來稱為GUIDE雖是巧合,但也包含了引導的意義。利用GUIDE可以直接建造自己的GUI介面。其中並提供一些簡化標準對話盒的函數,可以直接引用。其應用存乎一心,但可依經驗、喜好及對GUI功能上之要求而有不同的進境。下面的表中列出幾個可用的元件:







GUITechnique
對話盒MATLAB提供一些標準對話盒之選項,可以產生簡單之函數呼叫,其連結可參考相關輔助。
僅含有數個元件之GUI介面若僅包含一些元件之程式設計較為簡單,每一個元件可以利用單一函數進行呼叫。
略為複雜性之GUI介面可以利用GUIDE指令簡化設計之過程
包括甚多元件之複雜GUI介面,有些甚至必須與其他 GUI介面發生交談者直接撰寫程式以便完全控制所有元件置放之位置,以增加其可複製性。


GUIDE之使用法

GUIDE是MATLAB圖形介面之發展環璄,以簡化GUI介面之製作。利用這些工具可設定圖形位置、大小、屬性及畫面之布置與規劃。

GUI介面之畫面編輯器(Layout Editor)

GUIDE指令中含有畫面編輯器,使用者利用滑鼠選項可以移動預設之 GUI元件,諸如按鈕、文字區、滑標、座標軸等等,也可以置入選單及選單中之文字項目。

編輯器中同時提供GUI介面所需之大小,並修改其外觀及畫面內容,諸如元件之對齊、鍵入順序、階層型選單內容及相關參數之設定等。

GUI圖面經規劃完成後,GUIDE 會自動產生兩個檔案,一為般之 M-檔案,另一為以.fig為附屬之檔案,後者僅能執行,不直接開啟,必須經由guide才能檢視。兩個之名稱相同,可以控制GUI介面之運作。每次執行此檔案時,會將原設計之介面初始化,並令其與對應之 GUI 回叫程式相連,因此只要利用滑鼠選項,產生特定事件,即可執行該程式。同時,此檔案亦可利用M-檔案編輯器進行編輯,並增加或更改回叫程式之內容。

設計 GUI應用例

以前面介紹之simple_qui程式為例,其內之元件可分為下面幾個大類:



其中包括三個按鈕(Surf, Mesh, Contour)、一串靜態文字(Select Data)、一組下拉選單(Peaks, ...)及一個圖軸。開始時,先下guide之指令:

>> guide



待上圖出現後,可以依左邊視窗內之項目選擇,其中之第一項空白GUI為預設值,其餘三項均為示範例。本節將採用空白的編輯視窗,以執行自定的範例。若guide 之視窗已經打開,則可選擇開啟新視窗,最後之畫面編輯視器亦會出現如下:


畫面編輯器之正中央為畫面之所在,可放置所需之元件,其空間大小可以按右下角進行調整。也可以利用圖上緣之View選單(或按滑鼠之右鍵),選擇其對應之屬性檢視表(Property Inspector),以設定此GUI之屬性。屬性檢視表分別儲存許多有關此選單或元件之特性參數,其內容包括視窗之正確之尺寸及顏色等。輸入尺寸時,必須先選擇適當單位。亦即先至Units項下,選擇公分或英寸。然後到Position處更改原點位置(x,y)與窗格之寬度與高度值。記得選定後,必須將單位換為文字(character),否則其他元件對應時不易對齊。


每一元件有一對應之屬性檢視表,只要指向不同元件,表中即會出現屬於該元件之對應值;利用此表可以更改元件之顏色、大小、位置、回叫程式及參數值。在後來增添之元件都有這種對應表之設計,只要指向該元件然後按滑鼠右鍵即可找到對應之屬性檢視表或Property Inspector。

畫面編輯器之左方為諸元件之選項,若要同時出現元件之對應名稱,則可在檔案項下按Preferences,在其元件名稱顯示選項下打勾即可。

增添元件(Add Elements)


要增加一個元件,只要由左邊之元件標示上選取即可。在本例中,要先選擇三個Push Button,可利用滑鼠分別拉到想要置放的大概位置,此時即使不對齊也無所謂。其大小若相同,則可採用拷貝的方式。



其次再依次增加一個靜態文字元件、一組跳出式選單及一組圖形座標等。將其相關位置安排如下圖。此時各元件都事先給一個名稱,但這個名稱可以事後在屬性檢視表中加以更改。


對齊(Align)


三個按鈕位置並不對齊,若要令其對齊在一垂直線上,用手調的也可以,也可使用對齊指令。首先可以將要對齊之三個按鈕選取,再至工具選項中,選擇物件對齊(Align Objects)之指令,即會出現此相關指令之選單如下:



選單中可以選擇元件之間距(20畫素)以及對齊之方式(上下或左右對齊),然後按OK即可。最後之結果會變成非常整齊、美觀如下圖:


屬性檢視表(Property Inspector)

待各元件之相關位置底定後,即可以開始更改各元件之標示名稱及其內所需之參數。前文曾提及,每一元件均有對應之屬性檢視表(Property Inspector),因此先將屬性檢視器叫出,然後用滑鼠指定要更改標示之按鈕,即可顯示其對應之屬性。呼叫屬性檢視表也可由View中或按滑鼠右鍵出現之輔助單中進行選擇,但通常只要呼叫第一次即可,其他元件只要指向改變,屬性表之內容也會隨之改變:


按鈕(Push Bottom)

在GUI畫面中先選定其中一個按鈕,此時若屬性檢視表已出現,其內容即會出現對應於該按鈕之屬性參數。在諸多參數中,先找到string這個屬性,這是元件的外在稱呼,在本例中可先將其內容更改為Surf。此時只要將滑鼠點在檢視器之其他地方,即可觀察其改變。其他按鈕也可依同樣的方式改變其標示名稱,其餘兩按鈕名稱可改為"Mesh"、"Contour"。

跳出式選單(Pop-up Menu)


其次再由GUI畫面先選定Pop-up Menu這個按鈕。同樣在對應之屬性檢視器中,按下String,此時會出現一個String之輸入視窗。此時可將原內容刪去,改輸入Peaks、 Membrane、 Sinc等三項,按下OK結束,此時選單內容即會隨之改變。

靜態文字(Static Texts)


在諸元件中,有時必須在圖版上置放一些文字說明,或在選擇前作提示。這些文字僅能供使用者觀察,不能供其修改或選擇,此元件因此稱為靜態文字元件。這種文字元件在設計過程中仍然可以修改,而且其大小、顏色也可以設定。因此,要更改其內容時,同樣可在GUI畫面中選取該文字元件,在其對應之屬性檢視器中,可直接更改String項下之內容。本例請將其改為"Select Data",作為其下選單之說明。選完後,只要按下OK即可改變內容。

最後之結果如下圖:



儲存檔案

如前所言,將上述畫面存檔時,Guide會產生兩個檔,一為Fig檔,一為M檔。前者屬二位元檔,為內容畫面之說明。後者為附屬名為.m為一般程式檔案,可以利用編輯器查看。此兩檔案必須同時放在一個目錄之下,才能執行。本例以simple_gui為檔名存檔,因此目錄中會有simple_gui.fig及simple_gui.m兩檔案出現。

執行該程式時只要在指令行打入該名稱即可。即:

>> simple_gui

結果如下:


只是目前之內容空洞,點選按鈕時也沒有反應。若要使它具有生命,仍需要繼續後段的程式加入才行。