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.

If refreshing data fails, show the latest update. Display error messages or indicate graphically that refreshing the information failed.

To add a refresh option

Use the MenuItem object constructor to create the Refresh menu item.
Use the append() method of the JavaScript menu object to add the Refresh item to the Options menu.
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

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

Create a Refresh setting.

For example, the following code in the main HTML file creates a selection list with different options to refresh the screen.

<tr>
+	<td class="table_subtitle">MiniView Refresh</td>
+</tr>
+<tr>
+	<td class="select_container">
+		<select id="drop_refresh">
+			<option value="30000">30 seconds</option>
+			<option value="100000">1 minute</option>
+			<option value="200000">2 minutes</option>
+			<option value="500000">5 minutes</option>
+		</select>
+	</td>
+</tr>

Figure: Settings page with refresh options

Implement the functions to refresh the data in your code.

MiniView.prototype.onActivated = function() {
+	// Get the refresh rate.
+	var refresh = parseInt( widget.preferenceForKey( SettingsScreen.KEY_REFRESH ) );
+	if ( isNaN( refresh ) ) {
+		refresh = 30000; // Default to 30 seconds.
+	}
+
+	// Start the timer which refreshes the miniview.
+	var self = this;
+	this.timerId = setInterval( function(){
+		self.refresh();
+	}, refresh );
+	
+	// Timer will trigger after the refresh period so refresh manually now.
+	this.refresh();
+}
+
+MiniView.prototype.refresh = function() {
+	var self = this;
+	twitterService.onSuccess = function( response ) { self.onTwitterResponse( response ) }
+	twitterService.onError = function( status ) { self.onTwitterError( status ) }
+	
+	twitterService.getPublicTweets( 3 );
+}MiniView.prototype.onDeactivated = function() {
+	// Stop timer.
+	clearInterval( this.timerId );	
+}
+
+MiniView.prototype.onTwitterResponse = function( response ) {
+	// Fill in dummy data here.
+	var tweetsTable = document.getElementById( "mini_view_table" );
+	var html = Helper.createTableHeader( "Friends and my tweets" );
+
+	// Fill in the table.
+	for ( var i = 0; i < response.length; ++i ) {
+		var tweet = response[i];
+		
+		html += Helper.createStatusRow( tweet.user.profile_image_url,
+			tweet.user.screen_name,
+			tweet.text, "", "" );
+	}
+	
+	tweetsTable.innerHTML = html;
+}
+
+MiniView.prototype.onTwitterError = function( status ) {
+	var tweetsTable = document.getElementById( "mini_view_table" );
+	tweetsTable.innerHTML = "Error...";
+}

For a full example, see the STEW example.