Data Driven Exclusive Activity Host nodes

You can use a data source and a Data Driven Exclusive Activity Host node to create parts of UI with Activity nodes from content of data objects. For example, you can define the content of menus in a data source and use a Data Driven Exclusive Activity Host node to create the menus in your application.

Data Driven Exclusive Activity Host nodes can have only one of its child Activity nodes active at a time. When one child Activity node of a Data Driven Exclusive Activity Host node is active, all other Activity nodes of that Activity Host node are inactive. For example, you can use a Data Driven Exclusive Activity Host node to toggle between views in your application.

Creating Activity nodes using a data source

To create Activity nodes using a data source:

  1. Add a data source with a list data object to your Kanzi Studio project.

    To learn how to use a data source, see Using a data source and Tutorial: Get application data from a data source.

    For example:

    1. In the Library right-click Kanzi Engine Plugins, select Import Kanzi Engine Plugin and import the <KanziWorkspace>/Tutorials/Data sources/Completed/lib/Win32/GL_vs2017_Release_DLL/XML_data_source.dll.

    2. In the Window main menu select Data Sources to open the Data Sources window.

      ../../_images/window-data-sources.png
    3. In the Data Sources window click Create Data Source, enter a name for this data source, and click OK to create a data source.

      ../../_images/create-data-source.png
    4. In the Data Sources window next to the data source that you just created click quick-edit and set the XML Data Source File property to use an XML file as a data source.

      For example, save this data as an XML file and set the data source to use that file.

      <Settings type="list">
          <items>
              <Menu>
                  <Name type="string">WINDOWS</Name>
                  <Settings type="list">
                      <items>
                          <Setting>
                              <Name type="string">Front left</Name>
                              <Type type="string">slider</Type>
                              <Value type="int">0</Value>
                              <Range type="int">10</Range>
                          </Setting>
                          <Setting>
                              <Name type="string">Front right</Name>
                              <Type type="string">slider</Type>
                              <Value type="int">0</Value>
                              <Range type="int">10</Range>
                          </Setting>
                          <Setting>
                              <Name type="string">Back left</Name>
                              <Type type="string">slider</Type>
                              <Value type="int">0</Value>
                              <Range type="int">10</Range>
                          </Setting>
                          <Setting>
                              <Name type="string">Back right</Name>
                              <Type type="string">slider</Type>
                              <Value type="int">0</Value>
                              <Range type="int">10</Range>
                          </Setting>
                      </items>
                  </Settings>
              </Menu>
              <Menu>
                  <Name type="string">MIRRORS</Name>
                  <Settings type="list">
                      <items>
                          <Setting>
                              <Name type="string">Rearview</Name>
                              <Type type="string">slider</Type>
                              <Value type="int">5</Value>
                              <Range type="int">10</Range>
                          </Setting>
                          <Setting>
                              <Name type="string">Side left</Name>
                              <Type type="string">slider</Type>
                              <Value type="int">5</Value>
                              <Range type="int">10</Range>
                          </Setting>
                          <Setting>
                              <Name type="string">Side right</Name>
                              <Type type="string">slider</Type>
                              <Value type="int">5</Value>
                              <Range type="int">10</Range>
                          </Setting>
                      </items>
                  </Settings>
              </Menu>
              <Menu>
                  <Name type="string">LIGHTS</Name>
                  <Settings type="list">
                      <items>
                          <Setting>
                              <Name type="string">Ceiling</Name>
                              <Type type="string">checkbox</Type>
                              <Value type="bool">0</Value>
                          </Setting>
                          <Setting>
                              <Name type="string">Back left</Name>
                              <Type type="string">checkbox</Type>
                              <Value type="bool">0</Value>
                          </Setting>
                          <Setting>
                              <Name type="string">Back right</Name>
                              <Type type="string">checkbox</Type>
                              <Value type="bool">0</Value>
                          </Setting>
                      </items>
                  </Settings>
              </Menu>
              <Menu>
                  <Name type="string">SEATS</Name>
                  <Settings type="list">
                      <items>
                          <Setting>
                              <Name type="string">Heating left</Name>
                              <Type type="string">togglebutton</Type>
                              <Value type="bool">0</Value>
                          </Setting>
                          <Setting>
                              <Name type="string">Heating right</Name>
                              <Type type="string">togglebutton</Type>
                              <Value type="bool">0</Value>
                          </Setting>
                          <Setting>
                              <Name type="string">Back left</Name>
                              <Type type="string">button</Type>
                              <Value type="bool">0</Value>
                          </Setting>
                          <Setting>
                              <Name type="string">Back right</Name>
                              <Type type="string">button</Type>
                              <Value type="bool">0</Value>
                          </Setting>
                      </items>
                  </Settings>
              </Menu>
          </items>
      </Settings>
      
  2. In the Prefabs create an Activity node prefab with the structure that you want to use to present the content from the data source. The Data Driven Exclusive Activity Host node uses this prefab to create Activity nodes.

    For example:

    1. In the Prefabs create:

      • An Activity 2D node that contains a Text Block 2D and a Grid List Box 2D node.

      • An Empty Node 2D node that contains a Text Block 2D node.

        The Grid List Box 2D node uses this prefab to show the content of a menu that comes from the data source.

      ../../_images/ddeah-activity-prefab.png
    2. In the Prefabs in the Activity 2D node select the Text Block 2D node and from the Data Sources drag the Settings > Item > Menu > Name data object to the Properties and drop it on the Text property.

      This way you set the Text Block 2D node to show the name of a settings menu from the Settings > Item > Menu > Name list data object.

      ../../_images/ddeah-activity-text-block.png ../../_images/data-sources-menu-name.png ../../_images/ddeah-activity-text-block-text-binding.png
    3. In the Prefabs in the Activity 2D node select the Grid List Box 2D node, from the Data Sources drag the Settings > Item > Menu > Settings list data object to the Properties and drop it on the Items Source property.

      This way you set the Grid List Box 2D node to show items in a settings menu from the Settings > Item > Menu > Settings list data object.

      ../../_images/ddeah-activity-grid-list-box.png ../../_images/data-sources-menu-settings.png ../../_images/ddeah-activity-grid-list-box-items-source-binding.png
    4. In the Prefabs in the Activity 2D node select the Grid List Box 2D node and in the Properties add and set:

      • Cell Width to 200

      • Cell Height to 40

      • Layout Width 200

      • Layout Height to 200

      • Item Template to Empty Node 2D prefab

      To learn how to use a Grid List Box, see Using the Grid List Box nodes and Tutorial: Create a contacts list with a Grid List Box.

      ../../_images/ddeah-activity-grid-list-box-properties.png
    5. In the Prefabs in the Empty Node 2D select the Text Block 2D node, from the Data Sources drag the Settings > Item > Menu > Settings > Item > Setting > Name data object to the Properties and drop it on the Text property.

      This way you set the Text Block 2D node to show each item in a settings menu from the Settings > Item > Menu > Settings list data object.

      ../../_images/ddeah-empty-node-text-block.png ../../_images/data-sources-menu-settings-setting-name.png ../../_images/ddeah-empty-node-text-block-text-property.png
  3. Create and set up a Data Driven Exclusive Activity Host:

    1. In the Activity Browser click add-button and create a Data Driven Exclusive Activity Host node.

      Kanzi Studio creates a Data Driven Exclusive Activity Host node in the RootPage node.

      ../../_images/activity-browser-create-root-ddeah.png ../../_images/node-tree-root-ddeah.png
    2. In the Node Tree select the Data Driven Exclusive Activity Host node that you created, or one of its ancestor nodes, and in the Properties add and set the Data Context property to the data source that you created in your project.

      ../../_images/node-tree-root-ddeah.png ../../_images/properties-ddeah.png
    3. In the Node Tree select the Data Driven Exclusive Activity Host, in the Properties click + Add Binding and in the Binding Editor set:

      • Property to Activity Source

      • Expression to the data object that you want the Data Driven Exclusive Activity Host to use to create Activity nodes

        For example, set Expression to

        {DataContext.Settings}
        

      Click Save.

      ../../_images/binding-editor-ddeah.png
    4. In the Properties add the Activity Template property and set it to the Activity node prefab that you created earlier. The Data Driven Exclusive Activity Host node uses this prefab to create Activity nodes.

      ../../_images/properties-ddeah-activity-template.png
    5. In the Properties add the Activity Index property.

      Use the Activity Index property to tell a Data Driven Exclusive Activity Host node from which item in a data object you want that Activity Host node to create an Activity node. To deactivate all Activity nodes in a Data Driven Exclusive Activity Host, set the Activity Index property to -1.

  4. Create nodes with triggers that you want to use to navigate between Activity nodes that the Data Driven Exclusive Activity Host creates.

    For example:

    1. Create nodes with triggers that you want to use to navigate between Activity nodes.

      For example, create Button nodes and use the Button: Click trigger.

      ../../_images/node-tree-ddeah-buttons.png ../../_images/node-components-button-click.png
    2. In the Node Tree select the node that you created in the previous step, in the Node Components > Triggers press Alt and right-click the trigger that you want to use to activate an Activity node, select either Navigate To Next Activity or Navigate To Previous Activity action, and in the action set:

      • Target Item to the Data Driven Exclusive Activity Host node that contains the Activity nodes that you want to activate.

      • (Optional) If you want the Data Driven Exclusive Activity Host node to activate the first or last Activity node when you set off the trigger after you reach the last or first Activity node in that Data Driven Exclusive Activity Host node, set the Loop Activity property to enabled.

      ../../_images/add-next-activity-action.png ../../_images/ddeah-next-activity-configure.png

