×
Namespaces

Variants
Actions

Nokia Asha web apps - Screen Navigation

From Nokia Developer 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
Compatibility
Platform(s): Series 40 devices that support Series 40 web apps
Series 40 6th Edition (initial release)
Device(s): Must have Nokia OVI Browser
Article
Keywords: switchClass()
Created: somnathbanik (23 Jun 2011)
Last edited: hamishwillee (09 May 2013)

Contents

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.

Implementation

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)


basic.css

.container {
margin-left: auto;
margin-right: auto;
width:240px;
height: 360px;
overflow:hidden;
vertical-align: top;
}
 
.strip {
width:800px;
-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.

index.html

                  <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>
 
 
<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>
 
<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>
</div>
 
</div>
</div>
</body>


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.
 mwl.switchClass('#views','view0','view1');
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 File:S40WebApps-ScreenNavigation.zip

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

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×