教程：控制应用程序 UI¶

在本教程中，您将学习如何使用条件来控制应用程序 UI。您将学习如何通过创建仅在满足 Data Trigger 中的条件时应用程序才显示的弹出窗口来控制构成 UI 的活动的激活状态。在 Data Trigger 中，您使用 Apply Activation Action 来激活特定的活动。

具有 Apply Activation Action 的 Data Trigger 会在满足该 Data Trigger 中的条件时保持 Activity 处于活动状态。

您在数据触发器中设置条件，形式为一个绑定表达式，该表达式的结果为 True 或 False。

视频显示教程的结果。

本教程假设您已了解使用 Activity 系统的基础知识。最好的入门点是教程：构建应用程序 UI。

获取教程¶

要获取该教程，请在 Kanzi Studio 的 Quick Start 窗口中点击 Projects 并选择 Tutorials 选项卡。在 Data Trigger 教程旁边，点击。

Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到：

位于 <KanziWorkspace>/Tutorials/Data trigger/Start/Tool_project 目录中的教程起点工程。

要了解此项目的内容以及如何创建此类项目，请参阅教程：构建应用程序 UI。
位于 <KanziWorkspace>/Tutorials/Data trigger/Completed 目录中的已完成教程。

起始项目的内容¶

起点工程包含您完成本教程所需的内容：

这些预设：
- 您在本教程中使用的 UI 元素的图像
- 在本教程中，您使用的 UI 控件用于控制您创建的 Activities 的激活。
Datatrigger.ActivityProperty.Cluster.MainView 属性类型用于控制和检查集群的状态。在数据触发器中，您使用此属性的值来决定要激活哪个活动。

创建结构体¶

在本节中，您将创建弹出窗口的结构。

要创建结构：

在 Kanzi Studio 的 Quick Start 窗口中，点击 Projects 并选择 Tutorials 选项卡。在 Data trigger 教程旁边，点击 Open 并选择 Start project。
当弹出窗口最大化时，创建其 Activity 结构：
1. 在 Prefabs > MaximizedLeft 预设中，创建一个名为 PopupMaximized 的 Parallel Activity Host，并将 MaximizedWidget 独占活动主机拖动到 PopupMaximized 活动主机。
  
  使用 Parallel Activity Host，您可以同时激活多个弹出窗口，并将弹出窗口显示在当前激活的小部件之上。
2. 在 Activity Browser 中，在 PopupMaximized 活动主机下，点击，选择 Create Activity，并命名活动及其预设为 PopupIncomingCallMaximized。
3. 在 Prefabs 中，将 PopupIncomingCallMaximizedImage 拖到 PopupIncomingCallMaximized 活动中。
4. 在 Activity Browser 中，在 PopupIncomingCallMaximized 活动中，点击。
  
  通过这种方式，您可以模拟此活动的激活，以便在 Preview 中查看其内容。
5. 在 Prefabs 中，选择 MaximizedLeft > PopupMaximized > MaximizedWidget 活动主机。从 Properties 中，将 Horizontal Padding 属性拖到 Prefabs > MaximizedLeft > PopupMaximized 活动主机。
  
  通过这种方式，您可以为 PopupMaximized 活动主机的所有活动设置填充。
6. 在 Prefabs 中，选择 MaximizedWidget 活动主机。在 Properties 中，移除 Horizontal Padding 属性。
当弹出窗口被最小化时，创建其 Activity 结构：
1. 在 Prefabs > MinimizedLeft 预设中，创建一个名为 PopupMinimized 的 Parallel Activity Host，并将 MinimizedWidget 活动拖到 PopupMinimized 活动主机。
2. 在 Activity Browser 中，在 PopupMinimized 活动主机中，添加一个活动，并将其及其预设命名为 PopupIncomingCallMinimized。
3. 在 Prefabs 中，将 PopupIncomingCallMinimizedImage 拖到 PopupIncomingCallMinimized 活动中。
4. 在 Activity Browser 中，在 PopupIncomingCallMinimized 活动中，点击。
  
  通过这种方式，您可以模拟此活动的激活，以便在 Preview 中查看其内容。
