Presenting content on screens

You can retrieve widget content from Web sites. On devices that support the Web Runtime (WRT 1.1) environment, you can also retrieve content from the device, such as messages or calendar entries. To keep response times short and avoid cluttering the screen, display only content that is relevant to users. To make the content dynamic rather than static, design ways for refreshing it when necessary.

Making the most important content obvious

Display the most relevant information first and reserve enough space around it on the screen. You can hide options in a menu or on other views.

Use colors and symbols to highlight and group related items. For design principles and examples, see Ensure visual balance and clear focus indication.

Refreshing content

If you fetch the content from the device, use timers to update it frequently. For more information on using timers effectively, see Saving battery time. If you fetch the content from a Web site, allow users to determine how often to refresh content. You can provide them with a refresh interval setting or refresh option.

You can use the prepareForTransition and performTransition methods to refresh the view. For an example, see the AccuWidget Example on Forum Nokia.

If refreshing data fails, show the latest update. Use graphics to indicate that refreshing the information succeeded or failed.

To add a refresh option

  1. Use the MenuItem object constructor to create the Refresh menu item.

  2. Use the append() method of the JavaScript menu object to add the Refresh item to the Options menu.

  3. Assign functions to the menu items using the onSelect property of the MenuItem object.

For more information on how to add an item to the options menu, see Using softkeys.

For example code, see the example of creating a menu in the Web Runtime API reference.

To add a refresh interval setting

  1. Use the instructions above to add a Settings item to the Options menu.

  2. Create a Settings page.

  3. Create a Refresh setting.

  4. Implement the function to refresh the data in your code.