Cross-platform SDK and HTML5 tools for mobile app development
X
 

HelloNativeUI

Last updated by Chris Hughes on April 14, 2011

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.

HelloNativeUI_1HelloNativeUI_2 

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.
  • Back key - exits the program.

Source code

You can take a look at the source code for this example at GitHub: https://github.com/MoSync/MoSync/tree/ThreeZero/examples/cpp/HelloNativeUI

 

Stupid question, but as you

Published by DI (FH) Ludwig Ertl on October 13, 2011.

Stupid question, but as you are working with preprocessor constants for setting integer properties:

You are using your widgetSetPropertyInt helper function which has to convert the constant to a string at runtime. Why not just converting it at compile time using the preprocessor?

So instead of:

		widgetSetPropertyInt(

			mMainLayoutWidget,

			MAW_WIDGET_WIDTH,

			MAW_CONSTANT_FILL_AVAILABLE_SPACE);

you could just do:

#define MAKESTRING(x) #x

#define _S(x) MAKESTRING(x)

maWidgetSetProperty( mMainLayoutWidget, MAW_WIDGET_WIDTH, _S(MAW_CONSTANT_FILL_AVAILABLE_SPACE) );

Just to save processing time.. Ok, just my 2 cents, probably the overhead is neglectable ;)

 

RE: Stupid question

Published by BinarySpike on November 23, 2011.

"Why not just converting it at compile time using the preprocessor?"
Because this is a HelloWorld style example and the code looks prettier than two compiler directives and and weird _S() macro.

Although that code probably could save you some CPU time, it's ugly and hard to read and--in my opinion--would be more of a hassle than a help.