How to declaratively add tactile feedback in WRT widgets

From Forum Nokia Wiki

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.

Description

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 Forum Nokia 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:

<html>
	[...]
 
	<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>
	</body>
</html>

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 = event.target;
 
	var feedback = target.attributes.feedback;
 
	if(feedback)
	{
		sysinfo.startvibra(50, feedback.nodeValue);
	}
}

Downloads

The sample widget shown in this article is available for download here: Media:TactileFeedbackWidget.zip

Community: Wiki