教程：从数据源生成 UI

在本教程中，您将学习如何从数据源生成应用程序 UI。

您可以使用列表数据源和 Data-Driven Exclusive Activity Host 从数据对象的内容中创建具有 Activities 的 UI 部分。例如，您可以在数据源中定义菜单的内容，并使用 Data-Driven Exclusive Activity Host 在您的应用程序中创建菜单。

在本教程中，您将使用 Data-Driven Exclusive Activity Host 和列表数据源来创建一个设置面板，该面板显示设置项，并且每个项都有其自己的 UI 控件。

视频显示教程的结果。

本教程假定您了解使用 Kanzi 活动系统的基础知识。最好的入门点是教程：

• 教程：构建应用程序 UI

• 教程：控制应用程序 UI

获取教程

要获取该教程，请在 Kanzi Studio Quick Start 窗口中点击 Projects，然后选择 Tutorials 选项卡。在 Data-Driven Activities 教程旁边，点击 。

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

• 教程起点工程位于 <KanziWorkspace>/Tutorials/Data-Driven Activities/Start/Tool_project 目录中。

  要了解此工程的内容以及如何创建此类工程，请参阅 教程：控制应用程序 UI。

• 完成的教程位于 <KanziWorkspace>/Tutorials/Data-Driven Activities/Completed 目录中。

起始项目的内容

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

• SettingsMenuBar 图像和预设。您将此图像用作 Data-Driven Exclusive Activity Host 生成的内容的界面模型。

  

• SettingsLayout 预设。您使用此预设在应用程序的 Settings 菜单中布局内容，以及用于在 Data-Driven Exclusive Activity Host 生成的活动之间导航的 UI 控件。

  

• 这些来自 Kanzi Studio Factory Content 的 UI 控件：

  • Button 在 ControlButton 预设中实例化。

  • Checkbox 在 ControlCheckbox 预设中实例化。

  • Slider 在 ControlSlider 预设中实例化。

  • Toggle Button 在 ControlToggleButton 预设中实例化。

  您在 Data-Driven Exclusive Activity Host 生成的活动中使用这些 UI 控件。

  

• 您在教程中使用的字体。

  

• XML_data_source 是一个 Kanzi Engine 插件，它为使用 XML 作为 Kanzi 应用程序的数据源提供了有限的支持。

  您使用此 Kanzi Engine 数据源插件从 XML 数据源获取数据，并将这些数据与 Data-Driven Exclusive Activity Host 一起使用以生成活动。

  要了解有关此插件以及如何定义您自己的数据源的更多信息，请参阅 教程：从数据源获取应用程序数据。

  

• Application/bin/Settings.xml 包含描述 Data-Driven Exclusive Activity Host 用于生成活动的内容的数据。

  <SettingsPanels type="list">
      <items>
          <SettingsPanelItem>
              <PanelName type="string">WINDOWS</PanelName>
              <SettingsItems type="list">
                  <items>
                      <SettingItem>
                          <SettingName type="string">Front left</SettingName>
                          <SettingType type="string">slider</SettingType>
                          <SettingValue type="int">0</SettingValue>
                          <SettingRange type="int">10</SettingRange>
                      </SettingItem>
                      <SettingItem>
                          <SettingName type="string">Front right</SettingName>
                          <SettingType type="string">slider</SettingType>
                          <SettingValue type="int">0</SettingValue>
                          <SettingRange type="int">10</SettingRange>
                      </SettingItem>
                      <SettingItem>
                          <SettingName type="string">Back left</SettingName>
                          <SettingType type="string">slider</SettingType>
                          <SettingValue type="int">0</SettingValue>
                          <SettingRange type="int">10</SettingRange>
                      </SettingItem>
                      <SettingItem>
                          <SettingName type="string">Back right</SettingName>
                          <SettingType type="string">slider</SettingType>
                          <SettingValue type="int">0</SettingValue>
                          <SettingRange type="int">10</SettingRange>
                      </SettingItem>
                  </items>
              </SettingsItems>
          </SettingsPanelItem>
  
        ...
  
     </items>
  </SettingsPanels>
  

• Screen 节点的资源字典包含指向 Cluster Parallel Activity Host 的别名。您使用此别名来访问该 Activity Host。

  

• Header 活动包含一个 Toggle Button 节点，使您能够在 Drive 和 Browse 应用模式之间切换。

  

从数据源生成活动

