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:

Sample login page using the MaterialTextBox utility.

UI Editor for Sample Login

Variables mtbLogin and mtbPassword are assigned to page. More info:

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