How to declaratively add tactile feedback in WRT widgets
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 Forum Nokia Library: Tactile feedback
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:
<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>
<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;
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:
var target = event.target;
var feedback = target.attributes.feedback;
The sample widget shown in this article is available for download here: Media:TactileFeedbackWidget.zip