Activating Activity nodes

You can activate an Activity node in these ways:

Finding out whether an Activity node is active

To find out whether an Activity node is active:

  • Check the value of the Activity Status property for that Activity node.

  • Check the value of the Controller Property property in the Exclusive Activity Host node for that Activity node.

Activating an Activity node with the Activate Activity action

Use the Activate Activity action when:

  • The condition for activating an Activity is too complex to be expressed with the value of a property

  • You do not know in advance the number of Activity nodes in an Activity Host node

To activate an Activity node with the Activate Activity action:

  1. Create an Activity Host node with several Activity nodes the activation state of which you can control with the Controller Property.

    ../../_images/eah-media-navigation-phone.png ../../_images/eah-media-navigation-phone-activity-browser.png
  2. Create a node with a trigger that you want to use to activate an Activity node.

    For example, create a Button node and use the Button: Click trigger.

    ../../_images/activate-project-button.png ../../_images/node-components-button-click.png
  3. In the Node Tree select the node that you created in the previous step, in the Node Components > Triggers press Alt and right-click the trigger that you want to use to activate an Activity node, select Dispatch Message Action > Activate Activity action, and in the action set:

    • Target Item to the Activity Host node that contains the Activity node that you want to activate.

    • Activation Path to the path from the Activity Host node to the Activity node that you want to activate.

      If you nest Activity nodes in other types of nodes, include in the path only the ancestor Activity nodes.

      Tip

      To get the full path to an Activity node, in the Activity Browser right-click an Activity node and select Copy Activation Path. This command copies the entire path from the top-level Activity Host node to that Activity node.

      ../../_images/activity-browser-copy-activation-path.png
    ../../_images/add-activate-activity-action.png ../../_images/activate-activity-configure.png

