跳转到主要内容

教程5:创建自定义触发条件和操作

通过TouchGFX Designer,可以定义具有自定义触发条件和操作的交互组件。 应用中的每个屏幕都可能包含操作集合(这些是C++中的简单void方法),您可以从TouchGFX Designer内部和代码中调用这些操作,而自定义容器也可能有您的应用可能响应的触发条件(相当于C++中的回调)集合。

在该教程中,我们将详细介绍此功能,以探索使用它创建更简洁、动态的TouchGFX应用的可能性。

本教程不适合TouchGFX的新用户。 建议以后再学习本教程。

将自定义操作添加到屏幕

在这一节中,我们将:

  • 新建一个包含背景方块和按钮的应用
  • 将自定义操作添加到应用
  • 在按钮被按下时使用自定义操作修改背景色

首先,用尺寸为480x272的图像(适用于STM32F746或模拟器等)新建一个空白应用,并插入一个用作背景的方块(将其命名为“background”)和一个按钮(将其命名为“button”)。 结果应类似于下图:

1

添加一个白色背景方块和一个按钮

下面,将一个自定义操作添加到屏幕。 您可以从屏幕的“属性”选项卡完成此操作,方法是选择“屏幕”并按下“操作”组中的“+”按钮(上面的图1)。 将操作命名为“setBackgroundColor”,提供诸如“设置背景色”之类的描述。 不要设置此操作的类型。

将新的自定义操作添加到屏幕

按下 F4 键生成项目代码。 这将在TouchGFX/generated/gui_generated/include/gui_generated/screen1_screen/Screen1ViewBase.hpp中生成一个名为setBackgroundColor()的虚拟方法,它在Screen1ViewBase.cpp中有一个空实现。

您可以通过在Screen1View.cpp文件的用户代码中重写该方法或者通过TouchGFX Designer创建交互来为该方法添加功能。
我们来尝试后者,转至屏幕的“交互”选项卡,并添加在点击按钮时调用新方法的交互。

在点击按钮时调用setBackgroundColor

现在,我们必须指定在调用setBackgroundColor时实际发生的操作。 为此,在另一个交互中使用新的自定义操作 (1) 作为触发条件。 首先,在触发条件“调用setBackgroundColor”发生时,使用操作“修改方块色彩”(2) 将背景方块的色彩简单地设置为黑色。

12

实现自定义操作setBackgroundColor的功能

现在,运行模拟器并按下按钮;背景应变为黑色。 您已成功创建第一个自定义操作。

按下按钮将背景变为黑色

将值传递给自定义操作

本节将在刚创建的应用的基础上,基于自定义操作的概念进行如下拓展:

  • 将参数添加到setBackgroundColor操作
  • 将随机色传递到setBackgroundColor
  • 在按下按钮时将背景修改为随机色

为了让该应用更有趣,我们将一个值传递到setBackgroundColor 自定义操作,使之变得更动态。

转至屏幕的“交互”选项卡,为操作按下x按钮删除两个当前操作,然后我们将设置新操作。

转至屏幕的“属性”选项卡,找到自定义操作setBackgroundColor ,取消选中类型复选框并输入“colortype”,这将是我们要传递给操作的参数类型(colortype是用于描述色彩的自带TouchGFX类型)。 不能命名参数,它的名称将是“value”

为自定义操作设置参数

下面来设置交互,它使用我们新添加的参数值。 我们使用触发条件“调用setBackgroundColor”和操作“执行C++代码”进行设置。 我们要用新参数设置背景方块的色彩,因此要执行的代码应是:

background.setColor(value);
background.invalidate();

第二行强制用新色彩重绘背景。

使用传递的值修改背景色彩

请注意,触发条件显示了参数的名称和类型“value : colortype”。