5. 在 Prefabs 中，选择 MinimizedLeft > PopupMinimized > MinimizedWidget 活动主机。从 Properties 中，将 Horizontal Padding 和 Vertical Padding 属性拖动到 Prefabs > MinimizedLeft > PopupMinimized 活动主机。
6. 在 Prefabs 中，选择 MinimizedWidget 活动主机。在 Properties 中，移除 Horizontal Padding 和 Vertical Padding 属性。

使用条件来控制 Activities 的激活状态。¶

在本节中，您将学习如何使用 Data Trigger 和 Apply Activation Action 来控制 Activity 的激活状态，当 Data Trigger 中的条件满足时。

要使用条件来控制活动的激活状态：

创建一个属性类型，您可以使用它来设置 Activity 的状态：
1. 在 Library > Property Types > Datatrigger > ActivityProperty 中，按 Alt 并右键单击，并选择 Property Type。在 New Property Type 窗口中设置：
  - Name 到 Datatrigger.ActivityProperty.IncomingCall
  - Category 到 Controller Properties
  - Data Type 到 Boolean
2. 在 Node Tree 中，选择 Cluster 节点。在 Properties 中，添加 Controller Properties > Datatrigger.ActivityProperty.IncomingCall 属性。
  
  您将 Datatrigger.ActivityProperty.IncomingCall 属性添加到 Cluster 活动主机，因为您希望从此节点控制 IncomingCall 活动的激活状态。
创建一个 Data Trigger，用于根据条件控制活动的激活状态：
1. 在 Node Tree 中，选择 Cluster 节点。在 Node Components 中，按 Alt 并右键单击 Triggers，选择 Data Trigger，并将其命名为 PopupIncomingCallMaximized。
2. 在 Data Trigger 中，在 Condition Expression 中，单击，选择 Properties 窗口，将 Datatrigger.ActivityProperty.Cluster.MainView 和 Datatrigger.ActivityProperty.IncomingCall 属性拖到 Expression 字段，并编辑表达式以
```
{@./Datatrigger.ActivityProperty.Cluster.MainView}==0 && {@./Datatrigger.ActivityProperty.IncomingCall}==true
```
  数据触发器中的条件表达式必须评估为 True 或 False。
  
  单击 Save。
  
  通过这种方式，您将 Data Trigger 设置为仅在满足这些条件时才应用于该数据触发器中的 Apply Action。
  - Datatrigger.ActivityProperty.Cluster.MainView 设置为 Drive （枚举值 0）。
  - Datatrigger.ActivityProperty.IncomingCall 已启用（布尔值 True）。
  您在下一步中添加一个 Apply Activation Action。
创建一个激活和停用活动的 Apply Activation Action：
1. 在 PopupIncomingCallMaximized 数据触发器中，按 Alt 并右键单击 Actions，并选择 Apply Activation Action。
2. 在 Activity Browser 中，右键单击 PopupIncomingCallMaximized 活动并选择 Copy Activation Path。
3. 在 Node Tree 中，选择 Cluster 节点。在 Node Components 中，在 Apply Activation Action 中，设置：
  - Activity Host Path 到 < Relative > 和 .
  - 将 Activity Activation Path 替换为您从 Activity Browser 复制的路径，并从路径的开头删除 Cluster/。
  您在 Activity Activation Path 属性中设置的活动路径是相对于您在 Activity Host Path 属性中设置的活动主机节点的。
  
  数据触发器和应用激活操作会使此活动保持活跃状态，只要数据触发器中的条件得到满足。
  
  Activity Browser 表示 Activity Host 具有带有图标的 Data Trigger。
将 Cluster 活动主机设置为在集群处于 Browse 模式且 Datatrigger.ActivityProperty.IncomingCall 启用时激活 PopupIncomingCallMinimized 活动：
1. 在 Node Components 中，右键单击 PopupIncomingCallMaximized 数据触发器，选择 Duplicate，并将数据触发器重命名为 PopupIncomingCallMinimized。
2. 在 Condition Expression 中，编辑表达式以
```
{@./Datatrigger.ActivityProperty.Cluster.MainView}==1 && {@./Datatrigger.ActivityProperty.IncomingCall}==true
```
  单击 Apply。
3. 在 Activity Browser 中，右键单击 PopupIncomingCallMinimized 活动并选择 Copy Activation Path。在 PopupIncomingCallMinimized 数据触发器 Apply Activation Action 中，粘贴复制的路径，并从路径的开头删除 Cluster/。
创建一个UI元素来控制 IncomingCall 活动的激活。
1. 在 Prefabs 中，将 PopupControl 预设拖到 MainGauge 预设中。
  
  PopupControl 预设包含切换按钮，您可以使用这些按钮来控制弹出活动的激活。
