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.

Nokia Asha web apps - Screen Navigation

From Wiki
Jump to: navigation, search

This article demonstrate how to switch view using switchClass() method. The switchClass() method combines the removal of one element class and the addition of another in a single operation. This is a synchronous method.

Article Metadata
Code ExampleTested with
SDK: Nokia Web SDK 1.2.0
Devices(s): X3-00/ 02/ Emulator
Platform(s): Series 40 devices that support Series 40 web apps
Series 40 6th Edition (initial release)
Device(s): Must have Nokia OVI Browser
Keywords: switchClass()
Created: somnathbanik (23 Jun 2011)
Last edited: hamishwillee (09 May 2013)


General Syntax

<static> mwl.switchClass(targetNode, removeClass, addClass)

Where targetNode is the element to which to add one class and remove another. removeClass is the name of the class to remove . addClass is the name of the class to add. The switchClass() method does not return a value.


We will create a sample example in a form of page that displays multiple panels in a container, and will scroll from panel to panel horizontally. Each page will have some controls (back, next, etc) to navigate to other page.

Lets create a basic web app project ( File->New-> Series 40 web app (wgt) -> basic web app project)


.container {
margin-left: auto;
margin-right: auto;
height: 360px;
vertical-align: top;
.strip {
-webkit-transition:margin-left 0.5s linear;
#views{height: 400px;}
#homeview{width:240px; height:300px; text-align:center;}
#verticleview{width:240px; height:700px; margin-left: 240px; margin-top: -300px;text-align:center;}
#horizontalview{width:240px; height:300px; margin-left: 480px; margin-top: -700px; text-align:center;}
.view0 {margin-left:0px;}
.view1 {margin-left:-240px;}
.view2 {margin-left:-480px;}

container defines the area of the main container with other properties. strip is used to change the pages with a swipe motion . view0, view1, view2 are the three views in the container. homeview, verticleview, horizontalview are the areas to display the views in container.


                  <body >
<div class="container" >
<div class="strip view0" id="views">
<div id="homeview">
<span onclick="mwl.switchClass('#views','view0','view1'); "><img src="start.jpeg" alt="Home"/></span>
<div id="verticleview">
<span onclick="mwl.switchClass('#views','view1', 'view0')"><img src="back.jpeg" alt="Back"></span>
<span onclick="mwl.switchClass('#views','view1', 'view2')"><img src="next.jpeg" alt="Next"></span>
<div id ="horizontalview">
<span onclick="mwl.switchClass('#views','view2', 'view0')"><img src="home.jpeg" alt="Home"></span>
<span onclick="mwl.switchClass('#views','view2', 'view1')"><img src="back.jpeg" alt="Back"></span>

Explaining index.html

<div class="strip view0" id="views">
The above div tag displays view0 at the starting of the application. This is the home view as we called here.
The switchClass method change the page from view0 to view1 as added in the below span tag
<span onclick="mwl.switchClass('#views','view0','view1'); "><img src="start.jpeg" alt="Home"/></span>
and when view1 is called it displays -240px in the left margin as declared in style sheet
 .view1 {margin-left:-240px;}

Source Code

The full source code presented in this article is available here

This page was last modified on 9 May 2013, at 10:43.
78 page views in the last 30 days.