MATLAB APP设计工具

admin管理员组

文章数量:1530031

文章目录

• 一、 App Designer
• • 1.打开App Designer
  • 2.App Designer窗口
  • • （1）设计视图
    • （2）代码视图
• 二、App组件
• • 1.组件的种类及作用
  • 2.组件的属性
  • • Enable属性
    • Value 属性
    • Limits 属性
    • Position属性
• 三、类的定义
• • 1.App类的基本结构
  • 2.访问权限
• 四、App设计工具的设计实例
• • 1.打开App Designer，添加组件
  • 2.利用属性面板设置组件对象的属性
  • 3.编写代码，实现组件功能
  • • （1）编写自定义函数
    • （2）编写组件对象回调函数
  • 4.运行App
  • 5.打包App应用
• 思考与实验
• 我遇到的问题

转载于《MATLAB基础与应用教程（第2版）》蔡旭晖 刘卫国 蔡立燕 | 微信读书 链接

App 设计工具是MATLAB R2016a推出的应用程序设计工具，和GUIDE一样，它也是一个可视化集成设计环境。除了提供和 GUIDE 类似的标准用户界面组件，还提供了和工业应用相关的组件，如仪表盘、旋钮、开关、指示灯等。使用App设计工具可以开发出操作界面友好、可以共享的MATLAB应用模块。

App 的用户界面的构成要素是组件（Component），它是指可重复使用并且可以和其他对象进行交互的对象，是封装了一个或多个实体程序模块的实体，可以复用。GUIDE设计的用户界面的构成要素是控件，控件是一种特殊的组件，仅用于可视化呈现数据。

一、 App Designer

1.打开App Designer

打开App Designer有两种方法：

• 在 MATLAB 桌面中，选择“主页”选项卡，单击工具栏的“新建”按钮，从弹出的命令列表中选择“App”下的命令项“App设计工具”，打开App Designer。
• 在MATLAB命令行窗口输入“appdesigner”命令，打开App Designer。

2.App Designer窗口

如图10.10所示，App Designer窗口由快速访问工具栏、功能区和App编辑器组成。

功能区提供了操作文件、打包程序、运行程序、调整用户界面布局、编辑调试程序的工具。功能区的工具栏与快速访问工具栏中的“运行”按钮都可运行当前App。
App Designer用于用户界面设计和代码编辑，用户界面的设计布局和功能的实现代码都存放在同一个.mlapp文件中。App编辑器包括设计视图和代码视图，选择不同的视图，编辑器窗口的内容也不同。

（1）设计视图

设计视图用于编辑用户界面。选择设计视图时，设计器窗口左边是组件库面板，右边是组件浏览器和属性面板，中间区域是用户界面设计区，称为画布。
组件库提供了构建应用程序用户界面的组件模板，如坐标轴、按钮、仪表盘等。组件浏览器用于查看界面的组织架构，属性面板用于查看和设置组件的外观特性。
设计视图功能区的第2个选项卡是“画布”。“画布”选项卡中的按钮用于修改用户界面的布局，包括对齐对象、排列对象、调整间距、改变视图显示模式等工具。

（2）代码视图

代码视图用于编辑、调试、分析代码。选择代码视图时，设计器窗口左边是代码浏览器和App的布局面板，右边是组件浏览器和属性检查器，中间区域是代码编辑区。
代码浏览器用于查看和增删图形窗口和控件对象的回调、自定义函数及应用程序的属性，回调定义对象怎样处理信息并响应某事件，属性用于存储回调和自定义函数间共享的数据。代码视图的属性检查器用于查看和设置组件的值、值域、是否可见、是否可用等控制属性。
代码视图功能区的第2个选项卡是“编辑器”。“编辑器”选项卡有7组按钮，“插入”组按钮用于在代码中插入回调、自定义函数和属性，“导航”组按钮用于在.mlapp文件中快速定位和查找内容，“编辑”组按钮用于增删注释、编辑代码格式。

二、App组件

组件对象是构成应用程序用户界面的基本元素，下面介绍这些组件。

1.组件的种类及作用

在MATLAB 2017b中，App Designer将组件按功能分成4类。

