从TouchGFX 4.12.3开始

使用TouchGFX 4.12.3版时,可以通过引入自定义触发器和操作从Designer中定义自己的交互组件。应用程序中的每个Screen都可以包含可在Designer中以及在代码中调用的动作的集合(在C ++中,这些只是简单的void方法),而自定义容器既可以包含动作的集合也可以包含触发器的集合,您的应用程序可以做出反应(相当于C ++中的回调)。在本文中,我们将通过此功能来学习为我们提供创建更干净和动态的TouchGFX应用程序的可能性。

使用自定义触发器和动作

将自定义操作添加到屏幕

在本节中,我们将:

  • 使用背景框和按钮创建一个新的应用程序
  • 向应用程序添加自定义操作
  • 按下按钮时,使用自定义操作更改背景颜色

首先,创建一个尺寸为480x272的新空白应用程序,并Box为背景插入一个(将其命名为“ background”)和一个Button(将其命名为一个“ button”)。您应该具有类似于下图的内容:

white_background_and_button.png

添加白色背景BoxButton

接下来,让我们向中添加自定义操作Screen您可以从的属性标签中Screen选择,Screen然后按“ ACTIONS”组中的+按钮来执行此操作。将动作命名为“ setBackgroundColor”,并对其进行类似“设置背景色”的描述。这会在Screen1ViewBase.hpp中生成一个名为setBackgroundColor()的虚拟方法,而Screen1ViewBase.cpp中将有一个空实现。

add_custom_action_to_screen.png

将新的自定义操作添加到 Screen

您可以通过在Screen1View.cpp文件中的用户代码中覆盖此方法或通过Designer创建交互来向该方法添加功能。让我们尝试一下后者,方法是转到屏幕的“交互”选项卡,并添加一个单击按钮时调用新方法的交互。 

calling_setbackgroundcolor_on_click.png

单击按钮时调用setBackgroundColor

现在,我们指定调用setBackgroundColor时实际发生的情况。这是通过将我们的新自定义操作用作另一个交互中的触发器来完成的。让我们从 在触发“ setBackgroundColor被调用”Box使用“更改框颜色”操作简单地将背景颜色设置为黑色开始

Implementation_setbackgroundcolor_functionality.png 

实现自定义操作setBackgroundColor的功能

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

black_color_result.png

按下按钮可使背景变黑

将值传递给自定义操作

在我们刚刚创建的应用程序的基础上,本节将通过以下方式扩展自定义操作概念:

  • 向setBackgroundColor自定义操作添加参数
  • 将随机颜色传递给setBackgroundColor
  • 按下按钮时使用此按钮将背景更改为随机颜色

通过将值传递给setBackgroundColor自定义操作以使其更具动态性,使该应用程序更有趣。通过为每个交互按下x按钮来删除这两个当前交互,因为我们将设置新的交互。转到“屏幕”的“属性”选项卡,然后选中“类型”复选框并输入“ colortype”,这将是我们要传递给操作的参数的类型(colortype是用于描述颜色的内置TouchGFX类型)。无法命名参数,它将被命名为“值”。

add_type_to_action.png

设置自定义操作的参数

接下来,让我们设置一个使用新添加的参数值的交互。我们通过使用触发器“ setBackgroundColor被调用”和动作“执行C ++代码”来实现。我们想使用我们的新参数来设置背景框的颜色,因此要执行的代码应为:

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

set_color_execute_code.png 

使用传递的值更改背景颜色

请注意,触发器将显示参数“名称:颜色类型”的名称和类型。

接下来,让我们设置单击按钮时实际上调用setBackgroundColor的交互。添加另一个与触发器“单击按钮”和动作“调用Screen1 setBackgroundColor”的交互,并注意value属性还显示了期望的类型。让我们通过使用rand()stdlib.h 中的随机方法将随机颜色传递给setBackgroundColor,  以获取0到255之间的三个随机数,并使用这些随机数指定颜色。要获得访问权限,rand() 我们需要将其包含在我们的应用程序中。对我们来说幸运的是,还可以从Designer内为屏幕和自定义容器提供您自己的包含项。转到屏幕的属性选项卡,然后在“ INCLUDES”组下输入:

#include <stdlib.h>

include_stdlib.png

包括stdlib以获得对rand()的访问

接下来,对于value属性,我们将输入:

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

pass_random_color_to_action.png

单击按钮时传递随机颜色

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

random_color_result_initial.png

单击按钮时产生的随机颜色

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

最后,自定义容器还可以定义自定义触发器的集合,因此在本节中,我们将通过执行以下操作来扩展应用程序:

  • 创建一个名为ColorEmitter的新自定义容器
  • 向ColorEmitter添加一个名为“ colorChanged”的自定义触发器
  • 按下按钮时,使用colorChanged触发器向应用程序发出随机颜色的信号
  • 在屏幕上设置交互以侦听colorChanged触发器
  • 使用ColorEmitter发出的任何颜色来设置背景框的颜色

让我们尝试使用自定义触发器在应用程序中发出一些事件的信号。让我们尝试使自定义容器将随机颜色发送给我们Screen,而不是通过按钮交互将随机颜色传递给setBackgroundColor,然后Screen使用自定义容器传递的任何值。这最终应该是一个简单的示例,其中不同的UI组件在应用程序中相互通信,以使组件更小,更可重用。

首先,让我们创建一个新的自定义容器并将其命名为“ ColorEmitter”。插入一个按钮,并将其称为“按钮”。您应该具有类似于下图的内容:

color_emitter_custom_container.png

ColorEmitter定制容器

现在,让我们做到这一点,以便每当单击按钮时,ColorEmitter都会向世界发出随机的颜色。然后,任何人都可以决定侦听此发出的光并将其用于某种颜色。在我们的例子中,我们只想通过使用颜色设置背景颜色来模仿以前的行为。

为了使自定义容器发出颜色,首先我们需要创建一个自定义触发器。转到自定义容器的属性标签,然后按“ TRIGGERS”组中的+按钮。将触发器命名为“ colorChanged”,给其描述“颜色已更改”,并给其类型“ colortype”。

add_custom_trigger_to_custom_container.png

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

接下来,转到自定义容器的“交互”选项卡并创建一个新的交互。使用触发器“单击按钮”和操作“发出colorChanged”。现在,我们想传达一种随机的颜色,因此对value属性使用之前的相同代码:

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

glowing_color_changed.png

发出自定义触发器

但是,由于touchgfx::Color命名空间不会自动包含在我们的自定义容器中,因此最初无法使用。因此,像之前一样,我们将为定制容器提供我们自己的包含。转到定制容器的属性选项卡,然后在“ INCLUDES”组下输入:

#include <touchgfx/Color.hpp>

extra_includes.png

供应额外物品

现在,我们要用创建的新ColorEmitter自定义容器替换旧按钮。选择Screen1并在此处删除按钮。这会在使用此按钮的交互中产生域错误,因此也请删除该交互,因为我们将为ColorEmitter创建一个新的交互。现在,在Screen1上插入我们的ColorEmitter实例,然后在Screen1上创建一个新的交互。对于触发器,您应该看到一个名为“ ColorEmitter colorChanged发生”的选项。选择该选项,然后使用“ Call Screen1 setBackgroundColor”进行操作。现在,我们需要使用colorChanged发射中的值,该值将始终被命名为“值”(如本文前面所述)。因此,将“值”输入到value属性中。

glow_colorchanged_happens_interaction.png

设置交互以侦听colorChanged自定义触发器

现在运行模拟器,然后尝试再次按下按钮。应该出现相同的行为,并且背景变为随机颜色。但是,现在,不仅仅是在中实现了所有功能Screen,我们还成功地在Screen和它的一些较小的可重用组件(即简单的ColorEmitter)之间创建了自己的通信

random_color_result_final.png

单击按钮时产生的随机颜色

来源