主要内容

创建一个简单的自定义UI组件在应用程序设计师

除了MATLAB的UI组件®提供了用于构建应用程序,您可以创建自定义UI组件使用在您自己的应用程序或与他人分享。从R2022a开始,你可以交互式地创建自定义UI组件在应用程序设计师。

创建自定义UI组件的好处包括:

  • 模块化——大型应用程序的显示和代码分离到独立的,可维护的碎片。

  • 可重用性——提供一个方便的接口添加和自定义类似的应用程序的组件。

  • 灵活性——扩展现有UI组件的外观和行为。

组件创建概述

当你设计和创建一个定制的UI组件,组件的用户有两种考虑:应用创建者和应用程序用户。应用创建者使用您的组件,以构建一个应用程序,而应用程序用户与您的应用程序运行时组件。因为这两种类型的用户使用您的组件以不同的方式,还有其他注意事项需要考虑在设计一个自定义组件,而不是设计一个应用程序。

为应用程序的开发者提供一次很好的经历谁使用您的组件来构建一个应用程序:

  • 为用户提供一个界面定制组件的外观和行为在一个应用程序通过创建公共属性。

  • 让用户程序响应与组件的交互通过创建公共的回调。

  • 确保组件是健壮的不同方式,用户可以将它合并到他们的应用程序,并提供反馈,如描述性的错误消息,当一个用户试图以一种意想不到的方式使用它。

为应用程序提供一个良好的体验与组件交互的用户在一个应用程序:

  • 设计组件外观,这样用户可以理解它的目的。

  • 程序组件的基本行为,以便它是一致的在所有应用程序使用它。

学习如何创建一个定制的UI组件在应用程序设计师走过的过程创建一个slider-spinner UI组件,它提供了一个灵活的界面改变数值。当您完成这个过程,您将能够使用slider-spinner组件在应用程序设计师应用以同样的方式使用现有的UI组件。

Slider-spinner定制的UI组件。

您可以创建slider-spinner组件遵循互动教程应用程序设计环境或遵循的步骤在这个页面。

运行交互式组件软件设计师教程,打开应用程序设计师开始页面。在自定义UI组件部分中,点击显示的例子,然后选择交互式组件教程。

软件设计师教程组件的步骤

创建自定义UI组件

要创建一个自定义UI组件在应用程序设计师,首先打开一个新的空白组件。打开应用程序设计师起始页,自定义UI组件部分中,点击空白的部分。保存组件文件myComponent.mlapp。然后,按照以下步骤与连接建立slider-spinner组件值:

  1. 设计组件外观——制定您的自定义组件使用现有的UI组件在应用程序设计师设计视图。

  2. 设计组件接口创造者——为应用程序提供选项来定制您的自定义组件的外观和行为,以适应应用的需要。在两个步骤:

    1. 创建和配置公共属性——允许应用造物主指定组件的外观和行为方面的应用。

    2. 创建和配置公共回调使应用创建者程序响应当用户与应用程序的组件在一个应用程序。

  3. 验证组件行为——确保您的自定义组件的外观和行为。

  4. 配置组件在应用程序中使用——指定您的自定义组件如何出现在应用程序设计师组件库。

设计组件外观

设计出现在您的自定义组件设计视图。

设计slider-spinner外观,第一次拖滑块组件的组件库到画布上。然后,拖微调控制项组件到画布上,并将其定位在滑块。

当你制定你的自定义组件设计视图程序设计师生成的代码创建底层的UI组件设置函数代码视图。这个函数运行一次,当一个应用程序中创建的自定义组件对象。如果你有额外的启动任务,您想执行一次设置,如绘图数据或初始化默认值,您可以创建一个PostSetupFcn自定义组件的回调。有关更多信息,请参见定义定制的UI组件在应用程序启动任务设计师。

设计组件接口

设计您的自定义组件接口,以便应用创建者可以指定组件和行为在他们的应用程序如何显示。组件接口有两个方面的考虑:

  • 组件的公共属性,这些属性可以设置和查询组件添加到一个应用程序的时候。创建公共属性来提供组件的定制选项,并公开组件应用程序信息的创造者。

  • 公共回调——这些组件的回调函数可以访问组件添加到一个应用程序的时候。创建公共回调允许应用程序的创造者项目响应特定的组件交互上下文的应用程序。

创建和配置公共属性

添加您的自定义组件的公共财产,首先创建属性,并指定其默认值,数据类型,和相关的验证功能。然后,编写代码来连接属性值和自定义组件的外观和行为。更新公共财产价值当用户与应用程序组件,并更新底层组件在应用程序的创造者以编程方式设置公共财产的价值。

slider-spinner组件,创建一个公共财产价值允许应用程序的开发者设置slider-spinner值在应用程序中使用组件时,选择组件的节点浏览器组件并单击+按钮。

浏览器组件。组件选择节点和有一个按钮来添加一个新的公共财产。

当你添加一个新的公共属性,应用设计师打开一个对话框,允许您指定属性的细节。填写与这些值对话框:

  • 的名字——输入价值作为属性名称。

  • 数据类型——输入双属性的数据类型。

  • 默认值——输入0作为默认属性值。

点击好吧创建属性。

