MATLAB
首发于MATLAB
MATLAB App Designer教程连载1:如何使用App Designer进行的简单的GUI设计

MATLAB App Designer教程连载1:如何使用App Designer进行的简单的GUI设计

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-designer

启动App Designer设计台,只需要在命令行中输入appdesigner:


>> appdesigner

App Designer有什么主要的特点


笔者看来App Designer有如下这么几个主要的特点:

  1. 最明显的特点:自动生成的代码使用了面向对象的语法。
  2. 最大的特点:增加了和工业应用相关的控件:比如仪表盘(Gauge),旋钮(Knob),开关(Switch),指示灯(Lamp)。
  3. App Designer采用了现代并且友好的界面,用户更容易自己学习和探索。



如何使用AppDesigner进行简单的GUI布局


在《MATLAB面向对象编程:从入门到设计模式》第7.1节中,有一个账户存款,提款界面的例子,界面简图如下:


在书中7.1节,我们先采用了GUIDE来设计这个界面,然后在接下来的7.2,7.3节中,我们进一步循序渐进的介绍了如何用程序的方式,和面向对象的方式来重新设计这个存款提款界面。本篇教程还是利用同样提款机界面的例子,同样的顺序,先利用App Designer来设计这个界面,然后再介绍如何通过编程的方式实现。

首先我们在MATLAB中打开App Designer:


>> appdesigner

模仿书中的例子,从设计台左边的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 creation
function startupFcn(app)
    app.Balance = 500;
    app.ViewRMB.Value = 0 ;
    app.ViewBalance.Value = app.Balance;
end

即初始余额500元,初始要操作(提款或者存款)的数目是0,如下图所示:



如何给控件添加callback


最后,我们需要给两个button添加回调函数,点击Component Browser->app.WithDrawButton->Callbacks->Add ButtonPushedFcn callback,如图所示:


App Designer会自动帮你在类的定义中插入一个方法,该方法的只有一个参数就是对象本身,名字叫做app, 其实和我们常用的obj是一回事。

WithDrawButton的回调函数如下:


function WithDrawButton_ButtonPushed(app)
    value = app.ViewRMB.Value ;           % 获得界面上的RMB栏的值
    app.Balance = app.Balance - value;    % 取款做减法
    app.ViewBalance.Value = app.Balance;  % 更新界面上的Balance栏的值
end

DepositButton的callback类似


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

注意,这里我们特意把View中的Balance的显示和Model中的实际的Balance值分开,这个思想来自于书中第7章的MVC模型,如果想要设计大型可靠的工程项目,设计思想是必不可少的。

最后点击工具栏右上的RUN按钮,测试一下这个简单的程序,初值500,存款50,账户余额变成550,提款200,账户余额变成350.

作者简介:

MathWorks开发部MATLAB架构C++高级软件工程师。计算物理学博士,研究方向为电子结构计算、密度泛函算法开发;计算机硕士,研究方向为图像处理。2004年,开始使用MATLAB,在科研编程中遇到了开发大型程序难以维护的困难,花了很多时间用于改进程序但效果总不尽如人意。2009年,开始使用MATLAB面向对象编程,发现工程进度被迅速加快,于是萌生了写一本介绍MATLAB 面向对象编程书的念头。2011年,在美国取得博士学位之后入职MathWorks,从理科科研工作者和多年的MATLAB爱好者,成为一名MATLAB语言的设计开发和实现的软件工程师。2016年,作者在MATLAB中文论坛开辟了技术专栏,和大家分享最新的行业应用技术和MATLAB编程理念,旨在推动软件工程中的现代手段在MATLAB科学工程计算项目中的使用,帮助科学家和工程师们更有效地解决复杂的科研问题。《MATLAB面向对象编程:从入门到设计模式(第二版)》 凝结了作者多年的科研和工作经验以及对MATLAB语言的理解,希望能对各种规模的科学工程计算项目的MATLAB使用者有所启发。

编辑于 2018-03-01

文章被以下专栏收录