步骤 1 - 创建应用程序结构¶

在教程的这一步骤中，您将学习：

关于不同类型的 Activity 节点
如何使用 Activity Browser 创建具有 Activity 节点的应用程序结构。
如何使用 State Manager 控制 Activity 节点的激活状态。

获取教程¶

要获取本教程，请在 Kanzi Studio Quick Start 窗口中点击 Examples。在 Activity 教程旁边，点击。

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

位于 <KanziWorkspace>/Tutorials/Activity/Start/Tool_project 目录中的教程起点项目。
位于 <KanziWorkspace>/Tutorials/Activity/Completed 目录中的已完成教程。

起始项目的内容¶

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

Prefabs 包含：
- 您在本教程中使用的 UI 元素的图像
- 用于控制活动激活的 UI 控件。
Library 包含您在应用程序中使用的 Brushes。

创建应用程序结构¶

在本节中，您将学习如何使用 Activity Browser 和不同类型的 Activity 节点来创建应用程序的结构。

使用 Activity Browser 创建具有 Activity 和 Activity Host 节点的应用程序结构，并模拟应用程序中 Activities 的激活。

要创建应用程序结构：

在 Kanzi Studio 的 Quick Start 窗口中点击 Examples。在 Activity 教程旁点击 Open 并选择 Start project。
在 Node Tree 中，右键单击 RootPage 节点并选择 Delete。

您删除 RootPage 节点，因为您使用 Activity Hosts 和 Activities 创建应用程序结构。

创建并设置根 Activity Host 节点：

在 Activity Browser 中，点击 create-root ，选择 Create Root Parallel Activity Host 2D，并将节点命名为 Cluster。

Kanzi Studio 在 Node Tree 中的 Screen 节点下创建一个 Parallel Activity Host 节点。在 Activity Browser 中，并行活动主机是紫色的。

Activity Host 定义了其子活动何时处于活动状态的规则。Parallel Activity Host 可以同时激活多个子活动。此功能通常使其成为应用程序顶级节点的最合适的活动宿主类型。

Activity Browser 显示了应用程序的所有可能的 UI 状态，包括包含多个项目的 Kanzi Studio 解决方案。使用 Activity Browser 来创建、检查和与应用程序中的 UI 状态进行交互。

小技巧

要在 Activity Browser 窗口中平移和缩放，请使用以下快捷键：

动作	快捷键
平移	点击鼠标中键并拖动。按下 `Space` 键，然后单击并拖动鼠标左键。
缩放	滚动鼠标滚轮。按下 `Shift` 和 `Alt` 键，然后单击并拖动鼠标左键。

在 Properties 中，添加并设置：
- Background Brush 到 Background
- Layout Width 到 1920。
- Layout Height 到 720。
  
  您设置 Layout Width 和 Layout Height 属性，以便 Cluster 节点与 Screen 节点具有相同的大小。
所有活动和活动主机节点都是 Content Layouts。默认情况下，Content Layout 节点的大小由其子节点的大小决定。

将标题添加到集群 UI：
1. 在 Activity Browser 中，在 Cluster 活动主机下，点击，选择 Create Activity，并将活动及其预设命名为 Header。
  
  在 Activity Browser 中，每个活动都有一个预设。在 Activity Browser 中，当您添加 Activity 时，您可以选择一个现有的预设或为您的活动创建一个预设。您只能选择属于 Activity 节点类型的预设。
  
  您在 Activity Browser 中添加的活动不是应用程序节点树中的节点。它们只是 Kanzi 在您激活这些活动后创建的结构的可视化。
  
  当您激活一个活动时，Kanzi：
  1. 使用其预设创建一个 Activity 节点。
  2. 将 Activity 节点附加到节点树。
  3. 使活动可见。
  4. 如果活动主机具有按键焦点且未进行其他配置，则将按键焦点设置为活动。控制是否将焦点设置到激活的 Activity。。
  5. 将 Activity 的 Activity Status 属性设置为 Active，并发送 ActivityConcept::ActivityActivatedMessage 和 ActivityConcept::StatusChangedMessage 消息。如果 Activity 的预设件具有激活迁移动画，Activity 会先经过 Activating 状态。请参阅 Activity 的状态管理。
  小技巧
  
  在 Activity Browser 中，当您想要将活动树调整为 Activity Browser 窗口的大小时，请在右上角单击。
2. 在 Activity Browser 中，选择 Header 活动，并在侧面板中将 InitiallyActive 属性设置为启用。
  
  通过这种方式，当活动主机处于活动状态时，您可以将活动设置为活动状态。为了表示这一点，Activity Browser 会为所有此类活动显示图标。
3. 在 Prefabs 中，将 HeaderImage 预设拖到 Header 预设中。
  
  当使用该预设的活动处于活动状态时，您添加到活动预设中的节点是可见的，用户可以与它们进行交互。
4. 在 Prefabs 中，选择 Header 预设，并在 Properties 中添加和设置：
  - Layout Width 到 1920。
  - Layout Height 到 720。
重复上一步将指示器添加到集群 UI，但将活动命名为 Telltales，并使用 TelltalesImage 预设。
将主仪表添加到集群 UI：
1. 在 Activity Browser 中，在 Cluster 活动主机下添加一个活动，为其命名及其预设 GaugeView，并将 InitiallyActive 属性设置为启用。
  
  您使用此活动来显示主仪表和集群小部件。您将在本教程的下一步中添加这些小部件。