• 常用组件：与 GUIDE 中功能相同、外观相似的组件，包括坐标区、按钮、列表框、滑块等。GUIDE 中的“可编辑文本”控件在 App 组件库中分成了分别用于输入数值和文本的两种“编辑字段”组件。
• 容器类组件：用于将界面上的元素按功能进行分组，包括“面板”和“选项卡组”组件。
• 图窗工具：用于建立用户界面的菜单，包括“菜单栏”组件。
• 仪器类组件：用于模拟实际电子设备的操作平台和操作方法，如仪表、旋钮、开关等。
  组件对象可以在设计视图中用组件库中的组件来生成，也可以在代码中调用App组件函数（如uiaxes函数、uibutton函数等）来创建。组件对象所属图形窗口是用uifigure函数来创建的，与在GUIDE中建立的传统图形窗口不同。

2.组件的属性

组件对象与控件对象相比，属性较少，常见属性如下。

Enable属性

用于控制组件对象是否可用，取值是’On’（默认值）或’Off '。

Value 属性

用于获取和设置组件对象的当前值。对于不同类型的组件对象，其意义和可取值是不同的。

● 对于数值编辑字段、滑块、微调器、仪表、旋钮对象，Value属性值是数；对于文本编辑字段、分段旋钮对象，Value属性值是是字符串。
● 对于下拉框、列表框对象，Value属性值是选中的列表项的值。
● 对于复选框、单选按钮、状态按钮对象，当对象处于选中状态时，Value属性值是true；当对象处于未选中状态时，Value属性值是false。
● 对于开关对象，当对象位于"On"档位时，Value 属性值是字符串’On’； 当对象位于"Off"档位时，Value属性值是字符串’Off’。

Limits 属性

用于获取和设置滑块、微调器、仪表、旋钮等组件对象的值域。属性值是一个二元向量[Lmin,Lmax],Lmin用于指定组件对象的最小值，Lmax用于指定组件对象的最大值。

Position属性

用于定义组件对象在界面中的位置和大小，属性值是一个四元向量[x,y,w,h]。x和y分别为组件对象左下角相对于父对象的x、y坐标，w和h分别为组件对象的宽度和高度。

三、类的定义

用App Designer设计的应用程序，采用面向对象设计模式，声明对象、定义函数、设置属性和共享数据都封装在一个类中，一个.mlapp 文件就是一个类的定义。
数据变成了对象的属性（properties），函数变成了对象的方法（methods）。

1.App类的基本结构

App类的基本结构如下：

classdef　类名 <matlab.apps.AppBase
　　properties(Access=public)
　　　　……
　　end
　　methods(Access=private)
　　　　　function 函数1（app,event）
　　　　　　……
　　　　　end
　　　　　function 函数2（app）
　　　　　　……
　　　　　end
　　　end
end

其中，classdef是类的关键字，类名的命名规则与变量的命名规则相同。后面的“<”引导的一串字符表示该类继承于MATLAB的Apps类的子类AppBase。properties段是属性的定义，主要包含属性声明代码。methods段是方法的定义，由若干函数组成。
App设计工具自动生成一些函数框架。控件对象的回调函数有两个参数，其他函数则大多只有一个参数app。参数app存储了界面中各个成员的数据，event存储事件数据。

2.访问权限

存取数据和调用函数称为访问对象成员。对成员的访问有两种权限限定，即私有的（Private）和公共的（Public）。私有成员只允许在本界面中访问，公共成员则可用于与 App 的其他类共享数据。
在.mlapp文件中，属性的声明、界面的启动函数startupFcn、建立界面组件的函数createComponents，以及其他回调函数，默认是私有的。

四、App设计工具的设计实例

下面通过实例，说明App设计工具的具体使用方法。
【例】 生成一个用于观察视点仰角和坐标轴着色（投影）方式对三维图形显示效果影响的应用程序，界面如下图所示。界面右上部的列表用于选择绘图函数，中间的旋钮用于设置视点，右下部的分段旋钮用于设置坐标轴着色方式。

操作步骤如下。

1.打开App Designer，添加组件

在App Designer窗口左部组件库中选择“坐标区”组件[插图]，将其拖曳至设计区，调整好大小和位置。再添加一个列表框、一个切换按钮组、两个旋钮、一个跷板开关和一个分挡旋钮，然后按下图调整组件的位置和大小。
将控件对象重新命名。在组件浏览器中选中旋钮对象Knob，然后按F2键，将旋钮对象Knob更名为 Knob_az；或者右键单击旋钮对象，从快捷菜单中选择“重命名”命令项，进行修改。按同样方式，将旋钮对象Knob2更名为Knob_el，将分段旋钮对象Knob3更名为Knob_shading，将切换按钮组 ButtonGroup 中的按钮对象 Button 更名为 surfButton，将按钮对象 Button2更名为meshButton，将按钮对象Button3更名为contour3Button。
单击工具栏中的“保存”按钮，将设计的图形界面保存为．mlapp 文件。例如，将其存为appdemo0.mlapp。

