公號(hào)【新能源動(dòng)力電池與BMS】。
“MATLAB App Designer面向?qū)ο缶幊?span id="u2xobl6" class="wpcom_tag_link">方法及特點(diǎn)，應(yīng)用案例介紹”
什么是MATLAB App Designer?
首先，App Designer是Mathworks 2016a版本中正式推出用于替換GUIDE的產(chǎn)品。這個(gè)產(chǎn)品的推出也是順應(yīng)Web的潮流，可以幫助用戶利用新的圖形系統(tǒng)，更加方便的設(shè)計(jì)出更美觀的GUI。
調(diào)用App Designer方法有兩種，一種在命令行輸入：appdesigner即可；另外一種，在MATLAB主界面菜單欄中選擇APP菜單——設(shè)計(jì)APP。
打開(kāi)后進(jìn)入導(dǎo)航頁(yè)
GUI設(shè)計(jì)
新建空白App后，可以看到組件庫(kù)有很多的控件，這些控件可以滿足常用需求。而且簡(jiǎn)單易學(xué)。
- GUI布局
還是舉一個(gè)實(shí)例來(lái)說(shuō)明。我們參考《MATLAB面向?qū)ο缶幊獭愤@本書(shū)里的一個(gè)實(shí)例。這個(gè)實(shí)例是一個(gè)存款、取款的操作界面。我們從組件庫(kù)分別拖拽對(duì)應(yīng)顏色的控件到畫(huà)布中去。
畫(huà)布設(shè)計(jì)也非常友好，選擇多個(gè)控件，可以自動(dòng)對(duì)齊。
- 控件名稱修改
直接雙擊控件名稱即可修改名稱。但選擇控件時(shí)，同時(shí)在右邊組件瀏覽器中會(huì)同步選擇到“組件屬性”，這個(gè)屬性名稱是代碼中作為屬性定義的，可以在組件瀏覽器中修改為容易理解的屬性名稱，便于代碼的邏輯理解。
App Designer代碼特點(diǎn)
- 代碼界面
點(diǎn)開(kāi)代碼視圖，即可見(jiàn)源代碼。右邊組件瀏覽器中，控件對(duì)應(yīng)屬性在代碼中可見(jiàn)定為公有屬性，但這部分為灰色內(nèi)容，不可編輯。不過(guò)可以根據(jù)上面的“控件內(nèi)容修改”所說(shuō)方法，修改屬性名稱。
- 屬性的概念
有兩種屬性，一種為公有屬性，另外一種為私有屬性。
公有屬性，可以簡(jiǎn)單類(lèi)比為具有C代碼中的全局變量的特點(diǎn)，可以用來(lái)傳遞和共享App內(nèi)部和外部的數(shù)據(jù)，比如兩個(gè)App之間的數(shù)據(jù)傳遞；
相反，私有屬性只能在App內(nèi)部傳遞或共享數(shù)據(jù)，類(lèi)似具有C代碼局部變量的特點(diǎn)。
如果要自定義添加屬性，可以在左上欄（下圖示）中點(diǎn)擊屬性添加，類(lèi)似于我們要添加變量。
我們依次在組件瀏覽器中修改為便于理解的屬性名稱。
通過(guò)代碼教你一步步實(shí)現(xiàn)GUI功能
通過(guò)上面的介紹，我們已經(jīng)了解App Designer的GUI如何設(shè)計(jì)、代碼的特點(diǎn)，并且已經(jīng)設(shè)計(jì)好了GUI的控件布局。接下來(lái)，我們就要考慮如何一步步實(shí)現(xiàn)GUI的具體功能了。還是以前面存款、取款操作界面的GUI來(lái)做實(shí)例介紹。
- 新增屬性
先添加一個(gè)私有屬性Balance，便于后面的編程體現(xiàn)MVC分層思想，將模型與數(shù)據(jù)分開(kāi)。
- GUI控件初值
當(dāng)用戶第一次打開(kāi)你設(shè)計(jì)的App時(shí)，你希望顯示控件欄會(huì)有些初值。比如，賬戶余額：3000元。
這個(gè)功能是通過(guò)startupFcn函數(shù)來(lái)實(shí)現(xiàn)。賦值的方法，采用了MVC模型分層思想。
- 回調(diào)函數(shù)callback的添加
“取款”、“存款”兩個(gè)按鍵點(diǎn)擊，顯示界面的控件會(huì)有響應(yīng)，該功能通過(guò)添加回調(diào)函數(shù)實(shí)現(xiàn)。
下圖選擇回調(diào)函數(shù)ButtonPushedFcn。看函數(shù)名稱可知該函數(shù)是用于處理按鍵按下后需要處理的事項(xiàng)。
WithDrawButton回調(diào)函數(shù)內(nèi)容如下：
DepositButton回調(diào)函數(shù)內(nèi)容如下：
以上兩個(gè)回調(diào)函數(shù)的代碼體現(xiàn)了MVC分層思想，將View中的Balance的顯示和Model中的實(shí)際的Balance值分開(kāi)。這個(gè)設(shè)計(jì)思想在大型可靠的項(xiàng)目中，一定是必不可少的。
- 程序運(yùn)行與測(cè)試
最后點(diǎn)擊工具欄中的RUN按鈕，運(yùn)行程序。初值3000，存款100，點(diǎn)擊存款，賬戶余額變?yōu)?100；取款200，點(diǎn)擊取款按鈕，賬戶余額變成2900。實(shí)現(xiàn)了基本設(shè)計(jì)功能。
App封裝
設(shè)計(jì)好的App,有時(shí)候需要安裝部署到?jīng)]有MATLAB的電腦上運(yùn)行。所以我們需要打包成EXE格式的安裝包，具體的打包方法我在另一篇文章有詳細(xì)說(shuō)明，可以參考MATLAB App Designer如何打包EXE安裝程序。
總結(jié)
本文初步介紹了MATLAB App Designer面向?qū)ο缶幊痰奶攸c(diǎn)，概括了GUI設(shè)計(jì)布局的方法、代碼特點(diǎn)，并舉例說(shuō)明代碼實(shí)現(xiàn)方法，大家完全可以按照我描述的步驟一步步實(shí)現(xiàn)這個(gè)小例子，便于對(duì)App Designer初步的了解。
最后，如果大家需要這個(gè)小例子的源代碼，歡迎留言，免費(fèi)送上鏈接。