在本节中，您将创建一个模板 Activity，然后在 Data-Driven Exclusive Activity Host 中使用该模板从 XML 数据源生成 Activities。

要从数据源生成活动：

1. 创建一个包含列表数据对象的数据源：

   1. 在 Kanzi Studio Quick Start 窗口中点击 Projects，然后选择 Tutorials 选项卡。在 Data-Driven Activities 教程旁边，点击 Open 并选择 Start project。

   2. 在 Window 主菜单中选择 Data Sources。

      使用 Data Sources 窗口在您的项目中创建、设置和删除数据源，并将数据源中的数据对象连接到项目中的节点和资源。

      

   3. 在 Data Sources 窗口中，单击 Create Data Source 并创建一个具有以下设置的数据源：

      • Name 到 Settings

      • Data Source Type 到 XML_data_source

      

   4. 在您刚刚创建的数据源旁边的 Data Sources 中，点击 ，并将 XML Data Source File 属性设置为使用 Application/bin/Settings.xml XML 文件作为数据源。

      

   5. 在 Settings 数据源旁边的 Data Sources 中单击 。

      通过这种方式，您可以从 Application/bin/Settings.xml 文件加载数据并创建数据对象。数据驱动的独占活动主机使用这些数据对象生成活动。

      

2. 创建模板，以供 Data-Driven Exclusive Activity Host 用于生成其活动的 Activities：

   1. 在 Prefabs 中，单击 ，选择 Activity 2D，将其命名为 SettingsPanelTemplate，并在该 Activity 预设中创建一个名为 PanelName 的 Text Block 2D 节点的 Stack Layout 2D 节点。

      

   2. 在 Prefabs 中，选择 SettingsPanelTemplate > Stack Layout 2D > PanelName，然后从 Data Sources 中拖动 Settings > SettingsPanels > Item > SettingsPanelItem > PanelName 数据对象到 Properties 上，并将其放在 Text 属性上。

      通过这种方式，您可以将 PanelName 节点设置为显示在 PanelName 数据对象中设置的设置菜单名称。当您将数据对象拖放到属性上时，Kanzi Studio 会将该属性类型的值绑定到数据对象的值。

      PanelName 数据对象从 Settings.xml 文件的 <PanelName> 元素中获取值。

      <SettingsPanels type="list">
          <items>
              <SettingsPanelItem>
                  <PanelName type="string">WINDOWS</PanelName>
                  ...
              </SettingsPanelItem>
              <SettingsPanelItem>
                  <PanelName type="string">MIRRORS</PanelName>
                  ...
              </SettingsPanelItem>
              <SettingsPanelItem>
                  <PanelName type="string">LIGHTS</PanelName>
                  ...
              </SettingsPanelItem>
              <SettingsPanelItem>
                  <PanelName type="string">SEATS</PanelName>
                  ...
              </SettingsPanelItem>
          </items>
      </SettingsPanels>
      

      

   3. 在 Prefabs 中选择 SettingsPanelTemplate，并在 Properties 中添加并设置 Vertical Padding 属性字段 Top 为 80。

      通过这种方式，您可以在 Settings 面板的顶部与应用程序界面的其余部分之间添加填充。

      

3. 为 SettingsPanel 创建结构和内容：

   1. 在 GaugeViewActivityHost 下方的 Activity Browser 中，点击 ，选择 Create Activity，并命名活动及其预设为 Settings。

      

   2. 在 Prefabs 中，将 SettingsMenuBar 节点拖到 Settings 活动中。

      

   3. 在 Settings 活动中的 Activity Browser 中单击 。

      通过这种方式，您可以模拟 Activity 的激活，以便在 Preview 中查看。

      

   4. 在 Prefabs 中选择 Settings 预设，并在 Properties 中添加和设置：

      • Vertical Padding Top 到 91。

      • Horizontal Alignment 到 Right

      

