HelloNativeUI

HelloNativeUI is a well-commented example application for beginners. It consists of a very simple graphical user interface application that uses the NativeUI library and Moblet framework. It illustrates how to create NativeUI screens, and how to position widgets and handle events.

These screens show the look of the application on Android: its appearance is, of course, different on different platforms because it uses each platform's native GUI controls and settings. Note also that this example will not work on the MoSync emulator (MoRE) because it has no Native UI support yet.

This example is included in the MoSync SDK installation in the /examples folder. For information on importing the examples into your workspace, see Importing the Examples.

Behaviour

When the application runs, the user is presented with a simple NativeUI screen with four widgets:

a label with the instructions "Enter a password:"

an edit box operating in password mode

a button for clearing the password field

a button for submitting the password

On clicking the Submit button, the password is validated (just validates the length of the password for demonstration purposes).

Examine the source code of the application to learn how the program works. The code commenting highlights various aspects of working with NativeUI screens and widgets, including:

How to define a screen.

How to identify the root of a screen's widget hierarchy.

How to use a layout widget to arrange other widgets.

How to define widgets and use their methods.

How to detect events and respond to them.

To understand how NativeUI and MAUI (an alternative GUI solution that use's MoSync's own screens and widgets to ensure graphical consistency across all platforms), compare this example application with the HelloMAUI example application.

User Interaction

Tapping the screen's Clear button - clears the edit box.

Tapping the screen's Submit button - validates the contents of the edit box.