Step 3 - Create a control to navigate between the Page nodes

In this step you first create a header and a footer in the RootPage node, then you create the buttons to navigate between the Page nodes you created in the previous step of this tutorial.

The content you add to a Page node is visible in all Page nodes in its tree. So when you add content to the RootPage node, that content is visible in all Page nodes of that Kanzi application.

Create a prefab for the navigation button

Use node prefabs (prefabricated templates) to structure your application and to create consistent interfaces. Prefabs allow you to create the building blocks of your application and make the application easier to maintain.

In this section you create a prefab for the toggle button you then use in the Footer node as a control to navigate between the Page nodes in your application.

To create a prefab for the navigation button:

  1. In the bottom-right corner of the Prefabs window click image8, create a Toggle Button 2D prefab, and in the Toggle Button 2D:

    1. Create a Stack Layout 2D node.

    2. Drag from the Assets to the Stack Layout 2D node the Menu image.

    3. In the Stack Layout 2D node create a Text Block 2D node.

    ../../_images/toggle-button-2d-prefab-done.png
  2. In the Prefabs double-click the Toggle Button 2D prefab to open only that prefab in the Preview in a separate tab.

    When you open a prefab in the Preview, Kanzi Studio shows it as a tab below the main menu. Open prefabs in the Preview when you want to view and adjust the prefab without the distraction of the context where you use that prefab.

    ../../_images/composition-tab.png
  3. In the Prefabs select the Toggle Button 2D > Stack Layout 2D > Text Block 2D node and in the Properties next to the Text property click image10. This enables you to display a different text for each instance of the prefab.

    A node prefab can contain a tree of nodes, each with their own properties. When you edit the nodes in a prefab or any of its instances in a project, you change those nodes in all instances of that prefab. You can customize each instance of a prefab to have own property values by overriding the property values of the prefab. For example, when you create a prefab for an address book entry, you want to show a different name, number, and photo for each address book entry.

    When you click image11 Kanzi Studio creates from that property a custom property, adds it to the root node of that prefab, and creates a ##Template binding to the property in the root node of that prefab.

    That way you can set in the root of the prefab instance the text that you want the Text Block 2D node to show.

    ../../_images/publish-text-property.png
  4. With the Text Block 2D selected, in the Preview use the Node tool image12, and click the center square in the Align tool image13 to align the Text Block 2D to the center of the Stack Layout 2D node.

    ../../_images/align-the-text-block-2d.png
  5. Click the Screen tab under the main menu to show the entire application in the Preview.

    ../../_images/click-screen-composition-tab.png
  6. In the Node Tree select the Footer node:

    1. Create a Toggle Button Group 2D node.

      Use the Toggle Button Group nodes to allow users to select only one option from a set of options that are mutually exclusive.

      Toggle buttons in a toggle button group behave like radio buttons, where only one toggle button can be active at a time.

      ../../_images/create-toggle-button-group.png
    2. In the Toggle Button Group 2D node create a Stack Layout 2D node.

      ../../_images/toggle-button-group-with-stack-layout.png
    3. From the Prefabs drag three Toggle Button 2D prefabs to the Node Tree and drop them on the Footer > Toggle Button Group 2D > Stack Layout 2D node.

      When you drag a prefab from the Prefabs to any node in the Node Tree, Kanzi Studio creates an instance of that prefab in the node tree where you drop the prefab.

      ../../_images/footer-done1.png
    4. Select each Toggle Button 2D prefab instance, press F2, and name them Navigation, Car, and Media.

      ../../_images/toggle-button-2d-nodes-renamed.png
    5. Select each Toggle Button 2D prefab instance and in the Properties add and set the value of the FirstApplication.ToggleButton2D.Text property to Navigation, Car, and Media.

      ../../_images/toggle-button-2d-nodes-renamed.png ../../_images/togglebutton2dtext-property-navigation.png ../../_images/toggle-button-2d-text-set.png
  7. For each Toggle Button 2D prefab instance in the Footer > Toggle Button Group 2D > Stack Layout 2D node:

    1. In the Node Components press Alt and right-click Triggers and select Message Trigger > Toggle Button > Toggled On to add that trigger.

      Use triggers and actions to create interactions. Use triggers to set off actions, such as setting a property to a certain value or setting the state of an application.

      ../../_images/add-toggled-on-trigger1.png
    2. In the Node Components press Alt and right-click the trigger, and select Dispatch Message Action > Page > Navigate to Page.

      ../../_images/navigate-to-page-action.png
    3. In the Navigate to Page action set the Target Item property to the Page node to which you want this button to navigate your application.

      For example, in the Navigation toggle button set the action to go to the Page node Navigation.

      ../../_images/navigation-request.png
    4. In the Preview click interact to enter the Interact mode.

      In the Interact mode you can interact with your application in the Preview window as you would on a device.

When you restart the Preview and click each button in the Footer node the trigger in the button sets off an action that transitions to the Page node you set in each button.

< Previous step | Next step >

See also

To find out more about working with the Preview tools, see Editing your application in the Preview.

To find out more about working with the layout control nodes, see Layout control nodes.

To find out more about working with prefabs, see Using node prefabs.

To find out more about toggle buttons and toggle button groups, see Buttons.