2.利用属性面板设置组件对象的属性

在设计视图的设计区依次选择各个组件对象，在对应的属性面板中按下表设置组件对象的属性。

3.编写代码，实现组件功能

（1）编写自定义函数

编写用于绘制图形的updateplot函数和调整视点的updateview函数。
① updateplot函数
切换到App Designer的代码视图，选择功能区的“编辑器“选项卡，单击工具栏中的“添加函数”按钮，这时，在代码中增加了一个私有函数框架，结构如下：

function results=func1(app)
end

也可以在App Designer的代码浏览器选“函数”选项卡，单击“搜索”栏右端的“添加函数”按钮，添加一个私有函数框架。若需要添加公共函数，则单击“添加函数”按钮的展开箭头，从展开的列表中选择“公共函数”。
将上述函数的名称 func1更改为 updateplot。由于不需要返回值，删去函数头中的字符串“results =”。updateplot函数用于绘制图形，在updateplot函数体加入以下代码：

%根据在列表框中的选择，确定绘图数据
switch app.ListBox.Value
　　case 'Sinc'
　　　[x,y]=meshgrid(-8:0.3:8);
　　　r=sqrt(x.^2+y.^2);
　　　z=sin(r)./(r+eps);
　　case 'Peaks'
　　　[x,y,z]=peaks;
　　case 'Sphere'
　　　[x,y,z]=sphere;
end
%根据在切换按钮组中按下的按钮，确定绘图方法
switch app.ButtonGroup.SelectedObject
　　case app.surfButton
　　　surf(app.UIAxes,x,y,z)
　　　app.Knob_shading.Enable='On';
　　case app.meshButton
　　　mesh(app.UIAxes,x,y,z)
　　　app.Knob_shading.Enable='Off';
　　case app.contour3Button
　　　contour3(app.UIAxes,x,y,z)
　　　app.Knob_shading.Enable='Off';
end

② updateview函数
按同样方式建立用于更新坐标轴视点的updateview函数框架，然后在updateview函数体加入以下代码：

el=app.Knob_el.Value;
az=app.Knob_az.Value;
view(app.UIAxes,az,el)

（2）编写组件对象回调函数

① 为打开用户界面编写响应代码。在设计视图中，右键单击图形窗口空白处，从快捷菜单中选择“回调”下的“添加StartupFcn回调”命令项，这时，将切换到代码视图，并且在代码中增加了StartupFcn函数框架，结构如下：

% Code that executes after component creation
function startupFcn(app)
end

也可以在代码浏览器中，选择“回调”选项卡，单击搜索栏右端的“添加回调函数”按钮，在弹出的“添加回调函数”对话框中选择组件、回调，修改回调函数名（默认名称与回调相同），然后单击“确定”按钮来添加StartupFcn函数框架。要在运行中打开用户界面，使用默认数据和绘图函数绘制图形，则在StartupFcn函数体加入以下代码：

updateplot(app)

② 为列表框和切换按钮组编写响应代码。在设计视图中，右键单击列表框对象ListBox，从快捷菜单中选择“回调”下的“添加 ListBoxValueChanged 回调”命令项，这时，将切换到代码视图，并且在代码的methods段中增加了ListBoxValueChanged函数框架，如下所示：

methods (Access=private)
　　%Value changed function: ListBox
　　function ListBoxValueChanged(app,event)
　　end
end

当程序运行时，用户在列表框中选择一个绘图数据源，将调用 updateplot 函数绘制图形，因此在ListBoxValueChanged函数体输入以下代码：

updateplot(app)

单击切换按钮组的某个按钮也将重绘图形，因此按同样方式建立按钮组的回调函数ButtonGroupSelectionChanged，并在函数体中输入以上代码。
③ 为旋钮对象编写响应代码。建立用于设置视点方位角的旋钮对象的回调函数 Knob_azValueChanged和设置视点仰角的旋钮对象的回调函数Knob_elValueChanged，并在两个函数的函数体中输入以下代码：

updateview(app)

