Programming the Mobile Web : Widgets and Offline Webapps - Standards

2/12/2011 3:39:39 PM
The standards in this area are still emerging, but we can identify some official and de facto standards in the mobile widget world.

1. Packaging and Configuration Standards

First, for packaging and for the configuration file, the W3C has the Widget Packaging and Configuration standard, defined at (not only for mobile widgets). The W3C standard defines a ZIP file as the package format, with a configuration file and an optional icon included in the root folder of the package.

The configuration file must be named config.xml. Here’s a sample file:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns=""
<name short="Example 2.0">
The example Widget!
A sample widget to demonstrate some of the possibilities.
<icon src="icons/example.png"/>
<content src="myWidget.html"/>

The other de facto standard is the Apple Dashboard Widget, used for Mac OS X widget development. It also uses a ZIP file, and a property list file (info.plist) is used for configuration.

The property list format stores serialized objects in a file with a .plist extension. The contents are in XML format, but without the typical XML tag usage.

In a property file, objects are stored along with their properties. Each property can be a string, a number, a Boolean, an array, a key/value dictionary, or some other type, depending on the system. For each property, we define the name as one key tag and the value as another tag, depending on the type. For example:

<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<key>Numeric Property</key>

<key>String Property</key>

<key>Boolean Property</key>

2. Platform Access

For mobile platform access standards, we have already talked about HTML 5, Google Gears, and the W3C Geolocation API. To that list, we can add the BONDI standard, the de facto PhoneGap standard, and a proposed standard by Nokia called Nokia Platform Services.

2.1. BONDI

