Creating HTML5/JavaScript Apps

Create native apps for iOS, Android and Windows Phone using HTML5

The MoSync platform lets you develop native apps for iOS, Android and Windows Phone using familiar web technologies like HTML5 and JavaScript which can do just about everything that a regular web app running in a browser can’t—like accessing the camera, accelerometer, file system and push notifications. Amazingly, you can even create completely native UIs through our Wormhole JavaScript Library!

Reload—the best mobile development experience you can imagine

MoSync Reload makes mobile development a breeze. Once you’ve installed the Reload client app on the devices you’re developing for, you never have to worry about installations or transfers during your development again. Use your favorite text editor, edit your HTML/JavaScript code, press a button and instantly see your changes in action on as many devices as you like. If you’re used to developing for the web, you’ll fell right at home with the workflow. The difference is that you can do everything a web app can’t do! When you’re happy with the functionality and look of your app, use the MoSync SDK to create a standalone, app store friendly app out of it. The Reload client is built with the MoSync SDK and provides the apps it runs with all the functionality of MoSync.

The MoSync SDK—the ease of JavaScript, the power of C++

The MoSync SDK is a full cross-platform mobile development environment. Centered around an Eclipse-based IDE, it allows you to develop, debug and deploy applications across all the major platforms, from JavaME to Window Phone. For C/C++ developers, it’s a powerful platform for creating everything from enterprise applications to advanced 3D games using OpenGL. For JavaScript developers, you can use it for everything from just packaging your Reload applications to creating HTML5/C++ hybrid applications that use both C/C++ and JavaScript.

API References

  • API Reference Manuals

    The MoSync Reference Manuals provide a detailed description of the MoSync JavaScript functions, C++ libraries, C functions, widget constants, panics, and resource compiliation commands. They describe the  latest featured releases of the MoSync SDK and MoSync Reload.

  • Feature/Platform Support

    Our platform support and feature/capability tables show you where we have implemented MoSync JavaScript functions, C++ classes, C syscall functions and IOCTLs, and widget constants across the major mobile platforms.

Beginner's Guides

  • Getting Started with HTML5 and JavaScript

    With the MoSync Mobile SDK you can build applications with HTML5, JavaScript, and CSS without needing to write a single line of C/C++ code. Or you can build fantastic hybrid apps that use HTML5/JavaScript for the user interface and C/C++ for the heavy lifting. This tutorial helps you to get an app up and running on Android, Windows Phone, and iOS.

Developer's Guides

  • Creating User Interfaces With MoSync

    MoSync provides you with a choice of multiple solutions for cross-platform user interface development: the NativeUI C++ Library and the NativeUI HTML/JavaScript Library, the basic C Native UI Widget API, and the non-native C++ MAUI Library. Let's take a look.

  • Developing Apps in HTML5 and JavaScript

    The MoSync SDK has rich capabilities for building complete applications with HTML5, JavaScript, and CSS. You can access device services and Native UI from JavaScript. You can include resources like images, audio files and videos. You can even extend your app with code written in C/C++, if needed.

  • Developing Symbian Applications

    When you package an application for a Symbian device, you need to specify a UID for the package. MoSync can generate test UIDs for you to use during development. Optionally, can also self-sign your packages by specifying a key file and certificate. Here we describe how to set UIDs and do self-signing.

  • Developing Windows Phone Applications

    Windows Phone is a mobile platform from Microsoft that is becoming increasingly popular. Window Phone is a successor to, but is not compatible with, Microsoft's Windows Mobile platform. The Windows Phone uses the design language Metro for its user interface. Here we take a look at some of the key features of this platform.

  • Extending HTML5 Apps with C++

    With the MoSync SDK you are not restricted to just coding in HTML5/JavaScript. You can use the Wormhole communication bridge to talk to C/C++ from JavaScript — really useful when you want to extend your HTML5/JavaScript application with custom code written in C++.

  • Optimizing Mobile Applications

    When you develop a mobile app you want it to be as fast and as memory-efficient as possible. Mobile devices have slower CPUs, limited memory, and limited power resources. Always bear in mind the limitations of the devices you are writing apps for. Here we provide some guidelines to help you optimize your application's performance, size, and power consumption.

  • Running PhoneGap Apps in MoSync

    PhoneGap-compatible functions in our Wormhole JavaScript Library make it possible to run most existing PhoneGap apps in the MoSync SDK with little or no need for change. And it's easy to add functionality to your app (like Native UI) not available out-of-the-box with PhoneGap.

  • The JavaScript NativeUI API

    Our JavaScript NativeUI API gives you direct access to native user interface widgets, like nav bars, buttons, tab screens, and list boxes, directly from HTML or JavaScript. Use it standalone, or side-by-side with the other APIs in Wormhole to extend the capabilities of your apps.

  • The Wormhole JavaScript Library

    The MoSync Wormhole JavaScript Library gives you access from an HTML5 application to native user interface components as well as cameras, compasses, files storage, push notifications, sensors, and a whole lot more.

Example Applications

  • NFCExample

    This example application shows how to use the MoSync NFC API which provides C syscall functions to read and write near field communication tags.

  • WebViewGeoLocation

    The WebViewGeoLocation application displays your current location, as returned by EVENT_TYPE_LOCATION events. This example is useful for understanding the basic mechanisms for communicating between JavaScript and C++.

  • WebViewLoveSMS

    It is fun to send text messages with smileys to friends and loved ones. But it is time consuming to type in lots smileys on a phone. WebViewLoveSMS is an app you can use to easily send messages with lots of heart or kiss smileys to your loved one.

  • WebViewTwitter

    This example application is a simple Twitter client that shows tweets by selected users. Users can be added to a Favorites List stored on the device. The app uses the jQuery JavaScript library and its jQtouch plug-in, and the MoSync Wormhole C++ Library.

  • WormholeDemo

    This example application demonstrates the MoSync Wormhole JavaScript Library, in particular its support for native UI, sensors, capture, and file storage.

  • WormholeNativeUI

    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.

IDE User Guides

  • Compilation, Linking, and Assembly

    Pipe-Tool is MoSync's code transformation engine. It combines the functions of a code linker and assembler, and performs code verification, optimization and dead code elimination to produce highly optimized outputs for each of the target platforms.

  • Creating Projects from Templates

    This guide shows you how to create a new application project in the MoSync IDE and describes the project templates that are available to you. It also introduces the concepts of projects and workspaces. We have templates for various types of C/C++ projects, and templates for hybrid HTML/Javascript/C/C++ projects.

  • Using MoSync Reload

    MoSync® Reload is a tool for the rapid development of mobile applications in HTML5 and JavaScript for iOS, Android and Windows Phone mobile platforms. With MoSync Reload you can quickly edit your HTML5 code and rapidly deploy it to multiple devices simultaneously. Forget long build times!

Screencasts

  • See video
    An HTML5 Application for Android and iOS in 90 Seconds

    In this MoSync tutorial, Mikael discusses how to import an example project into MoSync, and how to send it to a mobile phone.

  • See video
    Zero Turnaround Native App Development with MoSync Reload

    In this screencast we take you on a quick tour of MoSync Reload—our product that lets you create and edit HTML5 projects, reload them to multiple devices and emulators, and immediately see the result of your changes, dramatically cutting HTML5 and JavaScript development times, and simplifying mobile app development.