How to use a native input text ?

Let’s try to create an input for the search screen. It should have a placeholder and a visible behaviour change on focus.

Native input

Getting Started

Architecture

The screen will declare a children <NativeInputText>.

Step-by-step guide

Children declaration

In your screen, declare NativeInputText as a children of your screen.

export default $MainUIScreen.declare("SearchScreen", {
  children: /** @lends SearchScreen.prototype */ {
    input: {
      class: $NativeInputText
    }
  }
});

Stylish your input

Use style property available to apply style on your input.

export default $MainUIScreen.declare("SearchScreen", {
  children: /** @lends SearchScreen.prototype */ {
    input: {
      class: $NativeInputText
    }
  },
  style: {
    width: $SearchView.SEARCH_BOX_WIDTH,
    height: $SearchView.SEARCH_BOX_HEIGHT,
    x: $Theme.SCREEN_HORIZONTAL_MARGIN,
    y: ({parent}) => parent.statics.MENU_LIST_VIEW_Y_MARGIN + parent.menuListView.height + 30,
    fillColor: $Theme.GREY_LIGHT,
    borderRadius: 20,
    borderWidth: ({isFocused}) => isFocused ? $Theme.BORDER_WIDTH : 0,
    borderColor: ({isFocused}) => isFocused ? $Theme.BLUE : null,
    size: 30,
    family: $Theme.MONTSERRAT_REGULAR,
    color: $Theme.BLACK,
    placeholder: "Search for movies"
  }
});

Manage focus

You will only need to manage focus on the input. After that behaviour will be the native one. For example, you do not need to manage OK key press to display keyboard, it is natively handled.

export default $MainUIScreen.declare("SearchScreen", {
  inputs: ["keypress.UP", "keypress.DOWN"],
  methods: {
    /**
     * @override
     */
    onKeypressDOWN: function (key) {
      if (this.menuListView.isFocused === true) {
        this.input.focus();
      }
    },
    /**
     * @override
     */
    onKeypressUP: function (key) {
      if (this.input.isFocused === true) {
        this.menuListView.focus();
      }
    },
  }
});

Enjoy !

Launch your UI with a grunt serve

:champagne_glass: Tadaa, you should see your input display in your screen.

If you focus the input and press OK button, a virtual keyboard will be displayed.

Interact when value change

You can listen to valueChanged event to react to it.

Caution

The name of the function matters as it is generated based on the name of the listener name.

export default $MainUIScreen.declare("SearchScreen", {
  listen: [
    $NativeInputText.onValueChanged
  ],
  methods: {
    onNativeInputTextValueChanged: function (text) {
      // Do something
    },
  }
});

Interact when keyboard is hidden

You can listen to virtualKeyboardHide event to react to it.

Caution

The name of the function matters as it is generated based on the name of the listener name.

export default $MainUIScreen.declare("SearchScreen", {
  listen: [
    $NativeInputText.onVirtualKeyboardHide
  ],
  methods: {
    onNativeInputTextVirtualKeyboardHide: function (text) {
// Do something
    },
  }
});
Edit this page on GitHub
Prev
Implementation state