Reusable Components

Creating and using reusable components are the key element between a successful project and being unable to minimize the effort through the lifetime of project. You can find examples of reusable component even outside of the Software World. Fields like Sales, Animation, Graphics Design or even Film Industry create and re-use some of their actions to ease their workflow.

When You Will Need Components

  • When you are designing ListViewItem and GridViewItem. These views use RecyclerView, therefore it is required to use reusable components.

  • When you create SliderDrawer. Since it is a global view and acts as a main navigator through the project, creating a component for each section would help to ease out the process.

  • When you have a design pattern like Cards, Profiles or any potentially repeatable UI/UX action, it is strongly recommended to create a component, then to create the same thing over and over again.

If your design requires to have a different color than default palette, make sure to define them on a class rather than creating a separate component.

More info about using UI Editor and Classes can be found below:

How To Use Components

Create And Use Components from UI Editor

  • 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

Adding Code to the Created Component

Only using UI will not be enough if you want to set things programmatically or want anything dynamic. In that case, you should wrap your code and logic inside of the component file. When you create a component from Smartface UI Editor, Smartface UI Editor will create a file with the component name for you.

This is how the default component page looks like:

scripts/components/FlexLayout1.ts
import FlexLayout1Design from 'generated/my-components/FlexLayout1';
export default class FlexLayout1 extends FlexLayout1Design {
pageName?: string | undefined;
constructor(props?: any, pageName?: string) {
// Initalizes super class for this scope
super(props);
this.pageName = pageName;
this.button1.text = "Smartace"; // This was added from the Smartface UI Editor
}
}

You can add functions, properties or anything you wish inside of the component. You can check out an example in this section.

To use Drag&Drop elements in code, please refer to this document:

Create And Use Components From Code

This method is not recommended unless you have a strictly specific action to take.

If you want to create a component in runtime and add it to your page, you should emulate the same steps that UI Editor does for you.

You need to create the file like scripts/components/FlexLayout.ts to keep your code clean.

Component Code
Page Code
Component Code
scripts/components/FlexLayout1.ts
import FlexLayout from 'sf-core/ui/flexlayout';
import Button from 'sf-core/ui/button';
/**
* Since this file wasn't created from Smartface UI Editor,
* you should manually extend the Smartface Component yourself.
*/
export default class FlexLayout1 extends FlexLayout {
pageName?: string | undefined;
button1: Button; // You can set this to private if you don't want it to be accssed.
constructor(props?: any, pageName?: string) {
super(props);
this.pageName = pageName;
this.top = 30; // Direct assignment is fine because this is constructor of the component.
this.height = 20;
// Add another view like Button or whatever you want to.
this.button1 = new Button();
this.addChild(this.button1, 'button1', '.sf-button');
}
changeStyle() {
// 3rd parameter is optional and is used to give class name
// 4th parameter is optional and is used to give user properties
this.dispatch(myFlexlayout, "myFlexlayout", ".sf-flexlayout", {
top: 60,
height: 10,
flexProps: {
alignSelf: "CENTER",
positionType: "ABSOLUTE",
}
});
this.applyLayout();
}
}
Page Code
scripts/pages/page1.ts
import Page1Design from 'generated/pages/page1';
import FlexLayout1 from 'components/FlexLayout1';
export default class Page1 extends Page1Design {
flexLayout1: FlexLayout1;
constructor() {
super();
this.onShow = onShow.bind(this, this.onShow.bind(this));
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
}
initFlexLayout() {
const flexlayout1 = new FlexLayout1();
// 2nd parameter is to assign an ID for Context
// 3rd parameter is optional and is used to give class name
this.addChild(flexlayout1, "flexlayout1", ".sf-flexlayout");
this.flexLayout1 = flexLayout1;
this.flexLayout1.button1.text = "Smartface";
this.layout.applyLayout();
}
}
function onShow(superOnShow: () => void) {
superOnShow();
this.flexLayout1.changeStyle(); // Change style on runtime
}
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.initFlexLayout();
}

To learn more about what dispatch and other parameters are, refer to the document below:

To learn more about what onLoad or onShow means, refer to the document below:

If you are going to add another view inside of your component, you should do it in component file itself, not the page file.

Remarks

One of the main purpose of creating reusable component is to use it inside of ListView or GridView. Kindly refer to the document below to learn more:

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.