Updating the class attribute through Online/Offline API in WRT

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.

• The patched, executable application that can be used to test the features described in this snippet is available for download at Media:updating_the_class_attribute.zip.
• You can view all the changes that are required to implement the above-mentioned features. The changes are provided in unified diff and colour-coded diff (HTML) formats in Media:updating_the_class_attribute.diff.zip.
• For general information on applying the patch, see Using Diffs.
• For unpatched stub applications, see Example stub.