Skip to main content
Version: 7.0.1

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

Sample login page using the MaterialTextBox utility.

Variables mtbLogin and mtbPassword are assigned to page.

Using materialtextbox utility, two textboxes are added with a few lines of code. Example code:

scripts/page1.ts
import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import System from "@smartface/native/device/system";
import Application from "@smartface/native/application";


//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
constructor(private router?: Router, private route?: Route) {
super({});
}

// The page design has been made from the code for better
// showcase purposes. As a best practice, remove this and
// use WYSIWYG editor to style your pages.
centerizeTheChildrenLayout() {
this.dispatch({
type: "updateUserStyle",
userStyle: {
flexProps: {
flexDirection: 'ROW',
justifyContent: 'CENTER',
alignItems: 'CENTER',
flexWrap: 'WRAP'
}
}
})
}

initMaterialTextBoxes() {
this.mtbLogin.options = {
hint: "Username",
};
this.mtbPassword.options = {
hint: "Password",
};
this.mtbPassword.materialTextBox.isPassword = true;
}
onShow() {
super.onShow();
const { headerBar } = System.OS === System.OSType.ANDROID ? this : this.parentController;
Application.statusBar.visible = true;
headerBar.visible = true;
}

onLoad() {
super.onLoad();
this.centerizeTheChildrenLayout();

this.initMaterialTextBoxes();
}
}