Skip to main content
Version: 7.3.0

Page Life-Cycle

In Smartface Page is a component with life-cycle. The life-cycle of the page is in the following order:

  1. Creation - Constructor
  2. Load - onLoad
  3. Show - onShow
  4. Post-Render
  5. Hide - onHide
  6. Destruction

Creation - Constructor​

Pages in Smartface defined as a JavaScript Class. New instances form those classes are created on demand. Router, SwipeView or TabBarController etc. calls the constructor of the class to create a new instance of the page.
This phase of the page life-cycle is achieved once per page instance. Singleton pages are created only once per route.

import Page1Design from "generated/pages/page1";
import { Route, Router } from "@smartface/router";

export default class Page1 extends Page1Design {
  constructor(private router?: Router, private route?: Route) {
    super({});
  }
  onShow() {
    super.onShow();
  }

  onLoad() {
    super.onLoad();
  }
}

The code above is created when a new page is created via UI editor (6.16.3). Constructors of the page are mentioned with the inline comments. Those code blocks are the ones that are going to be called first.

Since Typescript is used, there will also be Javascript compiled code. Those can be found under dist directory.

What is happening in Page Constructor?​

  • Native UI Object references are being created, but they are not ready to process
  • Initial values are being assigned

What to do in Page Constructor​

  • Create UI objects
  • Assign page events
  • Create page-wise properties
  • Assign events like onPress -> Preferred at onLoad

Page Load​

Page load is called later by the native system sometime later than the constructor. The load event is not called more than once during the whole life-cycle of the page. UI operations in this step have less impact on performance rather than the later steps because UI rendering has not started yet.
This phase of the page life-cycle is achieved once per page instance. Singleton pages are created only once per definition.

What is happening during Page Load?​

  • UI Object references are processed. They are ready to use
  • Properties are ready to use
  • For the pages that are created by UI editor, initial theming has been applied

What to do in Page load​

  • Read & change property values
  • Assign events to child objects
  • Execute one-off code, such as static data loading
  • For HeaderBar, create items, set their events
  • Setup style of Headerbar
  • Make static bindings, such as language texts, RTL-LTR
  • Set ScrollView layout height or width (based on direction), if the content is fixed

Page Show​

Show event of the page is called every time, just before the page is shown. This event is fired after the page is loaded and can be fired more than one time.
This phase of the page life-cycle may be achieved more than once per page instance. Having a singleton page has no effect on this.

What is happening during show​

  • Some of the UI object references are created here (HeaderBar & StatusBar)
  • Smartface is setting up the navigation history
  • A partial rendering of the page starts

What to do in Page Show​

  • Set (every time) visibility of StatusBar, is at least one page contradicts to others
  • Set (every time) visibility of HeaderBar, is at least one page contradicts to others
  • Setup dynamic data binding
  • If possible and if required, after data binding set ScrollView layout height or width (based on direction) for dynamic content

Post Render​

In this phase layout calculations and rendering is completed. Height and width of the components can be read. This becomes handy while the size of the component is not known fully, such as auto-sized components (Image & Text)\ In most of the cases, the developer does not need to use this phase of the page. If it is still required, for iOS & Android it has to be handled differently.
This phase of the page life-cycle may be achieved more than once per page instance. Having a singleton page has no effect on this.

Android​

In Android, UI rendering is mostly completed in phase 3 - Show. In some cases, there can be some components which are not still completed. It is advised to check the values within the onShow event if they are not fully completed at that step, proceed the with the suggested approach below.

The developer needs to write setTimeout within the onShow of the page.

postRender Android
onShow() {
  super.onShow();
  setTimeout(postRender.bind(this), 50);
}

function postRender() {
  // do your postRender operation
}

In the example above, after 50 ms, the postRender operation is triggered. This can have some effects:

  • The 50 ms might not be sufficient for some devices, if that is the case, do not hesitate to increase the delay
  • If the 50 ms is quite long then this can lead to some movement on the UI.

This postRenderfunction is called every time when the page is shown. In order to avoid this, a custom property can be created with the page.

One-off postRender Android
import NewPage001Design from "generated/pages/newPage001";
import { Route, Router } from "@smartface/router";

export default class NewPage001 extends NewPage001Design {
  pageIsShown = false;
  constructor(private router?: Router, private route?: Route) {
    super({});
  }
  onShow() {
    super.onShow();
    !this.pageIsShown && setTimeout(postRender.bind(this), 50);
    this.pageIsShown = true;
  }

  onLoad() {
    super.onLoad();
  }
}

function postRender() {
  // do your postRender operation
}

iOS​

On iOS there are 3 native different events to do this, in order:

Sample Usages of iOS Page Life-cycle Events
import NewPage001Design from "generated/pages/newPage001";
import { Route, Router } from "@smartface/router";

