Moving between views

Design intuitive ways for users to move between views by clicking buttons or links, selecting items, or pressing softkeys.

Users can move between views in the following ways:

  • Click button controls in views.

    Use JavaScript to open a new page when users click a button.

  • Select softkeys.

    For example, you can add the Back or Cancel option to the right softkey to take users back to the original page. For more information, see Using softkeys.

  • Select items in the Options menu.

  • Click links.

    However, using links in widgets is not recommended. Links are one-way shortcuts; there is no direct path back to the original page.

The AccuWidget example illustrates changing views in different ways.

Figure: Selecting a button changes the view

The STEW example provides users with different ways to change views depending on whether the widget is run on a touch device. On touch devices, a button menu is provided, whereas an Options menu that is associated with the left soft key is provided on other devices. For more information, see Designing STEW user interface.

Figure: STEW button menu

To use buttons to change views

  1. In the HTML file, create clickable buttons that users select to change the view.

        <div id="locationsContainer" class="mainContainer">
        <h2>Select the location:</h2>
            <div id="locations">
                <table id="locationTable">
                    <tr>
                        <td onclick="locationSelected(0, '10001', 'New York');">
                            <img src="gfx/city_icons/new_york.png" alt="New York" /><br />
                            New York
                        </td>
                        <td onclick="locationSelected(1, 'EUR|UK|UK241|LONDON', 'London');">
                            <img src="gfx/city_icons/london.png" alt="London" /><br />
                            London
                        </td>
                        <td onclick="locationSelected(2, 'EUR|FR|FR012|PARIS|', 'Paris');">
                            <img src="gfx/city_icons/paris.png" alt="Paris" /><br />
                            Paris
                        </td>
                    </tr>
                    <tr>
                        <td onclick="locationSelected(3, 'OCN|AU|NSW|SYDNEY|', 'Sydney');">
                            <img src="gfx/city_icons/sydney.png" alt="Sydney" /><br />
                            Sydney
                        </td>
                        <td onclick="locationSelected(4, 'ASI|JP|JA041|TOKYO|', 'Tokyo');">
                            <img src="gfx/city_icons/tokyo.png" alt="Tokyo" /><br />
                            Tokyo
                        </td>
                        <td onclick="locationSelected(5, null, 'Custom location');">
                            <img src="gfx/city_icons/custom.png" alt="[Custom location]" /><br />
                            [Custom location]
                    </td>
                </tr>
            </table>
        </div>
    </div>

  2. Create JavaScript that changes the view. Use the HTML Document Object Model (DOM) style object to show or hide the display and the prepareForTransition() and performTransition() method of the widget object to disable updates to the widget UI to prevent screen flickering when the view changes.

    // Shows the placeholder for weather forecast
function showForecast() {
    // Reset the currently selected forecast
    currentlySelectedForecast = CURRENT;

    widget.prepareForTransition("fade");

    // Hide the location list and show the forecast view
    document.getElementById("locationsContainer").style.display = "none";
    document.getElementById("forecastContainer").style.display = "block";

    // Change the right softkey so that it shows the location list
    window.menu.setRightSoftkeyLabel("Back", showLocations);

    // Refresh the view
    setTimeout("widget.performTransition();", 0);
}

// Shows the location table
function showLocations() {
    widget.prepareForTransition("fade");

    // Hide the forecast view and show the city view
    document.getElementById("forecastContainer").style.display = "none";
    document.getElementById("locationsContainer").style.display = "block";

    // Restore the default right softkey
    window.menu.setRightSoftkeyLabel("", null);

    // Refresh the view
    setTimeout("widget.performTransition();", 0);
}

To use softkeys to change views

Enable softkeys and add options to the Options menu to change views, as instructed in Using softkeys.

For an example, see STEW: adding menu options.

To use links to change views

If you specify a link to open a URI on the Internet, the new HTML page is loaded so that it replaces the widget main page and there is no way to return to the widget. Therefore, you should use the openURL() method of the widget object to open the specified link in the Web Browser for S60 in stand-alone mode. The widget remains open but is sent to the background.

<a onclick="javascript:widget.openURL(http://www.forum.nokia.com)">Open Forum Nokia</a>
© Nokia 2009.