×
Namespaces

Variants
Actions

Updating the class attribute through Online/Offline API in WRT

From Nokia Developer Wiki
Jump to: navigation, search


Article Metadata
Tested with
Devices(s): Nokia E7
Article
Created: tapla (14 Oct 2010)
Last edited: hamishwillee (24 Jun 2011)

Overview

Changing the class attribute of an element dynamically when the widget goes online or offline has no effect if the screen isn't updated at the same time. This code snippet shows how to work around this issue.

Preconditions

  • The widget is added onto the home screen
  • Widgets on the home screen are set to online or offline mode through the Options menu

Source: Relevant HTML components

<div id="bodyContent" class="bodyContent">
<img id="imgButton" src="" alt="" class="inactive" />
</div>

Source: The style sheet

/* The style sheet starting with # corresponds to the html component's ID. */
 
#imgButton {
width: 152px;
height: 35px;
}
 
/* The style sheet starting with (dot) corresponds to the html component's whose class is defined. In the
following case it reflects to <img code mentioned above with class "invactive" or "active" */

 
 
.active {
background-image: url("../gfx/button_active.png");
}
 
.inactive {
background-image: url("../gfx/button_inactive.png");
}

Source: JavaScript

window.ononline = activateButton;
window.onoffline = deactivateButton;
 
// Called when the widget goes online
function activateButton() {
// Doesn't work! Changing the class attribute has no effect.
// document.getElementById("imgButton").setAttribute("class", "active");
document.getElementById("imgButton").setAttribute("src", "gfx/button_active.png");
}
 
// Called when the widget goes offline
function deactivateButton() {
// Doesn't work! Changing the class attribute has no effect.
// document.getElementById("imgButton").setAttribute("class", "inactive");
document.getElementById("imgButton").setAttribute("src", "gfx/button_inactive.png");
}

Postconditions

When Options > Widgets to online mode or Options > Widgets to offline mode is selected, the button image on the screen is activated or deactivated accordingly.

Supplementary material

This code snippet is part of the stub concept, which means that it has been patched on top of a template application in order to be more useful for developers. The version of the WRT stub application used as a template in this snippet is v1.2.

This page was last modified on 24 June 2011, at 12:24.
37 page views in the last 30 days.