2. 在 Prefabs 中，选择 PopupControl > IncomingCall 节点。在 Properties 中，点击 + Add Binding，并在 Binding Editor 中设置：
  - Binding Mode 到 Two way
  - Property 到 Toggle State
  - Expression 到
```
{#Cluster/Datatrigger.ActivityProperty.IncomingCall}
```
  单击 Save。
  
  此绑定使 IncomingCall 切换按钮能够获取和设置 Cluster 活动主机中 Datatrigger.ActivityProperty.IncomingCall 属性的值。这样，切换按钮就可以控制 IncomingCall 活动的状态。

小技巧

在应用程序开发期间，使用这些 Data Trigger 工具在 Activity Browser 侧面板中：

工具	描述 (Description)
	显示 Data Trigger 的位置以及该 Data Trigger 的源活动和目标活动的位置。
	模拟应用 Data Trigger 时的状态。这使您能够在满足 Data Trigger 条件时查看应用程序的状态，而无需更改应用程序中的属性值。
	在 Node Components 窗口中显示所选的 Data Trigger。

工具

描述 (Description)

显示 Data Trigger 的位置以及该 Data Trigger 的源活动和目标活动的位置。

模拟应用 Data Trigger 时的状态。

这使您能够在满足 Data Trigger 条件时查看应用程序的状态，而无需更改应用程序中的属性值。

在 Node Components 窗口中显示所选的 Data Trigger。

您现在可以通过以下方式控制 IncomingCall 弹出窗口的激活状态：

在 Preview 中，点击切换按钮。
在 Activity Browser 中，选择 Cluster 活动主机，并在侧面板中设置 IncomingCall 属性。

../../_images/popupincomingcallmaximized.gif

创建附加弹出窗口¶

要为新消息通知创建弹出窗口并使用 Data Trigger 控制该通知，请重复上述步骤，但有以下不同：

在 Activity Browser 中，添加以下活动：
- 在 PopupMaximized 中，添加一个名为 PopupNewMessageMaximized 的 Activity，其预设使用 PopupNewMessageMaximizedImage。
- 在 PopupMinimized 中，添加一个名为 PopupNewMessageMinimized 的 Activity，其预设使用 PopupNewMessageMinimizedImage。
要控制激活状态，请创建一个名为 Datatrigger.ActivityProperty.NewMessage 的控制器布尔属性类型，并将其添加到 Cluster 活动主机中。
在 Cluster Activity Host 中，在 Node Components 中，复制 PopupIncomingCallMaximized Data Trigger，将其重命名为 PopupNewMessageMaximized 并：
- 将 Expression 设置为
```
{@./Datatrigger.ActivityProperty.Cluster.MainView}==0 && {@./Datatrigger.ActivityProperty.NewMessage}==true
```
  单击 Apply。
- 在 Apply Activation Action 中，将 Activity Activation Path 属性设置为 PopupNewMessageMaximized 活动的激活路径。
在 Cluster Activity Host 中，在 Node Components 中，复制 PopupNewMessageMaximized Data Trigger，将其重命名为 PopupNewMessageMinimized 并：
- 将 Condition Expression 设置为
```
{@./Datatrigger.ActivityProperty.Cluster.MainView}==1 && {@./Datatrigger.ActivityProperty.NewMessage}==true
```
  单击 Apply。
- 在 Apply Activation Action 中，将 Activity Activation Path 属性设置为 PopupNewMessageMinimized 活动的激活路径。
在 Prefabs 中，选择 PopupControl > NewMessage 节点。在 Properties 中，点击 + Add Binding，并在 Binding Editor 中设置：
- Binding Mode 到 Two way
- Property 到 Toggle State
- Expression 到
```
{#Cluster/Datatrigger.ActivityProperty.NewMessage}
```
单击 Save。

此绑定使 NewMessage 切换按钮能够获取和设置 Cluster 活动主机中 Datatrigger.ActivityProperty.NewMessage 属性的值。这样，切换按钮就可以控制 NewMessage 活动的状态。
在 Activity Browser 中，选择 PopupIncomingCallMaximized 活动，并在侧面板中将 Priority 设置为 1。

