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.

(Difference between revisions)

How to declaratively add tactile feedback in WRT widgets

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Automated change of text from Forum Nokia to Nokia Developer. (Rebranding))
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot addition of Template:ArticleMetaData)
Line 1: Line 1:
[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:How To]][[Category:Usability]]
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
|id= <!-- Article Id (Knowledge base articles only) -->
|language=<!-- Language category code for non-English topics - e.g. Lang-Chinese -->
|review-by=<!-- After re-review: [[User:username]] -->
|review-timestamp=<!-- After re-review: YYYYMMDD -->
|update-by=<!-- After significant update: [[User:username]]-->
|update-timestamp=<!-- After significant update: YYYYMMDD -->
}}[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:How To]][[Category:Usability]]
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.
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.

Latest revision as of 02:27, 16 November 2011

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.


[edit] 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 Nokia Developer Library: Tactile feedback

[edit] 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.

[edit] 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"/>

[edit] 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.

[edit] 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);

[edit] Downloads

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

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