Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 05:06, 10 February 2012 by hamishwillee (Talk | contribs)

Widgets Usability

From Wiki
Jump to: navigation, search
Article Metadata
Created: naresh99 (20 Jun 2009)
Last edited: hamishwillee (10 Feb 2012)



The widget is used to refer to either the graphic component or its controlling program or to refer to the combination of both. It can be a GUI that allows the user to interface with the application.Widgets display information and invite the user to act in a number of ways. In other words Mobile widgets are the applications that user can install on his mobile device to add functionality to device. Each widget provides functionalities like brings information to you (news widgets), mail to your inbox (mail widgets) & all. Mobile widgets are easliy downloadable from internet or web to once's mobile phone. As now a days many mobile comes with preinstalled widgets on them. There are lots of companies providing widgets, like eBay provides mobile widget ticker, some news sites also offers new related widgets, maps widgets & many more. Widget is also called as gadget, badge, module by other programming systems.

S60 Web Runtime Widgets is a portable and lightweight application framework that makes mobile web apps easy. It is an extension to the Webkit based browser engine on the S60 Platform - that allows instances of the browser to be run as if they are applications. Widgets can be created using HTML, CSS and JavaScript. Web Runtime Technology allows small applications called Widgets to be easily distributed and installed.

What is a Widget

  1. Standalone Web applications running without a browser.
  2. Web services provided by the S60 Web Runtime (WRT) environment.
  3. Behaviour defined using JavaScript.
  4. Consists of a few files defining appearance (icon), layout, and behaviour.
  5. Accesses a URL like a normal Web application to get data from the Web server.

What is a S60 Web Runtime

  1. A library providing APIs for widget developers for Menu creation, URL access, Data download from URL.
  2. Based on open-source Web technologies.
  3. Empowered by Web Browser for S60.
  4. Several widgets can be executed at the same time.
  5. Due to physical limitations of the screen, only a single widget is on the foreground.

Widget building blocks


Widget deployment

1. At least two mandatory files (manifest and main HTML files) are required.
2. Files are packed into a ".zip" package.
3. The package extension is changed to ".wgz".
4. The package is transferred to the device through bluetooth or USB cable.

The role of JavaScript

  1. Implements widget behaviour.
  2. UI interactions.
  3. Communication functionality.
  4. Dynamic construction of UI elements.

JavaScript functions are associated with tags.

  • Functions are assigned with certain attributes (for example, onClick) causing the function to be called.


<node onclick="get('Name');">Name</node>

Accessing Web services

  1. Ajax allows asynchronous HTTP requests.
  2. No need to wait for the result by blocking the UI.
  3. Use XMLHttpRequestobject

In object creation, register a callback, which is called when the request has been completed.In the callback, handle the results, view the fetched content in the UI.

Some important guideline regarding widget usability are.

  • Widget should not keep refreshing the screen everytime user makes changes in widget value. Sometimes Unexpected refreshes creates confusion.
  • Support for animated GIFs is limited in early versions of WRT. Testing on actual devices is recommended, especially if animated GIFs are critical to your design.
  • Most required input fields should be kept in up-front. Use asterisk at the end of the field label to indicate it as required field.
  • Transitions and animations can be extremely CPU intensive. Always test animations on several devices and use the Nokia Energy Profiler to determine the load on the CPU.
  • If you wish to include text with a custom font, use a graphic image instead of solutions such as SiFR (an approach to custom fonts based on Flash and JavaScript technology), which may be too heavy for most mobile devices.
  • Help for the widgets should be provided for understanding the use & the flow of widget. Help content should be simple & clear enough to understand. Help options should also be place in the position where user easily find it.

More Widget articles can be found here

74 page views in the last 30 days.