4. 创建一个 Data Trigger，当 Cluster 活动主机处于 Browse 模式时激活 Settings 活动：

   1. 在 Prefabs 中选择 GaugeView > GaugeViewActivityHost。

      

   2. 在 Node Components 按 Alt 并右键单击 Triggers 中，选择 Data Trigger，并将其命名为 SettingsPanel。

      

   3. 在 Expression 中使用表达式：

      {#Cluster/ActivityProperty.Cluster.MainView} == 1
      

      数据触发器中的条件表达式必须评估为 True 或 False。

      单击 Apply。

      通过这种方式，您将 Data Trigger 设置为在数据触发器中保持一个 Apply Action，只要 ActivityProperty.Cluster.MainView 属性设置为 Browse （枚举值 1）。您在下一步中添加一个 Apply Activation Action。通过此绑定，ActivityProperty.Cluster.MainView 的值来自 Cluster 活动主机。您使用起始项目中包含的 Cluster 别名，该别名指向 Cluster 并行活动主机。

      

   4. 在 SettingsPanel 触发器 按 Alt 并右键单击 Actions 中，选择 Apply Activation Action，并将 Activity Activation Path 设置为 Settings。

      您在 Activity Activation Path 属性中设置的活动路径是相对于您在 Activity Host Path 属性中设置的活动主机节点的。

      数据触发器和应用激活操作会使此活动保持活跃状态，只要数据触发器中的条件得到满足。

      Activity Browser 表示 Activity Host 具有带有 图标的 Data Trigger。

      

5. 创建并设置一个 Data-Driven Exclusive Activity Host，以从数据源生成活动：

   1. 在 Settings 活动下方的 Activity Browser 中，点击 ，选择 Create Data-Driven Exclusive Activity Host，并将数据驱动的独占活动主机命名为 SettingsPanel。

      

   2. 在 Prefabs 中选择 Settings 预设，在 Properties 中添加 Data Context > Data Context 属性，并将其设置为您之前创建的 Settings 数据源。

      通过这种方式，您可以设置 SettingsPanel 数据驱动独占活动主机用于生成活动的数据源。

      

   3. 在 Prefabs 中选择 Settings > SettingsPanel，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：

      • Property 到 Activity Source

      • Binding Expression 到

        {DataContext.SettingsPanels}
        

      单击 Save。

      当您将 Activity Source 属性绑定到数据对象时，您告诉数据驱动的独占活动主机使用该数据对象中的数据来生成活动。

      小技巧

      您可以右键单击某个属性并选择 Create Binding，开始为该属性创建绑定。

      这样，您会自动将该属性添加到 Binding Editor 中。

      
      

   4. 在 Prefabs 中选择 Settings > SettingsPanel，在 Properties 中添加并设置：

      • Activity Template 到 SettingsPanelTemplate 预设。

        数据驱动独占活动主机使用此预设来创建活动。

      • Active Activity Index 到列表数据对象中您希望数据驱动独占活动主机在应用程序激活此数据驱动独占活动主机时用于创建活动的项目。

        Active Activity Index 属性的值是从零开始的，表示数据源中列表数据对象中的位置，数据驱动的独占活动主机使用该位置来创建活动。值 -1 表示该数据驱动的独占活动主机中没有活动处于激活状态。

      

在 Activity Browser 中，您现在可以浏览由 SettingsPanel 数据驱动的独占活动主机生成的活动：

1. 在 Activity Browser 中选择 Cluster，并在侧面板中将 MainView 属性设置为 Browse。

   

2. 在 Activity Browser 中选择 SettingsPanel 数据驱动独占活动主机，并在侧面板中设置 Active Activity Index 属性的值。

   使用 Active Activity Index 属性来告知数据驱动的独占活动主机节点您要在列表数据对象中创建的项目。当您在 Activity Browser 中设置 Active Activity Index 属性的值时，您更改了此属性的运行时值。当您重新启动 Preview 或应用程序时，数据驱动的独占活动主机会读取您在 Properties 中设置的 Active Activity Index 属性的值。

   

创建在不同 Activities 之间导航的控件

在本节中，您将创建控件，以在 SettingsPanel 数据驱动独占活动主机中的活动之间进行导航。

要创建在活动之间导航的控件：

1. 在 Prefabs 中，将 Settings > SettingsPanel 拖到 SettingsLayout 预设中 Previous 和 Next 节点之间，然后将 SettingsLayout 拖到 Settings 活动中。

   

2. 在 Prefabs 中，选择 SettingsLayout > Previous 按钮节点，在 Node Components 按 Alt 并右键单击 Button: Click 中，选择 Dispatch Message Action > Exclusive Activity Host > Navigate to Previous Activity。

   

3. 在 Navigate to Previous Activity 操作集中的 Node Components：

   • Target Item 到 Prefabs/SettingsLayout/SettingsLayout/SettingsPanel

     通过这种方式，您可以在 Navigate to Previous Activity 操作中设置要转到上一个活动的 Data-Driven Exclusive Activity Host。

   • 将 Loop Activity 设置为 enabled。

     通过这种方式，您可以设置一个 Navigate to Previous Activity 操作，以便在到达该活动主机中的第一个活动后，转到 Data-Driven Exclusive Activity Host 中的最后一个活动。

   

4. 对 SettingsLayout > Next 按钮节点重复该过程，但要创建一个 Navigate to Next Activity 动作。

   

在 Activity Browser 中，当您选择 Cluster 活动主机并在侧面板中将 MainView 设置为 Browse 时，在 Preview 中，您现在可以使用按钮在 SettingsPanel 数据驱动独占活动主机中的活动之间导航。

在 SettingsPanel 中显示设置。

在本节中，您在 SettingsPanel 中显示为 Settings 数据源中的每个面板定义的设置。

要在 SettingsPanel 中显示设置：

1. 在 Prefabs 中创建一个名为 SettingItem 的 Stack Layout 2D 预设，并在其中创建一个名为 SettingName 的 Text Block 2D。

   您使用此预设来显示来自 Settings 数据源的每个 SettingItem。

   

2. 在 Prefabs 中选择 SettingItem > SettingName，从 Data Sources 中拖动 Settings > SettingsPanels > Item > SettingsPanelItem > SettingsItems > Item > SettingItem > SettingName 到 Properties，并将其放在 Text 属性上。

   通过这种方式，您将 SettingName 的 Text 属性绑定到 Settings 数据源中的 SettingName 数据对象。

   

3. 在 Prefabs > SettingsPanelTemplate > Stack Layout 2D 中创建一个 Grid List Box 2D 并将其命名为 SettingPanelListBox。

   您使用此列表框通过 SettingItem 显示来自 Settings 数据源的设置。

   

4. 在 Prefabs 中选择 SettingPanelListBox，并将其设置为显示来自 Settings 数据源的项目：

   • 从 Data Sources 拖动 Settings > SettingsPanels > Item > SettingsPanelItem > SettingsItems 数据对象到 Properties，并将其放在 Items Source 属性上。

   • 在 Properties 中添加并设置：

     • Item Template 到 SettingItem

       使用 Item Template 属性，您可以设置要为其列表中的项目使用哪个预设模板的 Grid List Box 节点。

     • Layout Width 到 550。

     • Layout Height 到 280。

     • Cell Width 到 550。

     • Cell Height 到 60

   

5. 调整内容在 SettingsPanel 数据驱动独占活动主机中的呈现：

   • 在 SettingsPanelTemplate > Stack Layout 2D 中，将 Direction 设置为 Y。

     

   • 在 SettingsPanelTemplate > Stack Layout 2D > PanelName 中添加并设置：

     • Font Family 到 Roboto

     • Font Size 到 28

     • Horizontal Alignment 到 Center

     

   • 在 SettingItem > SettingName 中添加并设置：

     • Font Family 到 Roboto

     • Font Size 到 28

     • Font Weight 到 Light

     • Layout Width 到 220

     • Vertical Alignment 到 Center

     

在 Activity Browser 中，当您选择 Cluster 活动主机，并在侧面板中将 MainView 设置为 Browse 时，在 Preview 中，您现在可以在 SettingsPanel 数据驱动独占活动主机中看到为 Settings 数据源中的每个面板定义的设置。

显示设置项的 UI 控件。

在本节中，您将学习如何在 SettingsPanel 中为每个设置项显示在 Settings 数据源中为该设置项指定的控件。

要显示设置项的 UI 控件：

1. 在 Library > Property Types 中，创建一个名为 Data-DrivenActivities.SettingControlType 的属性类型，并将 Data Type 设置为 Text。

   您使用此属性类型来设置要在 SettingsPanel 中为每个设置使用的 UI 控件类型。

   

2. 创建一个状态管理器，在 SettingsPanel 中为每个设置项选择 UI 控件：

   1. 在 Library > State Managers 中，创建一个名为 SettingControlType 的状态机，将 State Group 重命名为 Control，并在 Properties 中将 Controller Property 属性设置为 Data-DrivenActivities.SettingControlType。

      

   2. 在 Library > State Managers > SettingControlType > Control 中，为每种控件类型创建一个设置这些属性的状态：

      状态 (State)	Data-DrivenActivities. SettingControlType	Prefab View > Prefab Template
      Button	button	ControlButton
      Checkbox	checkbox	ControlCheckbox
      Slider	slider	ControlSlider
      Toggle Button	togglebutton	ControlToggleButton

      您使用这些状态来设置要用于每项设置的 UI 控件。对于 Data-DrivenActivities.SettingControlType 属性值，使用与 Settings 数据源为每种 UI 控件类型所使用的相同值。

      

3. 在 Prefabs > SettingItem 中创建一个 Prefab View 2D，将其命名为 SettingControl，并在 Properties 中：

   • 添加并设置：

     • Resources > State Manager 到 SettingControlType

     • Layout Width 到 300

     • Layout Height 到 70

   • 单击 + Add Binding，并在 Binding Editor 中设置：

     • Property 到 Data-DrivenActivities.SettingControlType

     • Expression 到

       {DataContext.SettingItem.SettingType}
       

     单击 Save。

     这样，SettingControlType 属性的值来自 SettingType 数据对象。由于 SettingControlType 状态机的控制器属性是 Data-DrivenActivities.SettingControlType 属性，因此您可以使用此方法实例化 Settings 数据源所包含的 UI 控件的预设件。

     

在 Activity Browser 中，当您选择 Cluster 活动主机并在侧面板中将 MainView 设置为 Browse 时，在 Preview 中，您现在可以在 SettingsPanel 数据驱动独占活动主机中看到每个设置项都有一个在 Settings 数据源中定义的 UI 控件。

使用数据源设置UI控件。

在本节中，您设置 Checkbox、Slider 和 Toggle Button UI 控件，以从 Settings 数据源获取并存储其值。这样，当用户导航到其他活动时，UI 控件的值将保持不变。您在本教程中使用的 XML_data_source 数据源仅将这些值存储在内存中。

要使用数据源设置UI控件：

1. 在 Prefabs 中选择 Checkbox 预设，在 Properties 中单击 + Add Binding，并在 Binding Editor 中设置：

   • Binding Mode 到 Two way

   • Property 到 Toggle State

   • Expression 到

     {DataContext.SettingItem.SettingValue}
     

   单击 Save。

   这样，Checkbox 从 SettingValue 数据对象获取其状态，并将用户设置的值存储到该设置项的 SettingValue 数据对象中。

   

2. 为 Toggle Button 预设件重复上一步骤。

   小技巧

   要在多个节点中创建相同的绑定，请在 Node Tree 中选择这些节点，然后在 Properties 中点击 + Add Binding，或者右键单击某个属性并选择 Create Binding。

   

   小技巧

   要复制绑定：

   1. 在 Properties 中，右键单击您要复制的绑定，然后选择 Copy Binding。

   2. 在 Properties 中选择要使用绑定的节点，右键单击 Bindings 属性，然后选择 Paste Binding(s)。

   

3. 要使用数据源设置 Slider：

   1. 在 Prefabs 中选择 Slider 预设，在 Properties 中单击 + Add Binding，并在 Binding Editor 中设置：

      • Property 到 Maximum Value

      • Expression 到

        {DataContext.SettingItem.SettingRange}
        

      单击 Save。

      这样，Slider 从 SettingRange 数据对象中获取其最大值。

      

   2. 在 Properties 中，单击 + Add Binding，并在 Binding Editor 中设置：

      • Binding Mode 到 Two way

      • Property 到 Value

      • Expression 到

        {DataContext.SettingItem.SettingValue}
        

      单击 Save。

      这样，Slider 从 SettingValue 数据对象获取其值，并将用户设置的值存储到该设置项的 SettingValue 数据对象中。

      

在 Preview 中，当您更改设置项中 UI 控件的值并离开该活动时，当您返回到该活动时，该 UI 控件的值保持不变。

接下来该做什么？

在本教程中，您学习了如何使用 Data-Driven Exclusive Activity Host 从数据源生成活动。现在您可以：

• 了解如何使用 Code Behind 工作流程编程活动。请参阅 教程：使用 C++ 代码后台编程活动。

• 学习如何定义数据源。请参阅 教程：从数据源获取应用程序数据。

• 了解如何使用 List Box。请参阅 教程：使用 Grid List Box 创建联系人列表。。

另请参阅

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

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

要了解有关 Data Sources 的更多信息，请参阅 数据源 (Data Sources)。

要了解有关 Kanzi 状态管理器的更多信息，请参阅 状态机 (State Manager)。

要了解有关使用绑定的更多信息，请参阅 使用绑定 和 Bindings expressions 参考。