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.

How to declaratively add tactile feedback in WRT widgets

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleArticle
Created: jappit (19 Jun 2009)
Last edited: hamishwillee (16 Nov 2011)

This articles explains how to provide, in a declarative manner, tactile feedback when click events are performed on specific elements in a Web Runtime widget.



On touch based devices, tactile feedback allow users to have direct and immediate response on successful touch interactions, so improving the overall user experience, and enhancing the usability of the widget's user interface.

A full introduction to Tactile Feedback is available on Nokia Developer Library: Tactile feedback

The code

This approach works by defining a global event listener, that listen to all click events performed within a WRT widget. Once a click event is performed, the event handler checks if the event target is registered for tactile feedback, and eventually performs the required vibration with the specified intensity.

The declarative syntax

A custom attribute, named feedback, is used to specify which elements must provide tactile feedback. The attribute value is used to specify the vibration intensity, so allowing for finer control of the feedback response.

The following HTML code shows 3 DIV elements: the first 2 are registered for tactile feedback, while the last one is not:

<body onLoad="javascript:init();">
<div id="element_1" feedback="100" style="width: 200px; height: 100px; background: red;"></div>
<div id="element_2" feedback="50" style="width: 200px; height: 100px; background: green;"></div>
<div id="element_3" style="width: 200px; height: 100px; background: blue;"></div>

Wrt tactilefeedback sample.png
Also, in order to access the device's vibration functionality, the SystemInfo API plugin is added to the HTML code of the widget:

<embed id="sysinfo" type="application/x-systeminfo-widget" hidden="yes"/>

Registering the global click handler

In order to listen to all widget's click events, a global listener is defined on the document node. This is done in the init() function, that is called in the widget's onload event:

var sysinfo = null;
function init()
sysinfo = document.getElementById("sysinfo");
document.addEventListener('click', tactileFeedback, false);

The init() function also stores a reference to the SystemInfo API plugin in the sysinfo variable.

Providing the tactile feedback

Each time a click event is performed within the WRT widget, the tactileFeedback() function gets called. This function, in order, must do:

  • check if the event target is registered for the tactile feedback, by checking its feedback attribute
  • if the feedback attribute exists, then it starts a short vibration with the specified intensity

The code is shown below:

function tactileFeedback(event)
var target =;
var feedback =;
sysinfo.startvibra(50, feedback.nodeValue);


The sample widget shown in this article is available for download here:

This page was last modified on 16 November 2011, at 02:27.
56 page views in the last 30 days.