export default class NewPage001 extends NewPage001Design {
  constructor(private router?: Router, private route?: Route) {
    super({});

    this.nativeObject.onViewLayoutSubviews = onViewLayoutSubviews.bind(
      this,
      this.nativeObject.onViewLayoutSubviews &&
        this.nativeObject.onViewLayoutSubviews.bind(this)
    );

    this.nativeObject.onViewDidLayoutSubviews = onViewDidLayoutSubviews.bind(
      this,
      this.nativeObject.onViewDidLayoutSubviews &&
        this.nativeObject.onViewDidLayoutSubviews.bind(this)
    );

    this.nativeObject.onViewDidAppear = onViewDidAppear.bind(
      this,
      this.nativeObject.onViewDidAppear &&
        this.nativeObject.onViewDidAppear.bind(this)
    );
  }

  onShow() {
    super.onShow();
  }

  onLoad() {
    super.onLoad();
  }
}

function onViewLayoutSubviews(superOnViewLayoutSubviews) {
  superOnViewLayoutSubviews && superOnViewLayoutSubviews();
  console.log("Over onViewLayoutSubviews");
}

function onViewDidLayoutSubviews(superOnViewDidLayoutSubviews) {
  superOnViewDidLayoutSubviews && superOnViewDidLayoutSubviews();
  console.log("Over onViewDidLayoutSubviews");
}

function onViewDidAppear(superOnViewDidAppear) {
  superOnViewDidAppear && superOnViewDidAppear();
  console.log("Over onViewDidAppear");
}

The onViewDidLayoutSubviews and onViewDidAppear events are most suitable events to use.

  • Both of them are going to be fired everytime page is shown
  • onViewDidLayoutSubviews will be fired when orientation is changed, or somehow resized; onViewDidAppear will not be fired in those cases

Bring them together​

Here are two samples for the page are given to get a postRender event.

import NewPage001Design from 'generated/pages/newPage001';
import System from '@smartface/native/device/system';
import { Route, Router } from "@smartface/router";

export default class NewPage001 extends NewPage001Design {
    constructor(private router?: Router, private route?: Route) {
        super({});
        if (System.OS === System.OSType.IOS) {
            this.nativeObject.onViewDidLayoutSubviews = onViewDidLayoutSubviews.bind(this,
                this.nativeObject.onViewDidLayoutSubviews &&
                this.nativeObject.onViewDidLayoutSubviews.bind(this)
            );
        }
    }

    onShow() {
      super.onShow();
      if (System.OS === System.OSType.ANDROID) {
          setTimeout(postRender.bind(this), 50);
      }
    }

    onLoad() {
      super.onLoad();
    }
}

function onViewLayoutSubviews(superOnViewLayoutSubviews) {
    superOnViewLayoutSubviews && superOnViewLayoutSubviews();
    console.log("Over onViewLayoutSubviews");
}

function onViewDidLayoutSubviews(superOnViewDidLayoutSubviews) {
    superOnViewDidLayoutSubviews && superOnViewDidLayoutSubviews();
    console.log("Over onViewDidLayoutSubviews");
    postRender.call(this);
}

function onViewDidAppear(superOnViewDidAppear) {
    superOnViewDidAppear && superOnViewDidAppear();
    console.log("Over onViewDidAppear");
}

function postRender() {
    // do your postRender operation

Hide​

Hide event is called when another page is shown instead of this one.\ This phase of the page may not be achieved at all if the application terminates before. A page which has not shown, will not be hidden.

What to do on Page Hide Event, what not to do​

  • Do not modify HeaderBar and StatusBar
  • No need to store the state of the page, but the data state might be stored if needed
  • Do not perform animations or UI operations on the page, this will be a waste of performance
  • Might need to keep track of user time on the page for analytics purposes
Sample onHide
import NewPage001Design from "generated/pages/newPage001";
import { Route, Router } from "@smartface/router";

export default class NewPage001 extends NewPage001Design {
  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  onShow() {
    super.onShow();
  }

  onLoad() {
    super.onLoad();
  }
  onHide() {
    super.onHide();
  }
}
info

On iOS, when showing a dialog, onHide of the page will be triggered. On Android, it will not trigger.

Destruction​

After a page is created (passed all the steps before), is not currently visible, there are no references to the page instance object, then this JavaScript object is marked for safe to delete. The JavaScript garbage collector is cleaning up that object. As with the garbage collector is clearing the JavaScript counterpart of the object, native side of the object will be destroyed too.
There is no event to capture the destruction of the page.
References to singleton page instances are always kept by Router or Navigator. Therefore they will never be marked to be deleted.
Mozilla documentation about Memory Management is giving best practices for keeping references to JavaScript object. There can be slight differences in the implementation of JavaScript Engines; iOS is using Apple JavaScriptCore, Android is using Google V8.