MATLAB App Designer教程連載1：如何使用App Designer進行的簡單的GUI設計

01-28

All comments and opinions expressed on Zhihu are mine alone and do not necessarily reflect those of my employers, past or present.

本文內容所有內容僅代表本人觀點，和Mathworks無關

使用App Designer的條件是什麼

Mathworks在R2016a中正式推出了GUIDE的替代產品:AppDesigner, 這是在MATLAB圖形系統轉向使用面向對象系統之後(R2014b)，一個重要的後續產品。它旨在順應Web的潮流,幫助用戶利用新的圖形系統方便的設計更加美觀的GUI。要使用App Designer，需要最新的MATLAB R2016a；或者已經安裝了R2014b到R2015b之間的任一版本，可以從Mathworks的File Exchange處下載App Designer的安裝包進行安裝：

http://www.mathworks.com/matlabcentral/fileexchange/48142-app-designern

啟動App Designer設計台，只需要在命令行中輸入appdesigner：

>> appdesignern

App Designer有什麼主要的特點

筆者看來App Designer有如下這麼幾個主要的特點：

最明顯的特點：自動生成的代碼使用了面向對象的語法。
最大的特點：增加了和工業應用相關的控制項：比如儀錶盤(Gauge)，旋鈕(Knob)，開關(Switch)，指示燈(Lamp)。
App Designer採用了現代並且友好的界面，用戶更容易自己學習和探索。

如何使用AppDesigner進行簡單的GUI布局

在《MATLAB面向對象編程：從入門到設計模式》第7.1節中，有一個賬戶存款，提款界面的例子，界面簡圖如下：

在書中7.1節，我們先採用了GUIDE來設計這個界面，然後在接下來的7.2，7.3節中，我們進一步循序漸進的介紹了如何用程序的方式，和面向對象的方式來重新設計這個存款提款界面。本篇教程還是利用同樣提款機界面的例子，同樣的順序，先利用App Designer來設計這個界面，然後再介紹如何通過編程的方式實現。

首先我們在MATLAB中打開App Designer：

>> appdesignern

模仿書中的例子，從設計台左邊的Component Library（控制項欄）中拖拽兩個Edit Field(Numeric)和Button構成基本界面，如下所示：

App Designer在布置畫布控制項上設計的非常友好，如果用滑鼠挪動這些控制項，畫布會上出現輔助線幫助對齊控制項。

調整完大小，間距之後，新的GUI看上去和用GUIDE設計的類似。

值得注意的是 ，如果點選多個控制項，App Designer還可以幫助自動排布它們在橫向和縱向的分布等等, 這個功能是筆者認為App Designer最友好和現代的功能之一！

如何修改App Designer控制項的名字

點擊CodeView,可以看到App Designer為這個界面自動生成的面向對象的代碼，整段代碼中有些部分是灰色的，這表示它們不可以在編輯器中直接被修改，而要通過App Designer提供的互動方式去修改，本節中我們先尊重App Designer的這樣的工作流程，之後我們將會介紹直接修改類定義的方法。

在Code View中，我們看到，兩個Button分別是類的兩個屬性，名字叫做Button,和Button2，這樣命名屬性對程序邏輯的理解沒有幫助，最好把它們的名字修改得有實際的意義：

可以點擊右欄Component Browser中的app.Button和app.Button2來鍵入新的屬性的名字， 注意： 左邊代碼中的屬性名稱也將做自動的 修改，(儘管這些屬性的代碼是灰色的)，如圖所示：

該類中另兩個重要的屬性是可編輯的文本/數字框，它們的名字分別是NumericEditField,和NumericEditField2。同樣,這些名字不利於程序的閱讀。我們把它們名字改成ViewBalance,ViewRMB,如圖所示：

如何給App類添加屬性

沿用第7章的MVC的設計思想，我們期望至少能把GUI的視圖和模型分開(儘管目前看來好像多此一舉), 在這個應用中，Model中應該包括賬戶Balance的值，於是我們給類添加一個叫做Balance的屬性，這可以通過點擊Toolstrip中的Editor->Property->Insert Private Property來達到：

注意上圖中，App Designer自動在類定義中插入一段property的代碼,該Property的屬性是Private,即無法從外部訪問和修改Balance。

如何設置GUI控制項的初值

通常在GUI呈現給用戶時，欄目中應該有些初值，這裡我們希望ViewBalance和ViewRMB欄中也能夠顯示初始值，那麼只需修改startupFcn方法就可以了，該方法類似MVC模型裡面各個類的Constructor的綜合，代碼如下:

% Code that executes after component creationnfunction startupFcn(app)n app.Balance = 500;n app.ViewRMB.Value = 0 ;n app.ViewBalance.Value = app.Balance;nendn

即初始餘額500元，初始要操作(提款或者存款)的數目是0，如下圖所示：

如何給控制項添加callback

最後，我們需要給兩個button添加回調函數，點擊Component Browser->app.WithDrawButton->Callbacks->Add ButtonPushedFcn callback,如圖所示:

App Designer會自動幫你在類的定義中插入一個方法，該方法的只有一個參數就是對象本身，名字叫做app, 其實和我們常用的obj是一回事。

WithDrawButton的回調函數如下：

function WithDrawButton_ButtonPushed(app)n value = app.ViewRMB.Value ; % 獲得界面上的RMB欄的值n app.Balance = app.Balance - value; % 取款做減法n app.ViewBalance.Value = app.Balance; % 更新界面上的Balance欄的值nendn

DepositButton的callback類似

function DepositButton_ButtonPushed(app)n value = app.ViewRMB.Value ; n app.Balance = app.Balance + value;n app.ViewBalance.Value = app.Balance;nendn

注意，這裡我們特意把View中的Balance的顯示和Model中的實際的Balance值分開，這個思想來自於書中第7章的MVC模型，如果想要設計大型可靠的工程項目，設計思想是必不可少的。

最後點擊工具欄右上的RUN按鈕，測試一下這個簡單的程序，初值500，存款50,賬戶餘額變成550,提款200,賬戶餘額變成350.