一旦你创建价值公共财产,编写代码来链接属性slider-spinner组件外观。导航到代码视图使用右上角的按钮的画布。

设计视图和代码视图切换按钮。代码视图按钮被选中。

当你创建一个定制的UI组件、应用程序设计师创建一个类定义文件matlab.ui.componentcontainer.ComponentContainer作为超类。使用代码视图编辑器来编写代码程序组件在这个文件中。访问代码中使用的自定义组件对象电脑及相关知识。

首先,更新价值财产每当应用程序用户与滑块或转轮。执行此更新使用这些步骤:

  1. 为滑块组件创建一个回调。右键单击comp.Slider在浏览器组件并选择回调>添加ValueChangedFcn回调。

  2. 更新价值内的财产SliderValueChanged回调函数。回调函数中的代码替换为这段代码:

    comp.Value = event.Source.Value;

  3. 分配相同的回调函数来微调器组件。右键单击comp.Spinner在浏览器组件并选择回调>选择现有的回调。用对话框来分配SliderValueChanged函数的转轮ValueChangedFcn回调。

在这一点上,您的代码更新slider-spinner价值当底层组件的属性值变化。接下来,相反,编写代码来更新底层时转子和滑块组件应用程序设置slider-spinner创造者价值财产。内执行此更新更新组件代码的函数。的更新函数执行时自定义组件的公共财产的价值变化,这确保底层转子和滑块的值总是自定义组件的值相匹配。

将此代码添加到更新功能:

comp.Slider。价值= comp.Value; comp.Spinner.Value = comp.Value;

创建和配置公共属性的更多信息,参见创建公共属性自定义UI组件在应用程序设计师。

创建和配置公共回调

为您的自定义组件创建公共回调使应用程序的开发者编写代码在他们的应用程序响应特定的交互。创建一个公共的回调,添加一个事件。一个事件是一个通知,一个动作发生时播出。当你为您的自定义组件添加一个事件,应用程序设计师创建一个公共的回调与事件相关联。然后,编写代码来触发事件,执行相关的公共的回调函数。

在slider-spinner组件,创建一个事件命名ValueChanged和编写代码来触发事件和执行相关联的ValueChangedFcn回调时应用程序用户更改滑块的价值或转轮的运行应用程序,这可以让应用程序的开发者使用ValueChangedFcn回调应用。例如,一个应用创建者可能会写一个回调函数绘制一些数据在应用程序用户更改slider-spinner值。

使用以下步骤添加和触发器ValueChanged事件:

  1. 选择事件回调对选项卡中浏览器组件并单击+按钮。

    浏览器组件myComponent检查员的添加节点。事件回调对选项卡被选中并包含一个+按钮。

  2. 在添加Event-Public回调对对话框中,输入名称ValueChanged,然后单击好吧。程序设计师创建一个公共的回调相同名称的字母Fcn附加。所以在这种情况下,公众的回调命名ValueChangedFcn。

  3. 编写代码以确保回调执行在适当的时刻。通过调用的呢通知组件对象的函数并指定事件的名称。在这里,回调时应该执行应用程序用户与滑块或转轮。在SliderValueChanged函数,添加此代码:

    通知(排版,“ValueChanged”)

创建和执行公共回调函数的更多信息,见为自定义UI组件在应用程序设计师创建回调。

验证组件行为

看到您的组件是什么样子在一个运行的应用程序,然后单击保存组件运行。程序设计师UI图显示一个窗口,其中包含您的自定义组件。

运行slider-spinner组件,并与之交互,以确认它的外观和行为。

UI中的Slider-spinner组件图窗口

接下来,验证ValueChangedFcn回调执行组件值改变的时候。以编程方式创建一个组件的实例通过指定组件文件名称在MATLAB命令窗口并返回组件对象作为变量。在命令窗口中输入这个代码创建一个slider-spinner组件和指定一个回调函数:

comp myComponent =添加;事件comp.ValueChangedFcn = @ (src) disp (src.Value);
与滑块和转轮。自定义组件的值显示在命令窗口。

配置组件在应用程序中使用

在应用程序中使用定制UI组件设计师应用或为他人分享使用,遵循这些步骤:

  1. 在设计师选项卡上,单击为应用程序配置。

  2. 填写应用程序设计师自定义UI组件的元数据对话框中,然后单击好吧。

  3. 在确认对话框中,单击添加到路径添加组件和生成资源文件夹到MATLAB路径。

  4. 在设计师选项卡上,单击新并选择空白应用程序。

组件出现在组件库下的应用,在对话框中指定的类别。

程序设计师组件库。Slider-Spinner组件及其元数据,包括它的名称、描述和文件位置,显示在标题标签MATLAB的例子(自定义)。

slider-spinner组件拖放到画布上。你可以设置公共属性的组件使用浏览器组件,你可以分配公共回调程序组件行为的应用程序。

Slider-spinner UI组件在一个应用程序。在浏览器组件组件的节点被选中,显示属性的值。上下文菜单组件显示在画布上,回调>添加ValueChangedFcn调选项高亮显示。

关于配置的更多信息和分享您的自定义UI组件,明白了配置自定义UI组件应用程序设计师。

另请参阅

类

相关的话题