Skip to main content
Version: 7.0.0

UI Editor Basics

Smartface WYSIWYG editor grants you a unique ability to Drag&Drop components and ability to use them on your code on a fast fashion. In order to utilize its usage, let's cover the basics and a use case.

If you have not created a project already, please refer to this document to create one, it's super easy!

First Project on Smartface IDE

After you clone the project, this screen will greet you on your next journey:

At this point, you can directly use Run on Device feature to see the application on your mobile phone:

On-Device Emulators
info

By default, page1 will be shown in the device. You can change that by editing app.ts file or checking out the routing on the project.

Tweaking your First Page

Navigate to Page1 file on the Top Left Panel to open page1 by clicking on the page1.

After that, we can Drag&Drop our first component in the UI Editor by holding the component as shown on the example:

caution

ListView and GridView are special containers. They only accept their respective ListViewItem and GridViewItem components. If you want to use them, please refer to the document linked below:

Using Listview or GridView with UI Editor

Changing order of the Components on UI Editor

If you want to re-order the UI Elements, simply hold their name on the left panel:

info

Holding them on the mobile device screen does not work when you are changing their order. You have to drag them on the Page Explorer Panel.

Creating Containers

One of the most powerful asset of the Smartface WYSIWYG editor is that it can create nested components with a few clicks:

In order to add a FlexLayout as container, simply follow these steps:

  • Find the FlexLayout located at Built-in Components
  • Drag&Drop the FlexLayout normally
  • Double click the newly created FlexLyaout component.
  • Notice that the cursor will be changed. It means you are now in the edit mode
  • Drag your other component which you want it to be nested

The components which behave like containers are derived from ViewGroup. The most common container which is widely used on Smartface is FlexLayout

For more information, please refer to this document:

Tips and Tricks about Reusable Components

Creating Nested Components

Did you know that you can create containers recursively on Smartface? You can put a container inside of a container and let it do it's magic:

info

You can create as many nested components as you want.

Getting out of the Container

After you have added a container, you might want to revert back to the top level of the component(page). To do that, simply click on the parent container:

info

You will be reverted to page level when you click on an empty space on the UI Editor

info

To get a level back instead of the root container, you have to go back to the root and than double click until you reach the component you wish.

Moving the Components to a Different Place

You can cut, copy and paste the Smartface components as much as you want! Simply select them on the UI Editor, then use your hotkeys to move them to a different place, just like how you would cut-paste a file. In order to cut a file:

  • Navigate through the file while double clicking
  • Press ctrl+x / cmd+x (or copy). The component will be cut/copied to clipboard
  • Double click again to the component you wish to paste
  • Paste!

That was all there is to it on drag&dropping components to the page. You are one step closer to master the WYSIWYG Editor!

Responsive Design on Smartface UI Editor

Smartface uses Facebook Yoga as their layout engine for flex methodology. This means you can create fully mobile-responsive designs while using flex properties.

To learn more about Flexbox methodology, please refer official Yoga page below:

Yoga Layout | A cross-platform layout engine
Yoga Layout | A cross-platform layout engine favicon https://yogalayout.com

Smartface recommends to not use fixed width height while creating components unless necessary. Always try to design your components following responsive design guidelines.

While creating responsive layouts, there might be times when you would want your component to not use flexGrow but have dynamic width/height as well. On these occasions, you might not see your component visible on the Page itself since you have set your width to null.

On those occurrences, prefer to use Reusable Components since you can set width/heigh on those components and it will not be applied on the place where you use them.

For more information, please refer to Reusable Components Documentation:

Reusable Components

Using UI Editor Components From Code

After you have created your components, you might want to set things like click events or actions to your component. Those actions have to be declared from code, since Smartface is a low-code platform.

When a component is created from UI Editor via drag & drop, it updates the generated file located at scripts/generated/my-pages folder.
In order to reduce side effects that caused by the code as much as possible, these components are not assigned to your page code by default.

Component will be accessible under page in the code when assignToPage property is set from properties panel.

// onShow method of a Page
function onShow(this: Page1, superOnShow: () => void) {
superOnShow();
this.flexLayout2.visible = false; //This will cause error without setting Assign to Page
}

If you want to change UI Properties like margin, height, check this document:

Changing UI Properties on Runtime

Did you know that Smartface also supports Reusable components which you can use everywhere? The concept is basically the same with using the components on Page. See more at the documentation below:

Reusable Components