Nokia Asha web apps - Screen Navigation
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 Example
Tested with
Compatibility
Article
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.
Home View/ view0
Second View/ view1
Third View/ view2
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">mwl.switchClass('#views','view0','view1');
<span onclick="mwl.switchClass('#views','view0','view1'); "><img src="start.jpeg" alt="Home"/></span>
.view1 {margin-left:-240px;}
Source Code
The full source code presented in this article is available here File:S40WebApps-ScreenNavigation.zip
(no comments yet)