④ 为分段旋钮编写响应代码。分段旋钮用于设置着色方式，建立该对象的回调函数Knob_shadingValueChanged，并在函数体中输入以下代码：

shading(app.UIAxes,app.Knob_shading.Value)

⑤ 为跷板开关编写响应代码。跷板开关用于显示/隐藏网格，建立该对象的回调函数SwitchValueChanged，并在函数体中输入以下代码：

switch app.Switch.Value
　　case 'On'
　　　grid(app.UIAxes,'On');
　　case 'Off'
　　　grid(app.UIAxes,'Off');
end

4.运行App

单击App Designer功能区“设计器”选项卡工具栏的“运行”按钮（或单击快速访问工具栏中的“运行”按钮，或按F5键），即可运行程序，打开用户界面。
在运行窗口中将振幅比调到3，相位差调到90°，白噪声开关拨到“On”，单击“开始”按钮。

5.打包App应用

程序运行成功，可以将程序打包为一个MATLAB应用模块。单击App Designer的“设计器”选项卡工具栏中的“App打包”按钮，弹出“应用程序打包”对话框。
如图10.13所示，在对话框中部“描述您的App”下的应用名称栏输入“SuperpositionofWaves”，在对话框右边的”打包为安装文件“的输出文件夹”栏指定打包文件的输出文件夹。然后单击“打包”按钮。打包完成，对话框左部出现链接“打开输出文件夹“。单击此链接，可以看到在输出文件夹生成了两个文件，即SuperpositionofWaves.prj和SuperpositionofWaves.mlappinstall。
在MATLAB桌面的“当前文件夹”中找到文件Superposi tionofWaves.mlappinstall，双击这个文件，将弹出图10.14所示“安装”对话框。

在对话框中单击“安装”按钮进行安装。安装成功后，选择MATLAB桌面的“APP”选项卡，单击工具栏右端的“显示更多”按钮，可以看到应用列表中加入了这个应用模块。此后，在其他MATLAB程序中可以使用这个模块。

思考与实验

一、思考题
1.比较Units属性对度量长度的影响。分别建立两个窗口，第1个窗口用pixels作为度量单位，窗口大小为400×300。第2个窗口使用相对度量单位，窗口宽、高分别为屏幕的40%和30%。
2.在GUIDE，常用什么属性作为区分控件对象的标识？
3．分别用GUI函数和用GUIDE工具建立一个图形用户界面，界面中包含一个坐标轴和一个按钮。运行该用户界面，单击按钮，在坐标轴绘制函数 f ( x ) = s i n ( 1 / x ) f(x)=sin(1/x) f(x)=sin(1/x)曲线。比较两种方式的回调函数的定义方法。
4.分别用GUIDE和App设计工具建立一个应用程序。程序的用户界面中包含一个可编辑文本框（编辑字段）、一个标签和一个按钮。运行该程序，单击按钮，从文本框输入一个实数，在标签输出该数的正弦值。比较两种方式建立用户界面的方法，以及回调函数中获取/设置控件对象属性值的方法。
二、实验题
1.设计一个用户界面，其中有一个静态文本对象、一个可编辑文本框，两个复选框和一组单选按钮。在编辑框中输入一个数，单击按钮，可以设置静态文本框中的文字的大小；复选框用于设置文字是否为粗体、倾斜；单选按钮用于设置字体的颜色。
2.绘制一条阿基米德螺线，创建一个与之相联系的快捷菜单，用以控制曲线的颜色。
3.设计用户界面，分别从3个可编辑文本框输入参数 a、b 和 n 的值，绘制极坐标函数 ρ = a c o s ( b + n θ ) ρ=acos(b+nθ) ρ=acos(b+nθ)曲线，考察参数对曲线的影响。
4.用App设计工具建立一个App,App运行界面包含一个坐标轴、一个旋钮、一个分段旋钮和一个按钮。旋钮的值域为[0,5]，分段旋钮的值域为[1,4]。运行该 App，在界面单击按钮，从旋钮获取m的值，从分段旋钮获取n的值，在坐标轴绘制下列曲线：

{ x = m s i n t y = n c o s t \begin{cases}x=msint \\ y=ncost \end{cases} {x=msinty=ncost​
t ∈ [ 0 , 2 π ] t\in[0,2\pi] t∈[0,2π]

我遇到的问题

复制代码的时候有红线，提示字符数无效，只需要把红线删掉就行了。

还有一些字母书写错误，改正后成功运行：

本文标签： 工具matlabapp