Nokia Asha web apps - Swipe Events
This article shows how to write a Series 40 web app that uses a left swip on the screen to cycle through a set of images. It uses the mwl.addSwipeLeftListener() method to listen for swipe events, and then uses mwl.setGroupNext() to display the next image in the set.
04 Sep
2011
Article Metadata
Code Example
Tested with
Compatibility
Article
Contents |
About Ovi browser event support
OVI browser supports standard HTML DOM events along with series of synthetic DOM events to support some gestures and keypad events. These events act just like standard events.
<static> mwl.add<Event>Listener(targetNode,listener)
Where targetNode is the selector of the node to which to add an event/listener and listener is the statement/ command(s) to run when the event fires. The methods given below are for registering the synthetic events.
- addSwipeLeftListener
- addSwipeRightListener
- addSwipeUpListener
- addSwipeDownListener
- addNavLeftListener
- addNavRightListener
- addNavUpListener
- addNavDownListener
Method for presses on the display
- addLongPressListener
Implementation
Lets create a basic web app project ( File->New-> Series 40 web app (wgt) -> basic web app project)
basic.css
.hide { display: none; }
.show { display: block; }
.item { text-align: center; }
The hide and show classes are to hide and show the particular div and item class is to make the content in the center of the div.
index.html
<body onload="javascript:init();">
<div class="item" > <h1>Swipe left to change picture</h1></div>
<div id="group" >
<div class="show item"> <img src="1.jpeg"/> </div>
<div class="hide item"> <img src="2.jpeg"/> </div>
<div class="hide item"> <img src="3.jpeg"/> </div>
<div class="hide item"> <img src="4.jpeg"/> </div>
<div class="hide item"> <img src="5.jpeg"/> </div>
</div>
<script type="text/javascript"> mwl.addSwipeLeftListener('#group', "mwl.setGroupNext('#group', 'show', 'hide', 'next')");
</script>
</body>
We have taken five div where the first one is visible initially and thus displays an image. When a user swipes left the addSwipeLeftListener() method is called. This in turn executes the function setGroupNext() which iterates to the next element in a given block and displays its image.
Source Code
The full source code presented in this article is available here: File:SwipePictureS40WebApps.zip
(no comments yet)