×
Namespaces

Variants
Actions
Revision as of 13:39, 9 May 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Nokia Asha web apps - Swipe Events

From Nokia Developer Wiki
Jump to: navigation, search

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.

Featured Article
04 Sep
2011
Article Metadata
Code ExampleTested with
Devices(s): X3-02/ Emulator
Compatibility
Platform(s): Series 40 6th Edition and later
Series 40 6th Edition (initial release)
Device(s): Must have Nokia OVI Browser
Article
Keywords: addSwipeLeftListener ()
Created: somnathbanik (28 Jun 2011)
Last edited: hamishwillee (09 May 2013)
Swipe Event

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.

Methods for touch navigation

  • addSwipeLeftListener
  • addSwipeRightListener
  • addSwipeUpListener
  • addSwipeDownListener

Method for keypad navigation

  • addNavLeftListener
  • addNavRightListener
  • addNavUpListener
  • addNavDownListener

Method for presses on the display

  • addLongPressListener

Note.pngNote: The code for registering a synthetic event must be in a specific location in the HTML file. It has to be at the very end of the page body (immediately before the </body> tag).

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

This page was last modified on 9 May 2013, at 13:39.
114 page views in the last 30 days.
×