org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-53F53EE5-D92E-49A9-B882-741D389412BE.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="Creating content specific to home screen widgets"/><meta name="abstract" content="Home screen widget content should be a subset of the most important data from the full screen widget."/><meta name="description" content="Home screen widget content should be a subset of the most important data from the full screen widget."/><meta name="DC.Relation" scheme="URI" content="GUID-5B0BE2FA-9FBB-4B8D-A1CE-219634C9C27A"/><meta name="DC.Relation" scheme="URI" content="GUID-1EFD7043-E9B8-4B4E-9EA6-A20B3EECC14A"/><meta name="DC.Relation" scheme="URI" content="GUID-63F4E17E-8895-4054-82AD-762B90610B30"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-53F53EE5-D92E-49A9-B882-741D389412BE"/><meta name="DC.Language" content="en"/><title>Creating content specific to home screen widgets </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-53F53EE5-D92E-49A9-B882-741D389412BE">Creating content specific to home screen widgets</h1><div><p>Home screen widget content should be a subset of the most important data from the full screen widget.</p>
<div class="figure" id="GUID-6142F0D7-CF5D-408E-886C-E186C9824A7D"><img src="GUID-1595C071-A538-4CA8-8D2B-0B8793C5B140_d0e10089_href.png"/><p class="figure-title"><strong>Figure: </strong>Widgets on the home screen</p></div>
<p/>
<div><h3>Creating the content</h3><p>Remember the following recommendations when creating content that is specific to a widget displayed in the home screen:</p><ul>
<li><p>The home screen view is a graphical representation of the WRT widget, and therefore users cannot interact with it.</p><p>Remove all HTML and JavaScript that involves user interaction. For example, interaction with the options list, HTML form elements, data selection (such as JavaScript Service API functions), and refresh buttons.</p><p>Also remove content that includes video, animations, and so on.</p> <p>You may also want to implement timers for operations that are specific to the widget on the home screen, such as network operations, parsing, and refreshing data. </p></li>
<li><p>Data updates may not be consistent due to network access being suspended during a phone call, low battery, and so on.</p><p>Display the time of last update to assist the mobile device user in determining if the data is current.</p></li>
<li><p>The home screen view of the widget uses only a small percentage of the display. </p><p>Limit the amount of data displayed. Placing too much content in the home screen view results in a less than optimal widget.</p></li>
<li><p>The size of the home screen view may vary depending on the state of the device, such as screen orientation (portrait/landscape), the number of widgets on the home screen, and so on. </p><p>Define content so that it scales according to the environment. For example, use relative values such as a percentage of the window width and height for defining styles and relative values such as <code>font-size: large</code> for defining font sizes. </p></li>
</ul></div>
<div><h3>Initializing the views</h3><p>Implement code that determines whether to display the widget in either home screen view or full screen view. For more information, see <a href="GUID-5B0BE2FA-9FBB-4B8D-A1CE-219634C9C27A.html#GUID-5B0BE2FA-9FBB-4B8D-A1CE-219634C9C27A">Determining whether to display home screen or full screen</a>. You can initialize the views any way you choose, but we recommend the following approach: </p><ul>
<li><p>Create separate divisions (<code><div></code>) for the full screen and home screen content in the HTML file containing your content. </p> </li>
<li><p>Create separate JavaScript files for the full screen and home screen views.</p></li>
</ul><p>For an example, see <a href="GUID-1812A0D5-74CC-4A94-AF91-970465F6A738.html#GUID-1812A0D5-74CC-4A94-AF91-970465F6A738">Enabling STEW for the home screen</a>.</p></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>