ApplyLayout

ApplyLayout This section describes that what exactly means of using apply layout. API Reference: applyLayout

What is apply layout ?

This method is usually called when something has changed which has invalidated the layout of view such as view changes will affect the size, appearance , re-positioned and etc. It will result on being recalculated and be redrawn eventually.

The above diagram indicates the process of applyLayout. The measure step determines the view's size that determination includes the view's descendants size and has to be agreed by the view parent. The layout step sets position and size for view. The draw step can draw itself based on determination of size and position.

To change dimensions of an element on runtime, you should always use contxjs methods of dispatch actions. Refer: https://github.com/smartface/contxjs

What is the usage & impact of apply layout ?

In some cases, the usage varies depending on operation system.

Android

Typically the usage of apply layout also differs. Such as you might apply to its parent or child itself. Because of there is no guarantee that the parent will then re-layout its children. Such as, flexlayout height and width already given based on its parent but not to its children then flexlayout no need re-layout its children when apply layout is called. In those cases, apply layout should be implemented to view itself.

iOS

There is a few inconsistent behavior of apply layout behavior. The recommended way for developer is usually necessary to call applyLayout of page root view.

If the layout is inside of ListViewItem, applyLayout should be called of ListViewItem itself on iOS

In most cases, calling applyLayout on the root view will suffice on both platforms.

If it fails, developer should resort to write applyLayout snippet like shown below:

import System from 'sf-core/device/system';
function recalc(): void {
// Considering the function is in page scope
const myFlexLayout = this.myFlexLayout;
this.myFlexLayout.dispatch({
type: "updateUserStyle",
userStyle: {
height: 300,
width: 200,
visible: true
}
});
System.OS === 'iOS' ? this.layout.applyLayout() : myFlexLayout.applyLayout();
}