# 使用 APP 设计工具创建并运行简单 APP
APP 设计工具提供的教程可指导您完成创建包含绘图和编辑字段（数值）的简单 APP 的过程。编辑字段（数值）用于控制函数绘图的振幅。您可通过运行教程，或执行此处所列的教程步骤创建此 APP。
本示例的 APP 源文件下载链接为使用 APP 设计工具创建并运行简单 APP。
# 用于创建 APP 的教程步骤
APP 设计工具有两种用于创建 APP 的视图：设计视图和代码视图。使用设计视图可创建 UI 组件并以交互方式设计 APP 布局。使用代码视图可对 APP 行为进行编程。您可以使用 APP 设计工具右上角的切换按钮在这两种视图之间切换。
要创建简单的绘图 APP，请在 APP 设计工具中打开一个新 APP，然后按照以下步骤操作。
步骤 1：创建坐标区组件
在设计视图中，创建 UI 组件并以交互方式修改其外观。组件库包含所有可以通过交互方式添加到 APP 的组件、容器和工具。要添加组件，请将一个组件从组件库拖到 APP 画布上。然后，您可以通过在组件浏览器中设置属性，或直接在画布上编辑组件的某些方面（如大小和标签文本），来更改该组件的外观。
在您的绘图 APP 中，创建一个坐标区组件，以便显示绘制的数据。将坐标区组件从组件库拖到画布上。
步骤 2：创建编辑字段（数值）组件
将编辑字段（数值）组件从组件库拖到画布上。将其放置在坐标区组件的下方。
步骤 3：更新编辑字段（数值）标签
替换编辑字段（数值）的标签文本。将词语 Edit Field 替换为振幅。
当您完成 APP 布局后，设计视图中的画布应如下所示：
有关 APP 布局的详细信息，请参阅在 APP 设计工具的设计视图中布局 APP。
步骤 4：导航到代码视图
在设计完 APP 布局后，可通过编写代码来对 APP 的行为进行编程。单击画布上方的代码视图按钮以编辑 APP 代码。
步骤 5：添加依赖的函数库
在代码视图中第 7 行可以添加依赖的函数库，本示例中需要依赖 TyPlot 来绘图。
步骤 6：添加编辑字段（数值）回调函数
使用回调函数对 APP 行为进行编程。回调函数是当 APP 用户执行特定交互（例如调整编辑字段（数值）的值）时执行的函数。
在您的绘图 APP 中，添加一个在用户调整编辑字段（数值）值时执行的回调函数。单击组件浏览器中的 app.EditField。然后在上下文菜单中选择回调 > 添加 ValueChangedFcn 回调。
向组件添加回调时，APP 设计工具会创建一个回调函数，并将光标置于该函数的主体中。在 EditFieldValueChangedFcn 函数中，可通过 app.EditField.Value 来访问编辑字段（数值）的值。
将以下代码添加到 EditFieldValueChangedFcn 回调的第一行。
value = app.EditField.Value
有关使用回调函数对 APP 行为进行编程的详细信息，请参阅APP 设计工具中的回调。
步骤 7：对数据绘图
在 APP 设计工具中调用图形函数时，请将目标坐标区或父对象指定为该函数的参量。
在绘图 APP 中，如果 APP 用户希望更改编辑字段（数值）值，需要通过将 APP 中坐标区对象的名称 app.UIAxes 指定为 plot 函数的第一个参量，以更新坐标区中的绘图数据。将以下代码添加到 EditFieldValueChangedFcn 回调的第二行，以在坐标区上绘制 peaks 函数的缩放输出。
X,Y,Z = peaks()
row,col = size(Z)
input = []
for i = 1:col
push!(input, 1:row)
push!(input, value*Z[:,i])
end
plot(app.UIAxes, input...)
有关在 APP 中显示图形的详细信息，请参阅在 APP 设计工具中显示图形。
步骤 8：更新坐标区范围
在您的绘图 APP 中，通过 ylim 函数来更改 y 轴的范围。将以下代码添加到 EditFieldValueChangedFcn 回调的第 10 行：
ylim(app.UIAxes,[-1000,1000])
步骤 9：运行 APP
单击运行以保存并运行 App。调整编辑字段（数值）的值后回车确认，以在 APP 中绘制一些数据。
保存更改后，可在 APP 设计工具中再次运行您的 APP。