2. 在 Activity Browser 中，在 GaugeView 活动中添加一个 Parallel Activity Host，并将其命名为 GaugeViewActivityHost。
  
  使用此 Parallel Activity Host，以便您可以显示并单独控制主仪表和小部件的状态。
3. 在 Activity Browser 中，在 GaugeViewActivityHost 活动主机中添加一个 MainGauge 活动，并将其 InitiallyActive 属性设置为启用。
  
  您可以使用此 Activity 在组合仪表的中心显示主仪表。
4. 在 Prefabs 中，将 MainGaugeImage 预设拖到 MainGauge 预设中。
5. 在 Prefabs 中，选择 MainGauge 预设，并在 Properties 中添加和设置：
  - Layout Width 到 1920。
  - Layout Height 到 720。

使用状态管理器控制活动¶

在本节中，您将学习如何使用状态管理器控制一个 Activity 节点。

使用状态管理器控制 Activities

在 Node Tree 中，按 Alt 并右键单击 Cluster 节点并选择 Alias。

Kanzi Studio 在最近的节点的资源字典中创建一个别名。在此项目中，最近的具有资源字典的节点是 Screen 节点。

使用 Alias 来获得对 Kanzi 节点的一致访问。您可以使用别名来访问 Kanzi Studio 中的节点，并使用 Kanzi Engine API。
在 Activity Browser 中，右键单击 Cluster 活动主机，选择 Create Activity Property > Enum，并将其命名为 Cluster.MainView。

Kanzi Studio 创建一个 Activity Property 属性类型，并将其添加到 Cluster 节点。

您可以使用此属性类型控制组合仪表状态。

对于每个 Activity，您可以定义特定于该 Activity 的属性。这种类型的属性称为 Activity Property，这些属性的值实现了您的 Kanzi 应用程序的状态机和逻辑。Activity Properties 使 Kanzi 能够在 Activity 为虚拟时仍然保留这些属性的值。当 Kanzi 虚拟化一个 Activity 时，它会序列化该 Activity 的属性，而当 Kanzi 取消虚拟化该 Activity 时，它会反序列化该 Activity 的状态并恢复其属性值。

在 Activity Browser 中，当您更改活动属性的值时，您设置了该属性的运行时值。
在 Library > Property Types 中，选择 Activity > ActivityProperty > Cluster > MainView 属性，并在 Properties 中编辑 Enumeration Options，以便该属性具有以下枚举键和值：
- Drive 到 0
- Browse 到 1
小技巧

要从 Properties 快速访问自定义属性类型，请右键单击自定义属性类型并选择 Select in Library。
创建一个状态管理器，用于在 Drive 和 Browse 状态之间切换：
1. 在 Library > State Managers 中，创建一个名为 Cluster 的状态管理器，其中包含状态 Drive 和 Browse。
2. 从 Library > State Managers，将 Cluster 状态管理器拖到 Node Tree 上，并将其放在 Cluster 节点上。
  
  通过这种方式，您可以将 Cluster 状态管理器添加到 Cluster 节点。当您将状态管理器放到节点上时，Kanzi Studio 会添加 Resources > State Manager 属性，并将其设置为您放置的状态管理器。
3. 在 Library > State Managers > Cluster 状态管理器中，选择 State Group，并在 Properties 中将 Controller Property 设置为 Activity.ActivityProperty.Cluster.MainView 属性。
  
  您使用 Activity.ActivityProperty.Cluster.MainView 属性来控制此状态管理器。
4. 在 Library > State Managers > Cluster 状态管理器中，选择 Browse 状态，并在 Properties 中将 Activity.ActivityProperty.Cluster.MainView 属性设置为 Browse。
  
  在 Drive 状态下，控制器属性的值已设置为 Drive。
5. 在 Drive 状态下，创建一个 State Object，将其命名为 MainGauge，并在 Properties 中添加并设置：
  - Target Object Path 到
    #Cluster/GaugeView/GaugeViewActivityHost/MainGauge/MainGaugeImage
    您使用之前创建的 Cluster 别名以及从 Cluster 节点到要用此状态控制的内容的路径。
  - Transform 2D > Render Transformation
    
    您使用此属性的默认值，因为在 Drive 状态下，您希望保持仪表在最初的位置。
6. 将您在上一步中创建的 MainGauge State Object 复制，粘贴到 Browse 状态，并将 Render Transformation 属性 Translation X 属性字段设置为 -565。
  
  通过这种方式，您可以将仪表在 Browse 状态下置于集群 UI 的左侧。
创建一个UI元素来控制 Cluster 的状态。
1. 在 Prefabs 中，将 MainViewSwitcher Toggle Button 预设拖到 Header 预设中。
2. 在 Prefabs 中，选择 MainViewSwitcher 预设，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
  - Binding Mode 到 Two way
  - Property 到 Toggle State
  - Expression 到
```
{#Cluster/Activity.ActivityProperty.Cluster.MainView}
```
  单击 Save。
  
  此绑定使 MainViewSwitcher 切换按钮能够获取和设置 Cluster 活动主机中 Activity.ActivityProperty.Cluster.MainView 属性的值。这样，切换按钮就可以控制 Cluster 活动主机的状态。