org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-775005BC-2FF8-45A9-BBA6-6CED6B5780A2.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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="Example widgets"/><meta name="DC.Relation" scheme="URI" content="GUID-4BE0F634-6995-4738-A650-5D3CCBC26647"/><meta name="DC.Relation" scheme="URI" content="GUID-1EFD7043-E9B8-4B4E-9EA6-A20B3EECC14A"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-775005BC-2FF8-45A9-BBA6-6CED6B5780A2"/><title>Example 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-775005BC-2FF8-45A9-BBA6-6CED6B5780A2">Example widgets</h1><div>
<p><span>This section provides you with example widgets that you can download into your PC and then into a mobile device or emulator. To download a widget, click the widget link below. When you click the widget link, you have the option of either viewing the contents of the widget package (<span class="uicontrol">Open</span>) or downloading the package (<span class="uicontrol">Save</span>).</span></p>
<p/>
<div><h3>STEW</h3><p>The Simple Texting Example Widget (STEW) allows users to use a free social networking and micro-blogging service called Twitter on mobile devices. Users can send and read status updates, which are text-based posts of up to 140 characters in length. Status updates are displayed on the users' profile pages and delivered to other users who subscribe to them. Users can receive status updates through the Twitter Web site, SMS, RSS, e-mail, or an application such as Twitterrific, Facebook, or this example widget.</p><div class="figure" id="GUID-356713E4-B1E8-4B53-8379-D75353E5310B"><img src="GUID-D52E6081-502D-43F8-AED3-66614F5BC741_d0e10809_href.png"/><p class="figure-title"><strong>Figure: </strong>STEW main view</p></div><p>The <a href="GUID-78D2B232-BC16-4633-8B66-DCD0C496B354.html#GUID-78D2B232-BC16-4633-8B66-DCD0C496B354">STEW</a> examples illustrate how to:</p><ul>
<li><p><a href="GUID-EB2043BB-E557-429B-BA0A-E350A6D06597.html#GUID-EB2043BB-E557-429B-BA0A-E350A6D06597">Design a usable widget UI</a>.</p></li>
<li><p><a href="GUID-1FD5C597-43B8-402E-92B8-FE0787DB4F3B.html#GUID-1FD5C597-43B8-402E-92B8-FE0787DB4F3B">Retrieve data for the widget</a>.</p></li>
<li><p><a href="GUID-8DC78944-809B-462B-BEC2-0114696F8B14.html#GUID-8DC78944-809B-462B-BEC2-0114696F8B14">Localize the widget</a>.</p></li>
<li><p><a href="GUID-1812A0D5-74CC-4A94-AF91-970465F6A738.html#GUID-1812A0D5-74CC-4A94-AF91-970465F6A738">Enable the widget for the home screen</a>.</p></li>
</ul></div>
<div><h3>AccuWidget</h3><p>AccuWidget is S60 Web Runtime (WRT) widget that allows users to check the current weather conditions and the forecast for the current and the following day. Special attention has been paid to the scalability in various screen resolutions and support for both keypad and touch UI.</p><div class="figure" id="GUID-36E88914-7B73-48C9-8C30-CADE44944152"><img src="GUID-62B95ABA-3E85-4F9B-8103-82348366356E_d0e10853_href.png"/><p class="figure-title"><strong>Figure: </strong>AccuWidget location view</p></div><p>The AccuWidget example demonstrates the following features:</p><ul>
<li><p>Using the XMLHttpRequest API to transfer RSS (XML) data from a Web server. In this example, the AccuWeather service, www.accuweather.com. </p></li>
<li><p>Enabling navigation between different views.</p></li>
<li><p>Showing a transition effect when switching between views.</p></li>
<li><p>Scaling the screen size dynamically to fit different resolutions and orientations by modifying the CSS styles on the fly.</p></li>
<li><p>Changing the navigation mode between tab and cursor mode. </p></li>
<li><p>Capturing key events and creating a custom effect (highlighting) based on them.</p></li>
<li><p>Handling errors, such as no Internet connection and invalid input.</p></li>
<li><p>Hiding HTML elements that are irrelevant in the current view. For example, the right navigation arrow is hidden when there are no more forecasts to show.</p></li>
<li><p>Using a custom menu (from the WRT API) that is changed dynamically. </p></li>
</ul><p>For the source file package, see the <a href="http://www.forum.nokia.com/info/sw.nokia.com/id/1c27d9d7-8946-4e26-947d-2b140c454876/Web_Run-Time_AccuWidget_Example.html" target="_blank">AccuWidget Example</a> on Forum Nokia.</p></div>
<div><h3>Keypad widget</h3><p>The Keypad widget demonstrates capturing <a href="GUID-5277B7B8-722A-48ED-9333-4DD2D6A085C0.html#GUID-5277B7B8-722A-48ED-9333-4DD2D6A085C0">key events</a>. By pressing different keys of the mobile keypad, you can see what key and character event codes are used in the Web Runtime environment.</p><ul>
<li><p><a href="KeypadWgt.wgz">Keypad widget</a></p></li>
</ul></div>
<div><h3>Viewport widget</h3><p>The Viewport widget demonstrates how to combine the JavaScript on resize DOM event handler with the height and width properties from the window and screen objects to calculate the effective area or viewport available for a widget.</p><ul>
<li><p><a href="viewport.wgz">Viewport widget</a></p></li>
</ul></div>
<div><h3>Service widgets</h3><p>The Service widgets demonstrate the use of <a href="GUID-46EABDC1-37CB-412A-ACAD-1A1A9466BB68.html#GUID-46EABDC1-37CB-412A-ACAD-1A1A9466BB68">S60 Platform Services</a> through the <a href="GUID-65AAF569-D347-462B-B59A-9D7CA184AB9C.html#GUID-65AAF569-D347-462B-B59A-9D7CA184AB9C">JavaScript Service APIs</a> provided by WRT 1.1.</p><ul>
<li><p><a href="AppManagerSampleWgt.wgz">AppManager Service widget</a></p></li>
<li><p><a href="CalendarSampleWgt.wgz">Calendar Service widget</a></p></li>
<li><p><a href="ContactSampleWgt.wgz">Contacts Service widget</a></p></li>
<li><p><a href="LandmarksSampleWgt.wgz">Landmarks Service widget</a></p></li>
<li><p><a href="LocationSampleWgt.wgz">Location Service widget</a></p></li>
<li><p><a href="LoggingSampleWgt.wgz">Logging Service widget</a></p></li>
<li><p><a href="MediaMgmtSampleWgt.wgz">Media Management Service widget</a></p></li>
<li><p><a href="MessagingSampleWgt.wgz">Messaging Service widget</a></p></li>
<li><p><a href="Sensors-test-Automation.wgz">Sensor Service widget</a></p></li>
<li><p><a href="SysInfoSampleWgt.wgz">SystemInfo Service widget</a></p></li>
</ul></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>