Tutorial: Combine Kanzi Studio projects into a single Kanzi application

In this tutorial you learn how to combine multiple Kanzi Studio projects to create a single Kanzi application.

This image shows the result of the tutorial.

This tutorial assumes you understand the basics of working with Kanzi Studio. The best entry points for getting familiar with Kanzi Studio are:

• Tutorial: Getting started with Kanzi Studio
• Tutorial: Create a simple in-vehicle infotainment application

Assets for the tutorial

The starting point of this tutorial are the Kanzi Studio projects stored in the <KanziWorkspace>/Tutorials/Multi-project/Assets directory.

The <KanziWorkspace>/Tutorials/Multi-project/Completed directory contains the completed projects of this tutorial.

The assets for this tutorial include these ready Kanzi Studio projects which you combine into a single Kanzi application:

• The Stats project contains a car statistics application.
  
• The Weather project contains a weather information application.
  
• The Music project contains a music player application.
  
• The Resources project contains only the resources that the projects in this tutorial share.
  

Create a project and use content from another project

In this section you create a Kanzi Studio project in which you combine Kanzi Studio projects and use a prefab from another project.

To create a project and use content from another project:

1. Create a project and name it Center stack.
   You use this project to combine other Kanzi Studio projects in this tutorial into a single Kanzi application.
   
2. In the Project select the Screen node and in the Properties set the Screen Resolution property to 1280x480 - UWVGA.
   This way you set the size of the application screen.
   
3. Set the application background:
   1. In the Assets click Import Assets, go to the <KanziWorkspace>/Tutorials/Multi-project/Assets/Images directory, select the Background.png image, and click Open.
      
   2. In the Project select the RootPage node, in the Properties set the Background Brush property to + Texture Brush, click next to the property name, and set the Texture Brush property of the brush to the Background texture.
      
4. In the Project right-click the Viewport 2D node and select Delete.
   You can delete the Viewport 2D node because you do not create any 3D content in this tutorial.
   
5. In the Library press Alt and right-click Project References, select Existing Project, and select the <KanziWorkspace>/Tutorials/Multi-project/Assets/Stats/Stats.kzproj project.
   The Stats project contains a car statistics application. You place it in the main part of the final Kanzi application.
   
6. In the Library > Project References select the project reference you created in the previous step.
   
   TIP

   You can open a referenced project in a new instance of Kanzi Studio by double-clicking the project name in the Project References library.

   
7. In the Properties in the .kzb URLs property in the section of the Stats project expand the Node 2D Prefab Templates category, double-click the kzb file URL of the Stats prefab, right-click, and select Copy.
   You use the kzb URLs to access the content from another project.
   
   
8. In the Project press Alt and right-click the RootPage node, select Prefab Placeholder 2D, and name it Stats.
   You use this Prefab Placeholder node to instantiate the Stats prefab from the Stats Kanzi Studio project.
   
9. In the Properties set the Prefab Template property to < Resource ID > and in the text box paste the kzb file URL of the Stats prefab you copied from the Stats project reference.
   
10. In the Properties add and set:
    • Layout Width to 880
    • Layout Height to 480

    You use these properties to set the size of the prefab from the Stats project in the Center stack project.
    

Add prefabs from other projects

In this section you add to the Center stack project prefabs from the Weather and Music projects.

To add prefabs from other projects:

1. In the Library press Alt and right-click Project References, select Existing Project, and select the <KanziWorkspace>/Tutorials/Multi-project/Assets/Weather/Weather.kzproj project.
   The Weather project contains a weather information application. You place it in the top-right corner of the Center stack project.
   
2. In the Library > Project References select the project reference you created in the previous step and in the Properties in the Weather project Node 2D Prefab Templates category copy the kzb file URL of the Weather prefab.
   
3. In the Project select the RootPage node, create a Prefab Placeholder 2D node, name it Weather, and in the Properties add and set:
   • Prefab Template to < Resource ID > and in the text box paste the kzb file URL you copied in the previous step
   • Layout Width to 400
   • Layout Height to 240
   • Horizontal Alignment to Right
   
