Reusable Components

1. When You Will Need Components

  • Library components can be used for designing your SliderDrawer and ListViewItem's.

  • When you have a set of components that you want to use across your pages, just create a library component, and reuse it.

2. How To Use Components

  • From the Project Explorer, open the Library pane.

  • Drag a FlexLayout from the toolbox to the Library. This layout represents your first library component.

  • Double click on the FlexLayout that you just moved. This will enable you to insert other components inside your layout.

  • Drag a Button inside your layout, then save your changes.

  • There you have it! You can use this library component across all of your pages.

  • Now drag flexlayout1 (which is your library component), from the library pane to your page.

  • Don't forget that a library component update will be reflected to all pages using this component. This is the primary advantage of using a library.

  • As an example, change the background color of your button of flexlayout1

3. Using From Code

If you want to create a component in runtime and add it to your page, following example provides a guidance.

// Add a new Button
var myButton = new Button();
// 3rd parameter is optional and is used to give class name
// 4th parameter is optional and is used to give user properties
this.addChild(myButton, "myButton", ".button", (userProps) => {
userProps.width = 500;
return userProps;
});

or

// Assume that FlexLayout1 is created using Library
var flexlayout1 = new FlexLayout1();
this.addChild(myFlexlayout, "myFlexlayout", ".flexlayout", {
top: 60,
height: 10,
flexProps: {
alignSelf: "CENTER",
positionType: "ABSOLUTE",
}
});

There is another way of adding component in runtime using the addChild as an action. Detailed example can be found under Adding a child to a ListViewItem using the code.

Assume you have an instance of FlexLayout which hasn't been attached with context. If you add some children to it using addChild method, those children won't be attached with context. (Even though you attach your FlexLayout instance afterwards)

The only way of doing this, is to attach your FlexLayout instance with context first, then add children to it. Then all of your components will be attached with context.

4. Remarks

Nested Components

You can also use library components inside other library components to maximize reusability.

Using a FlexLayout for a Component

We encourage you to create your components inside a "FlexLayout" so that when you change its child components in the library, all pages using this component will receive the update.