org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-EB2043BB-E557-429B-BA0A-E350A6D06597.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="Designing STEW user interface"/><meta name="abstract" content="This example describes how to design a usable user interface for a widget."/><meta name="description" content="This example describes how to design a usable user interface for a widget."/><meta name="DC.Relation" scheme="URI" content="GUID-1FD5C597-43B8-402E-92B8-FE0787DB4F3B"/><meta name="DC.Relation" scheme="URI" content="GUID-78D2B232-BC16-4633-8B66-DCD0C496B354"/><meta name="DC.Relation" scheme="URI" content="GUID-775005BC-2FF8-45A9-BBA6-6CED6B5780A2"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-EB2043BB-E557-429B-BA0A-E350A6D06597"/><meta name="DC.Language" content="en"/><title>Designing STEW user interface </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-EB2043BB-E557-429B-BA0A-E350A6D06597">Designing STEW user interface</h1><div><p>This example describes how to design a usable user interface for a widget.</p>
<div class="figure" id="GUID-8E04D5D6-0812-40DF-8354-D9D3572836F5"><img src="GUID-38EF5741-0A6A-4A55-BDE5-4DB3F686D21E_d0e11135_href.jpg"/></div>
<p>Designing a usable widget user interface comprises the following tasks:</p>
<ul>
<li><p><a href="GUID-F6A64898-72AD-4F15-ADCB-3E623E3E403F.html#GUID-F6A64898-72AD-4F15-ADCB-3E623E3E403F">STEW: defining the HTML and CSS structure</a></p></li>
<li><p><a href="GUID-C6AC727B-52DC-4C7B-8689-19E98126346D.html#GUID-C6AC727B-52DC-4C7B-8689-19E98126346D">STEW: adding JavaScript to drive the widget logic</a></p></li>
<li><p><a href="GUID-5906D140-663D-4EE2-B0C1-4FECA5759384.html#GUID-5906D140-663D-4EE2-B0C1-4FECA5759384">STEW: managing user interaction</a></p></li>
<li><p><a href="GUID-0FCBC574-2328-4986-99D3-7DC4BDE9C3A4.html#GUID-0FCBC574-2328-4986-99D3-7DC4BDE9C3A4">STEW: loading the widget at startup</a></p></li>
<li><p><a href="GUID-9F3218D9-2BEA-417C-8017-E05AC749BF84.html#GUID-9F3218D9-2BEA-417C-8017-E05AC749BF84">STEW: supporting different screen sizes</a></p></li>
<li><p><a href="GUID-B12990B6-979C-4BBA-B030-FB7CEC04CB3A.html#GUID-B12990B6-979C-4BBA-B030-FB7CEC04CB3A">STEW: supporting screen rotation</a></p></li>
<li><p><a href="GUID-EED2A703-672F-4723-87AE-26EA53C7E9E6.html#GUID-EED2A703-672F-4723-87AE-26EA53C7E9E6">STEW: adding menu options</a></p></li>
</ul>
<div><h3>To create STEW</h3><ol>
<li id="GUID-8C709B79-D373-44E8-B21E-02802101A593"><a name="GUID-8C709B79-D373-44E8-B21E-02802101A593"><!----></a><p>Download the <a href="stew.wgz">STEW home screen widget source files</a> to your computer.</p></li>
<li id="GUID-44AC18DD-E6F2-470D-92F7-CB10BC31E897"><a name="GUID-44AC18DD-E6F2-470D-92F7-CB10BC31E897"><!----></a><p>Follow the instructions to create STEW.</p></li>
</ol></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>