4. Repeat the steps in this section to add the Music prefab from the <KanziWorkspace>/Tutorials/Multi-project/Assets/Music/Music.kzproj Kanzi Studio project:
   • In the Project name the Prefab Placeholder 2D node Music.
   • In the Properties add and set:
     • Layout Width to 400
     • Layout Height to 240
     • Horizontal Alignment to Right
     • Vertical Alignment to Bottom
   

Use resources from another project

When your Kanzi application consists of several Kanzi Studio projects, use a dedicated project which contains only the resources used across these projects. For example, in such resource project you can store fonts, brushes, styles, and images which you want to use in more than one Kanzi Studio project of your Kanzi application.

In this section you replace the common resources in the Music project with the resources from the Resources project.

To use resources from another project:

1. In Kanzi Studio open the <KanziWorkspace>/Tutorials/Multi-project/Assets/Music/Music.kzproj project, in the Library press Alt and right-click Project References, select Existing Project, and select the <KanziWorkspace>/Tutorials/Multi-project/Assets/Resources/Resources.kzproj project.
   The Resources project contains only the resources that the projects in this tutorial share.
   
2. In the Library > Project References select the project reference you created in the previous step and in the Properties in the Resources project Brushes category copy the kzb file URL of the White 8% opacity Color Brush.
   
3. In the Project > Prefabs select the Music prefab and in the Properties set the Background Brush property to < Resource ID > and in the text box paste the kzb file URL you copied in the previous step.
   
4. Use the White 50% opacity Color Brush from the Resources project for the Artist node in the Music project:
   1. In the Library > Project References select the Resources project and in the Properties in the Resources project Brushes category copy the kzb file URL of the White 50% opacity Color Brush.
      
   2. In the Project > Prefabs select the Artist node, in the Properties set the Foreground Brush property to < Resource ID >, and in the text box paste the kzb file URL you copied in the previous step.
      
5. Use the Exo 2 Medium font from the Resources project for the Song and Artist nodes in the Music project:
   1. In the Library > Project References select the Resources project and in the Properties copy the kzb file URL of the Exo 2 Medium font.
      
   2. In the Project > Prefabs hold down the Ctrl key, select the Song and Artist nodes, in the Properties set the Font property to < Resource ID >, and in the text box paste the kzb file URL you copied from the Resources project.
      
6. Hold down the Ctrl key, in the Library click the Materials and Textures and Fonts libraries to select both, right-click Fonts, and select Delete Unreferenced Items.
   You can remove the White 50% opacity and White 8% opacity brushes, and the Exo 2 Medium font from the Music project because you set the Music project to use these resources from the Resources project.
   

Edit prefabs from another project

In this section you add to the Center stack project the possibility to control the position of the music player progress bar in the Music project.

To edit prefabs from another project:

1. In the Music project, in the Project > Prefabs > Music prefab select the Progress Bar node, in the Properties next to the Progress property click , and save and close the project.
   Kanzi Studio creates from that property a custom property, adds it to the root of the prefab, and creates a ##Template binding to the property in the prefab root. This enables you to edit the appearance of the prefab from the root of the prefab. In this tutorial this enables you to edit the appearance of the Progress Bar using the Progress property in the Music prefab.
   
2. In Kanzi Studio open the Center stack project, in the Library > Project References right-click the Music project reference and select Merge Project.
   
3. In the Project Merge dialog select the Progress property type and click Merge.
   
   
4. In the Project select the Music prefab, in the Properties right-click and select Add Property > Music Properties > Music.Music.Progress.
   You can now use the Music.Music.Progress property in the Center stack project to control the position of the music player progress bar in the Music project.
   

What's next?

In this tutorial you learned how to combine Kanzi Studio projects into a single Kanzi application. Now you can:

• Learn how to create cluster gauges. See Tutorial: Create gauges.
• Learn how to create cluster indicators. See Tutorial: Creating cluster indicators.

See also

To learn more about the options available when you combine multiple Kanzi Studio projects, see Combining Kanzi Studio projects into a Kanzi application.

To learn more about how to use prefabs, see Using prefabs.

Open topic with navigation