通过这种方式，您可以将 PopupIncomingCallMaximized 活动的优先级设置为高于 PopupNewMessageMaximized 活动的优先级。优先级较高的活动显示在顶部。
为 PopupIncomingCallMinimized 活动重复上一步骤。

您现在可以通过以下方式控制 NewMessage 弹出窗口的激活状态：

在 Preview 中，点击切换按钮。
在 Activity Browser 中，选择 Cluster 活动主机，并在侧面板中设置 NewMessage 属性。

接下来该做什么？¶

在本教程中，您学习了如何使用条件表达式控制活动的激活状态。应用程序仅在满足 Data Trigger 中的条件时显示弹出窗口。

要继续练习使用 Data Triggers 和 Apply Activation Actions，您可以重复整个教程，以在集群 UI 的右侧区域创建弹出窗口的结构。以下是一些创建该结构的实用技巧：

在 Prefabs:
1. 在 MaximizedRight 活动中，创建一个名为 PopupMaximized 的 Parallel Activity Host，并将 MaximizedWidget 活动主机拖到 PopupMaximized 活动主机。
2. 从 MaximizedWidget Activity Host 中，将 Horizontal Padding 属性拖到 PopupMaximized Activity Host。从 MaximizedWidget Activity 中移除 Horizontal Padding 属性。
对 MinimizedRight 活动重复上一步，但将 Parallel Activity Host 命名为 PopupMinimized，并拖动 Horizontal Padding 和 Vertical Padding 属性。从 MinimizedWidget 活动主机中移除 Horizontal Padding 和 Vertical Padding 属性。
在 Activity Browser:
- 在 PopupMaximized Activity Host 中，创建 Activities:
  - PopupAccidentAheadMaximized
  - PopupBatteryLowMaximized
- 在 PopupMinimized Activity Host 中，创建 Activities:
  - PopupAccidentAheadMinimized
  - PopupBatteryLowMinimized
在 Prefabs 中，拖动：
- PopupAccidentAheadMaximizedImage 到 PopupAccidentAheadMaximized
- PopupAccidentAheadMinimizedImage 到 PopupAccidentAheadMinimized
- PopupBatteryLowMaximizedImage 到 PopupBatteryLowMaximized
- PopupBatteryLowMinimizedImage 到 PopupBatteryLowMinimized
在 Library > Property Types > Datatrigger > ActivityProperty 中，创建 Datatrigger.ActivityProperty.AccidentAhead 和 Datatrigger.ActivityProperty.BatteryLow 属性类型，并设置：
- Category 到 Controller Properties
- Data Type 到 Boolean
将 Datatrigger.ActivityProperty.AccidentAhead 和 Datatrigger.ActivityProperty.BatteryLow 属性类型添加到 Cluster 活动主机中。
在 Node Components 中，复制一个现有的 Data Trigger 并设置：
- Name 到 PopupAccidentAheadMaximized
- Condition Expression 到
```
{@./Datatrigger.ActivityProperty.Cluster.MainView}==0 && {@./Datatrigger.ActivityProperty.AccidentAhead}==true
```
  单击 Apply。
- Activity Activation Path 到 PopupAccidentAheadMaximized Activity 的路径。
对 PopupAccidentAheadMinimized、PopupBatteryLowMaximized 和 PopupBatteryLowMinimized 重复上一步，但设置相应的数据触发器激活的名称、表达式和活动。
在 Prefabs 中，选择 PopupControl > BatteryLow 节点。在 Properties 中，点击 + Add Binding，并在 Binding Editor 中设置：
- Binding Mode 到 Two way
- Property 到 Toggle State
- Expression 到
```
{#Cluster/Datatrigger.ActivityProperty.BatteryLow}
```
单击 Save。
对 PopupControl > AccidentAhead 节点重复上一步，但将绑定表达式设置为：
```
{#Cluster/Datatrigger.ActivityProperty.AccidentAhead}
```

完成的教程项目具有弹出窗口功能，您可以从 Cluster Activity Host 控制左右区域。您可以在 <KanziWorkspace>/Tutorials/Data trigger/Completed 目录中找到完成的 Kanzi Studio 项目。

另请参阅¶

要了解有关如何使用 Activity Browser 的更多信息，请参阅使用 Activity Browser。

要了解有关活动系统的更多信息，请参阅活动。