org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-F6A64898-72AD-4F15-ADCB-3E623E3E403F.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="STEW: defining the HTML and CSS structure"/><meta name="abstract" content="This section illustrates how to create the basic HTML and CSS structure for a widget."/><meta name="description" content="This section illustrates how to create the basic HTML and CSS structure for a widget."/><meta name="DC.Relation" scheme="URI" content="GUID-C6AC727B-52DC-4C7B-8689-19E98126346D"/><meta name="DC.Relation" scheme="URI" content="GUID-775005BC-2FF8-45A9-BBA6-6CED6B5780A2"/><meta name="DC.Relation" scheme="URI" content="GUID-EB2043BB-E557-429B-BA0A-E350A6D06597"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-F6A64898-72AD-4F15-ADCB-3E623E3E403F"/><meta name="DC.Language" content="en"/><title>STEW: defining the HTML and CSS structure </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-F6A64898-72AD-4F15-ADCB-3E623E3E403F">STEW: defining the HTML and CSS structure</h1><div><p>This section illustrates how to create the basic HTML and CSS structure for a widget.</p>
<div><h3>Creating widget views</h3><p>The <em>content</em> <code>div</code> element in the <code>main.html</code> file is a container for all the widget views. Each view is also a <code>div</code> element that is embedded as a child element of the <code>content</code> element. The views are hidden through the <em>hidden</em> CSS style and shown dynamically by the JavaScript code that runs the widget logic. Each child <code>div</code> (<code>login</code>, <code>update_status</code>, <code>search</code>, and <code>settings</code>) contains view specific elements.</p><pre class="codeblock"><html>
<body>
<div id="container">
<!-- ***** -->
<!-- TITLE -->
<div id="top_bar">
<table cellspacing="0" class="top_table">
<tr>
<td class="top_button">
<a id="button_logout" href="#" class="button hidden"></a>
</td>
<td class="top_title"><div class="stew_title"></div></td>
<td class="top_button">
<a id="button_exit" href="#" class="button red hidden"></a>
</td>
</tr>
</table>
</div> <!-- end of 'top_bar' -->
<div id="content">
<!-- ***** -->
<!-- LOGIN -->
<div id="login" class="hidden">
</div> <!-- end of 'login' -->
<!-- ************* -->
<!-- UPDATE STATUS -->
<div id="update_status" class="hidden">
</div> <!-- end of 'update_status' -->
<!-- ****** -->
<!-- SEARCH -->
<div id="search" class="hidden">
</div> <!-- end of 'friends_status' -->
<!-- ******** -->
<!-- SETTINGS -->
<div id="settings" class="hidden">
</div> <!-- end of 'settings' -->
</div> <!-- end of 'content' -->
<div id="menu_strip" class="buttons_bottom hidden">
<div id="button_container_update" class="button_container"><a id="button_update" class="button_bottom" href="#">Update</a></div>
<div id="button_container_search" class="button_container"><a id="button_search" class="button_bottom" href="#">Search</a></div>
<div id="button_container_settings" class="button_container"><a id="button_settings" class="button_bottom" href="#">Settings</a></div>
</div>
</div> <!-- end of 'container' -->
</body>
</html>
</pre></div>
<div><h3>Creating a title bar</h3><p>The <code>top_bar</code> <code>div</code> element specifies the title bar for the widget. It contains the widget title and two buttons: <span class="uicontrol">Logout</span> and <span class="uicontrol">Exit</span>.</p><p>For more information about how to use JavaScript to implement the functionality of the buttons, see <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></div>
<div><h3>Creating the Login view</h3><p>The <span class="uicontrol">Login</span> view is used as an example of creating views within the HTML file. For more information about how to create the other STEW views, see the <code>main.html</code> example file.</p><div class="figure" id="GUID-97CAAB1E-032C-4ECF-BEEA-66FCF2AC9F73"><img src="GUID-38EF5741-0A6A-4A55-BDE5-4DB3F686D21E_d0e11287_href.jpg"/><p class="figure-title"><strong>Figure: </strong>STEW Login view</p></div><p>The <span class="uicontrol">Login</span> view contains the following elements:</p><ul>
<li><p>The first <code>div</code> specifies the title of the widget.</p></li>
<li><p>The second <code>div</code> is a formatting container for a table that contains all the elements through which the user interacts with the widget: </p><ul>
<li><p>An input element to enter the username.</p></li>
<li><p>An input element to enter the password.</p></li>
<li><p>A check box input element that allows the user to save their credentials on the device. </p></li>
<li><p>A link element that is styled as a button.</p></li>
</ul><p>Using an HTML table as a container for all of the controls allows users to navigate from the top of the view down towards the end of the view. This navigation style works best on mobile device screens and is easiest for users. In addition, this navigation style enables adjusting the view dynamically on screens of different sizes.</p></li>
</ul><pre class="codeblock"><!-- ***** -->
<!-- LOGIN -->
<div id="login" class="hidden">
<div class="top_bar">
<div class="stew_title"></div>
</div>
<div class="login_container">
<table cellspacing="0">
<tr>
<th>Login</th>
</tr>
<tr>
<td>Please login using you Twitter credentials...</td>
</tr>
<tr>
<td class="table_subtitle">Username</td>
</tr>
<tr>
<td class="input_container">
<input id="login_username" type="text">
</td>
</tr>
<tr>
<td class="table_subtitle">Password</td>
</tr>
<tr>
<td class="input_container">
<input id="login_password" type="password">
</td>
</tr>
<tr>
<td>
<input id="login_remember_me" type="checkbox"><label for="login_remember_me">Remember Me</label>
</td>
</tr>
<tr>
<td class="button_container"><a id="login_button" href="#" class="button"></a></td>
</tr>
</table>
</div>
</div> <!-- end of 'login' -->
</pre></div>
<div><h3>Creating a button menu</h3><p>The last <code>div</code> element in the HTML, <code>menu_strip</code>, defines an on screen menu that is displayed on devices with large screens.</p><div class="figure" id="GUID-C92297D6-CD5E-4ED5-A8A7-EB6A2CEEC693-GENIDd0e11632"><img src="GUID-5BB933A3-E1F3-47A5-B85F-A78C988C8779_d0e11349_href.png"/><p class="figure-title"><strong>Figure: </strong>STEW button menu</p></div><p>The menu consists of three <code>div</code> elements. Each <code>div</code> element specifies the background of a button that can have an activated state to indicate the currently active view. In this example, the <em>activated</em> style is added to the element which visually changes the background color of a button. For example, the <span class="uicontrol">Update</span> button is active in the figure above. Within each <code>div</code> element, a <code>link</code> element specifies the button image and text. When the user presses a button, the associated view appears. The functionality to change the style and display a view is implemented by using JavaScript.</p><p>The <code>link</code> elements are used instead of using two background pictures in each <code>div</code> element to indicate the active status to support tactile feedback and localization. Only link elements support tactile feedback. It is easier to replace text than to regenerate the whole image for a language version.</p><p>For more information on how to create the functionality of the menu, see <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></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>