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

WormholeNativeUI

Last updated by Ali Sarrafi on February 09, 2012

This simple example application demonstrates the use of HTML markup for creating multi-level native user interfaces. It also shows how to use other JavaScript modules (such as sensors) with the MoSync JavaScript NativeUI API.

 WormholeNativeUI iOs main screen WormholeNativeUI wp7 main screen
Main screen on iOS Main screen on Windows Phone 7
WormholeNativeUI iOs device screen WormholeNativeUI wp7 device screen
Sensors screen on iOSSensors screen on Windows Phone 7

This example runs on all platforms supported by both the MoSync Wormhole JavaScript Library and NFC C++ Library (see Feature/Platform Support). It requires a device with NFC capabilities.

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.

Behavior

When started, this example application on Android and iOS displays three tabs:

  • Device — shows device information. It also includes two buttons, that cause the device to vibrate or make a beep sound.
  • Sensors — shows three buttons for accessing three different sensors: Accelerometer, Location, and Compass. Pressing each one of the buttons in the second tab will start the sensor and update the data on screen.
  • Map — shows another web view with google maps loaded by default.

On Windows Phone 7 the tabs are translated into pivots.

In the code

The following technologies are used in this application:

  • HTML5, Javascript thourgh the Wormhole JavaScript Library for creating native user interfaces.
  • Wormhole device access modules (PhoneGap-compatible) to access sensors and etc.

main.cpp is the main C/C++ application file. You do not need to modify this file: you can just use the JavaScript interface. All of the HTML5 and JavaScript-related files and libraries are located in the /LocalFiles directory, are included in the application when it is built in the MoSync IDE. Inside that folder you can see the following files:

  • index.html — Main html file which will be loaded and parsed by MoSync. In includes HTML markups for generating the UI.
  • js/wormhole.js — Wormhole JavaScript Library that includes all of the available API.
  • js/main.js — Application’s JavaScript file which provides wrappers for accessing sensors and other device features.

The /Resources.lst file has a default entry for the bundled files that should not be removed unless the user wants to remove all the HTML5 functionality.