Activating an Activity node with the Set Property action

Use the Set Property action to activate Activity nodes when the logic of your application relies on the value of the Controller Property property to activate an Activity node.

To activate an Activity node with the Set Property action:

  1. Create an Activity Host node with several Activity nodes the activation state of which you can control with the Controller Property.

    ../../_images/eah-media-navigation-phone.png ../../_images/eah-media-navigation-phone-activity-browser.png
  2. Create a node with a trigger that you want to use to activate an Activity node.

    For example, create a Button node and use the Button: Click trigger.

    ../../_images/activate-project-button.png ../../_images/node-components-button-click.png
  3. In the Node Tree select the node that you created in the previous step, in the Node Components > Triggers press Alt and right-click the trigger that you want to use to activate an Activity node, select the Set Property action, and in the action set:

    • Target Item to the Activity Host node that contains the Activity node that you want to activate.

    • Target Property to the property type that you set in the Activity Host in the Controller Property property.

    • Fixed Value to the value of the Controller Property property that you use in the Activity that you want to activate.

    ../../_images/add-set-property.png ../../_images/set-property-configure.png

Activating the next or previous Activity node

To activate the next or previous Activity node:

  1. Create an Activity Host node with several Activity nodes the activation state of which you can control with the Controller Property.

    ../../_images/eah-media-navigation-phone.png ../../_images/eah-media-navigation-phone-activity-browser.png
  2. Create a node with a trigger that you want to use to activate an Activity node.

    For example, create a Button node and use the Button: Click trigger.

    ../../_images/next-previous-project-button.png ../../_images/node-components-button-click.png
  3. In the Node Tree select the node that you created in the previous step, in the Node Components > Triggers press Alt and right-click the trigger that you want to use to activate an Activity node, select either Navigate To Next Activity or Navigate To Previous Activity action, and in the action set:

    • Target Item to the Activity Host node that contains the Activity nodes that you want to activate.

    • (Optional) If you want the Activity Host node to activate the first or last Activity node when you set off the trigger after you reach the last or first Activity node in that Activity Host node, set the Loop Activity property to enabled.

    ../../_images/add-next-activity-action.png ../../_images/next-activity-configure.png

Using the Activity nodes in the API

For details, see the Activity2D, Activity3D, DataDrivenExclusiveActivityHost2D, and DataDrivenExclusiveActivityHost3D classes in the Kanzi Engine API reference.