下面,我们将设置在点击按钮时实际调用setBackgroundColor的交互。 添加另一个具有触发条件“点击按钮”和操作“调用Screen1 setBackgroundColor”的交互,请注意,值属性也显示了它的预期类型。 我们将在stdlib.h中利用随机化方法rand()将随机色传递给setBackgroundColor,以便获取三个0至255之间的随机数并用它们指定色彩。 为了访问rand(),我们需要将其包含在应用中。 还可以从TouchGFX Designer内部为屏幕和自定义容器提供您自己的includes函数,在本例中我们需要这样做。 转至屏幕的“属性”选项卡,在“INCLUDES”组下面输入:

#include <stdlib.h>

包含stdlib以便访问rand()

下面,对于值属性,我们将输入 (1):

touchgfx::Color::getColorFrom24BitRGB(rand()%256, rand()%256, rand()%256)
1

在点击按钮时传递随机色彩值

现在,运行模拟器并尝试多次按下按钮。 您应看到背景变为随机色。

点击按钮时得到的随机色

在自定义容器中使用自定义触发条件

最后,自定义容器还可以定义自定义触发条件集,在本节中,我们将基于应用进行如下拓展:

  • 创建新的名为ColorEmitter的自定义容器
  • 将名为“colorChanged”的自定义触发条件添加到ColorEmitter
  • 在按下按钮时用触发条件colorChanged将随机色传递给应用
  • 在屏幕中设置交互以监听触发条件colorChanged
  • 使用ColorEmitter发送的任何色彩设置背景方块的色彩

下面,我们尝试用自定义触发条件来指示应用中的一些事件。 我们不使用将随机色传递给setBackgroundColor的按钮交互,而是尝试让自定义容器将随机色发送到屏幕,然后让屏幕使用自定义容器传递的任何值。 这会是一个简单的示例,应用中的不同UI组件相互通信,使应用具有更小的体积和更高的可复用性。

首先,我们新建一个自定义容器并将其命名为“ColorEmitter”。 插入一个按钮并将其命名为“button”。 结果应类似于下图:

自定义容器ColorEmitter

下面,我们要让ColorEmitter在按钮被点击时发送随机色。 然后,任何对象都可以决定监听此类发送并使用此色彩。 在本例中,我们只模仿之前的行为,使用此色彩设置背景色。

为了让自定义容器发送颜色,首先需要创建自定义触发条件。 转至自定义容器的“属性”选项卡,按下“触发条件”组中的“+”按钮 (1)。 将触发条件命名为“colorChanged”,输入说明“色彩变化”,并将类型设置为“colortype”。

1

将自定义触发条件添加到自定义容器

然后,转至自定义容器的“交互”选项卡并新建一个交互。 使用触发条件“点击按钮”和操作“发送colorChanged”。 现在我们要发送随机色,对值属性使用与之前相同的代码:

touchgfx::Color::getColorFrom24BitRGB(rand()%256, rand()%256, rand()%256)

发送自定义触发条件

但是,由于自定义容器中未自动包含touchgfx::Color命名空间,因此最初并不起作用。 与以前一样,我们将为自定义容器提供自己的include函数。 转至自定义容器的“属性”选项卡,在“Includes”组(1)下面输入:

#include <touchgfx/Color.hpp>
1

提供额外的includes函数

现在,我们要用新建的自定义容器ColorEmitter替代旧按钮。 选择Screen1并删除这里的按钮。 这应当会在使用此按钮的交互中生成域错误,因此还需要删除此交互,我们将为ColorEmitter创建新的交互。 现在,在Screen1上插入ColorEmitter实例,然后在Screen1上新建一个交互。 对于触发条件,您应当会看到一个名为“ColorEmitter colorChanged发生”的选项。 选择该选项,并为操作选择“调用Screen1 setBackgroundColor”。 现在,我们需使用colorChanged发送的值,其名称始终为“value”(如上文所述)。 因此,在值属性中输入“value”。

设置交互以监测colorChanged自定义触发条件

现在,运行模拟器并再次尝试按下按钮。 应用应显示相同行为,背景变为随机色。 现在,我们不仅在屏幕上实现了所有功能,还成功地在屏幕与它的一些较小的可复用组件(即简单的ColorEmitter)之间建立了通信。

点击按钮时得到的随机色