WRT widgets - Step 2: Implement the widget functionality

English
- English
- 中文
- Русский
- Français
- Español
- Português

Home

Web

WRT widgets

Introduction

IDE walkthrough

Programming

Checkpoint

Hands-on introduction

Step 1

Step 2

Step 3

Step 4

Summary

Mobile Flash

Java

Step 2: Implement the widget functionality

AccuWidget source code contains an XHTML file, a CSS file, several plain text documents, several .png image files, and four JavaScript files:

common.js includes common content
dev_specific.js includes device-specific content
accuWidget.js and demo.js contain AccuWidget-specific functions

This step concentrates on implementing demo.js, which provides the menu functionality for AccuWidget. Use the following information to populate the demo.js file.

To initialize the widget and define the widget window, replace the functions in demo.js with the following code:

//INIT START
window.onload = init;

// Initializes the widget
function init() {
    window.menu.showSoftkeys();

    // Store the locations
    var locationTableElement = document.getElementById("locationTable");
    locationNodes = locationTableElement.getElementsByTagName("td");

    // Enable tab mode navigation
    widget.setNavigationEnabled(false);

    // Call keyPress function when a key gets pressed
    document.onkeypress = keyPress;
    
    // Call windowResized function when the window gets resized.
    // TODO: onresize event is not raised on devices. See the file
    // dev_specific.js for more information.
    document.onresize = windowResized;
    
    // Highlight the initial location
    updateLocationHighlight(-1, 0);

    // Hide the forecast view (the city view is the first view)
    document.getElementById("forecastContainer").style.display = "none";

    // Check if there's a need for some device-specific customization
    devSpecificInit();
}

Select All

To create the widget menu, add the following function to the demo.js file:

To add the functionality for handling the menu item selections, add the following function to the demo.js file:

To enable the display of textual forecast, add the following function to the demo.js file:

The file demo.js is now prepared for use. In the next step you create the .wgz file for the widget.