BONDI ( is a standard for mobile platform access from JavaScript including security policies defined and published by the Open Mobile Terminal Platform (OMTP) organization, now taken into the Wholesale Applications Community (WAC) and integrated with JIL and GSMA OneAPI. BONDI is supported by many companies, including ACCESS (NetFront), Myriad (Openwave), Sony Ericsson, LG, Opera, T-Mobile, Orange, and Vodafone. It supports access from a widget or even the browser.

Devices supporting the BONDI platform for widget development began entering the market in 2010. At the time of this writing there are two versions of the standard, 1.0 and 1.1, and the full API can be found on the website.

An open source independent SDK provided by the LiMo foundation is available at, and every vendor should provide its own SDK (like LG, as we will see in the following pages). The LiMo SDK is Eclipse-based and includes a Phone View with some kind of BONDI emulator, as well as an incorporated debugger. This SDK also includes a debugger for testing WRT-based widgets (the Symbian format).


Remember that mobile widgets are just like any other HTML, CSS, and JavaScript code. We can even create something like a product catalog or a small data application that synchronizes with the server using Ajax without using any special API.

A BONDI widget is a ZIP package following the W3C widget standard, so it includes a config.xml file, a startup HTML file, and all the required resources. In order to be recognized as a BONDI widget, the ZIP file extension must be changed to .wgt and the file must be served as application/widget.

The API defined in the 1.0 and 1.1 standards manages all functionality with a bondi global object that is available in compatible devices. It includes the modules described in Table 1. You can access a module if you define it in the feature tag of the config.xml file. This is to allow the user to know what features you will use when installing the widget.

Table 1. BONDI widget modules
Module nameModule objectAllows us to...
Application Launcherbondi.applauncherLaunch any application installed, including standard ones (browser, email, phone, SMS, or media player)
Messagingbondi.messagingSend SMS, MMS, and email messages
User Interactionbondi.uiDefine navigation mechanisms, configure soft keys and native menus, access effects (vibration, sounds, and lights), change the orientation, and fire some application events
File Systembondi.filesystemBrowse and manage files in known folders (documents, images, videos) or in any path in local or external memory
Gallerybondi.galleryAccess media files on the device
Device Statusbondi.devicestatusAccess properties of the device
Application Configurationbondi.appconfigChange and read application settings defined by the developer
GeolocationlocationImplement the W3C Geolocation API
Camerabondi.cameraAccess video recording and photo snapshot capabilities
Communication Logbondi.commlogAccess the list of recent messages and calls
Contactbondi.contactAccess the SIM card and stored phone contacts
Calendarbondi.pim.calendarAccess the device’s calendars
Taskbondi.pim.taskAccess the device’s tasks list

Many methods support event listeners and JSON-style object parameters.

For example, the JavaScript code for sending an email with attachments taken from the filesystem from a BONDI widget would look like this:

<script type="text/javascript">
function send() {

var file=bondi.filesystem.resolve("/Photo.jpg");
var email = bondi.messaging.createEmail({
from: "",
to: document.getElementById("email"),
subject: "Sent from a widget",
body: "Hi! This is our message from a widget with an attachment",
attachments: file
bondi.messaging.sendEmail(function() {
// Sent handler
alert('Your message was sent');
}, function() {
// Error handler
}, email);


For testing purposes, you can download a widget from the BONDI Reference Implementation, a Windows Mobile 6.x official implementation. You can also download testing SDKs and emulators for other vendors, such as LG.

The BONDI JavaScript API should also work in the future on normal browser-based websites, but we may first ask for permission using bondi.requestFeature(success_callback, error_callback, module_name). The browser usage is not yet implemented on any platform.

At the time of this writing LG, Samsung, and Sony Ericsson are starting to support BONDI widgets. There are also some wrappers and open source projects to make them work on Symbian, Android, and other devices.

2.2. PhoneGap

If you know about PhoneGap, you may wonder why I am talking about it here, in the API standards section. PhoneGap ( is an open source framework for creating mobile web applications in HTML and JavaScript while still taking advantage of the core features of native applications in some platforms. It is becoming a de facto standard for iPhone, Android, and BlackBerry devices and is entering into the webOS, Symbian, Maemo, and Windows Mobile world.


Other similar projects are RhoMobile ( and Titanium Mobile (

PhoneGap has two main features:

  1. A JavaScript API for usage in our code

  2. The ability to embed our web applications in native projects

PhoneGap applications are native applications that open a full-screen embedded browser with our mobile web code running inside. This framework provides a bridge between JavaScript and the native runtime, providing support for additional features not available in JavaScript.


You can create PhoneGap-like projects easily for every platform by using the web browser control that each platform offers in its native environment, and opening your HTML code inside. The disadvantage of not using PhoneGap is that you will not have access to any mobile-specific JavaScript APIs.

PhoneGap supports several new JavaScript native objects when you are running inside a PhoneGap project. The objects are listed in Table 2.

Table 2. PhoneGap native objects
GeolocationProvides similar functionality to the W3C Geolocation API
AccelerometerProvides listeners for the accelerometer
CameraProvides access to the camera
NotificationProvides access to sound, vibrate, and other notification options
ContactsAllows you to manage contacts from the user’s agenda
FileEnables you to read, write, and manage files on the filesystem
SMSLets you send SMS messages
PhoneLets you make a call
MapsAllows you to open a map
AudioAllows you to record and play audio files
SettingsGets information about the device
HTTPMakes a GET request to an URL

For example, to take a picture we will use a code similar to this:

function takePicture() { {
// This function is called with the picture data in base64 format
document.getElementById("img").src="data:image/base64;" + image;
}, null, {quality: 8});

2.3. Nokia Platform Services 2.0

Nokia has developed its own standard based on the Symbian WRT widget engine, which we will look at in the next section. This standard is an easy-to-use JavaScript API for accessing device services and is intended to be a future standard for many other vendors.

2.4. Apple Dashboard

Apple Dashboard, as one of the first widget engines for desktops, is the de facto standard for a global widget object in JavaScript. The most widely compatible methods are openURL, for opening the browser, and the persistent storage methods preferenceForKey and setPreferenceForKey, which we will cover later.

  •  Mobile Application Security : BlackBerry Security - Networking
  •  Mobile Application Security : BlackBerry Security - Local Data Storage
  •  Themes on Windows Phone 7 Devices (part 2) - Changing the Theme & Detecting the Currently Selected Theme
  •  Themes on Windows Phone 7 Devices (part 1) - Applying a Theme
  •  Programming the Mobile Web : Mobile Widget Platforms
  •  Programming the Mobile Web : Geolocation and Maps - Showing a Map
  •  Mobile Application Security - BlackBerry Security - Permissions and User Controls (part 2)
  •  Mobile Application Security - BlackBerry Security - Permissions and User Controls (part 1) - RIM Controlled APIs
  •  Windows Phone 7 Development : Working with Controls and Themes - Introducing the Metro Design System
  •  Windows Phone 7 Development : WebBrowser Control - Saving Web Pages Locally
  •  Programming the Mobile Web : Geolocation and Maps - Detecting the Location (part 3)
  •  Programming the Mobile Web : Geolocation and Maps - Detecting the Location (part 2) - Google Gears
  •  Programming the Mobile Web : Geolocation and Maps - Detecting the Location (part 1) - W3C Geolocation API
  •  Programming the Mobile Web : Geolocation and Maps - Location Techniques
  •  iPhone Programming : Table-View-Based Applications - Connecting the Controller to the Model
  •  Programming the Mobile Web : Mobilizing WordPress and Other CMSs
  •  Programming the Mobile Web : Server-Side Browser Detection and Content Delivery - Content Adaptation
  •  Programming the Mobile Web : Multimedia and Streaming
  •  Mobile Application Security : BlackBerry Security - Development and Security Testing
  •  Mobile Application Security : BlackBerry Security - Introduction to Platform
    Top 10
    Windows Server 2003 : Domain Name System - Command-Line Utilities
    Microsoft .NET : Design Principles and Patterns - From Principles to Patterns (part 2)
    Microsoft .NET : Design Principles and Patterns - From Principles to Patterns (part 1)
    Brother MFC-J4510DW - An Innovative All-In-One A3 Printer
    Computer Planet I7 Extreme Gaming PC
    All We Need To Know About Green Computing (Part 4)
    All We Need To Know About Green Computing (Part 3)
    All We Need To Know About Green Computing (Part 2)
    All We Need To Know About Green Computing (Part 1)
    Master Black-White Copying
    Most View
    Collaborating Within an Exchange Server Environment Using Microsoft Office SharePoint Server 2007 : Exploring Basic MOSS Features
    Get A Faster, Safer PC (Part 3) - Make text easier to read, Disable a laptop touchpad
    Algorithms for Compiler Design: THE MACHINE MODEL
    iPhone, iPad touch and iPad : Realikety
    Storage, Screens And Sounds (Part 1)
    Audio Cleaning Lab MX - makes some sounds sound better
    SQL Server 2008 : Using Remote Stored Procedures
    Sony Xperia Go
    Web Security Testing : Manipulating Sessions - Analyzing Session Randomness with WebScarab
    Understanding the Basics of Collaboration in SharePoint 2010 : Microsoft Office Integration
    Buyer’s Guide - Keyboard and mice (Part 2) - Gigabyte Multimedia Ultra-slim Profile Keyboard GK-K6150, Microsoft Natural Ergonomic Keyboard 40000
    How To Store Your Files In The Ether
    Expert advice: Printer & Scanner (Part 2) - Samsung ML-2955DW
    SharePoint 2010 : PerformancePoint Services (part 2) - Using PerformancePoint
    SQL Server System and Database Administration : System Databases
    Is The Personal Blog Dead? (Part 2) - Going Mainstream
    Choosing The Right Gear For The Right Job
    Panasonic KX-MB1530CX Multi-Function Printer : A small workhorse for document printing
    Master Black-White Copying
    Windows 7 : Installing and Running Your Software (part 1)