教程:控制应用程序 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 窗口中点击 Examples。在 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 窗口中,点击 Examples。在 Data trigger 教程旁边,点击 Open 并选择 Start project。
当弹出窗口最大化时,创建其 Activity 结构:
在 Prefabs > MaximizedLeft 预设中,创建一个名为 PopupMaximized 的 Parallel Activity Host,并将 MaximizedWidget 独占活动主机拖动到 PopupMaximized 活动主机。
使用 Parallel Activity Host,您可以同时激活多个弹出窗口,并将弹出窗口显示在当前激活的小部件之上。
在 Activity Browser 中,在 PopupMaximized 活动主机下,点击
,选择 Create Activity,并命名活动及其预设为 PopupIncomingCallMaximized。
在 Prefabs 中,将 PopupIncomingCallMaximizedImage 拖到 PopupIncomingCallMaximized 活动中。
在 Activity Browser 中,在 PopupIncomingCallMaximized 活动中,点击
。通过这种方式,您可以模拟此活动的激活,以便在 Preview 中查看其内容。
在 Prefabs 中,选择 MaximizedLeft > PopupMaximized > MaximizedWidget 活动主机。从 Properties 中,将 Horizontal Padding 属性拖到 Prefabs > MaximizedLeft > PopupMaximized 活动主机。
通过这种方式,您可以为 PopupMaximized 活动主机的所有活动设置填充。
在 Prefabs 中,选择 MaximizedWidget 活动主机。在 Properties 中,移除 Horizontal Padding 属性。
当弹出窗口被最小化时,创建其 Activity 结构:
在 Prefabs > MinimizedLeft 预设中,创建一个名为 PopupMinimized 的 Parallel Activity Host,并将 MinimizedWidget 活动拖到 PopupMinimized 活动主机。
在 Activity Browser 中,在 PopupMinimized 活动主机中,添加一个活动,并将其及其预设命名为 PopupIncomingCallMinimized。
在 Prefabs 中,将 PopupIncomingCallMinimizedImage 拖到 PopupIncomingCallMinimized 活动中。
在 Activity Browser 中,在 PopupIncomingCallMinimized 活动中,点击
。通过这种方式,您可以模拟此活动的激活,以便在 Preview 中查看其内容。
在 Prefabs 中,选择 MinimizedLeft > PopupMinimized > MinimizedWidget 活动主机。从 Properties 中,将 Horizontal Padding 和 Vertical Padding 属性拖动到 Prefabs > MinimizedLeft > PopupMinimized 活动主机。
在 Prefabs 中,选择 MinimizedWidget 活动主机。在 Properties 中,移除 Horizontal Padding 和 Vertical Padding 属性。
使用条件来控制 Activities 的激活状态。¶
在本节中,您将学习如何使用 Data Trigger 和 Apply Activation Action 来控制 Activity 的激活状态,当 Data Trigger 中的条件满足时。
要使用条件来控制活动的激活状态:
创建一个属性类型,您可以使用它来设置 Activity 的状态:
在 Library > Property Types > Datatrigger > ActivityProperty 中,按 Alt 并右键单击,并选择 Property Type。在 New Property Type 窗口中设置:
Name 到 Datatrigger.ActivityProperty.IncomingCall
Category 到 Controller Properties
Data Type 到 Boolean
在 Node Tree 中,选择 Cluster 节点。在 Properties 中,添加 Controller Properties > Datatrigger.ActivityProperty.IncomingCall 属性。
您将 Datatrigger.ActivityProperty.IncomingCall 属性添加到 Cluster 活动主机,因为您希望从此节点控制 IncomingCall 活动的激活状态。
创建一个 Data Trigger,用于根据条件控制活动的激活状态:
在 Node Tree 中,选择 Cluster 节点。在 Node Components 中,按 Alt 并右键单击 Triggers,选择 Data Trigger,并将其命名为 PopupIncomingCallMaximized。
在 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:
在 PopupIncomingCallMaximized 数据触发器中,按 Alt 并右键单击 Actions,并选择 Apply Activation Action。
在 Activity Browser 中,右键单击 PopupIncomingCallMaximized 活动并选择 Copy Activation Path。
在 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 活动:
在 Node Components 中,右键单击 PopupIncomingCallMaximized 数据触发器,选择 Duplicate,并将数据触发器重命名为 PopupIncomingCallMinimized。
在 Condition Expression 中,编辑表达式以
{@./Datatrigger.ActivityProperty.Cluster.MainView}==1 && {@./Datatrigger.ActivityProperty.IncomingCall}==true单击 Apply。
在 Activity Browser 中,右键单击 PopupIncomingCallMinimized 活动并选择 Copy Activation Path。在 PopupIncomingCallMinimized 数据触发器 Apply Activation Action 中,粘贴复制的路径,并从路径的开头删除
Cluster/。
创建一个UI元素来控制 IncomingCall 活动的激活。
在 Prefabs 中,将 PopupControl 预设拖到 MainGauge 预设中。
PopupControl 预设包含切换按钮,您可以使用这些按钮来控制弹出活动的激活。
在 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。 |
您现在可以通过以下方式控制 IncomingCall 弹出窗口的激活状态:
在 Preview 中,点击
切换按钮。在 Activity Browser 中,选择 Cluster 活动主机,并在侧面板中设置 IncomingCall 属性。
创建附加弹出窗口¶
要为新消息通知创建弹出窗口并使用 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:
在 MaximizedRight 活动中,创建一个名为 PopupMaximized 的 Parallel Activity Host,并将 MaximizedWidget 活动主机拖到 PopupMaximized 活动主机。
从 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。
要了解有关活动系统的更多信息,请参阅 活动。