Using MaterialTextBox Utility on UI Editor

Utility reference: MaterialTextBox​
MaterialTextBox utility lets you overcome the quirks between Android and iOS.
By default, MaterialTextBox is added to the projects as a library component.
It can be used normally as a library component. More info can be found at page below:
Reusable Components
/smartface-cloud-development/cloud-ide/reusable-component-libraries
Sample login page using the MaterialTextBox utility.
UI Editor for Sample Login
Variables mtbLogin and mtbPassword are assigned to page. More info:
Using UI Editor Components from Code
/smartface-cloud-development/cloud-ide/using-ui-editor-components-from-code
Using materialtextbox utility, two textboxes are added with a few lines of code. Example code:
scripts/page1.ts
import Page1Design from 'generated/pages/page1';
import componentContextPatch from "@smartface/contx/lib/smartface/componentContextPatch";
import PageTitleLayout from "components/PageTitleLayout";
import System from "sf-core/device/system";
​
export default class Page1 extends Page1Design {
    router: any;
    constructor() {
        super();
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
        this.btnNext.onPress = () => {
            this.router.push("/pages/page2", { message: "Hello World!" });
        }
    }
    initMaterialTextBoxes() {
        this.mtbLogin.options = {
            hint: "Username"
        };
        this.mtbPassword.options = {
            hint: "Password"
        };
        this.mtbPassword.materialTextBox.isPassword = true;
    }
}
​
function onShow(superOnShow) {
    superOnShow();
    this.headerBar.titleLayout.applyLayout();
}
​
function onLoad(superOnLoad) {
    superOnLoad();
    console.info('Onload page1');
    this.headerBar.leftItemEnabled = false;
    this.headerBar.titleLayout = new PageTitleLayout();
    componentContextPatch(this.headerBar.titleLayout, "titleLayout");
    if (System.OS === "Android") {
        this.headerBar.title = "";
    }
    this.initMaterialTextBoxes();
}
​
iOS
Android
Smartface Native Framework - Previous
Tips & Tricks
How to install third party libraries?
Last updated 1 week ago