org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-EC9DB569-733E-47A8-AD2D-B878B38660B9.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Presenting content on screens"/><meta name="abstract" content="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."/><meta name="description" content="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."/><meta name="DC.Relation" scheme="URI" content="GUID-ED04600B-B079-4BC9-84B1-507604C09A4C"/><meta name="DC.Relation" scheme="URI" content="GUID-D82B43D9-37B4-482A-87C0-FFCF534C712C"/><meta name="DC.Relation" scheme="URI" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Relation" scheme="URI" content="GUID-5949FE0C-207D-4B15-8C03-96AE48986973"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-EC9DB569-733E-47A8-AD2D-B878B38660B9"/><meta name="DC.Language" content="en"/><title>Presenting content on screens </title><script type="text/javascript">
function initPage() {}
</script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-EC9DB569-733E-47A8-AD2D-B878B38660B9">Presenting content on screens</h1><div><p>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. </p>
<div><h3>Making the most important content obvious</h3><p>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.</p><p>Use colors and symbols to highlight and group related items. For design principles and examples, see <a href="http://library.forum.nokia.com/topic/Design_and_User_Experience_Library/GUID-B9469F84-73CC-4356-96DB-5180546EE27F.html" target="_blank">Ensure visual balance and clear focus indication</a>.</p></div>
<div><h3>Refreshing content</h3><p>If you fetch the content from the device, use timers to update it frequently. For more information on using timers effectively, see <a href="GUID-159FCC18-2C9D-49F0-BAC1-DFEAADCF1D89.html#GUID-159FCC18-2C9D-49F0-BAC1-DFEAADCF1D89">Saving battery time</a>. 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.</p><p>If refreshing data fails, show the latest update. Display error messages or indicate graphically that refreshing the information failed.</p></div>
<div><h3>To add a refresh option</h3><ol>
<li id="GUID-99F2201E-9CA0-4601-8DF7-9F456832A12B"><a name="GUID-99F2201E-9CA0-4601-8DF7-9F456832A12B"><!----></a> <p>Use the <a href="GUID-960AD4A0-AE70-4608-99E7-B663FB99A68D.html#GUID-960AD4A0-AE70-4608-99E7-B663FB99A68D"><code>MenuItem</code> object constructor</a> to create the <span class="uicontrol">Refresh</span> menu item.</p></li>
<li id="GUID-D4B7696D-1CB1-4D32-823D-62E7634E49FD"><a name="GUID-D4B7696D-1CB1-4D32-823D-62E7634E49FD"><!----></a><p>Use the <code><a href="GUID-704CF29C-1FDC-4192-9338-C8B9B926111C.html#GUID-704CF29C-1FDC-4192-9338-C8B9B926111C">append()</a></code> method of the JavaScript <code>menu</code> object to add the <span class="uicontrol">Refresh</span> item to the <span class="uicontrol">Options</span> menu.</p></li>
<li id="GUID-56FC46CB-C56A-4108-B174-6F0BF9947758"><a name="GUID-56FC46CB-C56A-4108-B174-6F0BF9947758"><!----></a><p>Assign functions to the menu items using the <a href="GUID-A022ED1B-E618-4C44-A437-78393900599C.html#GUID-A022ED1B-E618-4C44-A437-78393900599C"><code>onSelect</code></a> property of the <code>MenuItem</code> object.</p></li>
</ol><p>For more information on how to add an item to the options menu, see <a href="GUID-94946735-D23B-49C6-BB65-8BE31737AE42.html#GUID-94946735-D23B-49C6-BB65-8BE31737AE42">Using softkeys</a>.</p><p>For example code, see the <a href="GUID-A022ED1B-E618-4C44-A437-78393900599C.html#GUID-EAF0A325-47DD-4AA7-81FA-D26EE10DECB6">example of creating a menu</a> in the Web Runtime API reference.</p></div>
<div><h3>To add a refresh interval setting</h3><ol>
<li id="GUID-0D6105FD-1AA6-4812-B23E-94D423AD14A3"><a name="GUID-0D6105FD-1AA6-4812-B23E-94D423AD14A3"><!----></a><p>Use the instructions above to add a Settings item to the <span class="uicontrol">Options</span> menu.</p></li>
<li id="GUID-80B9D293-124E-4B6C-A6E2-64834515D14C"><a name="GUID-80B9D293-124E-4B6C-A6E2-64834515D14C"><!----></a><p>Create a <span class="uicontrol">Settings</span> page.</p></li>
<li id="GUID-D38BD43D-DD45-4B06-B353-26DB7709203D"><a name="GUID-D38BD43D-DD45-4B06-B353-26DB7709203D"><!----></a><p>Create a <span class="uicontrol">Refresh</span> setting.</p><p>For example, the following code in the main HTML file creates a selection list with different options to refresh the screen.</p><pre class="codeblock"><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></pre><div class="figure" id="GUID-B29A3105-A448-439F-92F9-0AA47994ADCE"><img src="GUID-C55C28BD-5CB8-40C0-9F05-6CED51927956_d0e2283_href.png"/><p class="figure-title"><strong>Figure: </strong>Settings page with refresh options</p></div></li>
<li id="GUID-29EFD100-4E6E-4B10-AD2A-493AD6CA7ED9"><a name="GUID-29EFD100-4E6E-4B10-AD2A-493AD6CA7ED9"><!----></a><p>Implement the functions to refresh the data in your code.</p><pre class="codeblock">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...";
}</pre></li>
</ol><p>For a full example, see the <a href="GUID-775005BC-2FF8-45A9-BBA6-6CED6B5780A2.html#GUID-775005BC-2FF8-45A9-BBA6-6CED6B5780A2">STEW example</a>.</p></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>