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 - Creating On/Off Switch

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrate how to create a On/Off switch using mwl methods.

Article Metadata
Code ExampleTested with
SDK: Nokia Web SDK 1.2.0
Devices(s): X3-00/ 02/ Emulator
Platform(s): Series 40
Device(s): Must have Nokia OVI Browser
Keywords: toggleClass()
Created: somnathbanik (25 Jun 2014)
Last edited: hamishwillee (09 May 2013)



In the following code example we have used mwl methods toggleClass() along with setGroupNext() and switchClass(). The toggleClass() method toggles a specified class attribute of an element. This is a synchronous method.

General Syntax

<static> mwl.toggleClass(targetNode,className)

Where targetNode is the element whose class to toggle. className is the name of the class to toggle

Basic Idea

We will create a graphical switch containing two images Red (OFF) and Green (ON) . Initially the switch will be OFF (Red image will be visible) . Once user click on the Red image the Green image will be activated. Clicking on any of the image will make the other image active, this shows whether the switch is in ON or OFF state.


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


body {padding:5px;} 
.container {width:235px; height:295px; overflow:hidden;}
.sw_off {margin-left:0px;}
.sw_on {margin-left:0px;}
.hide {width:235px; height:295px; display:none;}
.show {width:235px; height:295px; display:block;}

{{Icode|container]] describes the area of the main container. For each image we have created two div sw_off and sw_on, which defines the position of the div in main container while displaying. hide and show are the areas of the div to be displayed and hidden.


<body >
<div id="sw_bg" class="container">
<div class="sw_off" id="slide">
<div class="show" id="is_off" onclick=" mwl.toggleClass('#sw_bg','cont_on');
mwl.switchClass('#slide', 'sw_off', 'sw_on');
mwl.setGroupNext('#slide', 'show', 'hide', 'next');">

<img src="redbutton.jpeg" >
<div class="hide" id="is_on" onclick=" mwl.toggleClass('#sw_bg', 'cont_on');
mwl.switchClass('#slide', 'sw_on', 'sw_off');
mwl.setGroupNext('#slide', 'show', 'hide', 'next');">

<img src="greenbutton.jpeg" >

Initially sw_off class is displayed and thus we will see the Red image . When we click on the red image switchClass() method changes the class from sw_off to sw_on and thus the Green image will be visible this time. toggleClass() method toggles the class cont_on. setGroupNext() method iterate to the next element. It replaces the target class show with the default class hide on the current node and applies the target class show to the next sibling node.

Source Code

The full source code presented in this article is available here File:SwitchS40WebApps.zip

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