Create content you can reuse

When you want to create reusable parts use Kanzi prefabs. Prefabs allow you to efficiently create the building blocks of your application and in the process make it a whole lot easier to maintain.

Create a prefab for every item in your application that appears more than once or if you want to logically separate a part of your application. For example, use prefabs to create content with consistent structure, but can vary in appearance, such as buttons that you always want to have an image and a text, but want to change the image and text based on where the button is used.

Create and use a prefab

1. In the Project right-click Prefabs, select Create, and then the object you want to create.
   For example, create a Button 2D, add an Image and a Text Block 2D to it.
   
2. In the Project drag and drop the prefab from the Prefabs to the location in your project where you want to use the prefab.
   Kanzi Studio creates a new instance of the prefab in your project.
   

Edit a prefab

To edit a prefab double-click the prefab in the Project > Prefabs. Kanzi Studio shows only the prefab in a Preview window tab. You can now edit the prefab with the Preview tools and see the result of your edits without instantiating the prefab.

Adding customization capabilities to prefabs

A prefab can contain a tree of nodes, each with their own properties. When you edit the nodes in a prefab or its instance, you change those nodes in all instances of that prefab. However, you can customize individual instances of the prefab to have individual values by overriding the values in the default 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.

To customize individual instances of a prefab:

1. In the Project select the node in a prefab you want to customize in an individual instance of that prefab.
   
2. In the Properties next to the property you want to edit click .
   Kanzi Studio creates from that property a custom property, adds it to the root of the prefab, and creates a binding to the property in the prefab root.
   
3. In the Project select the root of the prefab instance you want to customize.
   
4. In the Properties click next to the property for which you enabled editing and enter the value of the property you want to use only in that instance of the prefab.
   

Learn about prefabs >

< Animate your application

Add logic to your application >

Open topic with navigation