Heads merge
authorEugene Ostroukhov <eugeneo@symbian.org>
Thu, 04 Mar 2010 17:06:37 -0800
changeset 222 46f364ef3f5d
parent 221 ab8569330011 (current diff)
parent 220 41890dfa56f5 (diff)
child 223 e6391b76ba4c
Heads merge
org.symbian.tools.wrttools.previewer/preview/images/wrt-help-con.gif
org.symbian.wrttools.doc.WRTKit/src/org/symbian/wrtools/lib/wrtkit/Activator.java
--- a/org.symbian.tools.wrttools.previewer/preview/css/style.css	Thu Mar 04 17:06:00 2010 -0800
+++ b/org.symbian.tools.wrttools.previewer/preview/css/style.css	Thu Mar 04 17:06:37 2010 -0800
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /**
  * Copyright (c) 2009-2010 Symbian Foundation and/or its subsidiary(-ies).
  * All rights reserved.
@@ -10,9 +11,10 @@
  * Symbian Foundation - initial contribution.
  * Contributors:
  */
-@charset "utf-8";
+
 body {
-	background-image: url(../images/Gradient0Background.png);
+/*  background-image: url(../images/Gradient0Background.png); */
+	background-image: url(../images/Gradient0Background_2.png);
 	background-repeat: repeat-x;
 	margin: 0px;
 	font-family: "Nokia Sans", "Nokia Sans SemiBold", "Arial Narrow";
Binary file org.symbian.tools.wrttools.previewer/preview/images/Gradient0Background_2.png has changed
Binary file org.symbian.tools.wrttools.previewer/preview/images/settings_hover.png has changed
Binary file org.symbian.tools.wrttools.previewer/preview/images/settings_icon.png has changed
Binary file org.symbian.tools.wrttools.previewer/preview/images/wrt-help-con.gif has changed
Binary file org.symbian.tools.wrttools.previewer/preview/images/wrt-help-icon.gif has changed
--- a/org.symbian.tools.wrttools.previewer/preview/script/jquery-ui/css/ui-darkness/ui.all.css	Thu Mar 04 17:06:00 2010 -0800
+++ b/org.symbian.tools.wrttools.previewer/preview/script/jquery-ui/css/ui-darkness/ui.all.css	Thu Mar 04 17:06:37 2010 -0800
@@ -205,7 +205,7 @@
 	/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
 	font-family: Segoe UI, Arial, sans-serif;
 	font-size: 0.9em;
-	background: #000000 url(images/000000_40x100_textures_05_inset_soft_25.png) 0 bottom repeat-x;
+	background: #000000 url(images/000000_40x100_textures_05_inset_soft_25.png) 0 bottom repeat-x;	
 	color: #ffffff;
 	border: 4px solid #666666;
 	position: relative;
--- a/org.symbian.wrttools.doc.WRTKit/.classpath	Thu Mar 04 17:06:00 2010 -0800
+++ b/org.symbian.wrttools.doc.WRTKit/.classpath	Thu Mar 04 17:06:37 2010 -0800
@@ -3,6 +3,6 @@
 	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.6"/>
 	<classpathentry kind="con" path="org.eclipse.pde.core.requiredPlugins"/>
 	<classpathentry kind="src" path="src"/>
-	<classpathentry kind="lib" path="lib/s60.nokia.com.WRTKit_1.0.1.jar"/>
+	<classpathentry exported="true" kind="lib" path="lib/s60.nokia.com.WRTKit_1.0.1.jar" sourcepath="lib/s60.nokia.com.WRTKit_1.0.1.jar"/>
 	<classpathentry kind="output" path="bin"/>
 </classpath>
--- a/org.symbian.wrttools.doc.WRTKit/META-INF/MANIFEST.MF	Thu Mar 04 17:06:00 2010 -0800
+++ b/org.symbian.wrttools.doc.WRTKit/META-INF/MANIFEST.MF	Thu Mar 04 17:06:37 2010 -0800
@@ -1,11 +1,11 @@
-Manifest-Version: 1.0
-Bundle-ManifestVersion: 2
-Bundle-Name: WRTKit
-Bundle-SymbolicName: org.symbian.tools.wrttools.doc.WRTKit
-Bundle-Version: 1.0.0.qualifier
-Bundle-Activator: org.symbian.wrttools.lib.wrtkit.Activator
-Require-Bundle: org.eclipse.ui,
- org.eclipse.core.runtime
-Bundle-ActivationPolicy: lazy
-Bundle-RequiredExecutionEnvironment: JavaSE-1.6
-Bundle-ClassPath: .
+Manifest-Version: 1.0 
+Bundle-ManifestVersion: 2
+Bundle-Name: WRTKit
+Bundle-SymbolicName: org.symbian.tools.wrttools.doc.WRTKit;singleton:=true
+Bundle-Version: 1.0.0.qualifier
+Bundle-Activator: org.symbian.tools.wrttools.doc.WRTKit.Activator
+Require-Bundle: org.eclipse.ui,
+ org.eclipse.core.runtime
+Bundle-ActivationPolicy: lazy
+Bundle-RequiredExecutionEnvironment: JavaSE-1.6 
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/WRT_Doc.xml	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?NLS TYPE="org.eclipse.help.toc"?>
+<toc label="WRTKit Documentation" topic="html/index.html">
+	<topic label="WRTKit Developer's Guide" href="html/WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.html">
+		<topic label="Overview of the WRTKit" href="html/WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html">
+			<topic label="Introduction to the WRTKit" href="html/WRTKit_Introduction_to_the_WRTKit-GUID-dcf05457-f800-4f05-b284-a4e24ab8be79.html"></topic>
+			<topic label="Terminology" href="html/WRTKit_Terminology-GUID-ebd8d7c4-03f6-498d-becc-eb8d4081ed8b.html"></topic>
+			<topic label="WRTKit design considerations" href="html/WRTKit_Design_considerations-GUID-cd4c583d-e6d8-4aab-b2d8-dba09dd7a009.html"></topic>
+		</topic>
+	</topic>
+	<topic label="Developing widgets using the WRTKit" href="html/WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">
+		<topic label="High level view of the WRTKit" href="html/WRTKit_High_level_view_of_the_WRTKit-GUID-a3abe57e-9a71-4f94-923a-b84ccd1b0905.html"></topic>
+		<topic label="Control states" href="html/WRTKit_Control_states-GUID-f98575ac-f913-466d-a790-0ff0207463a3.html"></topic>
+		<topic label="Views and the UIManager" href="html/WRTKit_Views_and_the_UIManager-GUID-f95b4ad6-0e86-4023-8371-3ff2a45e95fe.html"></topic>
+		<topic label="Notification popups" href="html/WRTKit_Notification_popups-GUID-8696212c-4114-412a-9990-ef9755fc1942.html"></topic>
+		<topic label="Displaying content" href="html/WRTKit_Displaying_content-GUID-57647864-5231-47e5-8ad5-f2adb1848760.html"></topic>
+		<topic label="Actions" href="html/WRTKit_Actions-GUID-38771443-166b-4112-9569-c07229cd7449.html"></topic>
+		<topic label="Selections" href="html/WRTKit_Selections-GUID-23145d13-f2e7-48be-b24b-bc49754b2919.html"></topic>
+		<topic label="Text entry" href="html/WRTKit_Text_entry-GUID-b52e3343-5a39-4a83-ae97-461a53761207.html"></topic>
+		<topic label="Separator" href="html/WRTKit_Separator-GUID-ec82d9ea-6b88-48c6-92c2-09a4dd56b31a.html"></topic>
+	</topic>
+	<topic label="Common WRTKit tasks" href="html/WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">
+		<topic label="Creating a widget that uses the WRTKit" href="html/WRTKit_Creating_a_widget_that_uses_the_WRTKit-GUID-8d71ee32-1826-4141-8fb6-76420a5472a4.html"></topic>
+		<topic label="Using buttons" href="html/WRTKit_Using_buttons-GUID-8b14cec9-92cc-4bde-83c2-ad0a30a84942.html"></topic>
+		<topic label="Using selection controls" href="html/WRTKit_Using_selection_controls-GUID-5e36d276-cce8-4bc9-bcba-78e721adb8c6.html"></topic>
+		<topic label="Using text entry controls" href="html/WRTKit_Using_text_entry_controls-GUID-76aeb0e3-698d-41de-a34b-8fea6d8e00d2.html"></topic>
+		<topic label="Showing content in a view" href="html/WRTKit_Showing_content_in_a_view-GUID-7020d9ea-747d-42f3-b47c-16ad1f45db82.html"></topic>
+		<topic label="Using notification popups" href="html/WRTKit_Using_notification_popups-GUID-39c7a69a-9334-45d1-92f6-8c239831a0a2.html"></topic>
+		<topic label="Handling events" href="html/WRTKit_Handling_events-GUID-a1a86c8a-6e66-4dc8-8967-b5c9c7bc6563.html"></topic>
+		<topic label="Customizing the WRTKit look" href="html/WRTKit_Customizing_the_WRTKit_look-GUID-43369c51-23cf-41ac-a2f4-6320dc6eda9a.html"></topic>
+	</topic>
+	
+
+	<topic label="WRTKit Tutorials" href="html/WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html">
+		<topic label="Hello World" href="html/WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.html">
+			<topic label="Creating the Hello World widget" href="html/WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.html"></topic>
+		</topic>
+		
+		<topic label="RSS Reader" href="html/WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html">
+			<topic label="First steps" href="html/WRTKit_RSS_Reader_first_steps-GUID-db42b227-1647-4020-bdb9-dacb26771779.html"></topic>
+			<topic label="RSS Reader user interface" href="html/WRTKit_RSS_Reader_user_interface-GUID-1083a0c4-a953-4b6e-a4d0-45a031e51c35.html"></topic>
+			<topic label="Feed updates" href="html/WRTKit_Feed_updates-GUID-25cd0e54-0516-4469-965e-c5781cf44dc9.html"></topic>
+		</topic>
+		
+		<topic label="Travel Companion" href="html/WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html">
+			<topic label="Planning the widget" href="html/WRTKit_Travel_Companion_planning_the_widget-GUID-891068c7-c802-4da7-8674-8e8292aef7eb.html"></topic>
+			<topic label="Travel Companion user interface" href="html/WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.html"></topic>
+			<topic label="Functionality" href="html/WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.html"></topic>
+		</topic>
+	</topic>
+
+	<topic label="WRTKit API Reference" href="html/WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">
+		<topic label="WRTKit ActionControl Class" href="html/WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.html"></topic>
+		<topic label="WRTKit ContentPanel Class" href="html/WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.html"></topic>
+		<topic label="WRTKit Control Class" href="html/WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html"></topic>
+		<topic label="WRTKit FormButton Class" href="html/WRTKit_FormButton_Class-GUID-9f99492d-b232-4a78-baed-bd284839b367.html"></topic>
+		<topic label="WRTKit Label Class" href="html/WRTKit_Label_Class-GUID-64730e7f-835f-443a-9322-6753fa72fd09.html"></topic>
+		<topic label="WRTKit ListView Class" href="html/WRTKit_ListView_Class-GUID-a7f24a67-d46c-4156-8276-a97b945235d6.html"></topic>
+		<topic label="WRTKit NavigationButton Class" href="html/WRTKit_NavigationButton_Class-GUID-3c5aaba9-899d-463a-8337-b6f7c09e190b.html"></topic>
+		<topic label="WRTKit SelectionControl Class" href="html/WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.html"></topic>
+		<topic label="WRTKit SelectionList Class" href="html/WRTKit_SelectionList_Class-GUID-c3be7a8a-9028-4cec-a0c0-d355d0621b37.html"></topic>
+		<topic label="WRTKit SelectionMenu Class" href="html/WRTKit_SelectionMenu_Class-GUID-3ae54fdf-e938-400b-969d-e41575331aa0.html"></topic>
+		<topic label="WRTKit Separator Class" href="html/WRTKit_Separator_Class-GUID-b9a1bbb9-5858-4996-9c25-2ede2507f3a3.html"></topic>
+		<topic label="WRTKit TextArea Class" href="html/WRTKit_TextArea_Class-GUID-137b9641-f3a5-4fc0-bf30-017533e2ad69.html"></topic>
+		<topic label="WRTKit TextEntryControl Class" href="html/WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.html"></topic>
+		<topic label="WRTKit TextField Class" href="html/WRTKit_TextField_Class-GUID-799b7dea-1e4d-4147-bc27-acc4b91d8bf9.html"></topic>
+		<topic label="WRTKit UIElement Class" href="html/WRTKit_UIElement_Class-GUID-37b82f75-720c-4f54-9769-cda18453ffa3.html"></topic>
+		<topic label="WRTKit UIManager Class" href="html/WRTKit_UIManager_Class-GUID-937146c8-3889-40f5-b9f7-0f774ac9f5fe.html"></topic>
+		<topic label="WRTKit View Class" href="html/WRTKit_View_Class-GUID-e673fe1a-cf46-46f5-b243-ce7422c69cc5.html"></topic>
+	</topic>
+
+</toc>
--- a/org.symbian.wrttools.doc.WRTKit/build.properties	Thu Mar 04 17:06:00 2010 -0800
+++ b/org.symbian.wrttools.doc.WRTKit/build.properties	Thu Mar 04 17:06:37 2010 -0800
@@ -1,4 +1,5 @@
 source.. = src/
 output.. = bin/
 bin.includes = META-INF/,\
-               .
+               .,\
+               plugin.xml
Binary file org.symbian.wrttools.doc.WRTKit/html/FormButton_Controls_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/FormButton_Controls_Screenshot_2.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/Hello_World_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/Label_Control_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/NavigationButton_Controls_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/RSS_Reader_Main_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/RSS_Reader_Main_Screenshot_2.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/RSS_Reader_Main_Screenshot_3.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/RSS_Reader_Settings_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/SelectionList_Controls_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/SelectionMenu_Control_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/TextArea_Control_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/TextField_Control_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/Text_Entry_Controls_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/Travel_Companion_Converter_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/Travel_Companion_Info_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/Travel_Companion_Main_Screenshot_1.png has changed
Binary file org.symbian.wrttools.doc.WRTKit/html/Travel_Companion_Settings_Screenshot_1.png has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit API Reference" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_FormButton_Class-GUID-9f99492d-b232-4a78-baed-bd284839b367.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Label_Class-GUID-64730e7f-835f-443a-9322-6753fa72fd09.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_ListView_Class-GUID-a7f24a67-d46c-4156-8276-a97b945235d6.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_NavigationButton_Class-GUID-3c5aaba9-899d-463a-8337-b6f7c09e190b.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_SelectionList_Class-GUID-c3be7a8a-9028-4cec-a0c0-d355d0621b37.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_SelectionMenu_Class-GUID-3ae54fdf-e938-400b-969d-e41575331aa0.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Separator_Class-GUID-b9a1bbb9-5858-4996-9c25-2ede2507f3a3.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_TextArea_Class-GUID-137b9641-f3a5-4fc0-bf30-017533e2ad69.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_TextField_Class-GUID-799b7dea-1e4d-4147-bc27-acc4b91d8bf9.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_UIElement_Class-GUID-37b82f75-720c-4f54-9769-cda18453ffa3.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_UIManager_Class-GUID-937146c8-3889-40f5-b9f7-0f774ac9f5fe.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_View_Class-GUID-e673fe1a-cf46-46f5-b243-ce7422c69cc5.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-00E47C27-0A1A-443F-AE85-CF3381635170" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit API Reference</title>
+</head>
+<body id="GUID-00E47C27-0A1A-443F-AE85-CF3381635170"><a name="GUID-00E47C27-0A1A-443F-AE85-CF3381635170"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit API Reference</h1>
+
+    <div>
+
+        <p>
+
+            WRTKit is a JavaScript library for widgets running in the S60 Web Runtime (WRT)
+            that simplifies creation of user interfaces. User interfaces created with the
+            WRTKit automatically scales to any screen resolution, handle screen rotation
+            and resizes, work in both the tab and pointer navigation modes, and more.
+            Typically user interfaces that use the WRTKit can be created with just a few lines
+            of JavaScript code, yet still achieve a professional and consistent look and feel.
+        </p>
+
+        <p>
+
+            The look of a user interface created by the WRTKit is defined entirely using
+            Cascading Style Sheets (CSS) and image files. This allows easy customization of
+            a widget's look without the need to touch any code.
+        </p>
+
+    </div>
+
+<div>
+<ul class="ullinks">
+<li class="ulchildlink"><strong><a href="WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.html">WRTKit ActionControl Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.html">WRTKit ContentPanel Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html">WRTKit Control Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_FormButton_Class-GUID-9f99492d-b232-4a78-baed-bd284839b367.html">WRTKit FormButton Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Label_Class-GUID-64730e7f-835f-443a-9322-6753fa72fd09.html">WRTKit Label Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_ListView_Class-GUID-a7f24a67-d46c-4156-8276-a97b945235d6.html">WRTKit ListView Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_NavigationButton_Class-GUID-3c5aaba9-899d-463a-8337-b6f7c09e190b.html">WRTKit NavigationButton Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.html">WRTKit SelectionControl Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_SelectionList_Class-GUID-c3be7a8a-9028-4cec-a0c0-d355d0621b37.html">WRTKit SelectionList Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_SelectionMenu_Class-GUID-3ae54fdf-e938-400b-969d-e41575331aa0.html">WRTKit SelectionMenu Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Separator_Class-GUID-b9a1bbb9-5858-4996-9c25-2ede2507f3a3.html">WRTKit Separator Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_TextArea_Class-GUID-137b9641-f3a5-4fc0-bf30-017533e2ad69.html">WRTKit TextArea Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.html">WRTKit TextEntryControl Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_TextField_Class-GUID-799b7dea-1e4d-4147-bc27-acc4b91d8bf9.html">WRTKit TextField Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_UIElement_Class-GUID-37b82f75-720c-4f54-9769-cda18453ffa3.html">WRTKit UIElement Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_UIManager_Class-GUID-937146c8-3889-40f5-b9f7-0f774ac9f5fe.html">WRTKit UIManager Class</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_View_Class-GUID-e673fe1a-cf46-46f5-b243-ce7422c69cc5.html">WRTKit View Class</a></strong><br />
+</li>
+</ul>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit ActionControl Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-6A7CB034-D676-4119-B799-7B3E3B5948E4" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit ActionControl Class</title>
+</head>
+<body id="GUID-6A7CB034-D676-4119-B799-7B3E3B5948E4"><a name="GUID-6A7CB034-D676-4119-B799-7B3E3B5948E4"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit ActionControl Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The ActionControl class is an abstract base class for action controls like buttons.
+                ActionControl class does not introduce any new public methods or properties over
+                those inherited from its superclass. Don't instantiate ActionControl directly but
+                rather one of its subclasses.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html">
+Control</a>
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Events</h2>
+
+            
+            <br /><ul>
+
+                <li>
+
+                    <p>
+ActionPerformed</p>
+
+                    
+
+                        <p>
+
+                            This event is fired when the user performs an action with the control, e.g. clicks a button.
+                        </p>
+
+                    
+                </li>
+
+            </ul>
+
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Actions-GUID-38771443-166b-4112-9569-c07229cd7449.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Actions" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-38771443-166B-4112-9569-C07229CD7449" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Actions</title>
+</head>
+<body id="GUID-38771443-166B-4112-9569-C07229CD7449"><a name="GUID-38771443-166B-4112-9569-C07229CD7449"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Actions</h1>
+
+    <div>
+
+        <p>
+
+            Widgets can let users trigger actions in many ways. One way is by inserting menu 
+            items in the Options menu, using the menu object that the S60 Web Runtime 
+            defines. Another way is to use links that call JavaScript functions. Such links 
+            could for example be included as part of content in a ContentPanel control. 
+            Links belong more to web pages than widgets or applications, however, and are 
+            not recommended except in cases when they result in a web URL being opened up in 
+            a web browser (i.e. using the widget.openURL() method).
+        </p>
+
+        <p>
+
+            The third way is to use one of the WRTKit action controls: FormButton and 
+            NavigationButton. Both controls are very similar in usage but differ greatly in 
+            presentation and intended use. The FormButton control is meant to be used in 
+            situations where pressing the button would result in some kind of process taking 
+            place, e.g. settings being saved. The NavigationButton control is intended for 
+            moving between views inside the widget, or other similar type of actions. 
+            FormButton controls look similar to buttons in a PC application or "Submit"-
+            buttons on a web page. NavigatationButton controls don't really have a 
+            counterpart in the PC application domain, but is common in mobile device 
+            application that have large user interfaces that are split into several views.
+        </p>
+
+        <div class="fignone" id="GUID-38771443-166B-4112-9569-C07229CD7449__GUID-AC8282AE-227F-481A-8774-B3904AABDD9F"><a name="GUID-38771443-166B-4112-9569-C07229CD7449__GUID-AC8282AE-227F-481A-8774-B3904AABDD9F"><!-- --></a><span class="figcap">Figure 1. 
+NavigationButton controls</span>
+
+            
+            <br /><img src="NavigationButton_Controls_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            In an email widget, NavigationButton controls could be used so that there would 
+            be a "Folders"-view where each folder (e.g. Inbox, Sent, Trash, etc.) would have 
+            a corresponding NavigationButton. Clicking on the button for a folder would open 
+            up that folder in a new view. FormButton controls could be used for example in a 
+            view that lets users write new emails to trigger sending of the written email. A 
+            FormButton in a view like that could have "Send" as the button text.
+        </p>
+
+        <div class="fignone" id="GUID-38771443-166B-4112-9569-C07229CD7449__GUID-60F75AE9-DE96-4044-BAB4-BAB27F08A1D7"><a name="GUID-38771443-166B-4112-9569-C07229CD7449__GUID-60F75AE9-DE96-4044-BAB4-BAB27F08A1D7"><!-- --></a><span class="figcap">Figure 2. 
+FormButton controls</span>
+
+            
+            <br /><img src="FormButton_Controls_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            The FormButton and NavigationButton controls fire events with the event type 
+            "ActionPerformed" whenever a user presses the button. The event can be turned 
+            into a function call to a callback function of the developer's choice by 
+            registering the function to the control for the "ActionPerformed" event type. 
+            This is done using the addEventListener() method that all controls inherit from 
+            the UIElement base class.
+        </p>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Common WRTKit tasks" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Creating_a_widget_that_uses_the_WRTKit-GUID-8d71ee32-1826-4141-8fb6-76420a5472a4.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Using_buttons-GUID-8b14cec9-92cc-4bde-83c2-ad0a30a84942.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Using_selection_controls-GUID-5e36d276-cce8-4bc9-bcba-78e721adb8c6.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Using_text_entry_controls-GUID-76aeb0e3-698d-41de-a34b-8fea6d8e00d2.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Showing_content_in_a_view-GUID-7020d9ea-747d-42f3-b47c-16ad1f45db82.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Using_notification_popups-GUID-39c7a69a-9334-45d1-92f6-8c239831a0a2.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Handling_events-GUID-a1a86c8a-6e66-4dc8-8967-b5c9c7bc6563.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Customizing_the_WRTKit_look-GUID-43369c51-23cf-41ac-a2f4-6320dc6eda9a.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-24870895-4449-4307-9A54-7C90F7B3905E" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Common WRTKit tasks</title>
+</head>
+<body id="GUID-24870895-4449-4307-9A54-7C90F7B3905E"><a name="GUID-24870895-4449-4307-9A54-7C90F7B3905E"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Common WRTKit tasks</h1>
+
+    <div>
+
+        <p>
+
+            This section of the Developer's Guide describes some of the most
+            common WRTKit tasks.
+        </p>
+
+    </div>
+
+<div>
+<ul class="ullinks">
+<li class="ulchildlink"><strong><a href="WRTKit_Creating_a_widget_that_uses_the_WRTKit-GUID-8d71ee32-1826-4141-8fb6-76420a5472a4.html">Creating a widget that uses the WRTKit</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Using_buttons-GUID-8b14cec9-92cc-4bde-83c2-ad0a30a84942.html">Using buttons</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Using_selection_controls-GUID-5e36d276-cce8-4bc9-bcba-78e721adb8c6.html">Using selection controls</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Using_text_entry_controls-GUID-76aeb0e3-698d-41de-a34b-8fea6d8e00d2.html">Using text entry controls</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Showing_content_in_a_view-GUID-7020d9ea-747d-42f3-b47c-16ad1f45db82.html">Showing content in a view</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Using_notification_popups-GUID-39c7a69a-9334-45d1-92f6-8c239831a0a2.html">Using notification popups</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Handling_events-GUID-a1a86c8a-6e66-4dc8-8967-b5c9c7bc6563.html">Handling events</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Customizing_the_WRTKit_look-GUID-43369c51-23cf-41ac-a2f4-6320dc6eda9a.html">Customizing the WRTKit look</a></strong><br />
+</li>
+</ul>
+
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.html">WRTKit Developer's Guide</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,548 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit ContentPanel Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit ContentPanel Class</title>
+</head>
+<body id="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B"><a name="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit ContentPanel Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The ContentPanel class implements a control that is used to display arbitrary
+                XHTML content. The content panel can either be foldable (allows users to
+                toggle it open and close) or static. Like all controls the content panel has
+                an optional caption. But unlike for other controls, this caption area is an
+                interactive area that can be used to expand and collapse a foldable content
+                panel. Thus, foldable content panel should always have captions.
+            </p>
+
+            <div class="fignone" id="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B__GUID-FF98E500-EF53-4A7D-BBDB-71DB0378C4D4"><a name="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B__GUID-FF98E500-EF53-4A7D-BBDB-71DB0378C4D4"><!-- --></a><span class="figcap">Figure 1. 
+Foldable content panel</span>
+
+                
+                <br /><img src="RSS_Reader_Main_Screenshot_2.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html">
+Control</a>
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Events</h2>
+
+            
+            <br /><ul>
+
+                <li>
+
+                    <p>
+ExpandedStateChanged</p>
+
+                    
+
+                        <p>
+
+                            This event is fired when the expanded state of the content area has changed.
+                        </p>
+
+                    
+                </li>
+
+            </ul>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-72B0BFAD-F25B-474E-804E-FF9B381E3319"><a name="GUID-72B0BFAD-F25B-474E-804E-FF9B381E3319"><!-- --></a>
+
+        <h2 class="topictitle2">
+Constructor</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[ContentPanel] new ContentPanel(String id, String caption, String content, Boolean foldable, Boolean expanded)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Creates a new instance of the ContentPanel class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+id</p>
+
+                        
+
+                            <p>
+
+                                Unique identifier for the control. Can be retrieved using the id property defined
+                                in the UIElement class that this control inherits from. Useful for example to
+                                identify the source of an event in event callback functions or to apply a CSS
+                                rule to only this particular control. The identifier can be null, in which case
+                                no id will be set for the control.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+caption</p>
+
+                        
+
+                            <p>
+
+                                The caption text for the control. A null caption can be used to hide the 
+                                caption area. This is not recommended if the content panel is folding since
+                                users cannot expand or collapse a foldable content panel without the caption
+                                area being present.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+content</p>
+
+                        
+
+                            <p>
+
+                                The content for the panel. If the argument is omitted or null then the content
+                                area will be empty.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+foldable</p>
+
+                        
+
+                            <p>
+
+                                Specifies the foldability of the content panel. Specify true to make the content
+                                panel foldable and false to make it static. If the argument is omitted or null
+                                then the content panel will default to being static.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+expanded</p>
+
+                        
+
+                            <p>
+
+                                Specifies the expanded state of a foldable content panel. Specify true to make
+                                the content panel expanded and false to make it collapse. If the argument is
+                                omitted or null then the content panel will default to being expanded.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    A new instance of the ContentPanel class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Example code</h3>
+
+                
+                <p>
+
+                    Creating a foldable content panel with content:
+                </p>
+
+<pre>
+
+var panel1 = new ContentPanel("panel1", "Example Panel", "This is some content");
+</pre>
+
+                <p>
+
+                    Creating a static content panel with content:
+                </p>
+
+<pre>
+
+var panel2 = new ContentPanel("panel2", "Example Panel", "This is some content", false);
+</pre>
+
+                <p>
+
+                    Creating a foldable content panel and given it content in a separate step:
+                </p>
+
+<pre>
+
+var panel3 = new ContentPanel("panel3", "Example Panel");
+panel3.setContent("This is some content");
+</pre>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-6FD118DA-F9AE-4319-8BA1-573BD47DF3F0"><a name="GUID-6FD118DA-F9AE-4319-8BA1-573BD47DF3F0"><!-- --></a>
+
+        <h2 class="topictitle2">
+getContent()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[String] ContentPanel.getContent(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the current content (an XHTML fragment) of the content panel.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current content of the content area.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-C0403CCD-76A8-433A-86BB-7497FE84D64D"><a name="GUID-C0403CCD-76A8-433A-86BB-7497FE84D64D"><!-- --></a>
+
+        <h2 class="topictitle2">
+setContent()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] ContentPanel.setContent(String content)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the content for the content panel as a fragment of XHTML. If null is
+                    specified as the content then the content area will be empty.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+content</p>
+
+                        
+
+                            <p>
+
+                                A fragment of XHTML to set as content for the content area of the content panel.
+                                A null value can be used to make the content area empty.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-A58B8200-29B7-4816-899B-455C7DE362E1"><a name="GUID-A58B8200-29B7-4816-899B-455C7DE362E1"><!-- --></a>
+
+        <h2 class="topictitle2">
+isExpanded()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Boolean] ContentPanel.isExpanded(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the expanded state of the content area.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current expanded state of the content area; true if expanded, false if collapsed.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-B2F7C054-CB36-43B6-9A47-91A4F708EE41"><a name="GUID-B2F7C054-CB36-43B6-9A47-91A4F708EE41"><!-- --></a>
+
+        <h2 class="topictitle2">
+setExpanded()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] ContentPanel.setExpanded(Boolean state)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the expanded state of the content area for a foldable content panel.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+state</p>
+
+                        
+
+                            <p>
+
+                                The new expanded state for the content area; true to expand, false to collapse.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-5DB63CF3-3A09-4A4C-ABC6-2BC4EE5EF677"><a name="GUID-5DB63CF3-3A09-4A4C-ABC6-2BC4EE5EF677"><!-- --></a>
+
+        <h2 class="topictitle2">
+contentElement</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[HTMLElement] ContentPanel.contentElement</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    The contentElement property allows direct access to the content of a content
+                    panel. Typically content is set to a content panel using the setContent() method,
+                    passing it an XHTML fragment as a string but if DOM methods are preferred then the
+                    contentElement can be used as a root HTML element to attach content to, e.g.
+                    using the DOM appendChild() method.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,609 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit Control Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-6DDB8154-3FED-40FC-B282-85E6D3AD494F" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit Control Class</title>
+</head>
+<body id="GUID-6DDB8154-3FED-40FC-B282-85E6D3AD494F"><a name="GUID-6DDB8154-3FED-40FC-B282-85E6D3AD494F"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit Control Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The Control class is an abstract base class for user interface controls.
+                Don't instantiate Control directly but rather one of its subclasses.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_UIElement_Class-GUID-37b82f75-720c-4f54-9769-cda18453ffa3.html">
+UIElement</a>
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Events</h2>
+
+            
+            <br /><ul>
+
+                <li>
+
+                    <p>
+FocusStateChanged</p>
+
+                    
+
+                        <p>
+
+                            This event is fired when focus state of the control has changed.
+                        </p>
+
+                    
+                </li>
+
+                <li>
+
+                    <p>
+HoverStateChanged</p>
+
+                    
+
+                        <p>
+
+                            This event is fired when hover state of the control has changed.
+                        </p>
+
+                    
+                </li>
+
+            </ul>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-CF6C59C7-1FB2-4B30-85F1-31818B519739"><a name="GUID-CF6C59C7-1FB2-4B30-85F1-31818B519739"><!-- --></a>
+
+        <h2 class="topictitle2">
+getCaption()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[String] Control.getCaption(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the current caption of the control.
+                    The value is an XHTML string.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current caption of the control or null if the control doesn't have a caption.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-2746C552-8BFB-4C81-8790-3CAC42E6D73A"><a name="GUID-2746C552-8BFB-4C81-8790-3CAC42E6D73A"><!-- --></a>
+
+        <h2 class="topictitle2">
+setCaption()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] Control.setCaption(String caption)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the caption for the control. If null is specified as the caption
+                    then the caption is removed (entirely hidden) for the control.
+                    The value is an XHTML string.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+caption</p>
+
+                        
+
+                            <p>
+
+                                The new caption for the control or null for no caption.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-CC9D9EA5-DCD8-4EBE-9FAC-A3C87C845AB2"><a name="GUID-CC9D9EA5-DCD8-4EBE-9FAC-A3C87C845AB2"><!-- --></a>
+
+        <h2 class="topictitle2">
+isEnabled()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Boolean] Control.isEnabled(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the enabled state of the control.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current enabled state of the control.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-F336AA4D-EDFF-4109-A7C5-A6C0AF0DCC11"><a name="GUID-F336AA4D-EDFF-4109-A7C5-A6C0AF0DCC11"><!-- --></a>
+
+        <h2 class="topictitle2">
+setEnabled()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] Control.setEnabled(Boolean state)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the enabled state for the control.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+state</p>
+
+                        
+
+                            <p>
+
+                                The new enabled state for the control; true to enable, false to disable.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-1667AEC9-B037-4A45-A89E-38369F63CCD0"><a name="GUID-1667AEC9-B037-4A45-A89E-38369F63CCD0"><!-- --></a>
+
+        <h2 class="topictitle2">
+isFocusable()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Boolean] Control.isFocusable(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the focusable state of a control. The focusable state tells
+                    whether the control can be focused or not. E.g. a label control cannot
+                    be focused because it does not have any interactive action to perform.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The focusable state of the control.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-954AA9E7-4239-432E-A1D9-66CDD75F274E"><a name="GUID-954AA9E7-4239-432E-A1D9-66CDD75F274E"><!-- --></a>
+
+        <h2 class="topictitle2">
+isFocused()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Boolean] Control.isFocused(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the focused state of the control.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current focused state of the control.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-B8FD2E60-F202-4089-A253-11B765EF0C41"><a name="GUID-B8FD2E60-F202-4089-A253-11B765EF0C41"><!-- --></a>
+
+        <h2 class="topictitle2">
+setFocused()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] Control.setFocused(Boolean state)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the focused state for the control. Note that it's not always possible
+                    to carry out the request to focus a control. E.g. a control might not be
+                    visible or the focus might be locked to another control.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+state</p>
+
+                        
+
+                            <p>
+
+                                The new focused state for the control; true to focus, false to blur.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-DAB168FA-2ED0-4733-AE59-ABC4B7F0AFB2"><a name="GUID-DAB168FA-2ED0-4733-AE59-ABC4B7F0AFB2"><!-- --></a>
+
+        <h2 class="topictitle2">
+updateStyleFromState()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] Control.updateStyleFromState()</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Called to let the control update its style to match its internal state.
+                    The method doesn't need to be called manually as the toolkit takes care of
+                    calling it whenever the state of a control changes. Override this method
+                    if you wish to implement custom styling for a control. Typically using
+                    CSS rules will be sufficient for customizing looks so only use this method
+                    when CSS is insufficient.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-B790F37D-A86B-47F1-80CC-950C4653BEA2"><a name="GUID-B790F37D-A86B-47F1-80CC-950C4653BEA2"><!-- --></a>
+
+        <h2 class="topictitle2">
+view</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[View] Control.view</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    The view property references the view that the control is attached to.
+                    If the control has not been attached to any view then the property is null.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Control_states-GUID-f98575ac-f913-466d-a790-0ff0207463a3.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Control states" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-F98575AC-F913-466D-A790-0FF0207463A3" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Control states</title>
+</head>
+<body id="GUID-F98575AC-F913-466D-A790-0FF0207463A3"><a name="GUID-F98575AC-F913-466D-A790-0FF0207463A3"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Control states</h1>
+
+    <div>
+
+        <p>
+
+            Controls can be in a number of different states. Some of the states are specific
+            to a particular type of control (e.g. whether a checkbox is checked) and some
+            are common to all controls. Some states can be explicitly set while others are
+            implicit based on some user action (e.g. moving the pointer over a control).
+            The states can be retrieved using "getter" functions and in cases when a state
+            can be explicitly set there is a "setter" function that allows the state to be
+            manipulated. The following presents the common control states.
+        </p>
+
+        <div class="section"><h2 class="sectiontitle">
+Focusable</h2>
+
+            
+            <p>
+
+                The focusable state is a boolean (i.e. true or false) value that indicates
+                whether the control can receive the focus and receive input or not. Some
+                non-interactive controls like labels are never focusable, others are focusable
+                unless the control has specifically been disabled, and some are always
+                focusable. E.g. textfields can be focused even when disabled in order to be able
+                to copy text from them to the clipboard.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Focused</h2>
+
+            
+            <p>
+
+                The focused state is a boolean value that specifies if a control is currently
+                selected for interaction. The focused typically changes implicitly through user
+                actions like moving the 4-way controller, however the focus can also be
+                explicitly set. Unlike other states, setting the focus to a control is more like
+                a request than an absolute command because it is not always possible to actually
+                set the focus to the control to which it is requested. For example if a control
+                is not focusable or not visible on the screen, the focus cannot be set to it.
+            </p>
+
+            <div class="fignone" id="GUID-F98575AC-F913-466D-A790-0FF0207463A3__GUID-E7C3B5D6-F0CE-43D0-8FF4-304F6F716050"><a name="GUID-F98575AC-F913-466D-A790-0FF0207463A3__GUID-E7C3B5D6-F0CE-43D0-8FF4-304F6F716050"><!-- --></a><span class="figcap">Figure 1. 
+Focused and unfocused FormButton controls</span>
+
+                
+                <br /><img src="FormButton_Controls_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Hovering</h2>
+
+            
+            <p>
+
+                Hovering means that the pointer arrow is over a control. It is always implicit
+                and changes based on pointer movement. The hovering state is a boolean value.
+                The hovering state is rarely needed outside a control itself, which uses it to
+                determine how the control draws itself.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Enabled</h2>
+
+            
+            <p>
+
+                Controls are always enabled by default, but can be disabled to prevent
+                interaction. Disabling a control doesn't hide it but rather causes it to be
+                displayed in some way (typically with dimmer or duller colors) that indicates to
+                users that it cannot be used. Toggling the enabled state is always an explicit
+                action. The enabled state is a boolean value. Note that toggling the enabled
+                state can have an effect on other things. Focus is typically lost from controls
+                that are disabled and they become non-focusable.
+            </p>
+
+            <div class="fignone" id="GUID-F98575AC-F913-466D-A790-0FF0207463A3__GUID-ADB1D1B7-A652-4A3C-A89F-A23C5E1B0D44"><a name="GUID-F98575AC-F913-466D-A790-0FF0207463A3__GUID-ADB1D1B7-A652-4A3C-A89F-A23C5E1B0D44"><!-- --></a><span class="figcap">Figure 2. 
+Enabled and disabled FormButton controls</span>
+
+                
+                <br /><img src="FormButton_Controls_Screenshot_2.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Activated</h2>
+
+            
+            <p>
+
+                Certain controls like textfields cannot be interacted with despite being
+                focused. Instead the focus merely indicates that they are selected for
+                interaction. In order to actually interact with them they have to be "activated"
+                by pressing a selection button. The reason for this is that the same 4-way
+                controller keys are used for navigating between controls and within a control.
+                When a control such as a textfield is activated, all key presses are consumed by
+                the control. Activation of a control is transparent to the WRTKit and due to
+                this cannot be queried nor commanded. Also note that activation is not needed on
+                PC computers and thus will not occur when testing a WRTKit user interface in a
+                PC browser.
+            </p>
+
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Creating_a_widget_that_uses_the_WRTKit-GUID-8d71ee32-1826-4141-8fb6-76420a5472a4.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,197 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Creating a widget that uses the WRTKit" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-8D71EE32-1826-4141-8FB6-76420A5472A4" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Creating a widget that uses the WRTKit</title>
+</head>
+<body id="GUID-8D71EE32-1826-4141-8FB6-76420A5472A4"><a name="GUID-8D71EE32-1826-4141-8FB6-76420A5472A4"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Creating a widget that uses the WRTKit</h1>
+
+    <div>
+
+        <p>
+
+            To create a widget the uses the WRTKit for its user interface, start by copying
+            the WRTKit directory from the Library directory in the WRTKit to the root
+            directory of the widget you are making. The root directory of your widget is
+            the directory where your Info.plist and main HTML file is located.
+        </p>
+
+        <p>
+
+            The main HTML file should include a script tag that loads the file 
+            WRTKit/WRTKit.js in order to include and initialize the WRTKit library in your 
+            widget. The widget typically should have no content at all between its 
+            &lt;body&gt; and &lt;/body&gt; tags. You also want to include the JavaScript 
+            script file where your own widget's code is located, and you want to define some 
+            entry point function that gets called when the widget is loaded, e.g. using the 
+            onload event that you can define for the body tag. This should result in an HTML
+            file that looks something like this:
+        </p>
+
+<pre>
+
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+    &lt;head&gt;
+        &lt;title&gt;&lt;/title&gt;
+        &lt;script type="text/javascript" src="WRTKit/WRTKit.js"&gt;&lt;/script&gt;
+        &lt;script type="text/javascript" src="YourOwnWidgetCode.js"&gt;&lt;/script&gt;
+    &lt;/head&gt;
+    &lt;body onload="init()"&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+        <p>
+
+            In this example the code for your own widget is in a file called YourOwnWidgetCode.js
+            and the entry point function that gets called when the widget has loaded all files is
+            called init(). Next, we want to create that function.
+        </p>
+
+        <p>
+
+            All widgets that use the WRTKit need to create an instance of the UIManager class, as
+            well as at least one view. Creating the UIManager is a simple matter of instantiating
+            the WRTKit UIManager class. You should retain the reference to that instance in a
+            global variable or some other place that is accessible to the code that will need to
+            use the UIManager's services. To do this, you would first declare the global variable
+            to hold your UIManager instance:
+        </p>
+
+<pre>
+
+// Reference to the user interface manager.
+var uiManager;
+</pre>
+
+        <p>
+
+            With the variable declared you can then add the following code to the init() function
+            to create an instance of the UIManager class and retain a reference to that instance
+            in the uiManager variable:
+        </p>
+
+<pre>
+
+// create the user interface manager
+uiManager = new UIManager();
+</pre>
+
+        <p>
+
+            Now that we have a user interface manager instance we can create a new view and set it
+            to the screen. In order to be able to access that view outside the init() function, we
+            should crate a global variable for it just like we did for the UIManager instance:
+        </p>
+
+<pre>
+
+// Reference to the main view.
+var mainView;
+</pre>
+
+        <p>
+
+            In this example we will create a ListView that has a unique identifier "example" and
+            a view caption "Example View". The unique identifier can be used to set CSS rules that
+            are targeted to a particular view. It is often not needed and can be specified as null.
+            The view caption is shown at the top of list views and is helpful to show users what
+            the view is for.
+        </p>
+
+<pre>
+
+// create the main view
+mainView = new ListView("example", "Example View");
+</pre>
+
+        <p>
+
+            We are now ready to command the view to the screen:
+        </p>
+
+<pre>
+
+// show the mainView
+uiManager.setView(mainView);
+</pre>
+
+        <p>
+
+            The example widget would now be displaying an empty list view with "Example View" in
+            its view caption and would be ready for more functionality. Let's add a button to the
+            view. You would normally do this before the view is shown. Our example button has a
+            unique identifier "exampleButton" and text "Press me!" on the face of the button.
+        </p>
+
+<pre>
+
+// add a button to the main view
+var exampleButton = new FormButton("exampleButton", "Press me!");
+mainView.addControl(exampleButton);
+</pre>
+
+        <p>
+
+            The main view now contains a button. If we wanted to be informed when the button is
+            pressed we could create a new function and register it as an "event listener". First
+            the callback function definition:
+        </p>
+
+<pre>
+
+// Callback function that gets called when the example button is pressed.
+function exampleButtonPressed(event) {
+    // popup a notification dialog when the button is pressed
+    uiManager.showNotification(3000, "info", "You pressed the button!");
+}
+</pre>
+
+        <p>
+
+            Now that we have a function to call when the button is pressed we can register the
+            event listener. You should write this code in the init() function, for example right
+            after you created the button:
+        </p>
+
+<pre>
+
+// add an event listener
+exampleButton.addEventListener("ActionPerformed", exampleButtonPressed);
+</pre>
+
+        <p>
+
+            The same idea applies even to much more complex user interfaces. You create views and
+            controls, add the controls to the views, command a view to be displayed using the
+            UIManager, and get notified of user actions using event listeners that you can
+            register to the controls.
+        </p>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,534 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Creating the Hello World widget" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-D638159A-D12B-476C-A74C-99055672B7BE" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Creating the Hello World widget</title>
+</head>
+<body id="GUID-D638159A-D12B-476C-A74C-99055672B7BE"><a name="GUID-D638159A-D12B-476C-A74C-99055672B7BE"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Creating the Hello World widget</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+What goes in the widget?</h2>
+
+            
+            <p>
+
+                One of the main reasons why Hello World is a good example to start with is
+                because it is a minimal widget and shows the minimal set of steps that you
+                would go through to create a widget that uses the WRTKit for its user interface.
+                We will create just two files, an HTML file called HelloWorld.html and a JavaScript
+                file called HelloWorld.js and both will be very short.
+            </p>
+
+            <p>
+
+                Before we'll start writing code let's talk about what exactly it is that we want
+                to build. A typical Hello World application simply displays the text Hello World
+                with the minimal amount of code. But because using the WRTKit is so simple, we'll
+                go one step further and make it a bit fancier.
+            </p>
+
+            <p>
+
+                WRTKit user interfaces are composed of views and controls. A view is one logical
+                group of stuff that you can see on the screen. A view can be longer than what fits
+                on the screen at once in which case the user has to scroll, but it's still one view.
+                For example in a web browser application you might have one view for the bookmarks,
+                another for settings and a third view for viewing actual web pages. Controls are
+                user interface elements like buttons, text fields, checkboxes, etc. that either
+                let the user perform some kind of interactive action or simply shows some information.
+                When you create a user interface with the WRTKit you create one or more controls,
+                one or more views, and place the controls on the views. After this, all you have to
+                do is ask one of the views to be displayed and the rest happens automatically.
+            </p>
+
+            <p>
+
+                Since this is a very simple widget we will just have one view and we'll call it
+                the "main view". Instead of just saying "Hello World" we will let the user input
+                their name and then click a button to popup a dialog that says hello to the user
+                by name. E.g. if the user enters "John" we will popup "Hello John!". But we will
+                also create some error handling so that if the user doesn't input a name we will
+                popup a warning dialog that says "Please enter your name!" instead.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+The HelloWorld.html file</h2>
+
+            
+                <p>
+
+                As mentioned earlier, you create user interfaces using JavaScript rather than
+                HTML when you use the WRTKit. Because of this it's perhaps not so surprising
+                that the HTML file is extremely short. What might come as a surprise however is
+                that it's extremely short and nearly identical no matter what kind of widget
+                you are building if you are using the WRTKit. In fact it typically only has
+                about 10 lines of code, including the DOCTYPE declaration! Here's what it looks
+                like:
+            </p>
+
+<pre>
+
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+    &lt;head&gt;
+        &lt;title&gt;&lt;/title&gt;
+        &lt;script type="text/javascript" src="WRTKit/WRTKit.js"&gt;&lt;/script&gt;
+        &lt;script type="text/javascript" src="HelloWorld.js"&gt;&lt;/script&gt;
+    &lt;/head&gt;
+    &lt;body onload="init()"&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+            <p>
+
+                We're using XHTML 1.0 so the DOCTYPE declaration is for XHTML 1.0 Strict. And
+                because this is XHTML we also have the normal XML declaration (&lt;?xml...).
+                After that the content should be familiar even if you've used previously only
+                used HTML rather than XHTML. We have a normal html root level tag with a head
+                and body. Note that in XHTML tags are case sensitive and should be in lowercase
+                as in the example above. The xmlns attribute is a name space declaration that
+                states that all the tags used here are part of the XHTML standard.
+            </p>
+
+            <p>
+
+                Because we're creating a widget and not a web page we don't need to have a title. If you
+                want you can define one here but you won't see it anywhere. Next comes an important
+                bit: <samp class="codeph">
+&lt;script type="text/javascript" src="WRTKit/WRTKit.js"&gt;&lt;/script&gt;.</samp>
+                That piece of code instructs the Web Runtime to load a JavaScript file called WRTKit.js
+                from a directory called WRTKit. The WRTKit.js file takes care of loading the WRTKit and
+                including all the files that are needed by it. Those files are all inside the WRTKit
+                directory and you don't need to concern yourself with them at this point. In fact
+                all you need to do to use the WRTKit in a widget is to copy the WRTKit directory into
+                your own widget's root directory and then include the XHTML script tag presented above
+                that loads the WRTKit/WRTKit.js JavaScript file. If you are creating a widget of your own
+                you can find the WRTKit directory in the Library directory in the WRTKit SDK. But for your
+                convenience it has already been copied to the Hello World example.
+            </p>
+
+            <p>
+
+                Notice that there's another script tag too, this one loading a file called HelloWorld.js.
+                This is where we'll put all the JavaScript code that implements our Hello World widget.
+                We could have just written the JavaScript code inline between a &lt;script&gt; and
+                &lt;/script&gt; tag in the HelloWorld.html file but the HTML file is less cluttered if 
+                we move all JavaScript to a separate file.
+            </p>
+
+            <p>
+
+                Finally let's look at the body tag. There are two things of interest here. First of all
+                there's no content between &lt;body&gt; and &lt;/body&gt;. That's because all of the
+                content will be created by the WRTKit using JavaScript. And that leads us to the other
+                point of interest in the body: the <samp class="codeph">
+onload="init()"</samp> attribute of the
+                body tag. This sets up an event handler that gets called after the widget has loaded
+                all of its content. The event handler calls a JavaScript function called init(). This
+                is the point where we jump from the HTML to JavaScript. From this point on everything
+                will be JavaScript and the place where it all starts is the init() function that gets
+                called thanks to this little onload event handler for the body tag.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+The HelloWorld.js file</h2>
+
+            
+            <p>
+
+                The HTML file that we created above set things up so that there is a function call
+                to a function named "init()" when the widget is done loading. No such function exists
+                a this point so we have to create it. The init() function is the entry point to our
+                JavaScript and this is also where we will start the implementation.
+            </p>
+
+            <p>
+
+                The S60 Web Runtime supports two kinds of user interface interaction: tab and
+                pointer. The WRTKit supports but methods but usually the tab interaction method
+                (also known as "navigation mode") is preferred. Unfortunately the pointer based
+                navigation mode is the default so we'll have to disable it and switch to the tab
+                navigation mode. Also by default the softkey bar is hidden, which we don't want
+                because we want to give the user a clue about how to exit the widget. The good news
+                is that these two tweaks are easy to do and only requires two simple method calls.
+                The bad news is that those method calls are done through objects that only exist
+                in the Web Runtime but not in a PC web browser. Due to this, we'll create the
+                init() function as follows:
+            </p>
+
+<pre>
+
+// Called from the onload event handler to initialize the widget.
+function init() {
+    // set tab-navigation mode and show softkeys
+    // (only if we are in the WRT environment)
+    if (window.widget) {
+        widget.setNavigationEnabled(false);
+        menu.showSoftkeys();
+    }
+}
+</pre>
+
+            <p>
+
+                We wrapped the calls to disable the pointer navigation and show the softkeys
+                in an if-clause that checks if there's such an object available as window.widget.
+                This will evaluate to false on a PC web browser but true in the S60 Web Runtime.
+            </p>
+
+            <p>
+
+                Now that we've tuned the Web Runtime to our liking we can create the actual
+                user interface. We'll create four things: the so-called "user interface manager"
+                that is in charge of managing views and other user interface resources, the main
+                view for the widget, a text field where users can enter their name, and finally
+                a button that they can click on to popup a notification dialog that says "Hello"
+                Notice that we don't have to create the notification dialog because this is done
+                for us by the user interface manager.
+            </p>
+
+            <p>
+
+                Before we create those four objects we will declare four global variables so that
+                we can access those objects elsewhere in the widget. So let's add the following
+                to the top of the file (outside the init() function):
+            </p>
+
+<pre>
+
+// References to the WRTKit user interface manager and main view.
+var uiManager;
+var mainView;
+
+// References to controls in the main view.
+var helloButton;
+var nameField;
+</pre>
+
+            <p>
+
+                Now that we have some variables that can track the objects we are about to create
+                we can actually craete those objects. We'll create the objects inside the init()
+                function so that the user interface gets created right after the widget has loaded.
+            </p>
+
+            <p>
+
+                The first thing we create is the user interface manager. This is quite simple and
+                requires only a single line of code:
+            </p>
+
+<pre>
+
+// create UI manager
+uiManager = new UIManager();
+</pre>
+
+            <p>
+
+                Next we'll create the main view. The WRTKit allows all kinds of views to be created
+                if one has special needs for how user interface controls should be laid out. However
+                in the vast majority of cases the ListView class will be sufficient and that's what
+                we'll create this time too:
+            </p>
+
+<pre>
+
+// create main view
+mainView = new ListView(null, "Hello World");
+</pre>
+
+            <p>
+
+                The first argument to the ListView constructor is a unique identifier for the view.
+                All user interface elements in the WRTKit can have a unique identifier. The identifier
+                is helpful if you want to specifically target a view or control with some CSS style
+                rule or if you want to identify the source of an event in an event listener callback,
+                etc. However we don't need it here so we don't bother giving our main view a unique
+                id and just pass a null identifier value instead. The second argument is a caption for
+                the view. We'll just call our view "Hello World". The caption will be displayed at the
+                very top of the screen when we display the main view. But before we do that, let's
+                create the rest of the user interface.
+            </p>
+
+            <p>
+
+                The widget should have a text field to let users enter their name and a button to
+                trigger the greeting popup. Both the text field and the button are WRTKit controls
+                and will be created and added to the main view that we just created. There are two
+                kinds of buttons in the WRTKit though, form buttons and navigation buttons. Form
+                buttons are meant to trigger actions whereas navigation buttons are meant for 
+                situations where clicking it would result in moving from one view to another. Clearly
+                therefore, we want a form button in this case.
+            </p>
+
+            <p>
+
+                Creating the textfield and form button is done as follows:
+            </p>
+
+<pre>
+
+// add a text field to the view
+nameField = new TextField(null, "Enter your name");
+mainView.addControl(nameField);
+
+// add a button to the view
+helloButton = new FormButton(null, "Say Hello!");
+mainView.addControl(helloButton);
+</pre>
+
+            <p>
+
+                The first argument for both the textfield and button is the same as for the view:
+                an optional unique identifier. We won't need it here either so rather than scratching
+                our heads trying to come up with a unique identifier that we'll end up ignoring we'll
+                just define it as null. The second argument for the textfield constructor is a caption.
+                All controls except buttons have captions and this is the second argument in all
+                constructors for controls with captions. The caption is displayed above the control
+                and tells the user what the control does. In our case we want to have a textfield where
+                the user should enter the name so we'll use "Enter your name" as the control caption.
+                The second argument for the button constructor is the text for the button. The button
+                text for form buttons should be a verb or other descriptive text that lets the user know
+                what happens if the button is pressed. We'll put "Say Hello!" on our button.
+            </p>
+
+            <p>
+
+                After we have created a control we can add it to a view. Custom views can have their
+                own ways to do so but in the case of the default ListView that you'll use in most cases
+                you add a control by calling the addControl() method.
+            </p>
+
+            <p>
+
+                The user interface for the main view is now ready and we can show it. Showing a view
+                is done by calling setView() in the user interface manager. So we'll add one more line
+                of code to the end of the init() function:
+            </p>
+
+<pre>
+
+// display the main view
+uiManager.setView(mainView);
+</pre>
+
+            <p>
+
+                If you zipped up the widget directory, renamed it HelloWorld.wgz and installed the
+                widget on an emulator or handset, or just simply ran it in a PC web browser, you'd
+                notice that the user interface seems to work. There's just one problem. Clicking on
+                the button doesn't do anything! But don't worry, we're about to fix that.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Handling events</h2>
+
+            
+            <p>
+
+                The thing that is missing is that we have no way of knowing when the button was
+                pressed. And without knowing when it's pressed we can't react to the press and
+                show a greeting. A user interface action such as pressing a button is called an
+                "event". In the WRTKit events are reported to "listener" functions that developers
+                can register to controls. The way this is done is by creating a function that you
+                want to get called when an event occurrs, and then calling addEventListener() on
+                the control whose events you are interested in, passing the function to that method.
+                However there are many types of events and you are almost surely not interested in
+                all of them. Because of this you can specify the type of event that you want to get
+                notified about by giving the event type name to the addEventListener() method. The
+                event types and their names are described in the
+                <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">
+WRTKit API Reference</a>
+                for each control. Note that because controls inherit from other classes they also
+                inherit event types.
+            </p>
+
+            <p>
+
+                The event type that we're interested in here is "ActionPerformed". That event is
+                fired by form buttons whenever a user clicks on them. In order to get notified
+                of this event we'll need two things: create a function that will get called when
+                the event occurs and register that function as an event listener to our button.
+                Let's create the function first but leave the implementation empty for now:
+            </p>
+
+<pre>
+
+// Called when the hello-button is clicked.
+function helloButtonClicked(event) {}
+</pre>
+
+            <p>
+
+                Now that we have the event handler callback function we can add the event listener
+                registration code. Let's put that right after where we create the button in
+                the init() function:
+            </p>
+
+<pre>
+
+helloButton.addEventListener("ActionPerformed", helloButtonClicked);
+</pre>
+
+            <p>
+
+                Now our helloButtonClicked() function will get called whenever the button is
+                clicked. Notice that the function has an argument called event. This argument
+                will receive an event object that describes the event that occurred. This can
+                be useful if you have an event handler function that handles many different
+                events. The event object contains three properties that you can examine to
+                decide on what to do: a property called "source" that points back to the control
+                or view from where the event was fired, a property called "type" that contains
+                the event type name for this event, and a property called "value" that has
+                helpful additional info that depends on the event type. You'll find more detailed
+                information about this in the API Reference.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Notification popup dialogs</h2>
+
+            
+            <p>
+
+                All that remains now is to write the code that shows the greeting popup dialog
+                when the button is pressed. This code will naturally go in the helloButtonClicked()
+                function.
+            </p>
+
+            <p>
+
+                Using notification popup dialogs is very easy with the WRTKit. The user interface
+                manager has two methods: showNotification() and hideNotification() that are used
+                to show and hide notification popup dialogs. The showNotification() method takes
+                four arguments: displayTime, type, text and progress. The displayTime argument is
+                used to supply a time (in milliseconds) for how long the notification popup should
+                be shown for. We want our greeting to be visible for 3 seconds so we'll pass 3000
+                to this argument. The type argument is a string that tells the method what kind of
+                popup to show, which determines the visual style of the popup. We'll be using two types:
+                "info" and "warning". The "info" type for when we show the greeting and "warning" if
+                the user didn't enter a name and we want to show a notification dialog that complains
+                about this. The text argument is simply the text to show in the notification dialog.
+                And finally the progess argument is a decimal number between 0.0 and 1.0 that is
+                used in progress dialogs to display how far along a process is.
+            </p>
+
+            <p>
+
+                A progress of 0.0 means "0% progress" and 1.0 means "100% progress". So for example
+                if some process is 25% completed, you'd pass 0.25 to this argument. If you don't know
+                how long a process will take you can pass a negative number. This will result in an
+                animated progress bar that has a visual style that indicates that the progress is
+                unknown. Typically you'd use the "wait" notification type is you want to show a
+                progress dialog. If you don't want to show any progress information in the dialog,
+                such as in our case, you can omit the progress argument or pass a null to it.
+            </p>
+
+            <p>
+
+                Before we can write our code we need one more thing. We need to know what the user
+                wrote in the name textfield. This value can be retrieved by calling the getText()
+                method for the textfield. We're now ready to write the code for the helloButtonClicked()
+                function:
+            </p>
+
+<pre>
+
+var name = nameField.getText();
+if (name.length == "") {
+    uiManager.showNotification(3000, "warning", "Please enter your name!");
+} else {
+    uiManager.showNotification(3000, "info", "Hello " + name + "!");
+}
+</pre>
+
+            <div class="fignone" id="GUID-D638159A-D12B-476C-A74C-99055672B7BE__GUID-A2B73DB1-6494-4806-A11E-2E7F9BB1B3E7"><a name="GUID-D638159A-D12B-476C-A74C-99055672B7BE__GUID-A2B73DB1-6494-4806-A11E-2E7F9BB1B3E7"><!-- --></a><span class="figcap">Figure 1. 
+The Hello World widget</span>
+
+                
+                <br /><img src="Hello_World_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Wrapping up</h2>
+
+            
+            <p>
+
+                The Hello World widget is now done and you can zip it up, rename it to HelloWorld.wgz
+                and deploy it on a handset or emulator. But before that, let's try it in a normal PC
+                browser. Testing in a PC browser is useful because it allows you to use deubugging tools
+                (like the Firebug JavaScript debugger for Firefox) in case something isn't working. Using
+                a PC browser to test is also very fast because you don't have to install the widget to
+                the emulator or handset. Just hit reload in the web browser when you make a change and
+                you can see the results immediately. Of course there are features that will be missing
+                in a web browser, such as that you won't have access to the Options menu or any other
+                advanced widget functionality. But for the purpose of rapidly testing user interfaces
+                it can be very helpful.
+            </p>
+
+            <p>
+
+                There are a couple of points that are good to note now that the widget is ready.
+                First of all, your widget now works with both the pointer and tab navigation modes. If
+                you comment out the <samp class="codeph">
+widget.setNavigationEnabled(false)</samp> call in the init()
+                function you can try this out. Second, your widget works resolution independently.
+                You can try this either by resizing the PC browser window or by trying the widget out
+                with different resolutions in the S60 emulator. Third, the widget correctly handles
+                screen rotations and other resizes, e.g. if the softkey bar is hidden / shown. Fourth,
+                the widget looks can be customized without needing to touch any code - simply by changing
+                the UI.css and image files that you can find in the WRTKit/Resources directory.
+            </p>
+
+            <p>
+
+                But perhaps more important than any of the above is the fact that the WRTKit simplifies
+                the separation of user interface code from data and logic code. That's not something
+                that is apparent in a simple widget like this one, but it becomes very important as
+                you create something more complex and especially if the user interface contains elements
+                that are created dynamically for example based on data that has been fetched from the
+                Internet using AJAX.
+            </p>
+
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.html">Hello World</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Customizing_the_WRTKit_look-GUID-43369c51-23cf-41ac-a2f4-6320dc6eda9a.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Customizing the WRTKit look" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-43369C51-23CF-41AC-A2F4-6320DC6EDA9A" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Customizing the WRTKit look</title>
+</head>
+<body id="GUID-43369C51-23CF-41AC-A2F4-6320DC6EDA9A"><a name="GUID-43369C51-23CF-41AC-A2F4-6320DC6EDA9A"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Customizing the WRTKit look</h1>
+
+    <div>
+
+        <p>
+
+            All visuals in the WRTKit are defined using CSS and images that are 
+            located inside the WRTKit library in the Resources directory. The 
+            code that implements the WRTKit user interface elements does not 
+            actually know or care what the user interface looks like. Instead 
+            the code creates an HTML element hierarchy to implement each control 
+            and view and then sets CSS style class names to these elements. 
+            Whenever the state changes (e.g. the control gets focused) the class 
+            names are updated to reflect the new state. The CSS in the Resources 
+            directory defines the style rules for the class names and visuals 
+            are applied to the controls and views like for any other CSS styled 
+            HTML elements. This results in a system where only CSS and images 
+            need to be modified in order to implement a new look for a custom 
+            WRTKit user interface - but no JavaScript code.
+        </p>
+
+        <p>
+
+            All CSS rules for the WRTKit are defined in a file called UI.css in 
+            the WRTKit library Resources directory. This file defines hundreds 
+            of style classes and can seem intimidating and complex, but the 
+            principle behind the classes is actually very simple. Each HTML 
+            element in each control has a common class and a set of state-
+            specific classes. E.g. the text element in the NavigationButton 
+            control has "NavigationButtonText", "NavigationButtonTextNormal", 
+            "NavigationButtonTextFocus", etc. The classes are applied based on 
+            the current state of that element. So in our example if the button 
+            was focused, the text element would be assigned the CSS classes 
+            "NavigationButtonText" and "NavigationButtonTextFocus". Two classes 
+            define all of the styling for the text element portion of the 
+            NavigationButton control in the focused state.
+        </p>
+
+        <p>
+
+            Using two classes at the same time is convenient because it allows 
+            common elements to be defined in the common class and only special 
+            adaptations of that common rule in the state-specific class. One 
+            pattern that is repeated throughout the WRTKit is to define a 
+            background image in the common class and an image position offset in 
+            the state-specific class. This makes switching from one state to 
+            another (e.g. when a checkbox is checked) very straight forward. 
+            Even if the graphics appear to change, no images need to be loaded 
+            or switched but instead just the image offset changes and the result 
+            is that the graphics have changed.
+        </p>
+
+        <p>
+
+            Controls and views use HTML element hierarchies that are fine 
+            grained enough that various kinds of layout customizations can be 
+            applied without having CSS styles affect parts of a control that 
+            they were not intended to affect. The result is more CSS rules and 
+            more expansive element hierarchies, but also more freedom and 
+            flexibility.
+        </p>
+
+        <p>
+
+            In most cases all that is needed to change the visuals of a WRTKit 
+            user interface is to modify the images in the Resource directory and 
+            update the color definitions for controls in the CSS file. The image 
+            files that supply graphics to views and controls in the Resource 
+            directory are named with clear names to make customization easy. 
+            Just make a backup copy of the default graphics and CSS styles and 
+            experiment! You will probably be surprised at how easy it is to make 
+            a custom user interface theme!
+        </p>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Design_considerations-GUID-cd4c583d-e6d8-4aab-b2d8-dba09dd7a009.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit design considerations" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-CD4C583D-E6D8-4AAB-B2D8-DBA09DD7A009" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit design considerations</title>
+</head>
+<body id="GUID-CD4C583D-E6D8-4AAB-B2D8-DBA09DD7A009"><a name="GUID-CD4C583D-E6D8-4AAB-B2D8-DBA09DD7A009"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit design considerations</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+User interface design</h2>
+
+            
+            <p>
+
+                The WRTKit uses views and controls as the basis for all user 
+                interfaces, and those views and controls have a look and feel that 
+                is more similar to mobile device applications than to web pages, 
+                despite the fact that the underlying technology is HTML, CSS and 
+                JavaScript. The WRTKit supports both the tab and pointer based 
+                navigations modes but staying true with the application-like look 
+                and feel, it's often a good idea to use the tab navigation mode as 
+                that will probably be more familiar to users.
+            </p>
+
+            <p>
+
+                Consistency and clarity help guiding the user through the widget 
+                user interface. As the saying goes, less is more. Instead of having 
+                a huge user interface that users must scroll through to get to what 
+                they want, consider dividing the user interface into multiple views 
+                that only contain controls and functionality that logically fits 
+                together. Use NavigationButton controls or the Options menu for 
+                navigation between the views.
+            </p>
+
+            <p>
+
+                Keep in mind that the right softkey can be programmatically changed. 
+                You can take advantage of this, for example so that you use it to 
+                allow users to return back to the previous or parent view.
+            </p>
+
+            <p>
+
+                Consider placing all configurable options in a view that the user 
+                can access from the Options menu. If there are more configurable 
+                options than what fits within one or two screenfuls then it's 
+                probably a good idea to split them into multiple views.
+            </p>
+
+            <p>
+
+                Errors happen so keep those in mind when designing the widget.
+                The WRTKit offers easy to use notification popup dialogs that
+                can be used to show error messages in a way that will be familiar
+                to the user.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Security</h2>
+
+            
+            <p>
+
+                Most of methods in the WRTKit that accept strings as parameters 
+                use XHTML in their values. This allows the use of custom styles 
+                and other rich content in control and view captions, label 
+                values, content in content panels, and more. But like always 
+                when dealing with untrusted data from the Internet, you have to 
+                be careful with the data that you display in the user interface 
+                so that you don't end up placing malicious HTML (e.g. with 
+                script tags containing hostile code) into your user interface.
+            </p>
+
+            <p>
+
+                Always filter the content that you fetch using AJAX to make sure 
+                that no HTML tags have been injected into that content. This is 
+                a good idea in any case even if there are no malicious intents, 
+                since arbitrary HTML mixed into content can easily cause your 
+                user interface to behave in unpredictable ways.
+            </p>
+
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html">Overview of the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit Developer's Guide" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-1758770C-BB60-4390-B6DE-9EB5B8EF399F" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit Developer's Guide</title>
+</head>
+<body id="GUID-1758770C-BB60-4390-B6DE-9EB5B8EF399F"><a name="GUID-1758770C-BB60-4390-B6DE-9EB5B8EF399F"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit Developer's Guide</h1>
+
+    <div>
+
+        <p>
+
+            The Developer's Guide is intended for developer's who wish to use
+            the WRTKit to develop user interfaces in their own widgets. The
+            guide is divided into three parts: an overview of what the WRTKit
+            is and how it works, a more detailed description of the various
+            components in the WRTKit and the components fit together, and
+            finally a description of common WRTKit tasks.
+        </p>
+
+    </div>
+
+<div>
+<ul class="ullinks">
+<li class="ulchildlink"><strong><a href="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html">Overview of the WRTKit</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></strong><br />
+</li>
+</ul>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Developing widgets using the WRTKit" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_High_level_view_of_the_WRTKit-GUID-a3abe57e-9a71-4f94-923a-b84ccd1b0905.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Control_states-GUID-f98575ac-f913-466d-a790-0ff0207463a3.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Views_and_the_UIManager-GUID-f95b4ad6-0e86-4023-8371-3ff2a45e95fe.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Notification_popups-GUID-8696212c-4114-412a-9990-ef9755fc1942.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Displaying_content-GUID-57647864-5231-47e5-8ad5-f2adb1848760.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Actions-GUID-38771443-166b-4112-9569-c07229cd7449.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Selections-GUID-23145d13-f2e7-48be-b24b-bc49754b2919.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Text_entry-GUID-b52e3343-5a39-4a83-ae97-461a53761207.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Separator-GUID-ec82d9ea-6b88-48c6-92c2-09a4dd56b31a.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-A321DB96-0A01-4E55-B24B-96905F40CB5C" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Developing widgets using the WRTKit</title>
+</head>
+<body id="GUID-A321DB96-0A01-4E55-B24B-96905F40CB5C"><a name="GUID-A321DB96-0A01-4E55-B24B-96905F40CB5C"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Developing widgets using the WRTKit</h1>
+
+    <div>
+
+        <p>
+
+            This section of the Developer's Guide describes the WRTKit in detail,
+            presents the various components that make up the WRTKit library and
+            explains hwo the components fit together.
+        </p>
+
+    </div>
+
+<div>
+<ul class="ullinks">
+<li class="ulchildlink"><strong><a href="WRTKit_High_level_view_of_the_WRTKit-GUID-a3abe57e-9a71-4f94-923a-b84ccd1b0905.html">High level view of the WRTKit</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Control_states-GUID-f98575ac-f913-466d-a790-0ff0207463a3.html">Control states</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Views_and_the_UIManager-GUID-f95b4ad6-0e86-4023-8371-3ff2a45e95fe.html">Views and the UIManager</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Notification_popups-GUID-8696212c-4114-412a-9990-ef9755fc1942.html">Notification popups</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Displaying_content-GUID-57647864-5231-47e5-8ad5-f2adb1848760.html">Displaying content</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Actions-GUID-38771443-166b-4112-9569-c07229cd7449.html">Actions</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Selections-GUID-23145d13-f2e7-48be-b24b-bc49754b2919.html">Selections</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Text_entry-GUID-b52e3343-5a39-4a83-ae97-461a53761207.html">Text entry</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Separator-GUID-ec82d9ea-6b88-48c6-92c2-09a4dd56b31a.html">Separator</a></strong><br />
+</li>
+</ul>
+
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.html">WRTKit Developer's Guide</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Displaying_content-GUID-57647864-5231-47e5-8ad5-f2adb1848760.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Displaying content" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-57647864-5231-47E5-8AD5-F2ADB1848760" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Displaying content</title>
+</head>
+<body id="GUID-57647864-5231-47E5-8AD5-F2ADB1848760"><a name="GUID-57647864-5231-47E5-8AD5-F2ADB1848760"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Displaying content</h1>
+
+    <div>
+
+        <p>
+
+            The WRTKit contains two controls that are intended simply for displaying content 
+            of some kind. The simplest of these is the Label control, which is simply 
+            showing a piece of text below its caption. Labels are useful in situations where 
+            there is some short data that needs to be shown without requiring any kind of 
+            interactivity. E.g. in an address book widget, each information field for a 
+            contact could be shown using its own label. One label for the contact's name, 
+            one for the phone number, etc. The control caption would indicate what the 
+            information is (e.g. "Name") and the label's value would indicate the actual
+            piece of data (e.g. "John Smith").
+        </p>
+
+        <p>
+
+            For situations where the content is more complex or longer, the WRTKit offers a 
+            control called ContentPanel. The ContentPanel control can be foldable or non-
+            foldable. In its non-foldable mode a ContentPanel is similar to the label 
+            control and shows a caption and a content area. In the foldable mode the caption 
+            area is interactive and can be used to collapse and expand the content area. 
+            This helps shortening the space that the content takes up on in a view, while 
+            still allowing users to expand interesting content for a closer look. E.g. an 
+            email reader widget could use this to show each email in a folder in its own 
+            content panel so that the control caption is the email subject and the content 
+            area contains the full email.
+        </p>
+
+        <div class="fignone" id="GUID-57647864-5231-47E5-8AD5-F2ADB1848760__GUID-741DA525-1982-4CCE-9D99-926B6719716F"><a name="GUID-57647864-5231-47E5-8AD5-F2ADB1848760__GUID-741DA525-1982-4CCE-9D99-926B6719716F"><!-- --></a><span class="figcap">Figure 1. 
+Foldable content panel</span>
+
+            
+            <br /><img src="RSS_Reader_Main_Screenshot_2.png" /><br />
+        </div>
+
+        <p>
+
+            Foldable ContentPanel controls can be created either in expanded or collapsed 
+            mode and can be programmatically expanded and collapsed in addition to allowing 
+            users to manually expand and collapse them.
+        </p>
+
+        <p>
+
+            If a non-folding ContentPanel control is used without a caption, it is for all 
+            practical purposes just a canvas to which any content can be inserted. The 
+            content in the content panel area is defined as an XHTML fragment and can be used 
+            to include arbitrarily complex content, e.g. content that contains images, 
+            JavaScript code, etc.
+        </p>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Feed_updates-GUID-25cd0e54-0516-4469-965e-c5781cf44dc9.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,633 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Feed updates" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-25CD0E54-0516-4469-965E-C5781CF44DC9" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Feed updates</title>
+</head>
+<body id="GUID-25CD0E54-0516-4469-965E-C5781CF44DC9"><a name="GUID-25CD0E54-0516-4469-965E-C5781CF44DC9"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Feed updates</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Fetching news items</h2>
+
+            
+            <p>
+
+                Before we can show any news items we have to fetch them. So let's take
+                a break in implementing the user interface and write the code that fetches
+                the news items. The majority of that code is in the FeedUpdateBroker.js file
+                in a JavaScript class called FeedUpdateBroker. We'll only be using one single
+                method from that class: fetchFeed(). But how do we hook that up to our widget?
+            </p>
+
+            <p>
+
+                The actual call to fetchFeed() will be done from the timer function updateFeedTimerFunc()
+                that runs once a second. There we'll need an if-clause that checks if it's time
+                to update the feeds, if another update is already going on, if we have a valid URL
+                that we can fetch and if we're in the main view. If all of these tests tell us
+                that it's time to update the feed, we'll check if the feed update was manually
+                commanded or automatically triggered because it was time to update the feed in
+                the background. If this is a manual update then we'll popup a progress notification 
+                dialog. Next we'll create a new instance of the FeedUpdateBroker class and call
+                the fetchFeed() method to start the AJAX-based RSS feed update. We need to pass
+                two arguments to this method: the feed URL that we have in the feedURL variable
+                and a callback function that should be called when the update is completed.
+            </p>
+
+            <p>
+
+                We don't have that function yet so that's the first thing we need to implement.
+                We'll leave it empty for now but return to it in a bit:
+            </p>
+
+<pre>
+
+// Callback function that gets called when a feed update has completed.
+function feedUpdateCompleted(event) {
+}
+</pre>
+
+            <p>
+
+                After we call the fetchFeed() function we'll schedule the next feed update. In
+                theory we shouldn't do this until the feed update completes since there is a risk
+                that we do two updates at the same time. But because we're adding a check to
+                only do feed updates if another update isn't on-going this risk isn't actually
+                real. Now that we have a plan for how to update the feed, let's write the code.
+                First we need to declare a variable for the feed update broker instance that
+                we'll create:
+            </p>
+
+<pre>
+
+// Feed update broker.
+var feedUpdateBroker = null;
+</pre>
+
+            <p>
+
+                Then the actual implementation for the updateFeedTimerFunc() timer function:
+            </p>
+
+<pre>
+
+// Timer function for feed updates - called once every second.
+function updateFeedTimerFunc() {
+    var now = new Date().getTime();
+    
+    // check if a feed update has been scheduled, if it's time to update now,
+    // and if there's no update currently in progress and if we're in the main view
+    if ((feedURL != null) &amp;&amp;
+                (feedUpdateTime != -1) &amp;&amp;
+                (now &gt; feedUpdateTime) &amp;&amp;
+                (feedUpdateBroker == null) &amp;&amp; 
+                (uiManager.getView() == mainView)) {
+        // show progress dialog if this is a commanded feed update
+        if (feedUpdateCommanded) {
+            // no auto hiding, wait-type notification, unknown progress
+            uiManager.showNotification(-1, "wait", "Loading feed...", -1);
+        }
+        
+        // fetch the feed from the specified URL
+        feedUpdateBroker = new FeedUpdateBroker();
+        feedUpdateBroker.fetchFeed(feedURL, feedUpdateCompleted);
+        
+        if (feedUpdateFrequency != -1) {
+            // schedule next update
+            feedUpdateTime = now + feedUpdateFrequency;
+        } else {
+            // feed update frequency is "never"
+            feedUpdateTime = -1;
+        }
+    }
+}
+</pre>
+
+            <p>
+
+                The progress dialog is created so that it has a display time of -1 so that
+                it doesn't automatically hide but rather has to be commanded to go away. The
+                notification dialog type is "wait" and we'll give a progress of -1 since we
+                don't know how far along in the feed updating process we are. A negative 
+                progress value like -1 means "unknown progress" and will result in an animated
+                progress indicator that shows that something is going on but the exact time
+                that it will take is unknown.
+            </p>
+
+            <p>
+
+                Our feed updating should now be working and whenever a feed update is completed
+                there should be a call to the empty feedUpdateCompleted() function. Let's 
+                continue the implementation there.
+            </p>
+
+            <p>
+
+                When the feedUpdateCompleted() function is called it receives an event object
+                from the FeedUpdateBroker. This object contains a status that is either "ok"
+                or "error", a "lastModifiedTime" string that contains the time when the RSS
+                feed was last modified to help us decide if there are any new news items to
+                display, as well as an array of news item objects in a property called "items".
+                If the status is "error" then we'll show an error notification dialog. Keep in
+                mind that there might or might not be a progress dialog already showing at this
+                time. Either way we can just call the showNotification() function in the user
+                interface manager because if another dialog is already visible then it will simply
+                replace it with the one that we asked it to show. If the status is "ok" then we'll
+                call hideNotification() in the user interface manager. This will hide the progress
+                dialog if it's showing and if the dialog wasn't showing then the call will just
+                be ignored.
+            </p>
+
+            <p>
+
+                We'll then need to compare the lastModifiedTime against the last news feed that
+                we have. That means we'll need to track the lastModifiedTime of whatever news
+                feed that we are showing, and that means we need a new global variable:
+            </p>
+
+<pre>
+
+// Time when the feed was last modified.
+var feedLastModified = null;
+</pre>
+
+            <p>
+
+                If the lastModifiedTime is different from the one that we are storing in the
+                feedLastModified variable then we know that there's new news items to show.
+                If this is the case then we'll update the feedLastModified time and set the news
+                items to the main view. We could do something fancy and only update the news items
+                that have been modified but to keep the tutorial simple we'll just simply remove
+                all the current items and replace them with the new items and then focus the first
+                of the items. But before we move on to that we'll write as much as we can of the
+                feedUpdateCompleted() function:
+            </p>
+
+<pre>
+
+// Callback function that gets called when a feed update has completed.
+function feedUpdateCompleted(event) {
+    if (event.status == "ok") {
+        // if there aren't any feed items yet, we'll hide the progress dialog
+        if (feedUpdateCommanded) {
+            uiManager.hideNotification();
+        }
+        
+        // check if the feed has updated
+        if (event.lastModified != feedLastModified) {
+            // remember the last modified timestamp
+            feedLastModified = event.lastModified;
+            
+            // update news item controls here
+        }
+    } else {
+        // show error message
+        uiManager.showNotification(3000, "warning", "Error while updating feed!&lt;br/&gt;(check network settings)");
+    }
+    
+    // null the broker reference to indicate that there's no current
+    // update in progress
+    feedUpdateBroker = null;
+        
+    // reset commanded feed update flag
+    feedUpdateCommanded = false;
+}
+</pre>
+
+            <p>
+
+                We wrote a comment "update news item controls here" at the spot where we will
+                actually create and add news feed items to the main view. We'll replace that in
+                a bit with the actual code to do the job, but first we need to write some code
+                that we'll need to do that.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Showing news items</h2>
+
+            
+            <p>
+
+                The news feed items will be shown using ContentPanel controls. We'll need a way
+                to keep track of the ones we're showing so that we can easily remove them when
+                there is new news items to show. Let's create an array to track them:
+            </p>
+
+<pre>
+
+// Reference to current feed items controls.
+var feedItemControls = [];
+</pre>
+
+            <p>
+
+                Now we can implement a function that will remove all controls that are tracked
+                by this array from the main view. We'll use this as the first step when we want
+                to display news items.
+            </p>
+
+<pre>
+
+// Removes feed items.
+function removeFeedItems() {
+    // remove all current feed items from the main view
+    for (var i = 0; i &lt; feedItemControls.length; i++) {
+        mainView.removeControl(feedItemControls[i]);
+    }
+    
+    // reset feed item control array
+    feedItemControls = [];
+}
+</pre>
+
+            <p>
+
+                The function simply loops through the array and calls the removeControl() method
+                in the main view to remove each of the feed item controls from the view, one at a time.
+                Finally we'll reset the feedItemControls array so that it reflects the fact that
+                there are no more controls in the main view.
+            </p>
+
+            <p>
+
+                What about adding news items? We'll do that in a function that we'll call from the
+                feedUpdateCompleted() function. Let's call the function setFeedItems(). The function
+                will start by calling the removeFeedItems() function we just created to empty the 
+                main view from news items before we start adding new ones to it. After this we'll
+                loop through the news feed items that were handed to us from the FeedUpdateBroker.
+                For each one we need a ContentPanel control. We'll be recycling the controls instead
+                of constantly creating new ones over and over again as new news items come in. To
+                this end we'll need a way to track ContentPanel controls that we have already
+                created. We'll do this by creating an array called feedItemControlPool, which will
+                be a global variable:
+            </p>
+
+<pre>
+
+// Feed item control pool.
+var feedItemControlPool = [];
+</pre>
+
+            <p>
+
+                If we have enough controls in the pool we'll just take them from there. Otherwise
+                we'll create a new ContentPanel and add it to the pool. Either way we'll end up with
+                a ContentPanel control that is ready to be used. We'll need to reset its state since we
+                recycled it, so we make sure it's collapsed rather than expanded, we'll set its caption
+                to the title of the news item and we'll generate some HTML from the news item summary
+                that we'll set as the content for the ContentPanel. And then finally we'll add the
+                ContentPanel to the main view.
+            </p>
+
+            <p>
+
+                Lets create the code but skip the HTML for the news item summary for now:
+            </p>
+
+<pre>
+
+// Sets feed items.
+function setFeedItems(items) {
+    // start by removing all current feed items
+    removeFeedItems();
+    
+    // create new feed items and add them to the main view
+    // use feed item pool to recycle controls
+    for (var i = 0; i &lt; items.length; i++) {
+        // get a feed item control from the pool or create one and
+        // place it in the pool if there aren't enough feed item controls
+        var feedItemControl;
+        if (i == feedItemControlPool.length) {
+            feedItemControl = new ContentPanel(null, null, null, true);
+            feedItemControlPool.push(feedItemControl);
+        } else {
+            feedItemControl = feedItemControlPool[i];
+        }
+        
+        // initialize feed item control
+        var item = items[i];
+        feedItemControl.setCaption(item.title);
+        feedItemControl.setContent("placeholder");
+        feedItemControl.setExpanded(false);
+        
+        // add the feed item control to the main view
+        feedItemControls.push(feedItemControl);
+        mainView.addControl(feedItemControl);
+    }
+}
+</pre>
+
+            <p>
+
+                The items argument contains the array of news items that we received in the event
+                object argument to the feedUpdateCompleted() callback function. The items are in
+                the "items" property of the event object. Note how the feedItemControl is either
+                created or taken from the feedItemControlPool. If it's created it is given four
+                arguments: a null unique identifier because we don't need one, a null caption and
+                a null content because we will set both every time before we show it, and finally
+                a value of true to the "foldable" argument in the ContentPanel constructor. This
+                flag determines whether the ContentPanel can be folded (expanded and collapsed) or
+                not. We want a foldable one so we pass true to this argument.
+            </p>
+
+            <p>
+
+                Once we have the ContentPanel (either from the pool or newly created) we set its
+                state: caption, content and expanded state. Note that for now we'll just set a
+                placeholder string as the content. Also note that we set the expanded state to false
+                to collapse the news items by default. Finally we add the content panels to the main
+                view and to the feedItemControls array that tracks all the ContentPanels that we use
+                for the news items.
+            </p>
+
+            <p>
+
+                Now that we have written the code to create and add news items to the main view
+                we have to hook that up to the feedUpdateCompleted() function. Remember we added
+                a comment in the spot where we should return to do this? Let's replace that comment
+                with the following:
+            </p>
+
+<pre>
+
+// set feed items to the main view
+setFeedItems(event.items);
+
+// focus the first feed item control
+// (but only if we are in the main view)
+if (uiManager.getView() == mainView &amp;&amp; feedItemControls.length &gt; 0) {
+    feedItemControls[0].setFocused(true);
+}
+</pre>
+
+            <p>
+
+                We just call the setFeedItems() function we just wrote, passing it the feed items
+                that the FeedUpdateBroker fetched and parsed for us, and then if we're in the main
+                view we'll focus the first of the news feed item controls.
+            </p>
+
+            <p>
+
+                Now that we have all the code needed to fetch and update news feed items we'll go
+                back and add some more functionality to a function we wrote a little bit earlier:
+                the saveSettingsClicked() function.
+            </p>
+
+            <p>
+
+                The functionality that we're adding will handle updates of the feed items in the
+                main view after the user has modified the settings. We didn't write this earlier
+                because we didn't have all the necessary support code in place but we can add it now.
+                First we add some code to the end of the saveSettingsClicked() function to force an
+                update of the news items after the users saves the settings:
+            </p>
+
+<pre>
+
+// update the feed
+feedLastModified = null;
+updateFeed();
+</pre>
+
+            <p>
+
+                We update the feed by setting the feedLastModified variable to null to force an update
+                and then calling updateFeed(). This causes an immediate feed update and we also get the
+                progress notification dialog, which is what we want because this was a manual
+                update that was caused by the user clicking "save".
+            </p>
+
+            <p>
+
+                Let's also add some code that checks if a new feed was selected and removes all the
+                news items from the main view if the user selected a new feed. To do this we'll first
+                copy the old feedURL to a variable that we'll call oldFeedURL at the very beginning
+                of the function:
+            </p>
+
+<pre>
+
+// remember the old feed URL
+var oldFeedURL = feedURL;
+</pre>
+
+            <p>
+
+                Then we'll add the following just before we show the main view:
+            </p>
+
+<pre>
+
+// remove all feed items if the user selected a new feed
+if (feedURL != oldFeedURL) {
+    removeFeedItems();
+}
+</pre>
+
+            <p>
+
+                We can now test this in a PC browser, handset or emulator. Everything should work
+                except that there's still nothing but a placeholder for the actual content in each
+                ContentPanel. You can still expand and collapse the ContentPanels and the settings
+                and automatic and manual updates are working. We're almost done but we still need
+                to implement the code that will actually show news item summaries in the content
+                panels.
+            </p>
+
+            <p>
+
+                Remember we said that we would implement news items so that there's a link from
+                each news item to the website where the full article is. When you open links
+                to external websites in the S60 Web Runtime you should use the widget.openURL()
+                function. But PC browsers don't have that function so we'll need to create a wrapper
+                function that either calls widget.openURL() if we're in the Web Runtime or just
+                opens a new window if we're in a PC browser.
+            </p>
+
+<pre>
+
+// Opens a URL.
+function openURL(url) {
+    if (window.widget) {
+        // in WRT
+        widget.openURL(url);
+    } else {
+        // outside WRT
+        window.open(url, "NewWindow");
+    }
+}
+</pre>
+
+            <p>
+
+                Content in a ContentPanel control is a fragment of HTML. In other words it's a
+                piece of HTML that will be inserted into the control using code. That means that
+                in order to display the news item we will have to generate some HTML for it.
+                We need a function that will take a news item object and return some HTML that
+                we can give to thet setContent() method in the ContentPanel control. Let's write
+                that function:
+            </p>
+
+<pre>
+
+// Returns the content HTML for a feed item.
+function getContentHTMLForFeedItem(item) {
+    var buf = "";
+    
+    // item date
+    if (item.date != null) {
+        buf += "&lt;div class=\"FeedItemDate\"&gt;" + item.date + "&lt;/div&gt;";
+    }
+    
+    // item description
+    if (item.description != null) {
+        buf += "&lt;div class=\"FeedItemDescription\"&gt;" + item.description + "&lt;/div&gt;";
+    }
+    
+    // item URL
+    if (item.url != null) {
+        buf += "&lt;div class=\"FeedItemLink\"&gt;";
+            buf += "&lt;a href=\"JavaScript:openURL('" + item.url + "');\"&gt;";
+            buf += "Read more...";
+            buf += "&lt;/a&gt;";
+        buf += "&lt;/div&gt;";
+    }
+    
+    return buf;
+}
+</pre>
+
+            <p>
+
+                The function uses the properties in the news item object that the FeedUpdateBroker
+                created for us. There's a date property that has the publish date of the news item.
+                There's a description that contains the actual summary, and there's a URL that points
+                to the website where the full article is. Note that we're using the openURL() wrapper
+                function that we just wrote for the link to the full article.
+            </p>
+
+            <p>
+
+                Our HTML is very simple: three div-tags that have the date, description and a link as
+                their content. And ech of them has a CSS class so that we can match them with some
+                style rules. Since we have three different pieces of data we need three CSS rules:
+                FeedItemDate for the date, FeedItemDescription for the news item summary and finally
+                FeedItemLink for the link to the website. Let's create these in the RSSReader.css
+                stylesheet file:
+            </p>
+
+<pre>
+
+
+/* Feed item date */
+.FeedItemDate {
+    font-style: italic;
+}
+
+/* Feed item text */
+.FeedItemDescription {
+    padding: 4px 0px;
+}
+
+/* Feed item links */
+.FeedItemLink {
+    
+}
+
+/* Anchor tags in the context of a feed item link */
+.FeedItemLink a {
+    text-decoration: underline;
+    font-weight: bold;
+    color: rgb(0,0,255);
+}
+
+/* Focused anchor tags */
+.FeedItemLink a:focus {
+    background: rgb(0,0,255);
+    color: rgb(255,255,255);
+}
+</pre>
+
+            <p>
+
+                The rule for links can be left empty because we will just use default ContentPanel
+                content styling. However we'll change the way the link looks in the context of that
+                FeedItemLink div. We'll make links blue, bold and underlined in their normal state
+                and inverse with a blue background and white text color when focused.
+            </p>
+
+            <p>
+
+                Now that we have a function that generates HTML for the ContentPanel we can remove
+                the placeholder content replace it with a call to our function:
+            </p>
+
+<pre>
+
+feedItemControl.setContent(getContentHTMLForFeedItem(item));
+</pre>
+
+            <p>
+
+                We're done! Now you can try the widget in a PC browser and then on the handset
+                or emulator.
+            </p>
+
+            <div class="fignone" id="GUID-25CD0E54-0516-4469-965E-C5781CF44DC9__GUID-F7A5DBAA-7F9F-4C48-A25A-0DACE463CBF4"><a name="GUID-25CD0E54-0516-4469-965E-C5781CF44DC9__GUID-F7A5DBAA-7F9F-4C48-A25A-0DACE463CBF4"><!-- --></a><span class="figcap">Figure 1. 
+RSS Reader main view</span>
+
+                
+                <br /><img src="RSS_Reader_Main_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+What we have learned</h2>
+
+            
+            <p>
+
+                The RSS Reader tutorial has taught us several things. We have learned to create a widget
+                that has more than just one view. We have learned how to use several new WRTKit controls.
+                We used the SelectionList, SelectionMenu and FormButton controls in our settings view, 
+                and in the main view we used the ContentPanel control that allowed us to add our own
+                content as a seamless part of the rest of the user interface using HTML fragments that
+                we styled with CSS rules. We have learned to modify a view while the widget runs by adding
+                and removing controls. And we have learned how to separate our widget code so that the
+                user interface code doesn't contain any logic code and so that the logic code doesn't
+                contain any user interface code.
+            </p>
+
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html">RSS Reader</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_FormButton_Class-GUID-9f99492d-b232-4a78-baed-bd284839b367.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,278 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit FormButton Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-9F99492D-B232-4A78-BAED-BD284839B367" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit FormButton Class</title>
+</head>
+<body id="GUID-9F99492D-B232-4A78-BAED-BD284839B367"><a name="GUID-9F99492D-B232-4A78-BAED-BD284839B367"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit FormButton Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The FormButton class implements a control that is intended for use in form-style
+                user interfaces. A form button is typically used to let users trigger actions.
+            </p>
+
+            <div class="fignone" id="GUID-9F99492D-B232-4A78-BAED-BD284839B367__GUID-90873EC3-1248-4FC8-A318-06F71E370C67"><a name="GUID-9F99492D-B232-4A78-BAED-BD284839B367__GUID-90873EC3-1248-4FC8-A318-06F71E370C67"><!-- --></a><span class="figcap">Figure 1. 
+FormButton controls</span>
+
+                
+                <br /><img src="FormButton_Controls_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.html">
+ActionControl</a>
+            </p>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-C6970E99-D851-4FC1-BB92-BAA26FD83DB7"><a name="GUID-C6970E99-D851-4FC1-BB92-BAA26FD83DB7"><!-- --></a>
+
+        <h2 class="topictitle2">
+Constructor</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[FormButton] new FormButton(String id, String text)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Creates a new instance of the FormButton class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+id</p>
+
+                        
+
+                            <p>
+
+                                Unique identifier for the control. Can be retrieved using the id property defined
+                                in the UIElement class that this control inherits from. Useful for example to
+                                identify the source of an event in event callback functions or to apply a CSS
+                                rule to only this particular control. The identifier can be null, in which case
+                                no id will be set for the control.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+text</p>
+
+                        
+
+                            <p>
+
+                                Text that is displayed on the face of the button. Typically this should be
+                                a verb that indicates what happens when the button is pressed.
+                                The value is an XHTML string.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    A new instance of the FormButton class.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-26359B98-7773-43B5-A788-E15FCC1F0E41"><a name="GUID-26359B98-7773-43B5-A788-E15FCC1F0E41"><!-- --></a>
+
+        <h2 class="topictitle2">
+getText()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[String] FormButton.getText(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the current text of the button.
+                    The value is an XHTML string.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current text of the button.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-0ACF25DA-ECF5-4D0A-8480-609497840FE4"><a name="GUID-0ACF25DA-ECF5-4D0A-8480-609497840FE4"><!-- --></a>
+
+        <h2 class="topictitle2">
+setText()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] FormButton.setText(String text)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the text of the button. The text is displayed on the face
+                    of the button and indicates what happens when the button is pressed.
+                    The value is an XHTML string.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+text</p>
+
+                        
+
+                            <p>
+
+                                The text to be displayed on the face of the button. Passing null
+                                results in no text.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Handling_events-GUID-a1a86c8a-6e66-4dc8-8967-b5c9c7bc6563.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Handling events" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-A1A86C8A-6E66-4DC8-8967-B5C9C7BC6563" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Handling events</title>
+</head>
+<body id="GUID-A1A86C8A-6E66-4DC8-8967-B5C9C7BC6563"><a name="GUID-A1A86C8A-6E66-4DC8-8967-B5C9C7BC6563"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Handling events</h1>
+
+    <div>
+
+        <p>
+
+            Event handling in the WRTKit is based on the "observer pattern", 
+            meaning that events are reported from the event source to observers 
+            that are said to be "listening" to event notifications. An event 
+            listener is simply a JavaScript function that takes a single 
+            argument: the event message. In fact even that single argument is 
+            optional and if the function is not interested in the event message 
+            then it can simply ignore it.
+        </p>
+
+        <p>
+
+            All views and controls inherit from a common base class called 
+            "UIElement" that defines the mechanics for event observation and 
+            notification. From the point of view of event listeners, the most 
+            important methods are addEventListener() and removeEventListener(). 
+            These two methods are used to register and unregister listener 
+            functions from a view or control.
+        </p>
+
+        <p>
+
+            There are different types of events though, and event listeners are 
+            typically not interested in receiving notifications of all events. 
+            For example an event listener that wants to know when a button has 
+            been pressed doesn't usually care if the pointer is currently 
+            hovering above the button or not. Filtering of event notifications 
+            works based on event type names. E.g. in this case the event 
+            listener would have been added so that it should be called only for 
+            events of the "ActionPerformed" type. The event type is given to the 
+            addEventListener() function when a listener is registered. If a 
+            listener function really wants to be notified of all event types 
+            then null can be specified as the event type. Note that the event 
+            type must also be specified when an event listener is unregistered.
+        </p>
+
+        <p>
+
+            The code below shows a typical event listener function:
+        </p>
+
+<pre>
+
+// Callback for event notifications.
+function handleEvent(event) {
+    // handle event here
+}
+</pre>
+
+        <p>
+
+            The event message is passed to the first argument (called event in 
+            this case) of the event handler function. The event message is a 
+            JavaScript object with three properties: type, source and value. The 
+            type property specifies the event type name and is useful if a 
+            listener function is listening to several types of events. The 
+            source argument is a reference to the source view or control that 
+            sent out the event notification. If a listener function is listening 
+            to events from many different controls then this is useful to figure 
+            out in which of the controls the event occurred. Here the unique 
+            identifier of views and controls can come in handy to identify the 
+            source without needing to retain references to all the source 
+            controls. Finally the value property is a event-type specific 
+            property that contains some information about the event. For example 
+            if the event type is "TextChanged" from a text entry control then 
+            the value would be the new text value that the user has typed into 
+            the control.
+        </p>
+
+        <p>
+
+            The code below demonstrates how to add and remove an event listener
+            to/from a control. The example assumes that the control has already
+            been created and that the ctrl variable refers to it.
+        </p>
+
+<pre>
+
+// add listener to ctrl
+// function to add is handleEvent() for event type "ActionPerformed"
+ctrl.addEventListener("ActionPerformed", handleEvent);
+
+// remove listener from ctrl
+// function to remove is handleEvent() for event type "ActionPerformed"
+ctrl.removeEventListener("ActionPerformed", handleEvent);
+</pre>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Hello World" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-67E0A561-48AC-4938-8F1B-852422B71380" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Hello World</title>
+</head>
+<body id="GUID-67E0A561-48AC-4938-8F1B-852422B71380"><a name="GUID-67E0A561-48AC-4938-8F1B-852422B71380"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Hello World</h1>
+
+    <div>
+
+        <p>
+
+            Whenever you are learning a new programming language or API, the first example
+            you will find is usually called "Hello World" and the WRTKit is no exception.
+            Like most "Hello World" applications this one will be very simple and short, but
+            before we start we'll take a look at what we will need to build the example.
+        </p>
+
+        <p>
+
+            The WRTKit already contains all the files that will be created in this tutorial.
+            If you go to the "Examples" directory in the WRTKit SDK you will find a directory 
+            called "HelloWorld". This directory contains all the files necessary for the widget
+            and all you have to do to try it out on a handset or S60 emulator is to zip up the
+            directory, rename the file to "HelloWorld.wgz" and follow the usual steps to install
+            a widget on the handset or emulator.
+        </p>
+
+        <p>
+
+            The WRTKit Hello World widget is very similar to any other S60 Web Runtime widget.
+            You have an Info.plist file that defines the metadata for the widget, such as its
+            name, version and main HTML file and you have the icon of the widget in a file called
+            Icon.png. The main HTML file for the Hello World widget is called "HelloWorld.html".
+            But it's here that things start to get a little bit different because we're using
+            the WRTKit to create our user interface.
+        </p>
+
+        <p>
+
+            If we didn't use the WRTKit then the HelloWorld.html file would probably contain
+            the text "Hello World" between the &lt;body&gt; and &lt;/body&gt; tags, and that
+            would be it. But when you use the WRTKit you create your user interface using
+            JavaScript rather than HTML. This might sound scary and difficult at first but it
+            actually saves you a lot of typing and gives you a lot of things for free that
+            you would otherwise have to take care of yourself. Our Hello World widget will be
+            quite a bit fancier than one created with just HTML and it will still be very
+            short and simple.
+        </p>
+
+        <p>
+
+            The directory also contains a HelloWorld.js file and a WRTKit directory but we
+            will not talk about those quite yet.
+        </p>
+
+        <p>
+
+            Even though we have already created all the files for you, you might want to
+            type in the code yourself. Either way you will need a text editor. Any text editor
+            will do really but it will make your life considerably easier if you have one that
+            is specialized for programming and offers syntax highlighting for HTML, CSS
+            and JavaScript.
+        </p>
+
+        <p>
+
+            Finally, you will need a handset or emulator that includes the S60 Web Runtime.
+            You can actually work with the WRTKit even without the S60 Web Runtime because
+            the WRTKit works in a normal standards-compliant web browser such as Firefox.
+            But since a PC computer and web browser is quite different from a mobile device
+            it is still recommended that you test your widget on actual devices in order
+            to get a feel for what the widget will actually look and feel like. For quick
+            tests in a PC web browser though, all you have to do is open up the main HTML file
+            in the browser and things should work without any changes to the code.
+        </p>
+
+        <p>
+
+            No other tools or libraries are needed and you're now set to start working on
+            the Hello World widget.
+        </p>
+
+    </div>
+
+<div>
+<ul class="ullinks">
+<li class="ulchildlink"><strong><a href="WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.html">Creating the Hello World widget</a></strong><br />
+</li>
+</ul>
+
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html">WRTKit Tutorials</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_High_level_view_of_the_WRTKit-GUID-a3abe57e-9a71-4f94-923a-b84ccd1b0905.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="High level view of the WRTKit" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-A3ABE57E-9A71-4F94-923A-B84CCD1B0905" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+High level view of the WRTKit</title>
+</head>
+<body id="GUID-A3ABE57E-9A71-4F94-923A-B84CCD1B0905"><a name="GUID-A3ABE57E-9A71-4F94-923A-B84CCD1B0905"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+High level view of the WRTKit</h1>
+
+    <div>
+
+        <p>
+
+            User interfaces in the WRTKit are based on the concepts of "views" and "controls".
+            A control is a user interface element that the user can view or interact with,
+            e.g. buttons, checkboxes, textfields, etc. Views are containers for controls and
+            deal with the layout of controls on the screen in such a way that the user can
+            interact with them in an easy way. Views are conceptually similar to windows in
+            PC applications, but on a mobile device views typically fill the entire screen
+            and only one view can thus be visible at any given time. The WRTKit allows views
+            and controls to be interacted with in both the tab and pointer navigation modes
+            and the navigation mode can even be switched at runtime.
+        </p>
+
+        <div class="fignone" id="GUID-A3ABE57E-9A71-4F94-923A-B84CCD1B0905__GUID-65170EDF-EF04-48AB-A414-1581157DAFA5"><a name="GUID-A3ABE57E-9A71-4F94-923A-B84CCD1B0905__GUID-65170EDF-EF04-48AB-A414-1581157DAFA5"><!-- --></a><span class="figcap">Figure 1. 
+WRTKit-based widget user interface</span>
+
+            
+            <br /><img src="RSS_Reader_Main_Screenshot_3.png" /><br />
+        </div>
+
+        <p>
+
+            The WRTKit is an object oriented user interface toolkit, which means that views 
+            and controls are implemented as JavaScript classes that are instantiated to 
+            objects when they are needed. In order to create a view with two buttons, for 
+            example, a developer writes JavaScript code that instantiates one view 
+            object and two button objects, and then calls a method in the view object asking 
+            it to add the buttons to itself. Being object oriented, the created WRTKit 
+            objects fully maintain their own state and take care of drawing themselves 
+            properly on the screen in all situations. So for example if one of the buttons 
+            is focused, the button modifies its own looks so that it appears focused 
+            on the screen. Because the objects know their own state, they can be queried for 
+            properties as needed. E.g. a textfield can be asked what text it currently
+            contains, a button can be asked if it is enabled, and so on.
+        </p>
+
+        <p>
+
+            Controls in the WRTKit have captions that can be used to show what the control 
+            does. E.g. a textfield that is meant to be used to enter a password could have a 
+            caption "Password". Captions are optional but should be used unless there is a 
+            very good reason not to. The only controls that do not have captions are 
+            buttons, since they have a text on the face of the button that accomplishes the 
+            same thing.
+        </p>
+
+        <p>
+
+            WRTKit user interfaces are managed by a class that is aptly named "UIManager". 
+            Every widget that uses the WRTKit for its user interface creates a single 
+            instance of this class and then uses that UIManager instance to command views to 
+            be displayed. The UIManager takes care of all the heavy lifting that is necessary 
+            to bring a new view to the screen. The UIManager also handles other user 
+            interface duties such as management of notification popup dialogs and view 
+            scrollbars.
+        </p>
+
+        <p>
+
+            Controls and views can notify the outside world when some event occurrs, e.g. 
+            when a button is pressed or someone toggles a checkbox. The WRTKit follows the 
+            so called "observer pattern" in its implementation of event notifications. This 
+            simply means that a control or view can be asked to call a particular JavaScript 
+            function (which is the "observer" or "listener") when an specific type of event 
+            occurrs. The WRTKit allows a control or view to have any number of concurrently 
+            registered listeners and listeners can either ask to be notified of only a 
+            particular type of event or about all events.
+        </p>
+
+        <p>
+
+            The WRTKit library is physically a set of JavaScript, CSS and image files that 
+            are located within a directory called "WRTKit". That directory is copied into 
+            the root directory of widgets that wish to use the library. A widget only needs 
+            to include a single JavaScript file ("WRTKit/WRTKit.js") from the directory in 
+            order to include and initialize the full WRTKit for use in the widget. Once the 
+            WRTKit has been added to the widget and initialized, the widget can start using 
+            the JavaScript classes that the library defines.
+        </p>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Introduction_to_the_WRTKit-GUID-dcf05457-f800-4f05-b284-a4e24ab8be79.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Introduction to the WRTKit" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-DCF05457-F800-4F05-B284-A4E24AB8BE79" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Introduction to the WRTKit</title>
+</head>
+<body id="GUID-DCF05457-F800-4F05-B284-A4E24AB8BE79"><a name="GUID-DCF05457-F800-4F05-B284-A4E24AB8BE79"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Introduction to the WRTKit</h1>
+
+    <div>
+
+        <p>
+
+            The S60 Web Runtime allows developers to use familiar web technologies like 
+            HTML, CSS and JavaScript to create applications called "widgets" very easily. 
+            But because widgets are based on web technologies they look and behave more like 
+            web pages than S60 applications by default, which is not always desirable.
+        </p>
+
+        <p>
+
+            Web pages use a document metaphor where content can be laid out arbitrarily. 
+            Interaction with the web page is based on using a mouse or other similar device 
+            to place a pointer arrow on elements on the web page and activating them by 
+            pressing a button. When the pointer is over some user interface element it is 
+            said to be "hovering". The element that the pointer is hovering over is often 
+            displayed in a distinct style to show that it could be activated if the mouse 
+            button was pressed.
+        </p>
+
+        <p>
+
+            Mobile device applications, on the other hand, have limitations that make this 
+            methapor less than ideal. The screen is small so discipline is needed to lay out 
+            user interface elements in a way that is easy to understand for the user. The 
+            physical controls on a mobile device are also not very suitable for moving 
+            around a pointer arrow on the screen. Instead of having a pointer to select 
+            elements the concept of "focus" is used. One of the elements on the screen is 
+            considered selected and this selection can be moved between the user interface 
+            elements using a 4-way controller. The element that is selected is said to be 
+            "focused". Like for hovering, the focused element is displayed with a distinct 
+            style to set it apart from other elements. This interaction method is called 
+            "tab navigation" due to the fact that the tab key was originally used to move 
+            the focus on PC computers.
+        </p>
+
+        <p>
+
+            The S60 Web Runtime supports both the pointer-based and tab-based interaction 
+            modes so that you can choose the one that fits your widget best. But while 
+            simple user interfaces are easy to implement in both modes, more sophisticated 
+            application-like user interfaces can be quite tricky. Hover and focus must be 
+            handled correctly and the hover and focus states must be displayed consistently 
+            throughout the user interface. Different screen sizes as well as screen resizes 
+            and rotations must be taken into account. User interface controls like buttons, 
+            checkboxes and scrollbars must be able to take on a look that fits the overall 
+            visual theme of the widget, for example that of a commercial brand.
+        </p>
+
+        <p>
+
+            The WRTKit is a complete library of JavaScript code, CSS style rules and 
+            graphical elements that are required to implement the kind of sophisticated, 
+            customizable, application-like user interfaces that are described above. It 
+            gives widget developers an easy way to create high quality user interfaces 
+            without having to worry about the problems that would otherwise plague their 
+            widgets.
+        </p>
+
+        <p>
+
+            When the WRTKit is used in a widget, complex and fully featured user interfaces 
+            can be created with just a few lines of JavaScript code. The WRTKit takes care 
+            of generating all the HTML and CSS automatically behind the scenes. What's more, 
+            the visual look of the user interfaces created by the WRTKit is controlled 
+            entirely using CSS, allowing complete customization without touching any code. 
+            WRTKit user interfaces also work in standards-compliant PC web browsers, 
+            enabling rapid development and debugging using familiar web development tools.
+        </p>
+
+        <div class="fignone" id="GUID-DCF05457-F800-4F05-B284-A4E24AB8BE79__GUID-A4ECC4FA-F3CB-4BD3-8B41-501B77168B29"><a name="GUID-DCF05457-F800-4F05-B284-A4E24AB8BE79__GUID-A4ECC4FA-F3CB-4BD3-8B41-501B77168B29"><!-- --></a><span class="figcap">Figure 1. 
+WRTKit-based widget user interface</span>
+
+            
+            <br /><img src="Travel_Companion_Main_Screenshot_1.png" /><br />
+        </div>
+        
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html">Overview of the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Label_Class-GUID-64730e7f-835f-443a-9322-6753fa72fd09.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,295 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit Label Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-64730E7F-835F-443A-9322-6753FA72FD09" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit Label Class</title>
+</head>
+<body id="GUID-64730E7F-835F-443A-9322-6753FA72FD09"><a name="GUID-64730E7F-835F-443A-9322-6753FA72FD09"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit Label Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The Label class implements a control that displays a simple piece of text. A label
+                is used in situations where there's a caption-value pair that needs to be displayed,
+                e.g. "Name: John Smith".
+            </p>
+
+            <div class="fignone" id="GUID-64730E7F-835F-443A-9322-6753FA72FD09__GUID-E0AEA2A3-8D91-4211-AECA-B94DC6E75BC9"><a name="GUID-64730E7F-835F-443A-9322-6753FA72FD09__GUID-E0AEA2A3-8D91-4211-AECA-B94DC6E75BC9"><!-- --></a><span class="figcap">Figure 1. 
+Label control</span>
+
+                
+                <br /><img src="Label_Control_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html">
+Control</a>
+            </p>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-5AF89342-2A75-4FA0-8817-B34B40AB0D76"><a name="GUID-5AF89342-2A75-4FA0-8817-B34B40AB0D76"><!-- --></a>
+
+        <h2 class="topictitle2">
+Constructor</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Label] new Label(String id, String caption, String text)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Creates a new instance of the Label class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+id</p>
+
+                        
+
+                            <p>
+
+                                Unique identifier for the control. Can be retrieved using the id property defined
+                                in the UIElement class that this control inherits from. Useful for example to
+                                identify the source of an event in event callback functions or to apply a CSS
+                                rule to only this particular control. The identifier can be null, in which case
+                                no id will be set for the control.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+caption</p>
+
+                        
+
+                            <p>
+
+                                The caption text for the control. A null caption can be used to hide the 
+                                caption area. This is not recommended for a label since without a caption
+                                the value of the label doesn't make sense to the user.
+                                The value is an XHTML string.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+text</p>
+
+                        
+
+                            <p>
+
+                                The content for the label. If the argument is omitted or null then the content
+                                area will be empty. The value is an XHTML string.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    A new instance of the Label class.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-7553A084-C1A7-4440-AC95-3CD1F9946419"><a name="GUID-7553A084-C1A7-4440-AC95-3CD1F9946419"><!-- --></a>
+
+        <h2 class="topictitle2">
+getText()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[String] Label.getText(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the current text value of the label.
+                    The value is an XHTML string.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current text value of the label.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-A253368B-0ACB-4F98-992C-93AE4A11245C"><a name="GUID-A253368B-0ACB-4F98-992C-93AE4A11245C"><!-- --></a>
+
+        <h2 class="topictitle2">
+setText()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] Label.setText(String text)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the text value of the label.
+                    The value is an XHTML string.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+text</p>
+
+                        
+
+                            <p>
+
+                                The text to be displayed as the value of the label. Passing null
+                                results in no text.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_ListView_Class-GUID-a7f24a67-d46c-4156-8276-a97b945235d6.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,555 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit ListView Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-A7F24A67-D46C-4156-8276-A97B945235D6" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit ListView Class</title>
+</head>
+<body id="GUID-A7F24A67-D46C-4156-8276-A97B945235D6"><a name="GUID-A7F24A67-D46C-4156-8276-A97B945235D6"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit ListView Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The ListView is a view that arranges controls in a vertical stack similar to
+                native S60 user interfaces.
+            </p>
+
+            <div class="fignone" id="GUID-A7F24A67-D46C-4156-8276-A97B945235D6__GUID-D342BE27-89B4-454F-BC2C-B6FBDEE9112A"><a name="GUID-A7F24A67-D46C-4156-8276-A97B945235D6__GUID-D342BE27-89B4-454F-BC2C-B6FBDEE9112A"><!-- --></a><span class="figcap">Figure 1. 
+ListView with caption</span>
+
+                
+                <br /><img src="Travel_Companion_Main_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_View_Class-GUID-e673fe1a-cf46-46f5-b243-ce7422c69cc5.html">
+View</a>
+            </p>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-73FAF0DC-A0AE-47B8-81A1-F723F1457FA2"><a name="GUID-73FAF0DC-A0AE-47B8-81A1-F723F1457FA2"><!-- --></a>
+
+        <h2 class="topictitle2">
+Constructor</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[ListView] new ListView(String id, String caption)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Creates a new instance of the ListView class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+id</p>
+
+                        
+
+                            <p>
+
+                                Unique identifier for the view. Can be retrieved using the id property defined
+                                in the UIElement class that this control inherits from. Useful for example to
+                                identify the source of an event in event callback functions or to apply a CSS
+                                rule to only this particular view. The identifier can be null, in which case
+                                no id will be set for the view.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+caption</p>
+
+                        
+
+                            <p>
+
+                                The caption text for the view. A null caption can be used to hide the 
+                                caption area. Pass an empty string to this argument in order to show the
+                                caption area but without text. This can be used if a custom image should
+                                be shown instead of text for the view caption. The image can then be 
+                                defined using CSS by providing a background for the .ListViewCaptionText
+                                CSS rule. By specifying the rule only for the id that was specified with
+                                the id argument a custom background can be given to a particular view.
+                                The value is an XHTML string.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    A new instance of the ListView class.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-D382D123-2C88-46B8-8E27-129C91E2C6ED"><a name="GUID-D382D123-2C88-46B8-8E27-129C91E2C6ED"><!-- --></a>
+
+        <h2 class="topictitle2">
+getCaption()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[String] ListView.getCaption(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the current caption of the view.
+                    The value is an XHTML string.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current caption of the view or null if the view doesn't have a caption.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-DB089887-5FD1-4490-8D44-A6B9F5BF0A46"><a name="GUID-DB089887-5FD1-4490-8D44-A6B9F5BF0A46"><!-- --></a>
+
+        <h2 class="topictitle2">
+setCaption()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] ListView.setCaption(String caption)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the caption for the view. A null caption can be used to hide the caption area.
+                    The value is an XHTML string.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+caption</p>
+
+                        
+
+                            <p>
+
+                                The new caption for the view or null for no caption.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-277742B7-93D0-4824-8331-077573478EED"><a name="GUID-277742B7-93D0-4824-8331-077573478EED"><!-- --></a>
+
+        <h2 class="topictitle2">
+getControls()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Array] ListView.getControls(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the controls of this view.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    An array with the controls of this view or an empty array if the view
+                    doesn't have any controls.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-A71AEDB1-3950-48D7-954D-65FB2E8FC0AE"><a name="GUID-A71AEDB1-3950-48D7-954D-65FB2E8FC0AE"><!-- --></a>
+
+        <h2 class="topictitle2">
+addControl()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] ListView.addControl(Control control)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Adds a control to the view. The control is added last, below the currently
+                    last control.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+control</p>
+
+                        
+
+                            <p>
+
+                                The control to add to the view.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-19BF7EC2-A542-412D-A930-D91D8398E3A2"><a name="GUID-19BF7EC2-A542-412D-A930-D91D8398E3A2"><!-- --></a>
+
+        <h2 class="topictitle2">
+insertControl()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] ListView.insertControl(Control control, Control beforeControl)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Inserts a control to the view. The control is added before the control that is
+                    specified using the beforeControl argument.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+control</p>
+
+                        
+
+                            <p>
+
+                                The control to add to the view.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+beforeControl</p>
+
+                        
+
+                            <p>
+
+                                The control that should be immediately after the added control after
+                                the new control is added to the view. If the argument is null or otherwise
+                                invalid (e.g. not a control in this view) then the new control is added last.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-7FC2A00B-9076-44AA-AC0D-43F5B2660D0A"><a name="GUID-7FC2A00B-9076-44AA-AC0D-43F5B2660D0A"><!-- --></a>
+
+        <h2 class="topictitle2">
+removeControl()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] ListView.removeControl(Control control)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Removes a control from the view.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+control</p>
+
+                        
+
+                            <p>
+
+                                The control to remove from the view.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_NavigationButton_Class-GUID-3c5aaba9-899d-463a-8337-b6f7c09e190b.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,418 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit NavigationButton Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-3C5AABA9-899D-463A-8337-B6F7C09E190B" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit NavigationButton Class</title>
+</head>
+<body id="GUID-3C5AABA9-899D-463A-8337-B6F7C09E190B"><a name="GUID-3C5AABA9-899D-463A-8337-B6F7C09E190B"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit NavigationButton Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The NavigationButton class implements a control that is intended for use in navigation
+                menu -style user interfaces. A navigation button is typically used to let users move
+                between views.
+            </p>
+
+            <div class="fignone" id="GUID-3C5AABA9-899D-463A-8337-B6F7C09E190B__GUID-63D51F0D-3760-4F4B-9B59-0B594D79A927"><a name="GUID-3C5AABA9-899D-463A-8337-B6F7C09E190B__GUID-63D51F0D-3760-4F4B-9B59-0B594D79A927"><!-- --></a><span class="figcap">Figure 1. 
+NavigationButton controls</span>
+
+                
+                <br /><img src="NavigationButton_Controls_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.html">
+ActionControl</a>
+            </p>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-F759C60D-D535-47D8-BB64-5F1403236F2A"><a name="GUID-F759C60D-D535-47D8-BB64-5F1403236F2A"><!-- --></a>
+
+        <h2 class="topictitle2">
+Constructor</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[NavigationButton] new NavigationButton(String id, String image, String text)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Creates a new instance of the NavigationButton class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+id</p>
+
+                        
+
+                            <p>
+
+                                Unique identifier for the control. Can be retrieved using the id property defined
+                                in the UIElement class that this control inherits from. Useful for example to
+                                identify the source of an event in event callback functions or to apply a CSS
+                                rule to only this particular control. The identifier can be null, in which case
+                                no id will be set for the control.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+image</p>
+
+                        
+
+                            <p>
+
+                                Icon image that is displayed on the face of the button. No size is enforced but
+                                the image should be about 30x30 pixels. PNG images with transparency are
+                                recommended. If null is passed for the image then no image will be displayed.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+text</p>
+
+                        
+
+                            <p>
+
+                                Text that is displayed on the face of the button. Typically this should be
+                                the view that the widget navigates to when the button is pressed.
+                                The value is an XHTML string.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    A new instance of the NavigationButton class.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-9199B58D-5A98-4A6D-AF18-D6FF1CAAA5EC"><a name="GUID-9199B58D-5A98-4A6D-AF18-D6FF1CAAA5EC"><!-- --></a>
+
+        <h2 class="topictitle2">
+getText()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[String] NavigationButton.getText(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the current text of the button.
+                    The value is an XHTML string.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current text of the button.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-B44BA4D5-E5E0-4711-B295-8039AC7A50A8"><a name="GUID-B44BA4D5-E5E0-4711-B295-8039AC7A50A8"><!-- --></a>
+
+        <h2 class="topictitle2">
+setText()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] NavigationButton.setText(String text)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the text of the button. The text is displayed on the face
+                    of the button and typically should indicate where the widget navigates
+                    when the button is pressed.
+                    The value is an XHTML string.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+text</p>
+
+                        
+
+                            <p>
+
+                                The text to be displayed on the face of the button. Passing null
+                                results in no text.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-47A43DA5-CE78-438C-928D-0F5579A707B3"><a name="GUID-47A43DA5-CE78-438C-928D-0F5579A707B3"><!-- --></a>
+
+        <h2 class="topictitle2">
+getImage()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[String] NavigationButton.getImage(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the icon image URL of the button.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The icon image URL of the button or null if none.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-24F9C276-B75B-45E2-AB2D-ED751CAB18AA"><a name="GUID-24F9C276-B75B-45E2-AB2D-ED751CAB18AA"><!-- --></a>
+
+        <h2 class="topictitle2">
+setImage()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] NavigationButton.setImage(String image)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the icon image URL for the button. Passing null to this method
+                    hides the icon image.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+image</p>
+
+                        
+
+                            <p>
+
+                                The URL of the icon image to display on the button or null for no image.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Notification_popups-GUID-8696212c-4114-412a-9990-ef9755fc1942.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Notification popups" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-8696212C-4114-412A-9990-EF9755FC1942" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Notification popups</title>
+</head>
+<body id="GUID-8696212C-4114-412A-9990-EF9755FC1942"><a name="GUID-8696212C-4114-412A-9990-EF9755FC1942"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Notification popups</h1>
+
+    <div>
+        
+        <p>
+
+            In addition to managing views, the UIManager also handles notification popup 
+            dialogs. Notification popups are used for showing brief messages to the user to 
+            indicate activities and events, such as warnings, information messages or the 
+            progress of some process. Using notification popups is extremely simple and only 
+            requires two methods. Popups can be shown using one method and hidden with 
+            another. Popups can also be set to auto-hide after a specified amount of time.
+        </p>
+
+        <p>
+
+            There are three different types of notification popups: "info", "warning" and 
+            "wait". The type affects only the appearance of the popup. The "wait" type is 
+            intended for use with progress indication.
+        </p>
+
+        <div class="fignone" id="GUID-8696212C-4114-412A-9990-EF9755FC1942__GUID-6F317164-BF78-4CB6-8658-DD397FA357FF"><a name="GUID-8696212C-4114-412A-9990-EF9755FC1942__GUID-6F317164-BF78-4CB6-8658-DD397FA357FF"><!-- --></a><span class="figcap">Figure 1. 
+Wait notification with unknown progress</span>
+
+            
+            <br /><img src="RSS_Reader_Main_Screenshot_3.png" /><br />
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Overview of the WRTKit" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Introduction_to_the_WRTKit-GUID-dcf05457-f800-4f05-b284-a4e24ab8be79.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Terminology-GUID-ebd8d7c4-03f6-498d-becc-eb8d4081ed8b.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Design_considerations-GUID-cd4c583d-e6d8-4aab-b2d8-dba09dd7a009.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-14C414F6-A220-40B6-8614-DF13141495AB" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Overview of the WRTKit</title>
+</head>
+<body id="GUID-14C414F6-A220-40B6-8614-DF13141495AB"><a name="GUID-14C414F6-A220-40B6-8614-DF13141495AB"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Overview of the WRTKit</h1>
+
+    <div>
+
+        <p>
+
+            This section of the Developer's Guide gives an overview of what the 
+            WRTKit is and how it's used, explains the core terminology and 
+            outlines some design considerations for widgets that use the WRTKit.
+        </p>
+
+    </div>
+
+<div>
+<ul class="ullinks">
+<li class="ulchildlink"><strong><a href="WRTKit_Introduction_to_the_WRTKit-GUID-dcf05457-f800-4f05-b284-a4e24ab8be79.html">Introduction to the WRTKit</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Terminology-GUID-ebd8d7c4-03f6-498d-becc-eb8d4081ed8b.html">Terminology</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Design_considerations-GUID-cd4c583d-e6d8-4aab-b2d8-dba09dd7a009.html">WRTKit design considerations</a></strong><br />
+</li>
+</ul>
+
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.html">WRTKit Developer's Guide</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,113 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="RSS Reader" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_RSS_Reader_first_steps-GUID-db42b227-1647-4020-bdb9-dacb26771779.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_RSS_Reader_user_interface-GUID-1083a0c4-a953-4b6e-a4d0-45a031e51c35.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Feed_updates-GUID-25cd0e54-0516-4469-965e-c5781cf44dc9.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-678D197F-C7B0-4E5E-85E2-F8549C75BBE8" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+RSS Reader</title>
+</head>
+<body id="GUID-678D197F-C7B0-4E5E-85E2-F8549C75BBE8"><a name="GUID-678D197F-C7B0-4E5E-85E2-F8549C75BBE8"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+RSS Reader</h1>
+
+    <div>
+
+        <p>
+
+            The RSS Reader example is the first complete, working widget that actually
+            does something useful that you will create using the WRTKit. It is quite a bit
+            more complex than the Hello World example, but then again it also contains
+            a lot more functionality.
+        </p>
+
+        <p>
+
+            For the Hello World widget we covered a lot of very fine details but for the
+            RSS Reader it is assumed that the reader already knows the basics of how to
+            create a widget, deploy it, test it, and so on. If you skipped the Hello World
+            tutorial and feel that you're not comfortable with the basics of creating
+            widgets yet then it's recommended that you go back and read the Hello World
+            widget tutorial first and then come back and continue with the RSS Reader.
+        </p>
+
+        <p>
+
+            The RSS Reader that we're going to build in this tutorial will have two views:
+            a main view that displays news items from an RSS feed and a settings view where
+            the user can configure what news feed should be displayed in the main view and
+            how often it should be updated from the Internet. We will let users choose from
+            a list of feeds that we will pre-configure. In principle you can use whatever
+            RSS feeds you want in your own widget but it's probably best to test first with
+            the ones we have in our example since they have been tested and known to work.
+        </p>
+
+        <p>
+
+            The actual news feed items will be displayed as a list of foldable content
+            panels on the main view. The panels allow the user to see the headline for each
+            piece of news and clicking on the headline will expand the news item so that the
+            actual story summary can be read. At the bottom of the summary we'll place a
+            link to the full story in a similar fashion to many other RSS reader applications.
+        </p>
+
+        <p>
+
+            We will also implement a couple of features to make the widget more user friendly.
+            For example the first time when the widget is started we'll go directly to the
+            settings view to let the user configure the widget before the first use. We'll
+            also show helpful information such as loading progress and any error messages in
+            notification popup windows. And of course all configuration settings will be
+            persistent so that the user doesn't have to re-configure the widget every time
+            its started.
+        </p>
+
+        <p>
+
+            In order to make the widget similar to other S60 applications, we will tweak
+            the softkeys and Options menu so that the settings view can be reached from the
+            menu and so that the right softkey will let the user go back from the settings
+            view to the main view. In the main view the right softkey will be used to exit
+            the widget. We will also allow the user to manually force a refresh of the news
+            items by adding a "Refresh" option to the options menu.
+        </p>
+
+        <p>
+
+            And last but not least, we'll implement the widget so that it will work in a
+            standards-compliant PC web browser such as Firefox. This will allow you to test
+            and debug the widget quickly as you develop it on your PC.
+        </p>
+
+    </div>
+
+<div>
+<ul class="ullinks">
+<li class="ulchildlink"><strong><a href="WRTKit_RSS_Reader_first_steps-GUID-db42b227-1647-4020-bdb9-dacb26771779.html">First steps</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_RSS_Reader_user_interface-GUID-1083a0c4-a953-4b6e-a4d0-45a031e51c35.html">RSS Reader user interface</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Feed_updates-GUID-25cd0e54-0516-4469-965e-c5781cf44dc9.html">Feed updates</a></strong><br />
+</li>
+</ul>
+
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html">WRTKit Tutorials</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_RSS_Reader_first_steps-GUID-db42b227-1647-4020-bdb9-dacb26771779.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,236 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="First steps" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-DB42B227-1647-4020-BDB9-DACB26771779" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+First steps</title>
+</head>
+<body id="GUID-DB42B227-1647-4020-BDB9-DACB26771779"><a name="GUID-DB42B227-1647-4020-BDB9-DACB26771779"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+First steps</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Preparations</h2>
+
+            
+            <p>
+
+                You can find the ready made RSS Reader example in the Examples/RSSReader directory
+                in the WRTKit SDK. In there you can find the by-now familiar widget files: Info.plist
+                for the widget metadata, Icon.png for the S60 application grid icon, and the WRTKit
+                directory for the WRTKit user interface toolkit. You will also find the main HTML
+                file RSSReader.html, a CSS file called RSSReader.css and two JavaScript files
+                RSSReader.js and FeedUpdateBroker.js. As with all WRTKit -based widgets, we will
+                be focusing on the JavaScript files but before we get to those, let's see take a
+                look at the main HTML file:
+            </p>
+
+<pre>
+
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+    &lt;head&gt;
+        &lt;title&gt;&lt;/title&gt;
+        &lt;script type="text/javascript" src="WRTKit/WRTKit.js"&gt;&lt;/script&gt;
+        &lt;script type="text/javascript" src="FeedUpdateBroker.js"&gt;&lt;/script&gt;
+        &lt;script type="text/javascript" src="RSSReader.js"&gt;&lt;/script&gt;
+        &lt;style type="text/css"&gt;
+            @import url("RSSReader.css");
+        &lt;/style&gt;
+    &lt;/head&gt;
+    &lt;body onload="init()"&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+            <p>
+
+                You probably immediately noticed that the file is almost identical to the HTML file
+                for the Hello World widget. This is despite that the RSS Reader is much more complex.
+                In fact the only differences are that we are including the two JavaScript files
+                FeedUpdateBroker.js and RSSReader.js instead of HelloWorld.js as in the Hello World
+                widget. That, and the fact that we have a CSS stylesheet file that we also import here,
+                called RSSReader.css. Like for the Hello World widget we have an onload-event handler
+                that calls a function called init() in the JavaScript to allow us to initialize the
+                widget after everything is loaded.
+            </p>
+
+            <p>
+
+                You can either examine the ready made files or create your own files as you read the
+                tutorial. The tutorial assumes that you will create your own. If you're doing that then
+                now would be a good time to create a working directory for your own widget, call it
+                RSSReader and copy the WRTKit directory, Info.plist, Icon.png and the FeedUpdateBroker.js
+                file to the your own working directory. The FeedUpdateBroker.js is an AJAX-based RSS
+                fetcher and parser that we will be using in this example. It doesn't really have anything
+                to do with the WRTKit or the user interface for the RSS Reader but we need it in order
+                to be able to fetch and parse RSS feed news items. We will not create it in this tutorial
+                and thus you should just copy it to your own widget working directory.
+            </p>
+
+            <p>
+
+                At this point you can also create an empty placeholder for the CSS stylesheet file 
+                (RSSReader.css) so that you have the file ready for when we'll create some CSS rules
+                for the widget. Also create an empty placeholder for the RSSReader.js file where the
+                majority of the widget's code will go. We'll return to this in a little bit!
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Architecture</h2>
+
+            
+            <p>
+
+                Before we write any code, let's talk about what the architecture of the RSS Reader
+                will be like. As we previously mentioned, the widget will have two views. A main
+                view for showing feed news items and a settings view to allow users to configure
+                what RSS feed to show and how often to update it. We also said that we'll have a
+                custom Options menu.
+            </p>
+
+            <p>
+
+                The entire code that implements fetching and parsing RSS feeds will be implemented
+                in the file FeedUpdateBroker.js. The widget code will use it through only one single
+                method: fetchFeed(). The way this works is that we will pass the URL of the RSS
+                feed to the method, as well as a function that will get called when the fetch has
+                been completed. Note that this call is asynchronous - it will immediately return
+                after it's called and the actual outcome of the fetch will not be known until the
+                callback method is called. As an argument to the callback we will receive an object
+                with three properties: status, lastModified and items. The status property will
+                contain a value of either "ok" or "error" depending on the outcome. The lastModified
+                will be present in case the fetch was successful and contains a timestamp that 
+                indicates when the RSS feed was last updated. This will allow us to determine whether
+                there is any new news items or not so that we only update the user interface if there
+                really is something to update. Finally the third property "items" contains an array
+                of parsed RSS news items. Each of these is a JavaScript object that has four
+                properties: title for the news item headline, date to indicate when it was created,
+                description for the news item summary, and link with an URL to the full story.
+            </p>
+
+            <p>
+
+                We will setup a timer in the widget that will run a function once every second. In
+                this function we will compare the current time to a scheduled "next update" time.
+                If we have reached the next update time, we will use the feed update broker to fetch
+                the RSS news items of the feed that we're interested in. When the feed has been
+                fetched and parsed a callback method will be called and we will react to the callback
+                by either showing an error message (if the update failed), ignoring the callback (if
+                there was no new news items for us), or update the user interface (if there's new
+                news items to show).
+            </p>
+
+            <p>
+
+                We also want to be able to update the news items on request and for that we will
+                put an option in the Options menu that triggers a function that sets the next
+                scheduled update time to be immediately. That way the normal update timer will
+                immediately get triggered and cause an update.
+            </p>
+
+            <p>
+
+                We will also set the "next update" time whenever the feed update broker is used
+                to fetch new news items. That way we will get an automatic periodic update of the
+                news that will run in the background but can also be triggered to run immediately
+                if the user asks it to be.
+            </p>
+
+            <p>
+
+                In order to fetch and update news items with this mechanism we need two things:
+                the URL to the RSS feed and the interval between the automatic updates. These are
+                also the two properties that we will allow the user to configure in the settings
+                view. The properties will be stored in the widget preferences store and updated
+                there whenever the user saves the settings. The settings will be read when the
+                widget starts.
+            </p>
+
+            <p>
+
+                When the news items are fetched we will display a notification popup dialog to
+                indicate that the loading is in progress. The main reason why this is important
+                is because the loading takes some time and if we don't react immediately to the
+                user's action then the user will feel like the widget is not responsive. However
+                we don't want to popup a progress dialog every time the widget loads news in the
+                background. That would be really annoying when the user is reading news! This
+                means that we have to know whether the update was triggered manually or if it
+                was scheduled. We'll use a flag to track this and popup the dialog only if the
+                update was commanded by the user.
+            </p>
+
+            <p>
+
+                The settings view will contain four controls: a selection control to select the
+                feed URL, another selection control to select the feed update frequency, a save
+                button and a cancel button.
+            </p>
+
+            <p>
+
+                The main view in turn will contain a variable amount of controls: one for each
+                news item. The control that we will use is a ContentPanel control, which allows
+                us to collapse and expand the content so that we can display a compact list of
+                news headlines yet allow the user to open up a particular piece of news that
+                is interesting and read the summay or go to the website where the full news
+                story can be found. The news item controls will have the news headline as the
+                caption in the control. Unlike for other controls, ContentPanel captions are
+                interactive and can be clicked. When clicked they will toggle the content area
+                of the panel. We will put the actual news story summary in this content area.
+                The news story summary will be a fragment of HTML that we will construct from
+                each news story. The HTML will also include a link to the website where the
+                full story is located. The HTML will be styled by CSS rules that we will write
+                to the RSSReader.css file.
+            </p>
+
+            <p>
+
+                Because we don't know how many news stories we will have at any given time, we
+                will add and remove ContentPanel controls to the main view dynamically whenever
+                there's some update in the RSS feed. But we're environmentally conscious so
+                we'll recycle the ContentPanels. There's no need to throw them away even if they
+                are not needed. So once we have created them we will put them in a pool so that
+                we can recycle them. Later on if we need more ContentPanels will look for them
+                in the pool first and only if there are no ready ContentPanel controls for us
+                will we create more controls (and place them in the pool). Strictly speaking such
+                recycling is not necessary but it doesn't complicate the code much and it's a good
+                skill to know.
+            </p>
+
+            <p>
+
+                Finally, as we move between the main view and settings view we will need to
+                change the right softkey so that it's "Exit" in the main view and "Cancel" in
+                the settings view.
+            </p>
+
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html">RSS Reader</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_RSS_Reader_user_interface-GUID-1083a0c4-a953-4b6e-a4d0-45a031e51c35.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,631 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="RSS Reader user interface" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-1083A0C4-A953-4B6E-A4D0-45A031E51C35" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+RSS Reader user interface</title>
+</head>
+<body id="GUID-1083A0C4-A953-4B6E-A4D0-45A031E51C35"><a name="GUID-1083A0C4-A953-4B6E-A4D0-45A031E51C35"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+RSS Reader user interface</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Preferences</h2>
+
+            
+            <p>
+
+                Now it's time to write some code so let's open up RSSReader.js. The first thing
+                we will do is implement the init() function that gets called when the widget has
+                loaded. We will begin by setting up the timer-based updating mechanism for the
+                feed updates by declaring four variables that we'll need for that:
+            </p>
+
+<pre>
+
+// Feed update timer identifier.
+var updateTimerId = null;
+
+// Feed URL and update frequency (in milliseconds; -1 if no auto update).
+var feedURL = null;
+var feedUpdateFrequency = -1;
+
+// Next scheduled update time; -1 if never.
+var feedUpdateTime = -1;
+</pre>
+
+            <p>
+
+                We know that we'll need to get some working values for the feed URL and feed update
+                frequency variables and we know that they will be configurable values so let's write
+                the code for this:
+            </p>
+
+<pre>
+
+// Called from the onload event handler to initialize the widget.
+function init() {
+    // load preferences
+    loadPreferences();
+
+    // start feed update timer (called once every second)
+    updateTimerId = setInterval(updateFeedTimerFunc, 1000);
+}
+
+// Loads widget preferences.
+function loadPreferences() {
+    if (window.widget) {
+        // read feed URL and update frequency from the widget settings
+        feedURL = widget.preferenceForKey("FeedURL");
+        var feedUpdateFrequencyStr = widget.preferenceForKey("FeedUpdateFrequency");
+        feedUpdateFrequency = (feedUpdateFrequencyStr == null) ? -1 : parseInt(feedUpdateFrequencyStr);
+    }
+}
+
+// Timer function for feed updates - called once every second.
+function updateFeedTimerFunc() {
+    
+}
+</pre>
+
+            <p>
+
+                The init() function does two things at this point. First it calls our newly created
+                loadPreferences() function that takes care of reading some values for the feedURL
+                and feedUpdateFrequency variables. After this it starts up an interval timer that
+                calls updateFeedTimerFunc() once every second. The function doesn't do anything
+                yet but we'll get to that in a bit. The timer identifier is stored in the updateTimerId 
+                variable. If no configuration is found, feedURL will have a value of null and
+                feedUpdateFrequency will have a value of -1. Note that all preferences are stored
+                as strings so we need to parse the string value to an integer. Also note that we
+                wrapped the preference loading code in an if-clause that checks if we are in the
+                S60 Web Runtime environment. This allows us to run the code in a PC browser without
+                getting an error message about the widget -related methods that don't exist outside
+                of the S60 Web Runtime.
+            </p>
+
+            <p>
+
+                While we're on the topic of preferences we'll write a save counterpart for the
+                loadPreferences() function.
+            </p>
+
+<pre>
+
+// Saves widget preferences.
+function savePreferences() {
+    if (window.widget) {
+        // save settings in widget preferences store
+        widget.setPreferenceForKey(feedURL, "FeedURL");
+        widget.setPreferenceForKey(feedUpdateFrequency.toString(), "FeedUpdateFrequency");
+    }
+}
+</pre>
+
+            <p>
+
+                We're now almost done with the timer mechanism that will update the RSS feed but
+                we are missing one thing: a way to manually schedule an immediate update of the
+                feeds. Let's add a flag that we can use to track if an update was triggered
+                automatically or manually:
+            </p>
+
+<pre>
+
+// Flag that tracks if a feed update is commanded or automatic.
+var feedUpdateCommanded = false;
+</pre>
+
+            <p>
+
+                And now let's add a function that can be called to schedule an immediate update:
+            </p>
+
+<pre>
+
+// Schedules an immediate feed update.
+function updateFeed() {
+    feedUpdateTime = 0;
+    feedUpdateCommanded = true;
+}
+</pre>
+
+            <p>
+
+                The function just sets the next update time to 0 so that the next time the
+                timer function runs it will notice that it's time to schedule a feed update.
+                The function also sets the feedUpdateCommanded flag to true so that the
+                updating mechanism will know that this was a manual update.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Creating the user interface</h2>
+
+            
+            <p>
+
+                Now let's create the user interface. We'll start by declaring three variables
+                where we will hold references to the user interface manager, main view and settings
+                view. Note that these should be outside the init() function.
+            </p>
+
+<pre>
+
+// References to the WRTKit user interface manager and views.
+var uiManager;
+var mainView;
+var settingsView;
+</pre>
+
+            <p>
+
+                We want our user interface to be in tab navigation mode and we want the softkey
+                bar to be visible. The code for this is the same as in the Hello World example.
+                Next we create the user interface manager, main view and settings view by adding
+                the following code to the init() function:
+            </p>
+
+<pre>
+
+if (window.widget) {
+    // set tab-navigation mode and show softkeys
+    widget.setNavigationEnabled(false);
+    menu.showSoftkeys();
+}
+
+// create UI manager
+uiManager = new UIManager();
+
+// create main view
+mainView = new ListView();
+
+// create settings view
+settingsView = new ListView(null, "Settings");
+</pre>
+
+            <p>
+
+                You might have noticed that we didn't supply any arguments to the ListView constructor
+                when the main view was created. The reason for this is that we will set the view caption
+                dynamically depending on the news feed we are following. And since we don't need the
+                unique identifier for the main view we don't even have to pass null to it. Remember: in
+                JavaScript if you don't pass an argument it will be undefined, which is equal to null.
+            </p>
+
+            <p>
+
+                The main view will not get populated with controls until we have some news feed items
+                to display, but we can go ahead and create the settings view. Again, we will first
+                declare variables to hold references to the controls and again, they should be declared
+                outside the init() method so that they are accessible elsewhere in the widget code:
+            </p>
+
+<pre>
+
+// Reference to settings controls.
+var feedSelection;
+var feedUpdateFrequencySelection;
+var settingsSaveButton;
+var settingsCancelButton;
+</pre>
+
+            <p>
+
+                Now that we have variables to receive the control references we can go ahead and create
+                them and add them to the settings view. We will create a SelectionMenu control to let
+                the user select the RSS feed to show, a SelectionList control to allow selection of
+                the feed update frequency and two form buttons: "Save" and "Cancel". The SelectionMenu
+                and SelectionList controls are identical from a developer's point of view but look
+                very different. The SelectionMenu takes up very little space in the view but when clicked
+                it pops up a list of options that the user can select from. This is good if theres a lot
+                of options and we don't want to use up a lot of space from the view. The SelectionList
+                is the exact opposite and shows all the options right there in the view. This is good
+                if the widget is in pointer navigation mode or if there are very few options.
+            </p>
+
+            <p>
+
+                Options for the SelectionMenu and SelectionList controls are defined as an array of
+                JavaScript objects that have two properties: value and text. The value property contains
+                the actual data of the option and the text property contains the string to display to
+                the user. Before we create the controls we need to create the option arrays for the
+                RSS feed options and update frequency options. These will simply be hard coded arrays
+                that are defined using JavaScript object notation (JSON) and we'll place them at the top
+                of the widget code so that they can be easily customized later on:
+            </p>
+
+<pre>
+
+// Feed source options.
+var feedOptions = [
+    { value: "http://www.womworld.com/nseries/feed/", text: "Nseries WOM World" },
+    { value: "http://feeds.feedburner.com/N958GB", text: "N95 8GB News" },
+    { value: "http://feeds.feedburner.com/N95", text: "N95 News" },
+    { value: "http://feeds.feedburner.com/N93", text: "N93 News" },
+    { value: "http://feeds.feedburner.com/N91", text: "N91 News" },
+    { value: "http://feeds.feedburner.com/N82", text: "N82 News" },
+    { value: "http://feeds.feedburner.com/N81", text: "N81 News" },
+    { value: "http://feeds.feedburner.com/N810", text: "N810 News" },
+    { value: "http://feeds.feedburner.com/N800", text: "N800 News" },
+    { value: "http://feeds.feedburner.com/N76", text: "N76 News" }
+];
+
+// Feed update frequency.
+var updateFrequencyOptions = [
+    { value: -1, text: "never" },
+    { value: (1000 * 60 * 5), text: "every 5 min" },
+    { value: (1000 * 60 * 15), text: "every 15 min" },
+    { value: (1000 * 60 * 60), text: "every 60 min" },
+];
+</pre>
+
+            <p>
+
+                The RSS feeds are all from the Nokia Nseries WOM World website but you could put any
+                RSS feed URLs here that you like. However it is probably a good idea to stick with
+                these for now since we know that they work. Later when the widget is completed you can try
+                with other feeds. Note how the value is a URL but the text to display is a human readable
+                name for the RSS feeds.
+            </p>
+
+            <p>
+
+                The update frequency options are defined in milliseconds and there is one option with a
+                magic value of -1 for "never". Here too you'll notice the difference between the value
+                (an integer in this case) and the human readable text.
+            </p>
+
+            <p>
+
+                Now that we have the option arrays we can create the controls for the settings view by
+                adding the following code to the init() function:
+            </p>
+
+<pre>
+
+    // feed selection control
+    feedSelection = new SelectionMenu(null, "Select feed", feedOptions);
+    settingsView.addControl(feedSelection);
+    
+    // feed update frequency selection control
+    feedUpdateFrequencySelection = new SelectionList(null, "Check for updates", updateFrequencyOptions);
+    settingsView.addControl(feedUpdateFrequencySelection);
+    
+    // save settings button
+    settingsSaveButton = new FormButton(null, "Save");
+    settingsView.addControl(settingsSaveButton);
+    
+    // cancel settings button
+    settingsCancelButton = new FormButton(null, "Cancel");
+    settingsView.addControl(settingsCancelButton);
+</pre>
+
+            <p>
+
+                The two first arguments for the SelectionMenu and SelectionList constructors are the
+                same as for most other controls: a unique identifier and a control caption. The third 
+                argument points to the array of options that the controls should display. You could
+                also have omitted that argument from the constructor and instead called setOptions()
+                later on, but why do it in two steps when you can do it in one?
+            </p>
+
+            <p>
+
+                The user interface views are now done (minus the actual news items to display in the main
+                view of course) but we still have some things to implement for the user interface. The
+                buttons in the settings view don't do anything yet so let's fix that.
+            </p>
+
+            <p>
+
+                The cancel button should take the user to the main view and the save button should
+                start using the newly configured settings, save them, and then go to the main view.
+                Our plan to implement this is to create a function for showing the main view, called
+                "showMainView()", a similar function for showing the settings view that we will call
+                "showSettings()", and a function that will be called when the save button is clicked
+                called "saveSettingsClicked()". We will then add event listeners to the two buttons
+                so that clicking the save button will result in a call to the saveSettingsClicked()
+                function and clicking the cancel button will result in a call to the showMainView()
+                function. Let's create empty placeholders for the functions first:
+            </p>
+
+<pre>
+
+// Callback for settings view save button.
+function saveSettingsClicked() {
+}
+
+// Show main view.
+function showMainView() {
+}
+
+// Show settings view.
+function showSettings() {
+}
+</pre>
+
+            <p>
+
+                Now that we have those functions let's register the event listeners to the form
+                buttons by adding these two lines of code immediately after where the buttons
+                are created:
+            </p>
+
+<pre>
+
+settingsSaveButton.addEventListener("ActionPerformed", saveSettingsClicked);
+settingsCancelButton.addEventListener("ActionPerformed", showMainView);
+</pre>
+
+            <p>
+
+                We are now ready to implement the functions to show the main view, settings view
+                and react to the save button click. But we won't implement those just yet because
+                we want to do one more thing before that. Let's create the custom Options menu.
+                The Options menu isn't using any WRTKit code but rather the standard S60 Web Runtime
+                widget menu functionality. We'll have two menu items: "Refresh" to schedule an immediate
+                news feed update and "Settings" to go to the settings view. The Web Runtime Options
+                menu works so that a callback function gets called when the user selections an Options
+                menu item. In order to recognize which menu item was selected we'll need a unique
+                identifier for each of them. Let's create those:
+            </p>
+
+<pre>
+
+// Constants for menu item identifiers.
+var MENU_ITEM_SETTINGS = 0;
+var MENU_ITEM_REFRESH = 1;
+</pre>
+
+            <p>
+
+                Next we'll create the callback function that will be called when the menu items are
+                selected:
+            </p>
+
+<pre>
+
+// Callback for when menu items are selected.
+function menuItemSelected(id) {
+    switch (id) {
+        case MENU_ITEM_SETTINGS:
+            showSettings();
+            break;
+        case MENU_ITEM_REFRESH:
+            updateFeed();
+            break;
+    }
+}
+</pre>
+
+            <p>
+
+                This function gets the menu item identifier passed to it when the user selects
+                a menu item. The switch-case will branch off to call showSettings() if the "Settings"
+                menu item was selected and updateFeed() if the "Refresh" menu item was selected.
+                But we haven't actually created the menu yet so let's do that by adding this to the
+                init() function right after where we show the softkey bar. We want to have this piece
+                of code inside the if-clause that checks if we're in the S60 Web Runtime because we
+                don't have the Options menu functionality on a PC browser.
+            </p>
+
+<pre>
+
+// create menu
+var settingsMenuItem = new MenuItem("Settings", MENU_ITEM_SETTINGS);
+settingsMenuItem.onSelect = menuItemSelected;
+menu.append(settingsMenuItem);
+var refreshMenuItem = new MenuItem("Refresh", MENU_ITEM_REFRESH);
+refreshMenuItem.onSelect = menuItemSelected;
+menu.append(refreshMenuItem);
+</pre>
+
+            <p>
+
+                The code simply creates two MenuItem objects, gives them a label and a unique
+                identifier, specifies the callback function to call when selected and then adds
+                them to the Options menu. The menu object is a global object that automatically
+                exists in the S60 Web Runtime.
+            </p>
+
+            <p>
+
+                Now let's return to the three functions we created but didn't implement. We will
+                start with the showMainMenu() function. This function should perform all necessary
+                steps to show the main menu. This includes the following: setting a caption for
+                the main view, setting the right softkey to be the default "Exit" label and 
+                functionality, and then actually showing the main view by calling setView() in the
+                user interface manager. We'll get the main view caption by checking which of the
+                RSS feeds the user has currently selected. We do this by looping through the feed
+                options and looking for the feed URL that is currently in use. If we can't find one
+                we'll default to "RSS Reader".
+            </p>
+
+<pre>
+
+// Show main view.
+function showMainView() {
+    // set main view caption from feed name
+    var feedName = null;
+    for (var i = 0; i &lt; feedOptions.length; i++) {
+        if (feedOptions[i].value == feedURL) {
+            feedName = feedOptions[i].text;
+            break;
+        }
+    }
+    var mainViewCaption = (feedName == null) ? "RSS Reader" : feedName;
+    mainView.setCaption(mainViewCaption);
+    
+    // set right softkey to "exit"
+    if (window.widget) {
+        menu.setRightSoftkeyLabel("", null);
+    }
+    
+    // show the main view
+    uiManager.setView(mainView);
+}
+</pre>
+
+            <p>
+
+                When the settings view is shown we first want to place the controls into
+                a state that reflects the current configuration. In other words we want
+                the currently configured feed to be the one that's selected in the feed selection
+                control. In the same way the currently configured feed update frequency should
+                be selected in the feed update frequency selection control. There is a very
+                convenient method available for this called getOptionForValue(). Using that
+                function we can pass the currently configured feed URL and feed update frequency
+                and get back the options object that corresponds to the configuration value.
+                After this we can use that options object when we call setSelected() to select
+                that option.
+            </p>
+
+            <p>
+
+                If there is no valid configuration then we disable the cancel button and make
+                the right softkey be "Exit". This is useful when the widget is started for the
+                first time so that user has to enter a valid configuration before starting to
+                use the widget. If there is a valid configuration we set the right softkey to
+                "Cancel" and make it call the showMainView() function that we just created. The
+                "Cancel" button will also be enabled.
+            </p>
+
+            <p>
+
+                Finally we'll switch to the settings view by calling setView() in the user 
+                interface manager.
+            </p>
+
+<pre>
+
+// Show settings view.
+function showSettings() {
+    // URL (use first available feed if null)
+    var feedOption = (feedURL == null) ? feedOptions[0] : feedSelection.getOptionForValue(feedURL);
+    feedSelection.setSelected(feedOption);
+    
+    // frequency
+    var feedUpdateFrequencyOption = feedUpdateFrequencySelection.getOptionForValue(feedUpdateFrequency);
+    feedUpdateFrequencySelection.setSelected(feedUpdateFrequencyOption);
+    
+    if (feedURL == null) {
+        // no valid configuration
+        // disable cancel button - set right softkey to "exit"
+        settingsCancelButton.setEnabled(false);
+        if (window.widget) {
+            menu.setRightSoftkeyLabel("", null);
+        }
+    } else {
+        // we have a valid configuration
+        // enable cancel button - set right softkey to "cancel"
+        settingsCancelButton.setEnabled(true);
+        if (window.widget) {
+            menu.setRightSoftkeyLabel("Cancel", showMainView);
+        }
+    }
+    
+    // show the settings view
+    uiManager.setView(settingsView);
+}
+</pre>
+
+            <p>
+
+                The third function to implement is the callback for when the save button is clicked.
+                First we take the selected options from the feed selection and feed update frequency
+                selection controls. Those selected values are copied to the feedURL and feedUpdateFrequency
+                variables that are used by the widget during runtime. Next the settings are saved using
+                the savePreferences() function that we implemented earlier. And finally we call the
+                showMainView() method so that the widget shows the main view with the news items.
+            </p>
+
+<pre>
+
+// Callback for settings view save button.
+function saveSettingsClicked() {
+    // update feed URL
+    var selectedFeed = feedSelection.getSelected();
+    feedURL = (selectedFeed != null) ? selectedFeed.value : null;
+    
+    // update frequency
+    var selectedFrequency = feedUpdateFrequencySelection.getSelected();
+    feedUpdateFrequency = (selectedFrequency != null) ? selectedFrequency.value : -1;
+    
+    // save preferences
+    savePreferences();
+    
+    // return to main view
+    showMainView();
+}
+</pre>
+
+            <p>
+
+                The user interface is now nearly done but the init() function needs one more
+                thing. We need to show a view after the function is done initializing
+                the widget. The view to show depeneds on whether we have a valid
+                configuration or not. If we do then we'll show the main view. If not then
+                we'll show the settings view. Let's add this code to the end of the init()
+                function, just before we start the update timer:
+            </p>
+
+<pre>
+
+// display the main view if a feed has been configured
+// otherwise show the settings view
+if (feedURL != null) {
+    showMainView();
+    updateFeed();
+} else {
+    showSettings();
+}
+</pre>
+
+            <p>
+
+                You can now go ahead and try out the widget either on a handset, emulator
+                or in a PC browser. You should have a working settings view and when clicking
+                the save button in the settings view you should end up in the main view. From
+                there you can go to the settings by selecting "Settings" in the Options menu.
+            </p>
+
+            <p>
+
+                There are no news items to show yet but that's our next task.
+            </p>
+
+            <div class="fignone" id="GUID-1083A0C4-A953-4B6E-A4D0-45A031E51C35__GUID-31A7B99C-BD6B-42E2-8430-631D210FAFC0"><a name="GUID-1083A0C4-A953-4B6E-A4D0-45A031E51C35__GUID-31A7B99C-BD6B-42E2-8430-631D210FAFC0"><!-- --></a><span class="figcap">Figure 1. 
+RSS Reader settings view</span>
+
+                
+                <br /><img src="RSS_Reader_Settings_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html">RSS Reader</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,564 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit SelectionControl Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-35C4291F-DC3A-439C-890F-1D140864ACA0" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit SelectionControl Class</title>
+</head>
+<body id="GUID-35C4291F-DC3A-439C-890F-1D140864ACA0"><a name="GUID-35C4291F-DC3A-439C-890F-1D140864ACA0"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit SelectionControl Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The SelectionControl class is an abstract base class for all controls that lets
+                the user select one or more options from a set of options.
+            </p>
+
+            <p>
+
+                The options in a selection control are simple option objects with two properties:
+                value and text. An option is specified using JavaScript object notation (JSON) as
+                <samp class="codeph">
+{ value: "value here", text: "Text for value goes here" }</samp>. The value
+                property specifies the actual value of the option whereas the text property specifies
+                how the option is shown to the user in the control. E.g. the value could be a boolean
+                value while the text could be "Yes" or "No". The text value is an XHTML string.
+            </p>
+
+            <p>
+
+                Don't instantiate SelectionControl directly but rather one of its subclasses.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html">
+Control</a>
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Events</h2>
+
+            
+            <br /><ul>
+
+                <li>
+
+                    <p>
+SelectionChanged</p>
+
+                    
+
+                        <p>
+
+                            This event is fired when the user selects one or more values in the control.
+                        </p>
+
+                    
+                </li>
+
+            </ul>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-8EEF9007-9B25-4140-A44E-FDC8E60E5515"><a name="GUID-8EEF9007-9B25-4140-A44E-FDC8E60E5515"><!-- --></a>
+
+        <h2 class="topictitle2">
+isMultipleSelection()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Boolean] SelectionControl.isMultipleSelection(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Returns a boolean value that indicates whether the selection control lets
+                    users select multiple options.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    True if the control lets users select multiple options, false if only a single option
+                    can be selected at any given time.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-6CFB77B9-9930-49DC-982B-99F9CEBBEBCC"><a name="GUID-6CFB77B9-9930-49DC-982B-99F9CEBBEBCC"><!-- --></a>
+
+        <h2 class="topictitle2">
+isSelected()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Boolean] SelectionControl.isSelected(Option option)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Returns a boolean value that indicates whether the the specified option
+                    is currently selected. Options are objects with two properties: value and text.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+option</p>
+
+                        
+
+                            <p>
+
+                                The option to check the selected state for.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    True if the specified option is selected, false if not.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-DE791188-37C3-4433-BB16-9362EFFECFEE"><a name="GUID-DE791188-37C3-4433-BB16-9362EFFECFEE"><!-- --></a>
+
+        <h2 class="topictitle2">
+getSelected()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Option|Array] SelectionControl.getSelected(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the currently selected option or options. If the control is a multiple
+                    selection control then an array of selected options is returned (an empty array if
+                    no options are selected). If the control is a single selection control then the
+                    single selection option is returned, or null if no options are selected.
+                    Options are objects with two properties: value and text.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    An array containing the currently selected options for multiple selection controls.
+                    For single selection controls the return value is the selected option. If no options
+                    are selected then an empty array is returned for multiple selection controls and null
+                    is returned for single selection controls.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-348A4EC8-8962-4CB3-BD22-39D095280995"><a name="GUID-348A4EC8-8962-4CB3-BD22-39D095280995"><!-- --></a>
+
+        <h2 class="topictitle2">
+setSelected()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] SelectionControl.setSelected(Option|Array selected)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the currently selected options for a selection control. The selected options
+                    should be a subset of the options contain within the control. For a multiple selection
+                    control an array of options should be specified. For a single selection control the
+                    single option that should be selected should be specified without being contained in
+                    an array. To select zero options pass an empty array for multiple selection controls
+                    and null for single selection controls. Options are objects with two properties:
+                    value and text.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+selected</p>
+
+                        
+
+                            <p>
+
+                                The options to select. For multiple selection controls this argument
+                                should be an array of the options to select or an empty array to select
+                                zero elements. For single selection controls it should be a single option
+                                object or null for no selected options.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-97BCB1F7-4DEC-4621-9B22-87123719CF7B"><a name="GUID-97BCB1F7-4DEC-4621-9B22-87123719CF7B"><!-- --></a>
+
+        <h2 class="topictitle2">
+getOptions()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Array] SelectionControl.getOptions(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the options available to the user in the control. The options are
+                    returned as an array of option objects. Options are objects with two properties:
+                    value and text.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    An array containing the options in the control.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-167CC713-AF75-4CC7-841E-974D4CB77C1D"><a name="GUID-167CC713-AF75-4CC7-841E-974D4CB77C1D"><!-- --></a>
+
+        <h2 class="topictitle2">
+setOptions()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] SelectionControl.setOptions(Array options)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the options that this control should give the user. Calling this method
+                    replaces the current options with the specified new ones. If one or more selected
+                    options are no longer part of the available options after calling this method
+                    then they will automatically be removed from the selected set. The options
+                    are given as an array of option objects. Options are objects with two properties:
+                    value and text. The text value is an XHTML string.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+options</p>
+
+                        
+
+                            <p>
+
+                                An array of options to give the user. These options replace the
+                                current options in the control.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-815B72AA-CB42-4A8C-B656-6C144BC356F6"><a name="GUID-815B72AA-CB42-4A8C-B656-6C144BC356F6"><!-- --></a>
+
+        <h2 class="topictitle2">
+getOptionForValue()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Array] SelectionControl.getOptionForValue(Object value)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the option in the selection control that has a value that matches
+                    the specified one. If multiple options have the same value then the first matching
+                    one is returned. If there is no match then null is returned.
+                </p>
+
+                <p>
+
+                    This method is a useful helper method for situations where a specific value in the
+                    options should be programmatically selected.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+value</p>
+
+                        
+
+                            <p>
+
+                                The value to search for among the options in the selection control.
+                                The value can be of any JavaScript type.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The first option in this selection control that has a value that matches the
+                    specified one, or null if no matching option is found.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_SelectionList_Class-GUID-c3be7a8a-9028-4cec-a0c0-d355d0621b37.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,217 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit SelectionList Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-C3BE7A8A-9028-4CEC-A0C0-D355D0621B37" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit SelectionList Class</title>
+</head>
+<body id="GUID-C3BE7A8A-9028-4CEC-A0C0-D355D0621B37"><a name="GUID-C3BE7A8A-9028-4CEC-A0C0-D355D0621B37"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit SelectionList Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The SelectionList class is an implementation of a selection control that displays
+                a list of options to the user. Options are displayed as radio buttons or checkboxes
+                depending on if the control is in single or multiple-selection mode. Selection lists
+                are useful in situations where the widget is used in pointer navigation mode or if
+                there is a small amount of options.
+            </p>
+
+            <div class="fignone" id="GUID-C3BE7A8A-9028-4CEC-A0C0-D355D0621B37__GUID-31AED89F-89DB-42A6-8261-14CC57E2C399"><a name="GUID-C3BE7A8A-9028-4CEC-A0C0-D355D0621B37__GUID-31AED89F-89DB-42A6-8261-14CC57E2C399"><!-- --></a><span class="figcap">Figure 1. 
+SelectionList controls</span>
+
+                
+                <br /><img src="SelectionList_Controls_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.html">
+SelectionControl</a>
+            </p>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-B74CEF09-2818-4AD5-9E57-66E0821AA0C6"><a name="GUID-B74CEF09-2818-4AD5-9E57-66E0821AA0C6"><!-- --></a>
+
+        <h2 class="topictitle2">
+Constructor</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[SelectionList] new SelectionList(String id, String caption, Array options, Boolean multipleSelection, Array|Option selected)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Creates a new instance of the SelectionList class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+id</p>
+
+                        
+
+                            <p>
+
+                                Unique identifier for the control. Can be retrieved using the id property defined
+                                in the UIElement class that this control inherits from. Useful for example to
+                                identify the source of an event in event callback functions or to apply a CSS
+                                rule to only this particular control. The identifier can be null, in which case
+                                no id will be set for the control.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+caption</p>
+
+                        
+
+                            <p>
+
+                                The caption text for the control. A null caption can be used to hide the 
+                                caption area. The value is an XHTML string.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+options</p>
+
+                        
+
+                            <p>
+
+                                An array of options that the selection list should display to the user.
+                                If the argument is omitted or null the control will not display any 
+                                options. The options can be set or changed later by calling setOptions().
+                                Options are objects with two properties: value and text. Use JavaScript
+                                object notation (JSON) to construct option objects, e.g.
+                                <samp class="codeph">
+{ value: "value here", text: "Text for value goes here" }</samp>.
+                                The text value is an XHTML string.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+multipleSelection</p>
+
+                        
+
+                            <p>
+
+                                The multipleSelection argument is a boolean flag that determines whether
+                                the control should be in multipleSelection mode or not. Use true to put
+                                the control in multiple selection mode and false to put it in single
+                                selection mode. If this argument is omitted the control will go to single
+                                selection mode by default.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+selected</p>
+
+                        
+
+                            <p>
+
+                                The selected argument specifies which of the options should be selected at
+                                creation time. For multiple selection controls this should be given as an
+                                array of option objects with an empty array if no options should be selected.
+                                For single selection controls this should be the single option object that
+                                should be selected or null if no option should be selected. If the argument
+                                is omitted or null no options will be selected.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    A new instance of the SelectionList class.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_SelectionMenu_Class-GUID-3ae54fdf-e938-400b-969d-e41575331aa0.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,225 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit SelectionMenu Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-3AE54FDF-E938-400B-969D-E41575331AA0" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit SelectionMenu Class</title>
+</head>
+<body id="GUID-3AE54FDF-E938-400B-969D-E41575331AA0"><a name="GUID-3AE54FDF-E938-400B-969D-E41575331AA0"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit SelectionMenu Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The SelectionMenu class is an implementation of a selection control that lets
+                users select options from a popup menu.
+            </p>
+
+            <p>
+
+                The SelectionMenu control has two modes: a display mode and a selection mode.
+                Normally the display mode is shown and users can see what the currently selected
+                options are. When a user selects the control a menu pops up that displays the
+                available options. The user can then select the option (or options) from this
+                menu. After the selection is done the menu goes away and the control returns to
+                display mode. The SelectionMenu control is useful in situations where there
+                are many options and showing them all uses up too much space.
+            </p>
+
+            <div class="fignone" id="GUID-3AE54FDF-E938-400B-969D-E41575331AA0__GUID-2E45D9D7-D1FF-4271-A8EC-3EF46BCA768D"><a name="GUID-3AE54FDF-E938-400B-969D-E41575331AA0__GUID-2E45D9D7-D1FF-4271-A8EC-3EF46BCA768D"><!-- --></a><span class="figcap">Figure 1. 
+SelectionMenu control</span>
+
+                
+                <br /><img src="SelectionMenu_Control_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.html">
+SelectionControl</a>
+            </p>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-C81342E7-7AFF-4071-94A2-95FB56C1AEE9"><a name="GUID-C81342E7-7AFF-4071-94A2-95FB56C1AEE9"><!-- --></a>
+
+        <h2 class="topictitle2">
+Constructor</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[SelectionMenu] new SelectionMenu(String id, String caption, Array options, Boolean multipleSelection, Array|Option selected)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Creates a new instance of the SelectionMenu class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+id</p>
+
+                        
+
+                            <p>
+
+                                Unique identifier for the control. Can be retrieved using the id property defined
+                                in the UIElement class that this control inherits from. Useful for example to
+                                identify the source of an event in event callback functions or to apply a CSS
+                                rule to only this particular control. The identifier can be null, in which case
+                                no id will be set for the control.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+caption</p>
+
+                        
+
+                            <p>
+
+                                The caption text for the control. A null caption can be used to hide the 
+                                caption area. The value is an XHTML string.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+options</p>
+
+                        
+
+                            <p>
+
+                                An array of options that the selection menu should display to the user.
+                                If the argument is omitted or null the control will not display any 
+                                options. The options can be set or changed later by calling setOptions().
+                                Options are objects with two properties: value and text. Use JavaScript
+                                object notation (JSON) to construct option objects, e.g.
+                                <samp class="codeph">
+{ value: "value here", text: "Text for value goes here" }</samp>.
+                                The text value is an XHTML string.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+multipleSelection</p>
+
+                        
+
+                            <p>
+
+                                The multipleSelection argument is a boolean flag that determines whether
+                                the control should be in multipleSelection mode or not. Use true to put
+                                the control in multiple selection mode and false to put it in single
+                                selection mode. If this argument is omitted the control will go to single
+                                selection mode by default.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+selected</p>
+
+                        
+
+                            <p>
+
+                                The selected argument specifies which of the options should be selected at
+                                creation time. For multiple selection controls this should be given as an
+                                array of option objects with an empty array if no options should be selected.
+                                For single selection controls this should be the single option object that
+                                should be selected or null if no option should be selected. If the argument
+                                is omitted or null no options will be selected.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    A new instance of the SelectionMenu class.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Selections-GUID-23145d13-f2e7-48be-b24b-bc49754b2919.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,113 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Selections" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Selections</title>
+</head>
+<body id="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919"><a name="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Selections</h1>
+
+    <div>
+
+        <p>
+
+            Selection of one or more options from a set of options is one of the most common 
+            use cases in a user interface. The WRTKit supports this use case with two 
+            controls, SelectionList and SelectionMenu, each of which can be in either 
+            "single selection" or "multiple selection" mode. The two controls differe only
+            in look and interaction but not in their APIs.
+        </p>
+
+        <p>
+
+            The SelectionList control shows an expanded list of all of its options in the 
+            view. If the control is in single selection mode then each option is presented 
+            with a "radio button", of which only one can be selected at a time. This ensures 
+            that only one of the options can be selected by the user. If the SelectionList 
+            control is in multiple selection mode then each option is presented with a 
+            "checkbox". Any amount (including zero) of checkboxes can be checked at time, 
+            allowing users to select multiple options. The SelectionList control is a hybrid 
+            between the traditional way of showing radio buttons and checkboxes in a web 
+            environment and the way that an S60 application shows single and multiple choice 
+            selections. The SelectionList is recommeded to be used when the widget is using 
+            the pointer navigation mode or when there are only a few options.
+        </p>
+
+        <div class="fignone" id="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919__GUID-BE87E376-AF72-4533-909F-5ED5A022DE5C"><a name="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919__GUID-BE87E376-AF72-4533-909F-5ED5A022DE5C"><!-- --></a><span class="figcap">Figure 1. 
+SelectionList controls</span>
+
+            
+            <br /><img src="SelectionList_Controls_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            The SelectionMenu control is more similar to the way normal S60 applications 
+            allow users to make single or multiple choices. The SelectionMenu takes up only 
+            minimally of space in its normal state, but when activated it pops up up a list 
+            of options with either radio buttons (for single selection) or checkboxes (for 
+            multiple selection) that the user can select. The SelectionMenu control is good 
+            for the tab navigation mode or if there are many options that would use up lots 
+            of space on the screen using the SelectionList control.
+        </p>
+
+        <div class="fignone" id="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919__GUID-B78AFE71-FE80-4CAB-BF67-79D8D81F744A"><a name="GUID-23145D13-F2E7-48BE-B24B-BC49754B2919__GUID-B78AFE71-FE80-4CAB-BF67-79D8D81F744A"><!-- --></a><span class="figcap">Figure 2. 
+SelectionMenu control</span>
+
+            
+            <br /><img src="SelectionMenu_Control_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            Options in the selection controls are specified as an array of JavaScript 
+            objects, where each object represents one option. Each option object has two 
+            properties: value and text. The value property can be any JavaScript value, 
+            including object references and is used to represent the concrete value of the 
+            option. The text property is used to display the option in the user interface. 
+            The value could for example be a boolean true or false while the
+            text could be "Yes" or "No".
+        </p>
+
+        <p>
+
+            The set of currently selected options can be set or retrieved from a selection 
+            control using getter and setter methods. For single selection controls the 
+            selected option is specified as a single reference to one of the options in the 
+            control. For multiple selection the selected options are specified as an array 
+            of references to zero or more of the options in the control. Note that the 
+            references to the options must refer to the very same options that are in the 
+            control - not other instances of the options even if they are identical in value 
+            and/or text.
+        </p>
+
+        <p>
+
+            Selection controls fire "SelectionChanged" events when the user makes a 
+            selection in the control.
+        </p>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Separator-GUID-ec82d9ea-6b88-48c6-92c2-09a4dd56b31a.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Separator" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-EC82D9EA-6B88-48C6-92C2-09A4DD56B31A" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Separator</title>
+</head>
+<body id="GUID-EC82D9EA-6B88-48C6-92C2-09A4DD56B31A"><a name="GUID-EC82D9EA-6B88-48C6-92C2-09A4DD56B31A"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Separator</h1>
+
+    <div>
+
+        <p>
+
+            There is a special Separator control that has no other functionality except to 
+            act as a visual separator between controls. By adding an instance of a Separator 
+            control in a view it is possible to split the view visually so that it better 
+            groups related controls together and makes the view easier to comprehend.
+        </p>
+
+        <div class="fignone" id="GUID-EC82D9EA-6B88-48C6-92C2-09A4DD56B31A__GUID-AE529A70-2AFB-453E-91C3-AF5B6C5029AF"><a name="GUID-EC82D9EA-6B88-48C6-92C2-09A4DD56B31A__GUID-AE529A70-2AFB-453E-91C3-AF5B6C5029AF"><!-- --></a><span class="figcap">Figure 1. 
+Two separators in a view</span>
+
+            
+            <br /><img src="Travel_Companion_Settings_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            Separator controls do not have any control specific API except for their 
+            constructor.
+        </p>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Separator_Class-GUID-b9a1bbb9-5858-4996-9c25-2ede2507f3a3.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,137 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit Separator Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-B9A1BBB9-5858-4996-9C25-2EDE2507F3A3" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit Separator Class</title>
+</head>
+<body id="GUID-B9A1BBB9-5858-4996-9C25-2EDE2507F3A3"><a name="GUID-B9A1BBB9-5858-4996-9C25-2EDE2507F3A3"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit Separator Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The Separator class implements a simple control that can be used to visually
+                separate controls in a view.
+            </p>
+
+            <div class="fignone" id="GUID-B9A1BBB9-5858-4996-9C25-2EDE2507F3A3__GUID-4BB993C6-B953-419D-BCFD-13ABE5783561"><a name="GUID-B9A1BBB9-5858-4996-9C25-2EDE2507F3A3__GUID-4BB993C6-B953-419D-BCFD-13ABE5783561"><!-- --></a><span class="figcap">Figure 1. 
+Two separators in a view</span>
+
+                
+                <br /><img src="Travel_Companion_Settings_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html">
+Control</a>
+            </p>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-F614665F-C6F0-4AB6-B85C-01CFBA2AE3D8"><a name="GUID-F614665F-C6F0-4AB6-B85C-01CFBA2AE3D8"><!-- --></a>
+
+        <h2 class="topictitle2">
+Constructor</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Separator] new Separator(String id)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Creates a new instance of the Separator class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+id</p>
+
+                        
+
+                            <p>
+
+                                Unique identifier for the control. Can be retrieved using the id property defined
+                                in the UIElement class that this control inherits from. Useful for example to
+                                identify the source of an event in event callback functions or to apply a CSS
+                                rule to only this particular control. The identifier can be null, in which case
+                                no id will be set for the control.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    A new instance of the Separator class.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Showing_content_in_a_view-GUID-7020d9ea-747d-42f3-b47c-16ad1f45db82.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Showing content in a view" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Showing content in a view</title>
+</head>
+<body id="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82"><a name="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Showing content in a view</h1>
+
+    <div>
+
+        <p>
+
+            The WRTKit has two controls for showing content inside a view. The 
+            first of the controls is called Label and is useful for simple and 
+            short information to be displayed, coupled with the control caption 
+            that describes the information.
+        </p>
+
+        <div class="fignone" id="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82__GUID-EB15E9F3-204F-4772-B820-F3375D4C040A"><a name="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82__GUID-EB15E9F3-204F-4772-B820-F3375D4C040A"><!-- --></a><span class="figcap">Figure 1. 
+Label control</span>
+
+            
+            <br /><img src="Label_Control_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            The second control is called ContentPanel and is more sophisticated 
+            than the Label control. ContentPanel controls can be created as 
+            foldable, which means that they can expand and collapse their 
+            content areas. Users can toggle the expanded and collapsed state by 
+            clicking on the caption area of the ContentPanel.
+        </p>
+
+        <div class="fignone" id="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82__GUID-5EC096E5-EADF-4BD6-9D6A-1B331EAA2E66"><a name="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82__GUID-5EC096E5-EADF-4BD6-9D6A-1B331EAA2E66"><!-- --></a><span class="figcap">Figure 2. 
+Foldable content panel</span>
+
+            
+            <br /><img src="RSS_Reader_Main_Screenshot_2.png" /><br />
+        </div>
+
+        <p>
+
+            The code below creates a Label control and a foldable ContentPanel 
+            control and adds them to a view. The code assumes that a view has 
+            already been created and that a variable called exampleView refers 
+            to it.
+        </p>
+
+<pre>
+
+// create label
+var nameLabel = new Label("label1", "Name");
+exampleView.addControl(nameLabel);
+
+// create foldable content panel
+var infoPanel = new ContentPanel("info1", "Information", null, true);
+exampleView.addControl(infoPanel);
+</pre>
+
+        <p>
+
+            The first and second arguments are the same in the constructors for 
+            both controls. The first is a unique identifier for the control and 
+            the second is the control caption. The third argument is also the 
+            same but is omitted for the label and null for the content panel 
+            since in both cases we don't specify any content at this point. The 
+            fourth argument for the content panel is a boolean that specifies 
+            whether the control should be foldable or not.
+        </p>
+
+        <p>
+
+            The value for a label can be set and retrieved using the getText() and
+            setText() methods. For content panels the content in the content area
+            can be set and retrieved using getContent() and setContent(). The
+            content is defined as an XHTML fragment and can contain arbitrarily
+            complex XHTML, including images or even JavaScript.
+        </p>
+
+<pre>
+
+// set the text for the label
+nameLabel.setText("John Smith");
+
+// set content for the content panel
+infoPanel.setContent("&lt;b&gt;This is bolded!&lt;/b&gt;&lt;br/&gt;This is plain text on the second line.");
+</pre>
+
+        <p>
+
+            Foldable ContentPanel controls can be programmatically collapsed or
+            expanded using the setExpanded() method. The expanded state can be
+            retrieved using the isExpanded() method.
+        </p>
+
+<pre>
+
+// retrieve the expanded state
+var expanded = infoPanel.isExpanded();
+
+// collapse the content panel
+infoPanel.setExpanded(false);
+</pre>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Terminology-GUID-ebd8d7c4-03f6-498d-becc-eb8d4081ed8b.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Terminology" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-EBD8D7C4-03F6-498D-BECC-EB8D4081ED8B" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Terminology</title>
+</head>
+<body id="GUID-EBD8D7C4-03F6-498D-BECC-EB8D4081ED8B"><a name="GUID-EBD8D7C4-03F6-498D-BECC-EB8D4081ED8B"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Terminology</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Control</h2>
+
+            
+            <p>
+
+                A control is a user interface element that the user can interact with. Controls
+                are used in PC applications, in web pages and in mobile device applications. In
+                web pages controls are often known as "form controls". Common controls include
+                textfields, textareas, buttons, checkboxes, radio buttons, scrollbars, labels
+                and progress bars, among others. Not all controls are interactive, e.g. labels
+                simply display a value. Controls are contained within some kind of user
+                interface container such as a view or window.
+            </p>
+
+            <p>
+
+                In the WRTKit, controls are JavaScript objects that contain the state and
+                implement the behavior of the control. Controls take care of drawing themselves,
+                including changing their appearence as a result of various state changes.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+View</h2>
+
+            
+            <p>
+
+                A container for user interface elements such as controls. On a mobile device
+                user interface views typically fill the entire screen and thus only one view can
+                be shown at a time. Views in a mobile device tend to lay out the elements it
+                contains in a vertical list that can be scrolled up and down if there is more
+                content in the view than what fits on the screen at a time.
+            </p>
+
+            <p>
+
+                In the WRTKit, views are responsible for laying out controls. Custom views can
+                be created to support advanced layouts but in the vast majority of cases the
+                default ListView is sufficient. WRTKit views are JavaScript objects.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Event</h2>
+
+            
+            <p>
+
+                An event is a notification of some occurrence in a user interface element, such
+                as a view or control. Events are typically propagated to application code as
+                messages or function calls or a combination of the two.
+            </p>
+
+            <p>
+
+                The WRTKit uses a model known as the "observer pattern" to deliver event
+                messages, which are JavaScript objects, to event listeners, which are JavaScript
+                callback functions. WRTKit events have a type name that can be used to
+                distinguish between different types of events. E.g. a button press produces an
+                "ActionPerformed" event.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Focus</h2>
+
+            
+            <p>
+
+                The control that is currently selected to receive input is said to be focused.
+                Controls can be focused in both the tab and pointer navigation modes. In the tab
+                mode the focus is moved between controls using the 4-way controller. In
+                the pointer mode the focus is moved between controls by moving the pointer to
+                "hover" above a control and then pressing a selection button to select that
+                control. Focused controls are displayed in a distinct way from other controls to
+                indicate that they are ready to be interacted with.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Hovering</h2>
+
+            
+            <p>
+
+                In pointer navigation mode, the pointer is said to be "hovering" above a control
+                if the pointer is located inside the control's area on the screen. Hovering is
+                similar to focus, but differs because hovering in itself does not select a
+                control for interaction. Rather a selection key must be pressed in order to
+                focus the control that the pointer is currently hovering over. Hover is
+                indicated by displaying a control in a distinct way from other controls.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Navigation mode</h2>
+
+            
+            <p>
+
+                A navigation mode refers to a method of selecting what user interface element to
+                interact with. The S60 Web Runtime supports two navigation modes: "tab" and
+                "pointer". In the tab mode, focus is moved between controls using the 4-way
+                controller. In pointer mode there is a pointer arrow on the screen that can be
+                moved freely using the 4-way controller. A control is focused by moving the
+                pointer arrow so that it hovers above a control, and then pressing a selection
+                key to select that control. In tab mode a control can be either in normal or
+                focused state, whereas in the pointer mode a control can be in normal, hover or
+                focused state.
+            </p>
+
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html">Overview of the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_TextArea_Class-GUID-137b9641-f3a5-4fc0-bf30-017533e2ad69.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,188 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit TextArea Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-137B9641-F3A5-4FC0-BF30-017533E2AD69" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit TextArea Class</title>
+</head>
+<body id="GUID-137B9641-F3A5-4FC0-BF30-017533E2AD69"><a name="GUID-137B9641-F3A5-4FC0-BF30-017533E2AD69"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit TextArea Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The TextArea class implements a multi-line text entry control. The control
+                is useful for situations when users need to enter long text.
+            </p>
+
+            <div class="fignone" id="GUID-137B9641-F3A5-4FC0-BF30-017533E2AD69__GUID-25E398AD-F232-4229-BD3C-6B79AE4A7C72"><a name="GUID-137B9641-F3A5-4FC0-BF30-017533E2AD69__GUID-25E398AD-F232-4229-BD3C-6B79AE4A7C72"><!-- --></a><span class="figcap">Figure 1. 
+TextArea control</span>
+
+                
+                <br /><img src="TextArea_Control_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.html">
+TextEntryControl</a>
+            </p>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-80E82CC8-6F1A-4E55-A7F4-715E7DFE856E"><a name="GUID-80E82CC8-6F1A-4E55-A7F4-715E7DFE856E"><!-- --></a>
+
+        <h2 class="topictitle2">
+Constructor</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[TextArea] new TextArea(String id, String caption, String text, Integer rows)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Creates a new instance of the TextArea class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+id</p>
+
+                        
+
+                            <p>
+
+                                Unique identifier for the control. Can be retrieved using the id property defined
+                                in the UIElement class that this control inherits from. Useful for example to
+                                identify the source of an event in event callback functions or to apply a CSS
+                                rule to only this particular control. The identifier can be null, in which case
+                                no id will be set for the control.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+caption</p>
+
+                        
+
+                            <p>
+
+                                The caption text for the control. A null caption can be used to hide the 
+                                caption area. The value is an XHTML string.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+text</p>
+
+                        
+
+                            <p>
+
+                                The text to display in the text area. If the argument is omitted or null then
+                                the text area will not contain any text when created.
+                                The value is a plain text string (not XHTML).
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+rows</p>
+
+                        
+
+                            <p>
+
+                                The argument specifies how many rows the text area should have. If omitted the
+                                text area will default to have 3 rows of text. Note that it is still possible
+                                to enter more than 3 lines of text. The rows define the height of the text area
+                                and thus how many lines of text are visible without scrolling.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    A new instance of the TextArea class.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,209 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit TextEntryControl Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-07359FF7-6015-4D2C-A9BF-B345FCF49090" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit TextEntryControl Class</title>
+</head>
+<body id="GUID-07359FF7-6015-4D2C-A9BF-B345FCF49090"><a name="GUID-07359FF7-6015-4D2C-A9BF-B345FCF49090"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit TextEntryControl Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The TextEntryControl class is an abstract base class for controls that let a user
+                enter text. Don't instantiate TextEntryControl directly but rather one of its subclasses.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html">
+Control</a>
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Events</h2>
+
+            
+            <br /><ul>
+
+                <li>
+
+                    <p>
+TextChanged</p>
+
+                    
+
+                        <p>
+
+                            This event is fired when the user enters new text in the control.
+                        </p>
+
+                    
+                </li>
+
+            </ul>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-4755F522-0799-4BE5-92DD-A651AFB8A1BE"><a name="GUID-4755F522-0799-4BE5-92DD-A651AFB8A1BE"><!-- --></a>
+
+        <h2 class="topictitle2">
+getText()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[String] TextEntryControl.getText(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the current text of the text entry control.
+                    The value is a plain text string (not XHTML).
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current text of the text entry control.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-0E3FE1F0-6ACA-4DFF-B694-281954916B27"><a name="GUID-0E3FE1F0-6ACA-4DFF-B694-281954916B27"><!-- --></a>
+
+        <h2 class="topictitle2">
+setText()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] TextEntryControl.setText(String text)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the text value of the text entry control. The text is displayed in the
+                    editable area of the control and can be edited by the user provided that
+                    the control is not disabled. Setting a text value of null results in no
+                    text being shown. The value is a plain text string (not XHTML).
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+text</p>
+
+                        
+
+                            <p>
+
+                                The text value to set to the text entry control. A value of null
+                                results in no text being shown.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_TextField_Class-GUID-799b7dea-1e4d-4147-bc27-acc4b91d8bf9.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,189 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit TextField Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-799B7DEA-1E4D-4147-BC27-ACC4B91D8BF9" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit TextField Class</title>
+</head>
+<body id="GUID-799B7DEA-1E4D-4147-BC27-ACC4B91D8BF9"><a name="GUID-799B7DEA-1E4D-4147-BC27-ACC4B91D8BF9"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit TextField Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The TextField class implements a single line text entry control. The control
+                is useful for situations where text is relatively short and doesn't need to
+                span multiple lines. The text field also supports masked entry, which is good
+                in situations where passwords or other secret text is entered.
+            </p>
+
+            <div class="fignone" id="GUID-799B7DEA-1E4D-4147-BC27-ACC4B91D8BF9__GUID-5FDA8C14-4D9A-444B-9595-54284FB8EB01"><a name="GUID-799B7DEA-1E4D-4147-BC27-ACC4B91D8BF9__GUID-5FDA8C14-4D9A-444B-9595-54284FB8EB01"><!-- --></a><span class="figcap">Figure 1. 
+TextField control</span>
+
+                
+                <br /><img src="TextField_Control_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.html">
+TextEntryControl</a>
+            </p>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-F3525C69-F5C8-4D20-BA8B-6EB52A8003F8"><a name="GUID-F3525C69-F5C8-4D20-BA8B-6EB52A8003F8"><!-- --></a>
+
+        <h2 class="topictitle2">
+Constructor</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[TextField] new TextField(String id, String caption, String text, Boolean masked)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Creates a new instance of the TextField class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+id</p>
+
+                        
+
+                            <p>
+
+                                Unique identifier for the control. Can be retrieved using the id property defined
+                                in the UIElement class that this control inherits from. Useful for example to
+                                identify the source of an event in event callback functions or to apply a CSS
+                                rule to only this particular control. The identifier can be null, in which case
+                                no id will be set for the control.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+caption</p>
+
+                        
+
+                            <p>
+
+                                The caption text for the control. A null caption can be used to hide the 
+                                caption area. The value is an XHTML string.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+text</p>
+
+                        
+
+                            <p>
+
+                                The text to display in the text field. If the argument is omitted or null then
+                                the text field will not contain any text when created.
+                                The value is a plain text string (not XHTML).
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+masked</p>
+
+                        
+
+                            <p>
+
+                                If the masked argument is true then the text field will be created in masked
+                                text entry mode. If the argument is omitted or false then the control will be
+                                created in normal text entry mode.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    A new instance of the TextField class.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Text_entry-GUID-b52e3343-5a39-4a83-ae97-461a53761207.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Text entry" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-B52E3343-5A39-4A83-AE97-461A53761207" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Text entry</title>
+</head>
+<body id="GUID-B52E3343-5A39-4A83-AE97-461A53761207"><a name="GUID-B52E3343-5A39-4A83-AE97-461A53761207"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Text entry</h1>
+
+    <div>
+
+        <p>
+
+            The WRTKit has two controls for text entry needs. For situations when only a 
+            single line of text is needed there's the TextField control. The TextField 
+            control supports "masked text entry", meaning that any text that is entered into 
+            the control is masked so it cannot be read. The mask is implemented so that 
+            every typed character is shown as an asterisk (*) character.
+        </p>
+
+        <p>
+
+            When longer or multi-line text entry is needed, the TextArea control 
+            can be used instead of the single-line TextField. The TextArea size 
+            can be defined in number of rows when the control is created. If the 
+            argument for rows is omitted a default of 3 rows will be used. 
+            Longer text can still be entered - the size refers to number of rows 
+            that are visible without scrolling. Note that TextArea controls do 
+            not support masked text entry.
+        </p>
+
+        <div class="fignone" id="GUID-B52E3343-5A39-4A83-AE97-461A53761207__GUID-F9A88AF0-067A-43EC-8C0B-7E0B092A6850"><a name="GUID-B52E3343-5A39-4A83-AE97-461A53761207__GUID-F9A88AF0-067A-43EC-8C0B-7E0B092A6850"><!-- --></a><span class="figcap">Figure 1. 
+TextField and TextArea controls</span>
+
+            
+            <br /><img src="Text_Entry_Controls_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            The text in TextField and TextArea controls can be retrieved and set using 
+            getter and setter methods.
+        </p>
+
+        <p>
+
+            Text entry controls fire "TextChanged" events when the user edits the text in
+            the control.
+        </p>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Travel Companion" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Travel_Companion_planning_the_widget-GUID-891068c7-c802-4da7-8674-8e8292aef7eb.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-BE79BA64-FA03-4968-964E-D7DCC42D7053" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Travel Companion</title>
+</head>
+<body id="GUID-BE79BA64-FA03-4968-964E-D7DCC42D7053"><a name="GUID-BE79BA64-FA03-4968-964E-D7DCC42D7053"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Travel Companion</h1>
+
+    <div>
+
+        <p>
+
+            If you've completed the Hello World and RSS Reader tutorials and feel that you
+            understand them well but still want to learn more, then this tutorial is for you!
+            The Travel Companion widget that we will create in this tutorial is something that
+            would be very useful for anyone who travels a lot. It's a widget that offers many
+            helpful features for travellers: a world clock that allows the user to simultaneously
+            follow the time at home and at the destination, a 5-day weather forecast for the
+            destination city and the current weather for both the home and destination cities,
+            a currency converter, and a summary of the current news headlines.
+        </p>
+
+        <p>
+
+            But because this tutorial is about using the WRTKit for developing widget user interfaces
+            we will not implement all the code that is required to actually carry out all the
+            functionality that was described above. Instead we will have a Travel Companion "engine"
+            that will provide all these services for us so that we can focus on the user interface.
+            The engine that we will use (that has been created for this example) is a mock engine,
+            meaning that it mimics what the real Travel Companion engine would do, but actually it
+            just returns hard coded weather forecasts and exchange rates. That's all we need for this
+            tutorial, but after you've created the widget you can modify the engine so that it
+            actually fetches news headlines, currency exchange rates and weather forecasts from
+            various data sources online. There are plenty of free services that you can integrate to.
+            And here's the best part: because we will implement the user interface so that it's
+            cleanly separated from the engine, you won't have to change a single line of the user
+            interface code after you change the engine to use real world data!
+        </p>
+
+        <p>
+
+            Our widget will have no less than five views: one main view, three functional views and
+            a settings view. The main view exists purely for navigational purposes. Because the widget
+            is so complex we want to give the user an overview of what's available and an easy way of
+            getting to everything. The three functional views include an information view that gives
+            the user the most important information in a single glance, a currency converter view,
+            and a five day weather forecast view. And finally the settings view lets the user configure
+            the home and local cities, daylight saving time and temperature unit (Celsius or
+            Fahrenheit) to use in the weather forecast.
+        </p>
+
+        <p>
+
+            The tutorial will teach several important things. First of all, we'll learn how to
+            create widgets that have multiple views. Second, we'll learn how to separate the code
+            in the widget so that the user interface doesn't need to know anything about how the
+            business logic works, and vice versa. Third, we'll create a navigational view using
+            the NavigationButton control. Fourth, we'll customize the look of the widget to include
+            a logo for our application in the list view caption area. And finally, we'll learn how
+            to update the content in the user interface using a timer. We'll use the timer to keep
+            the world clock, weather forecast and news headlines up to date. This is very important
+            because widgets are often used so that the user starts them and then just keeps them
+            running for days on end. If we didn't refresh the user interface then the information
+            would quickly get old and the user would be forced to do manual refreshes.
+        </p>
+
+    </div>
+
+<div>
+<ul class="ullinks">
+<li class="ulchildlink"><strong><a href="WRTKit_Travel_Companion_planning_the_widget-GUID-891068c7-c802-4da7-8674-8e8292aef7eb.html">Planning the widget</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.html">Travel Companion user interface</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.html">Functionality</a></strong><br />
+</li>
+</ul>
+
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html">WRTKit Tutorials</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,854 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Functionality" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-384F2430-3DE9-4006-AC8E-86C5774C3A79" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Functionality</title>
+</head>
+<body id="GUID-384F2430-3DE9-4006-AC8E-86C5774C3A79"><a name="GUID-384F2430-3DE9-4006-AC8E-86C5774C3A79"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Functionality</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Weather forecast</h2>
+
+            
+            <p>
+
+                Let's continue by implementing the weather forecast view. This view will
+                be entirely composed of non-foldable ContentPanel controls. We'll have one
+                panel that displays the city for which the forecast is for and one panel
+                for each day of the five-day forecast. In order to make it easy to change
+                the number of days the forecast is for we'll store references to the forecast
+                panels in an array. Thus, we need to add two global variables to the widget:
+            </p>
+
+<pre>
+
+// Weather view controls.
+var weatherCityPanel;
+var weatherContentPanels;
+</pre>
+
+            <p>
+
+                The next step is to create the actual view in the createWeatherView() function.
+                Of course the actual content for the content panels won't be known until at
+                runtime when we know what city the forecast is for and what the actual weather
+                forecast is. Still, we can create the actual content panels and just set their
+                content later so this is not a problem.
+            </p>
+
+<pre>
+
+// Creates the weather view.
+function createWeatherView() {
+    // empty caption text to display the caption bar - custom background using CSS
+    weatherView = new ListView(null, "");
+    
+    // heading panel for city
+    weatherCityPanel = new ContentPanel();
+    weatherView.addControl(weatherCityPanel);
+    
+    // create five content panels - one for each day in the 5-day forecast
+    weatherContentPanels = [];
+    for (var i = 0; i &lt; 5; i++) {
+        var weatherContentPanel = new ContentPanel();
+        weatherView.addControl(weatherContentPanel)
+        weatherContentPanels.push(weatherContentPanel);
+    }
+}
+</pre>
+
+            <p>
+
+                When we show the weather view we have to check what the current local city
+                is and set the weatherCityPanel's content to a suitable HTML fragment that
+                will work as a heading for the weather forecast. In addition to that we'll
+                have to retrieve the weather forecast from the business logic engine and then
+                create HTML from that for each day in the forecast and set it to the five
+                content panels that we are storing references to in the weatherContentPanels
+                array. The caption for the weather forecast panels will be a string that
+                indicates the day that the forecast is for.
+            </p>
+
+            <p>
+
+                Creating the HTML fragment for the forecast heading doesn't sound so hard
+                but generating HTML for a weather forecast for five days sounds a bit tricky.
+                Let's create a separate function to do that. Remember that the weather object
+                that the engine is returning to us has two properties: temperature and type.
+                The temperature is in the preferred temperature unit and the type is one of
+                the type codes, e.g. "Sunny". We'll use it to match it up with a weather icon.
+            </p>
+
+<pre>
+
+// Returns HTML for one day of weather forecast.
+function getHTMLForWeather(weather) {
+    // build weather icon file name string
+    var weatherIcon = "Weather" + weather.type + ".png";
+    
+    // build temperature string
+    var temperatureStr = weather.temperature + "&amp;deg;" + engine.getTemperatureUnit().toUpperCase();
+    
+    // build weather HTML
+    var weatherBuf = "";
+    weatherBuf += "&lt;table class=\"WeatherForecastDayTable\"&gt;&lt;tr&gt;";
+        weatherBuf += "&lt;td class=\"WeatherForecastIconCell\"&gt;";
+            weatherBuf += "&lt;img src=\"" + weatherIcon + "\"/&gt;";
+        weatherBuf += "&lt;/td&gt;";
+        weatherBuf += "&lt;td class=\"WeatherForecastTemperatureCell\"&gt;";
+            weatherBuf += temperatureStr;
+        weatherBuf += "&lt;/td&gt;";
+    weatherBuf += "&lt;/tr&gt;&lt;/table&gt;";
+    
+    return weatherBuf;
+}
+</pre>
+
+            <p>
+
+                The HTML that we are generating is a table with a single row with two cells.
+                The left cell has the weather icon image and the right cell has the temperature.
+                We are using three CSS style rules for the table and we naturally need to create
+                those too in the TravelCompanion.css file:
+            </p>
+
+<pre>
+
+/* Table for one day of weather forecast information */
+.WeatherForecastDayTable {
+    margin: auto;
+    border-spacing: 0px;
+}
+
+/* Table cell for weather icon */
+.WeatherForecastIconCell {
+    line-height: 1px;
+    font-size: 1px;
+    vertical-align: middle;
+}
+
+/* Table cell for temperature information */
+.WeatherForecastTemperatureCell {
+    padding: 0px 0px 0px 10px;
+    vertical-align: middle;
+}
+</pre>
+
+            <p>
+
+                Now we have a way to turn a weather forecast into HTML that we can use in a
+                ContentPanel control. We'll do that in a function we call updateWeatherForecast().
+                The caption for each weather forecast panel will indicate the day that the
+                forecast is for. The first weather object in the array that the engine returns
+                is for today and the subsequent ones are for coming days.
+            </p>
+
+<pre>
+
+// Updates the weather forecast.
+function updateWeatherForecast() {
+    // get local time and weather
+    var localTime = engine.getLocalTime();
+    var localWeather = engine.getLocalWeather();
+    
+    // set the weather for each day in the forecast
+    for (var i = 0; i &lt; 5; i++) {
+        // figure out day name
+        var day = (localTime.day + i) % 7;
+        var dayName = localTime.dayNames[day];
+        
+        // set weather to content panel
+        weatherContentPanels[i].setCaption((i == 0 ? "Today, " : "") + dayName);
+        weatherContentPanels[i].setContent(getHTMLForWeather(localWeather[i]));
+    }
+}
+</pre>
+
+            <p>
+
+                We are now ready to implement the showWeatherView() function:
+            </p>
+
+<pre>
+
+// Displays the weather view.
+function showWeatherView() {
+    // set heading city panel
+    weatherCityPanel.setContent("&lt;div class=\"WeatherCityPanel\"&gt;" + engine.getLocalCity().name + " 5-day Forecast("&lt;/div&gt;");
+    
+    // update the weather forecast before showing the view
+    updateWeatherForecast();
+    
+    setSubViewSoftkeys();
+    uiManager.setView(weatherView);
+}
+</pre>
+
+            <p>
+
+                The weatherCityPanel gets a heading that matches the currently configured local city.
+                We're using another CSS rule for that so we'll have to add it to our stylesheet:
+            </p>
+
+<pre>
+
+/* City heading panel for weather forecast view */
+.WeatherCityPanel {
+    font-size: 14px;
+    font-weight: bold;
+    padding: 0px 0px 10px 0px;
+}
+</pre>
+
+            <p>
+
+                The weather forecast view and functionality is now ready to be tested.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Currency converter</h2>
+
+            
+            <p>
+
+                It's time to move on to the currency converter. This view is going to have two
+                TextField controls. One for home currency and one for local currency. In addition
+                there will be two FormButton controls to convert from the home currency to the
+                local currency, and vice versa. We'll need references to the textfields so that
+                we can retrieve their values when the form buttons are pressed:
+            </p>
+
+<pre>
+
+// Converter view controls.
+var homeMoneyField;
+var localMoneyField;
+</pre>
+
+            <p>
+
+                Creating the view is quite straight forward:
+            </p>
+
+<pre>
+
+// Creates the converter view.
+function createConverterView() {
+    // empty caption text to display the caption bar - custom background using CSS
+    converterView = new ListView(null, "");
+    
+    // home money
+    homeMoneyField = new TextField();
+    converterView.addControl(homeMoneyField);
+    
+    // local money
+    localMoneyField = new TextField();
+    converterView.addControl(localMoneyField);
+    
+    // home to local
+    var homeToLocalButton = new FormButton(null, "Convert Home to Local");
+    converterView.addControl(homeToLocalButton);
+    
+    // local to home
+    var localToHomeButton = new FormButton(null, "Convert Local to Home");
+    converterView.addControl(localToHomeButton);
+}
+</pre>
+
+            <p>
+
+                Notice that the textfields don't have any caption or text at this point. We will
+                set that just before the view is displayed because the caption will depend on
+                what the home and local cities are configured to.
+            </p>
+
+            <p>
+
+                Also notice that we don't have any event listeners for the buttons at this point.
+                That's because we haven't actually written any functions that will implement
+                the currency conversion yet. But before we do that we'll implement the
+                function to show the view:
+            </p>
+
+<pre>
+
+// Displays the converter view.
+function showConverterView() {
+    // set captions and reset fields
+    homeMoneyField.setCaption("Home Currency (" + engine.getHomeCity().currency + ")");
+    homeMoneyField.setText("");
+    localMoneyField.setCaption("Local Currency (" + engine.getLocalCity().currency + ")");
+    localMoneyField.setText("");
+    
+    setSubViewSoftkeys();
+    uiManager.setView(converterView);
+}
+</pre>
+
+            <p>
+
+                You can now test the view but it won't actually convert any currency until
+                we give our form buttons event listeners and write the code that will be
+                called when the buttons are pressed.
+            </p>
+
+            <p>
+
+                We'll implement that in two functions. One to convert from home to local and
+                another to convert in the other direction. The functions take the current
+                text value from the corresponding field and then pass it to the engine to do
+                the conversion. The result is then placed in the other of the two fields,
+                formatted so that the result has exactly two digits.
+            </p>
+
+<pre>
+
+// Called when the user clicks on the "convert home to local" button
+// in the converter view. (rounds to two decimals)
+function convertHomeToLocalMoney() {
+    var homeMoney = parseFloat(homeMoneyField.getText());
+    var localMoney = engine.convertHomeToLocalMoney(homeMoney).toFixed(2);
+    localMoneyField.setText(localMoney);
+}
+
+// Called when the user clicks on the "convert local to home" button
+// in the converter view. (rounds to two decimals)
+function convertLocalToHomeMoney() {
+    var localMoney = parseFloat(localMoneyField.getText());
+    var homeMoney = engine.convertLocalToHomeMoney(localMoney).toFixed(2);
+    homeMoneyField.setText(homeMoney);
+}
+</pre>
+
+            <p>
+
+                Now that the functions are implemented we can add the event listeners to our
+                form buttons. We'll add this code right after where the buttons are created in
+                the createConverterView() function:
+            </p>
+
+<pre>
+
+homeToLocalButton.addEventListener("ActionPerformed", convertHomeToLocalMoney);
+localToHomeButton.addEventListener("ActionPerformed", convertLocalToHomeMoney);
+</pre>
+
+            <p>
+
+                The currency converter is now working and it's time to test it. Try it with
+                different currencies by changing the home and local cities in the settings view.
+            </p>
+
+            <div class="fignone" id="GUID-384F2430-3DE9-4006-AC8E-86C5774C3A79__GUID-D5A1648B-B81D-46B0-A15F-C3C8FF2185D7"><a name="GUID-384F2430-3DE9-4006-AC8E-86C5774C3A79__GUID-D5A1648B-B81D-46B0-A15F-C3C8FF2185D7"><!-- --></a><span class="figcap">Figure 1. 
+Travel Companion converter view</span>
+
+                
+                <br /><img src="Travel_Companion_Converter_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Information view</h2>
+
+            
+            <p>
+
+                The information view is a summary of relevant information that the user is
+                will often need. Here we'll have a world clock that shows the home and local
+                time, the current weather at home and in the local city, as well as the
+                latest news headlines. We will use ContentPanel controls for all of these.
+                One for the home time, one for the local time, one for the home weather, one
+                for the local weather, and one for all the news headlines.
+            </p>
+
+            <p>
+
+                We'll need to access all of these content panels from outside the view creation
+                function so we'll need global variables to hold references to them:
+            </p>
+
+<pre>
+
+// Info view controls.
+var homeCityTimePanel;
+var localCityTimePanel;
+var homeCityWeatherPanel;
+var localCityWeatherPanel;
+var newsHeadlinesPanel;
+</pre>
+
+            <p>
+
+                We can now proceed and actually implement the creation of the information view:
+            </p>
+
+<pre>
+
+// Creates the info view.
+function createInfoView() {
+    // empty caption text to display the caption bar - custom background using CSS
+    infoView = new ListView(null, "");
+    
+    // home city time
+    homeCityTimePanel = new ContentPanel();
+    infoView.addControl(homeCityTimePanel);
+    
+    // local city time
+    localCityTimePanel = new ContentPanel();
+    infoView.addControl(localCityTimePanel);
+    
+    // separator
+    infoView.addControl(new Separator());
+    
+    // home city weather
+    homeCityWeatherPanel = new ContentPanel();
+    infoView.addControl(homeCityWeatherPanel);
+    
+    // local city weather
+    localCityWeatherPanel = new ContentPanel();
+    infoView.addControl(localCityWeatherPanel);
+    
+    // separator
+    infoView.addControl(new Separator());
+    
+    // news headlines
+    newsHeadlinesPanel = new ContentPanel();
+    infoView.addControl(newsHeadlinesPanel);
+}
+</pre>
+
+            <p>
+
+                We already have a function that turns a weather forecast into HTML but we
+                don't have similar functions for time or for news headlines. We'll need
+                that when we want to put content into the time and headline content panels
+                so let's write those functions next.
+            </p>
+
+            <p>
+
+                For time we'll need a function that takes a DateTime object and returns
+                HTML that we can use in the content panel in the information view.
+            </p>
+
+<pre>
+
+// Returns HTML for time.
+function getHTMLForTime(time) {
+    // build HTML buffer
+    var timeBuf = "";
+    timeBuf += "&lt;div class=\"Clock\"&gt;";
+        timeBuf += time.hours + ":" + (time.minutes &lt; 10 ? "0" : "") + time.minutes;
+    timeBuf += "&lt;/div&gt;";
+    return timeBuf;
+}
+</pre>
+
+            <p>
+
+                The HTML uses a CSS rule that we'll have to define in our stylesheet:
+            </p>
+
+<pre>
+
+/* Clock div */
+.Clock {
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+}
+</pre>
+
+            <p>
+
+                Next up is the function for turning the latest news headlines into HTML.
+                For each news headline we'll generate a div that contains the actual
+                news headline plus a link to the website where the full news article is.
+                Opening URLs should be done using the widget.openURL() method in the
+                S60 Web Runtime but since we don't have that functionality in a PC browser
+                we'll write a wrapper for the function just like we did for the RSS Reader:
+            </p>
+
+<pre>
+
+// Opens a URL.
+function openURL(url) {
+    if (window.widget) {
+        // in WRT
+        widget.openURL(url);
+    } else {
+        // outside WRT
+        window.open(url, "NewWindow");
+    }
+}
+</pre>
+
+            <p>
+
+                Now we can implement the function that turns news headlines into HTML:
+            </p>
+
+<pre>
+
+// Returns HTML for news headlines.
+function getHTMLForNewsHeadlines(newsHeadlines) {
+    var newsBuf = "";
+    for (var i = 0; i &lt; newsHeadlines.length; i++) {
+        newsBuf += "&lt;div class=\"NewsHeadline\"&gt;";
+            newsBuf += newsHeadlines[i].headline + "&lt;br/&gt;";
+            newsBuf += "&lt;a href=\"JavaScript:openURL('" + newsHeadlines[i].url + "');\"&gt;";
+            newsBuf += "Read more...";
+            newsBuf += "&lt;/a&gt;";
+        newsBuf += "&lt;/div&gt;";
+    }
+    return newsBuf;
+}
+</pre>
+
+            <p>
+
+                The div that encloses each news headline uses a CSS rule called NewsHeadline.
+                As with all other CSS rules that we use we'll define this one too in
+                the TravelCompanion.css stylesheet file. We also need to add rules for what
+                links should look like in the context of a news headline. We define the link
+                as bold underlined blue text in its normal state and inverse with blue background
+                and white text when focused.
+            </p>
+
+<pre>
+
+/* News headline */
+.NewsHeadline {
+    padding: 0px 0px 10px 0px;
+}
+
+/* Anchor tags in the context of a news headline link */
+.NewsHeadline a {
+    text-decoration: underline;
+    font-weight: bold;
+    color: rgb(0,0,255);
+}
+
+/* Focused anchor tags */
+.NewsHeadline a:focus {
+    background: rgb(0,0,255);
+    color: rgb(255,255,255);
+}
+</pre>
+
+            <p>
+
+                Now we should have everything we need to be able to update the information
+                view content panels when the view is shown. It's time to implement the
+                showInfoView() function:
+            </p>
+
+<pre>
+
+// Displays the info view.
+function showInfoView() {
+    // set current information to controls
+    var homeCity = engine.getHomeCity();
+    var localCity = engine.getLocalCity();
+    
+    // set time
+    var homeTime = engine.getHomeTime();
+    var localTime = engine.getLocalTime();
+    homeCityTimePanel.setCaption(homeCity.name + " Time");
+    homeCityTimePanel.setContent(getHTMLForTime(homeTime));
+    localCityTimePanel.setCaption(localCity.name + " Time");
+    localCityTimePanel.setContent(getHTMLForTime(localTime));
+    
+    // set weather
+    var homeWeather = engine.getHomeWeather();
+    var localWeather = engine.getLocalWeather();
+    homeCityWeatherPanel.setCaption(homeCity.name + " Weather");
+    homeCityWeatherPanel.setContent(getHTMLForWeather(homeWeather[0]));
+    localCityWeatherPanel.setCaption(localCity.name + " Weather");
+    localCityWeatherPanel.setContent(getHTMLForWeather(localWeather[0]));
+    
+    // set headline
+    var newsHeadlines = engine.getNewsHeadlines();
+    newsHeadlinesPanel.setCaption("News Headlines");
+    newsHeadlinesPanel.setContent(getHTMLForNewsHeadlines(newsHeadlines));
+    
+    setSubViewSoftkeys();
+    uiManager.setView(infoView);
+}
+</pre>
+
+            <p>
+
+                If you try the view now, everything will seem to work fine. But there
+                is a big problem! We set the content in the content panels when the
+                view is shown but if we stay in the view for an hour the clocks will
+                still show the same time as when we showed the view. What's worse, it's
+                not just the information view that has this problem. The weather forecast
+                view is equally broken.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Updating views with a timer</h2>
+
+            
+            <p>
+
+                In order to keep the views up to date we'll need to start a timer that
+                periodically calls a function where we examine whether it's been long
+                enough since the last update of a view that it's time to update the
+                content in that view. Note that we only need to update a view using the
+                timer if the view is actually visible.
+            </p>
+
+            <p>
+
+                That sounds good at first but some things have to be updated more
+                frequently than others. The clocks in our information view have to not
+                only be updated once a minute but immediately when the minute changes.
+                Such accuracy is not needed for the weather forecasts or news headlines.
+                For them it's fine if they are updated once per hour. Except that weather
+                forecasts also have to be updated when the day rolls over to the next as
+                otherwise the forecast will show the wrong day. Because the home and local
+                cities can be in different timezones their days will roll over at
+                different times and thus we have to track these separately.
+            </p>
+
+            <p>
+
+                It turns out that we need no less than five variables to track this.
+                We need one to track the last minute that has been updated to the clocks,
+                one variable is needed to track when the weather was last updated, one
+                to track the day in the home city when the home city weather forecast
+                was updated, one to track the same but for the local city, and one to
+                track when the news headlines were updated. Let's declare those variables
+                and initialize them:
+            </p>
+
+<pre>
+
+// Tracks last updated minute on the clocks.
+var lastUpdatedClockMinute = -1;
+
+// Tracks last update time for weather.
+var weatherLastUpdated = -1;
+
+// Tracks the days when the weather was last updated.
+var lastUpdatedHomeWeatherDay = -1;
+var lastUpdatedLocalWeatherDay = -1;
+
+// Tracks last update time for news headlines.
+var newsHeadlinesLastUpdated = -1;
+</pre>
+
+            <p>
+
+                We'll use the time in millieconds to remember update times and compare
+                how long it's been since an update happened. Since we'll use this quite
+                a lot, let's create a small helper function for it:
+            </p>
+
+<pre>
+
+// Returns the current time in milliseconds.
+function getTimeMillis() {
+    return new Date().getTime();
+}
+</pre>
+
+            <p>
+
+                When we show a view we have to update the appropriate tracking variables
+                so the widget will properly keep track of when a view was updated. That
+                means that we have to add the following to just before we show the
+                information view in showInfoView():
+            </p>
+
+<pre>
+
+// update the tracking variables
+lastUpdatedClockMinute = homeTime.minutes;
+weatherLastUpdated = getTimeMillis();
+lastUpdatedHomeWeatherDay = homeTime.day;
+lastUpdatedLocalWeatherDay = localTime.day;
+newsHeadlinesLastUpdated = getTimeMillis();
+</pre>
+
+            <p>
+
+                In the same way the showWeatherView() function needs the following addition:
+            </p>
+
+<pre>
+
+// update the tracking variables
+weatherLastUpdated = getTimeMillis();
+lastUpdatedLocalWeatherDay = engine.getLocalTime().day;
+</pre>
+
+            <p>
+
+                Now our tracking variables should be updated to the right times whenever views
+                are shown but we still don't have a timer to handle the automatic updating
+                of the views.
+            </p>
+
+            <p>
+
+                We'll set this timer up so that the timer callback function is called once
+                every second so that we can make sure that the clocks don't fall behind. We'll
+                track the timer identifier in a variable:
+            </p>
+
+<pre>
+
+// View updating timer identifier.
+var timerId;
+</pre>
+
+            <p>
+
+                We'll make the timer call a function called updateViews() that we will
+                create shortly but first let's start the timer as the last thing in the
+                init() function:
+            </p>
+
+<pre>
+
+// start timer that keeps views up to date
+timerId = setInterval(updateViews, 1000);
+</pre>
+
+            <p>
+
+                The updateViews() function needs to check what view we are currently in and do
+                the appropriate checks depending on the view. If we're in the information view
+                then we have three things to check. The first thing is to check if the minute
+                has changed on the clock. The second is to check if it's been over 60 minutes
+                since the weather was updated or if either the home or local city has rolled
+                over to the next day. And finally the third to thing to check is if it's been
+                over 60 minutes since the news headlines were updated.
+            </p>
+
+            <p>
+
+                If we are in the weather view then we check if it's been over 60 minutes since
+                the weather was updated or if the local city has rolled over to the next day.
+                Note that the weather forecast view only displays the local weather forecast
+                so we don't have to check for if the home city has rolled over to the next day.
+            </p>
+
+            <p>
+
+                The implementation of the function is therefore as follows:
+            </p>
+
+<pre>
+
+// Timer callback function that gets called once every second to keep views up to date.
+function updateViews() {
+    
+    // get the current view
+    var currentView = uiManager.getView();
+    
+    // get home and local time as well as time in milliseconds
+    var homeTime = engine.getHomeTime();
+    var localTime = engine.getLocalTime();
+    var now = getTimeMillis();
+    
+    if (currentView == infoView) {
+        // only update the clocks if the minute has changed
+        if (homeTime.minutes != lastUpdatedClockMinute) {
+            lastUpdatedClockMinute = homeTime.minute;
+            homeCityTimePanel.setContent(getHTMLForTime(homeTime));
+            localCityTimePanel.setContent(getHTMLForTime(localTime));
+        }
+        
+        // update weather if it hasn't been updated in the last hour or if the day has changed
+        if ((now &gt; weatherLastUpdated + (1000 * 60 * 60)) ||
+                (homeTime.day != lastUpdatedHomeWeatherDay) ||
+                (localTime.day != lastUpdatedLocalWeatherDay)) {
+            weatherLastUpdated = now;
+            lastUpdatedHomeWeatherDay = homeTime.day;
+            lastUpdatedLocalWeatherDay = localTime.day;
+            var homeWeather = engine.getHomeWeather();
+            var localWeather = engine.getLocalWeather();
+            homeCityWeatherPanel.setContent(getHTMLForWeather(homeWeather[0]));
+            localCityWeatherPanel.setContent(getHTMLForWeather(localWeather[0]));
+        }
+        
+        // update news headlines if they haven't been updated in the last hour
+        if (now &gt; newsHeadlinesLastUpdated + (1000 * 60 * 60)) {
+            newsHeadlinesLastUpdated = now;
+            var newsHeadlines = engine.getNewsHeadlines();
+            newsHeadlinesPanel.setContent(getHTMLForNewsHeadlines(newsHeadlines));
+        }
+    } else if (currentView == weatherView) {
+        // update weather if it hasn't been updated in the last hour or if the day has changed
+        if ((now &gt; weatherLastUpdated + (1000 * 60 * 60)) ||
+                (localTime.day != lastUpdatedLocalWeatherDay)) {
+            weatherLastUpdated = now;
+            lastUpdatedLocalWeatherDay = localTime.day;
+            updateWeatherForecast();
+        }
+    }
+}
+</pre>
+
+            <div class="fignone" id="GUID-384F2430-3DE9-4006-AC8E-86C5774C3A79__GUID-CBE870F8-DE6F-47D9-BE2B-F7D756DC8A40"><a name="GUID-384F2430-3DE9-4006-AC8E-86C5774C3A79__GUID-CBE870F8-DE6F-47D9-BE2B-F7D756DC8A40"><!-- --></a><span class="figcap">Figure 2. 
+Travel Companion information view</span>
+
+                
+                <br /><img src="Travel_Companion_Info_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+What we have learned</h2>
+
+            
+            <p>
+
+                The Travel Companion widget is now completed! We have learned to implement
+                complex widgets with multiple views using the WRTKit. We have also learned
+                how to keep information in views up to date using a timer. And we implemented
+                the widget without any dependencies to how the business logic engine was
+                implemented. That will come in handy if you want to continue developing this
+                widget by substituting the mock engine with one that actually uses real
+                world data. You are now ready to tackle any challenge using the WRTKit!
+            </p>
+
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html">Travel Companion</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Travel_Companion_planning_the_widget-GUID-891068c7-c802-4da7-8674-8e8292aef7eb.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,437 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Planning the widget" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-891068C7-C802-4DA7-8674-8E8292AEF7EB" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Planning the widget</title>
+</head>
+<body id="GUID-891068C7-C802-4DA7-8674-8E8292AEF7EB"><a name="GUID-891068C7-C802-4DA7-8674-8E8292AEF7EB"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Planning the widget</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Designing the user interface</h2>
+
+            
+            <p>
+
+                Because the Travel Companion is such a complex widget it is important to plan
+                both the user interface and implementation carefully before starting to write
+                any code. What are the most common use cases that we want to address with this
+                widget? How will typical users be using the widget? What kind of future features
+                might there be and can we plan for those already?
+            </p>
+
+            <p>
+
+                Because the Travel Companion widget offers so much functionality and information
+                it is important to present it in such a way that it doesn't overwhelm the user.
+                To give the user a better idea of what is available and how to get to everything,
+                we'll have a main view with nothing but navigation buttons to the other views in
+                the widget. We'll implement this view using WRTKit NavigationButton controls and
+                we will give each button its own icon so that the user can quickly see what the
+                view is about.
+            </p>
+
+            <p>
+
+                After some planning and talking to potential users we have decided to create
+                a summary view that we will call "information view". This view will include the
+                most important information in a single place so that the user can view it quickly
+                without having to press any buttons to navigate around the widget. We'll put a
+                world clock here, the current weather at home and at the local destination, and
+                the latest news headlines. The information view will be entirely composed from
+                WRTKit ContentPanel controls.
+            </p>
+
+            <p>
+
+                In addition to the information view we'll have two more specialized views. We'll
+                have a currency converter with two TextField controls (one for the home currency
+                and one for the local) and two FormButton controls. One button will convert
+                from the home currency to local currency and the other button will convert in the
+                other direction. The second specialized view is a five day weather forecast. Like
+                the information view this will be using ContentPanel controls and we will share
+                the weather content used for the information view for this view.
+            </p>
+
+            <p>
+
+                Finally we'll have a settings view that is accessible from the main view just like
+                the other views in the widget. In many other widgets we might want to hide access
+                to the settings view to the Options menu but in this case one of the common use
+                cases is to configure where in the world you are so rather than hiding access to
+                the view we want to present it clearly in the main view. The settings view will
+                use SelectionMenu controls to allow users to select their home and local cities,
+                SelectionList controls with a single option that will be presented as a checkbox
+                to configure whether the cities are in daylight saving time or not, and a
+                SelectionList control that lets the user select the temperature unit to use in
+                the weather forecasts. Finally there will be two FormButton controls to let the
+                user save or cancel any settings changes.
+            </p>
+
+            <p>
+
+                When the widget starts will setup a timer that will call a timer callback function
+                once every second. In the callback function we will check what view is currently
+                active and we'll update the views (e.g. clock) so that the views stays up to date
+                even if the user doesn't do anything. After all, the most common use case is to
+                just have the information view open and not do anything other than glance at the
+                information that is displayed.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Travel Companion widget files</h2>
+
+            
+            <p>
+
+                All the files - HTML, CSS, JavaScript and images - have been created for you.
+                You can find the completed widget with all its files in the Examples/TravelCompanion
+                directory in the WRTKit SDK. The tutorial will assume that you will create your
+                own Travel Companion widget by following the instructions but if you prefer you can
+                just open up the ready made files and examine them as you read the tutorial. If you
+                are creating the widget from scratch by following the tutorial's instructions then
+                we suggest that you create a working directory for the new widget and copy over all
+                other ready made files except TravelCompanion.js. All of our work will be on this
+                file, but before we move on to that file we'll take a look at what other files the
+                widget is using.
+            </p>
+
+            <p>
+
+                Since we're using the WRTKit to implement our user interface we have the WRTKit
+                library with all its files in a directory called "WRTKit".
+            </p>
+
+            <p>
+
+                Like all widgets the Travel Companion has an Info.plist widget metadata file and an
+                icon in a file called Icon.png. You'll also notice that there's a bunch of png
+                image files in the widget directory. There's a file called ListViewCaptionLogo.png
+                that we will use as a custom graphical element in the view caption in all of our
+                views. Four png files have names starting with "Nav" and the rest start with
+                "Weather". The image files that have names starting with "Nav" are icons for the
+                NavigationButton controls for the main view. They are simply images that are
+                30 by 30 pixels in size and have some graphical motif that captures what the button
+                does. Note that the size of images used for navigation buttons doesn't have to be
+                exactly 30 by 30 pixels - you can use any size you like. The images with names
+                starting with "Weather" are images used in the weather forecasts. There is one image
+                for each kind of weather that can be forecasted: rain, snow, sunshine, clouds, etc.
+            </p>
+
+            <p>
+
+                You'll find two JavaScript files: Engine.js and TravelCompanion.js. The Engine.js
+                file has the implementation of the business logic and the TravelCompanion.js file
+                implements the widget and its user interface. Finally there is the main widget HTML
+                file called TravelCompanion.html and a CSS file called TravelCompanion.css that
+                contains all the style rules used in the widget - above that what the WRTKit defines
+                by default, which is actually nearly everything!
+            </p>
+
+            <p>
+
+                Let's take a quick peek at TravelCompanion.html:
+            </p>
+
+<pre>
+
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+    &lt;head&gt;
+        &lt;title&gt;&lt;/title&gt;
+        &lt;script type="text/javascript" src="WRTKit/WRTKit.js"&gt;&lt;/script&gt;
+        &lt;script type="text/javascript" src="Engine.js"&gt;&lt;/script&gt;
+        &lt;script type="text/javascript" src="TravelCompanion.js"&gt;&lt;/script&gt;
+        &lt;style type="text/css"&gt;
+            @import url("TravelCompanion.css");
+        &lt;/style&gt;
+    &lt;/head&gt;
+    &lt;body onload="init()"&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+            <p>
+
+                If you've gone through the Hello World and/or RSS Reader tutorials then this should
+                look very familiar. The file has no content, includes the WRTKit.js file from the
+                WRTKit library directory, includes the JavaScript files that we are using to implement
+                the Travel Companion widget, includes the TravelCompanion.css stylesheet file, and
+                finally calls a function called init() when the widget has loaded everything.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+The Travel Companion Engine</h2>
+
+            
+            <p>
+
+                Following good software engineering principles, we are implementing the Travel Companion
+                widget so that the user interface is decoupled from the implementation of the actual
+                business logic that knows weather forecasts, calculates currency conversions, etc. The
+                logic is outside of the scope for this tutorial since we're interested in learning about
+                how to use the WRTKit - not how to convert euros to dollars. Because of this we will not
+                look at all at how the business logic is implemented but we will take a close look at
+                the interface between the user interface and the business logic engine. In fact, the 
+                implementation of the engine for this example is a mock implementation and only mimics
+                what a real engine would do. But since this is only an example that's quite alright.
+                The engine interface, however, is identical to what it would be even if the engine would
+                have a real implementation.
+            </p>
+
+            <p>
+
+                The engine is implemented as a JavaScript class that you instantiate before using.
+                The reason for being implemented as a class is simply so that the engine can better
+                encapsulate its internal data and provide a kind of name space for its methods.
+            </p>
+
+            <p>
+
+                The core concept in the Travel Companion engine is that of cities. The engine supports
+                a list of cities and one will always be a "home city" and one a "local city". The
+                same city can be both home and local. Home refers to the city where the user lives
+                and local refers to the city where the user is currently located. The engine doesn't
+                know the daylight saving time schedules for cities so this is configured manually by
+                the user: one setting for the home city and one for the local city. The engine handles
+                all preferences but the user interface must tell it to save preferences if some
+                preference is modified. Preferences are automatically loaded when the engine is
+                created, which should happen when the widget starts so that all the settings are
+                available immediately.
+            </p>
+
+            <p>
+
+                A city in the engine is a JavaScript object. A city object has the following public
+                properties: name for the city name, currency for the three-letter currency abbreviation, 
+                and timezone for the timezone code (e.g. GMT). Cities are created and managed entirely
+                by the engine.
+            </p>
+
+            <p>
+
+                Below is a complete list of the public engine APIs that are related to preferences and
+                cities:
+            </p>
+
+            <p>
+
+                Loading and saving preferences:
+            </p>
+
+<pre>
+
+[void] Engine.loadPreferences(void)
+[void] Engine.savePreferences(void)
+</pre>
+
+            <p>
+
+                Retrieving all cities supported by the engine:
+            </p>
+
+<pre>
+
+[Array] Engine.getCities(void)
+</pre>
+
+            <p>
+
+                Retrieving a city based on its name:
+            </p>
+
+<pre>
+
+[City] Engine.getCityByName(String name)
+</pre>
+
+            <p>
+
+                Retrieving and settting the home city:
+            </p>
+
+<pre>
+
+[City] Engine.getHomeCity(void)
+[void] Engine.setHomeCity(City city)
+</pre>
+
+            <p>
+
+                Retrieving and settting the home city daylight saving time setting:
+            </p>
+
+<pre>
+
+[Boolean] Engine.getHomeCityDST(void)
+[void] Engine.setHomeCityDST(Boolean dst)
+</pre>
+
+            <p>
+
+                Retrieving and settting the local city:
+            </p>
+
+<pre>
+
+[City] Engine.getLocalCity(void)
+[void] Engine.setLocalCity(City city)
+</pre>
+
+            <p>
+
+                Retrieving and settting the local city daylight saving time setting:
+            </p>
+
+<pre>
+
+[Boolean] Engine.getLocalCityDST(void)
+[void] Engine.setLocalCityDST(Boolean dst)
+</pre>
+
+            <p>
+
+                Retrieving and setting the preferred temperature unit:
+            </p>
+
+<pre>
+
+[String] Engine.getTemperatureUnit(void)
+[void] Engine.setTemperatureUnit(String unit)
+</pre>
+
+            <p>
+
+                Of course the engine isn't just about preferences. Its actual purpose is to perform
+                various operations related to these cities, such as converting currencies, figuring
+                out what the time is in a foreign city, etc. To simplify the usage of the engine,
+                the public methods related to these operations are defined in terms of the home and
+                local city as it is configured at the time when the method is called.
+            </p>
+
+            <p>
+
+                Here's the full list of the actual operation methods that the engine supports:
+            </p>
+
+            <p>
+
+                Currency conversions between home and local:
+            </p>
+
+<pre>
+
+[Float] Engine.convertHomeToLocalMoney(Float amount)
+[Float] Engine.convertLocalToHomeMoney(Float amount)
+</pre>
+
+            <p>
+
+                Retrieving the current time in the home and local cities:
+            </p>
+
+<pre>
+
+[DateTime] Engine.getHomeTime(void)
+[DateTime] Engine.getLocalTime(void)
+</pre>
+
+            <p>
+
+                The DateTime object returned by getHomeTime() and getLocalTime() is a JavaScript
+                object that contains the following properties: year, month, date, day, hours, minutes,
+                seconds, timezone. All properties are integers except the timezone, which is a string
+                that represents the timezone code, e.g. "EET" for "Eastern European Time". Month and 
+                day are zero-based to simplify their use as indexes in arrays that contains the month
+                and week day names. These arrays can be found in the DateTime object. The array for
+                week day names is called dayNames and the array for month names is called monthNames.
+                Day 0 is Sunday and month 0 is January. To find out the name of the day represented
+                by a DateTime object you would do the following:
+            </p>
+
+<pre>
+
+var homeTime = engine.getHomeTime();
+var dayOfWeekName = homeTime.dayNames[homeTime.day];
+</pre>
+
+            <p>
+
+                Note that the default JavaScript Date object is not used because of its timezone-
+                related limitations.
+            </p>
+
+            <p>
+
+                Retrieving 5-day forecasts for the home and local cities:
+            </p>
+
+<pre>
+
+[Array] Engine.getHomeWeather(void)
+[Array] Engine.getLocalWeather(void)
+</pre>
+
+            <p>
+
+                The array returned by the getHomeWeather() and getLocalWeather() methods contains
+                the weather for the next five days so that the first element is the weather today,
+                the second is the weather tomorrow, etc. Each item is a JavaScript object that
+                has two properties: temperature, which is an integer in the preferred temperature
+                unit, and type, which is a string that describes the weather. The type string is
+                one of the following: "Sunny", "PartlyCloudy", "Cloudy", "Rain", "Sleet" or Snow".
+                There is a weather type image for each of these, named so that there is a "Weather"
+                prefix in front of the weather type and a ".png" suffix after it, e.g. "WeatherSunny.png".
+            </p>
+
+            <p>
+
+                Retrieving an array of the latest news headlines:
+            </p>
+
+<pre>
+
+[Array] Engine.getNewsHeadlines(void)
+</pre>
+
+            <p>
+
+                Each item in the array that the getNewsHeadlines() method returns is a JavaScript
+                object that describes one news headline. Each news headline object has two
+                properties: headline for the actual news headline text and url for the website
+                address where the full news article is located.
+            </p>
+
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html">Travel Companion</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,698 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Travel Companion user interface" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-989D17CC-F019-46BB-B6F5-49166E258ACA" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Travel Companion user interface</title>
+</head>
+<body id="GUID-989D17CC-F019-46BB-B6F5-49166E258ACA"><a name="GUID-989D17CC-F019-46BB-B6F5-49166E258ACA"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Travel Companion user interface</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Handling multiple views</h2>
+
+            
+            <p>
+
+                The Travel Companion widget will follow many of the same patterns that the Hello World
+                and RSS Reader widgets have followed. The entry point to the widget is the init() function
+                that we call from the onload event handler in the main HTML file TravelCompanion.html.
+                We will implement the init() function along with the rest of the widget and user interface
+                in the TravelCompanion.js file. Let's start with the init() function so that we get the
+                widget up and running.
+            </p>
+
+            <p>
+
+                From previous widgets we already know a lot of things about the WRTKit and about what
+                we will need. For example we know that we will have a user interface manager and that
+                we'll need a reference to each of the views that our widget uses. And since we have
+                designed the Travel Companion widget we know what views we will have. Before we write the
+                init() function we can go ahead and declare the variables that we will use to refer to
+                the views and the user interface manager. And while we're at it we can also declare the
+                variable that we'll use to refer to the Travel Companion engine. All of these variables
+                are globals and thus go outside the init() function:
+            </p>
+
+<pre>
+
+// Reference to travel companion engine that implements the business logic.
+var engine;
+
+// Reference to the WRTKit user interface manager.
+var uiManager;
+
+// References to views.
+var mainView;
+var infoView;
+var converterView;
+var weatherView;
+var settingsView;
+</pre>
+
+            <p>
+
+                Previously we've written the init() function so that it creates the entire user interface
+                but because the Travel Companion widget has a much larger user interface than anything
+                we've done before, it's probably a good idea to split things up into smaller functions
+                so we don't end up with a huge init() function that will be hard to read and maintain.
+                Let's create a function for the creation of each view, and then one function that will
+                call these view creation functions and setup all other things that we need for the user
+                interface, such as the Options menu. We'll just create stub functions for now but we
+                will soon get to implement the functions:
+            </p>
+
+<pre>
+
+// Creates the user interface.
+function createUI() {
+}
+
+// Creates the main view.
+function createMainView() {
+}
+
+// Creates the info view.
+function createInfoView() {
+}
+
+// Creates the converter view.
+function createConverterView() {
+}
+
+// Creates the weather view.
+function createWeatherView() {
+}
+
+// Creates the settings view.
+function createSettingsView() {
+}
+</pre>
+
+            <p>
+
+                In the RSS Reader widget we used functions called showMainView() and showSettings() to
+                move between views. That allowed us to implement all the logic that was required when
+                moving between views in one place regardless of what action triggered the change of
+                views. We'll do the same thing in the Travel Companion widget but this time we'll need
+                five functions since we have five views. Let's create stubs for these too at this stage
+                so that the functions exist if we need to refer to them.
+            </p>
+
+<pre>
+
+// Displays the main view.
+function showMainView() {
+}
+
+// Displays the info view.
+function showInfoView() {
+}
+
+// Displays the converter view.
+function showConverterView() {
+}
+
+// Displays the weather view.
+function showWeatherView() {
+}
+
+// Displays the settings view.
+function showSettingsView() {
+}
+</pre>
+
+            <p>
+
+                Since we will create each user interface view in its own function our init() function
+                will be much simpler than in previous widgets. We will create the business logic engine,
+                create the user interface by calling createUI() and then display the main view.
+            </p>
+
+<pre>
+
+// Called from the onload event handler to initialize the widget.
+function init() {
+    // initialize the business logic engine
+    engine = new Engine();
+    
+    // create the user interface
+    createUI();
+    
+    // display the main view
+    showMainView();
+}
+</pre>
+
+            <p>
+
+                Let's get started with creating the user interface by returning to the createUI()
+                function. We'll want to widget to show the softkey bar and we'll want it to be in
+                tab navigation mode instead of the default pointer navigation mode. We then need
+                to create the user interface manager and the five views that this widget has. Of 
+                course those five views are actually created by the five create-functions that we
+                just wrote stubs for so we just need to call those functions from createUI().
+            </p>
+
+<pre>
+
+// Creates the user interface.
+function createUI() {
+    if (window.widget) {
+        // set tab-navigation mode and show softkeys
+        widget.setNavigationEnabled(false);
+        menu.showSoftkeys();
+    }
+    
+    // create UI manager
+    uiManager = new UIManager();
+    
+    // create views
+    createMainView();
+    createInfoView();
+    createConverterView();
+    createWeatherView();
+    createSettingsView();
+}
+</pre>
+
+            <p>
+
+                Because we created the stub functions for moving between views, we can also create
+                the Options menu now. We'll only add one item to the menu in addition to the default
+                "Exit" menu item. The item we'll add is one that will take the user to the settings
+                view. We'll first need to create a global menu item identifier:
+            </p>
+
+<pre>
+
+// Constants for menu item identifiers.
+var MENU_ITEM_SETTINGS = 0;
+</pre>
+
+            <p>
+
+                Now that we have the menu item identifier we can actually create the menu item. Because
+                the Options menu functionality is only available in the S60 Web Runtime and not in PC
+                browsers we'll add that code in the same if-clause where we set the navigation mode and
+                show the softkey bar.
+            </p>
+
+<pre>
+
+// create menu
+var settingsMenuItem = new MenuItem("Settings", MENU_ITEM_SETTINGS);
+settingsMenuItem.onSelect = menuItemSelected;
+menu.append(settingsMenuItem);
+</pre>
+
+            <p>
+
+                When the menu item is selected it calls a function called menuItemSelected(). Let's
+                create that function and handle the case when the settings menu item is selected.
+                When it is, we want to call showSettingsView() so that the user ends up in the settings
+                view as expected:
+            </p>
+
+<pre>
+
+// Callback for when menu items are selected.
+function menuItemSelected(id) {
+    switch (id) {
+        case MENU_ITEM_SETTINGS:
+            showSettingsView();
+            break;
+    }
+}
+</pre>
+
+            <p>
+
+                The framework that we'll need when implementing the actual views is now nearly complete.
+                But before we move on let's talk about how we'll be using softkeys in the Travel
+                Companion widget.
+            </p>
+
+            <p>
+
+                In the main view we want the right softkey to be the default "Exit". But in the
+                four functional views we don't want it to exit the widget but rather to return to
+                the main view. We'll thus use "Back" as the title in the functional views, except
+                in the settings view where we'll use "Cancel".
+            </p>
+
+            <p>
+
+                Let's create three functions that will handle setting the widget right softkey to
+                these configurations. The functions will check if we're actually in the S60 Web
+                Runtime before attempting to change the right softkey in order to make the widget
+                also work in a PC browser for testing purposes.
+            </p>
+
+<pre>
+
+// Sets the softkeys for the main view.
+function setMainViewSoftkeys() {
+    if (window.widget) {
+        // set right softkey to "exit"
+        menu.setRightSoftkeyLabel("", null);
+    }
+}
+
+// Sets the softkeys for sub views.
+function setSubViewSoftkeys() {
+    if (window.widget) {
+        // set right softkey to "back" (to main view)
+        menu.setRightSoftkeyLabel("Back", showMainView);
+    }
+}
+
+// Sets the softkeys for settings view.
+function setSettingsViewSoftkeys() {
+    if (window.widget) {
+        // set right softkey to "cancel" (returns to main view)
+        menu.setRightSoftkeyLabel("Cancel", showMainView);
+    }
+}
+</pre>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Main view</h2>
+
+            
+            <p>
+
+                Let's create our main view now so that we get something visible. The main view is
+                of course created in the function createMainView() for which we already created a
+                stub function. The main view will have four WRTKit NavigationButton controls in it,
+                one for each of the views (not counting the main view itself) in the widget. Using
+                the NavigationButton control is just like using a FormButton, with the difference
+                that it looks different and can have an icon image in addition to just text. Earlier
+                when we looked at the files that were in the Examples/TravelCompanion directory we
+                noticed that there were four icons there. Now it's time to use them as icons in the
+                navigation buttons.
+            </p>
+
+            <p>
+
+                We will add event listerners to the buttons so that when they are clicked (when they
+                emit an ActionPerformed event) they will call the functions we have created for
+                moving between views. At this point the functions are just stubs, but we will of
+                course fix that later.
+            </p>
+
+            <p>
+
+                We've had captions for the views that we've created so far in the Hello World and
+                RSS Reader widgets and the Travel Companion will also have view captions. However
+                for the Travel Companion we'll use an image as our view caption. We will set the
+                view caption to an empty string because if it's undefined or null then the view
+                caption area will be hidden. Then we will create a CSS rule for the ListViewCaptionText
+                class that is used by the area where the caption text goes in a list view. Because
+                our CSS rule is defined after the default WRTKit CSS rule for ListViewCaptionText,
+                our rule will be override the default one. Let's open up TravelCompanion.css and
+                create this rule:
+            </p>
+
+<pre>
+
+/* Place logo in list view caption */
+.ListViewCaptionText {
+    background: url("ListViewCaptionLogo.png") no-repeat;
+    height: 35px;
+}
+</pre>
+
+            <p>
+
+                We specified a height in addition to the background image. The height is needed
+                so that the caption text area won't collapse to zero height since it won't contain
+                any text. We're now ready to implement the createMainView() function:
+            </p>
+
+<pre>
+
+// Creates the main view.
+function createMainView() {
+    // empty caption text to display the caption bar - custom background using CSS
+    mainView = new ListView(null, "");
+    
+    // info
+    var navToInfoButton = new NavigationButton(null, "NavInfoIcon.png", "Information");
+    navToInfoButton.addEventListener("ActionPerformed", showInfoView);
+    mainView.addControl(navToInfoButton);
+    
+    // converter
+    var navToConverterButton = new NavigationButton(null, "NavConverterIcon.png", "Currency Converter");
+    navToConverterButton.addEventListener("ActionPerformed", showConverterView);
+    mainView.addControl(navToConverterButton);
+    
+    // weather
+    var navToWeatherButton = new NavigationButton(null, "NavWeatherIcon.png", "Weather Forecast");
+    navToWeatherButton.addEventListener("ActionPerformed", showWeatherView);
+    mainView.addControl(navToWeatherButton);
+    
+    // settings
+    var navToSettingsButton = new NavigationButton(null, "NavSettingsIcon.png", "Settings");
+    navToSettingsButton.addEventListener("ActionPerformed", showSettingsView);
+    mainView.addControl(navToSettingsButton);
+}
+</pre>
+
+            <p>
+
+                We now have a main view and our widget even calls showMainView() when it starts
+                but nothing will actually show up yet because we haven't implemented the showMainView()
+                function yet. Let's do that now:
+            </p>
+
+<pre>
+
+// Displays the main view.
+function showMainView() {
+    setMainViewSoftkeys();
+    uiManager.setView(mainView);
+}
+</pre>
+
+            <p>
+
+                The function calls the setMainViewSoftkeys() function to put the right softkey
+                in the proper state and then asks the user interface manager to show the main
+                view. Remember that we're already calling the showMainView() function from the
+                init() function so we can go ahead and test this now in a PC browser, emulator
+                or handset. Notice the custom list view caption image and the navigation button
+                icons. Clicking the navigation buttons doesn't do anything yet because we don't
+                have any other views yet and the functions to show other views except the main
+                view aren't implemented. But then again, because we wrote stub functions we are
+                also not getting any error messages.
+            </p>
+
+            <div class="fignone" id="GUID-989D17CC-F019-46BB-B6F5-49166E258ACA__GUID-B006B086-0D8B-4EA4-8A71-179507B7595A"><a name="GUID-989D17CC-F019-46BB-B6F5-49166E258ACA__GUID-B006B086-0D8B-4EA4-8A71-179507B7595A"><!-- --></a><span class="figcap">Figure 1. 
+Travel Companion main view</span>
+
+                
+                <br /><img src="Travel_Companion_Main_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Settings view</h2>
+
+            
+            <p>
+
+                It's a good idea to implement the settings view as early as possible because
+                that allows you to test the rest of the widget more easily. In order to get
+                the settings view up and running we'll need to do three things. First of all
+                we'll need to implement the createSettingsView() function so that the widget
+                actually has a settings view. Second, we'll need to implement the actions
+                that can be performed in that view. There are two actions: "Save" and "Cancel".
+                Of these, save is the tricker one and we'll implement it in a function that
+                we will call saveSettingsClicked(). The cancel action will simply take us back
+                to the main view and will be handled by the showMainView() function that we
+                have already implemented. And third, we need to implement the showSettingsView()
+                function so that clicking on the settings navigation button in the main view
+                takes us to the settings view and sets it up correctly so that the view
+                reflects the current preferences.
+            </p>
+
+            <p>
+
+                The settings view will have four sections that we will separate using a WRTKit
+                Separator control. The first section lets the user select the home city and the
+                whether the home city is in daylight saving time. Here we'll use a SelectionMenu
+                control for the city selection and a SelectionList control with a single option
+                for the daylight saving time option. We could have used a SelectionList with
+                two options "Daylight saving time" and "Normal time". Since the selection would
+                have been a single selection this would have resulted in two radio buttons. But
+                partly for the sake of usability and partly to show how to do it, we'll implement
+                it so that it's a single checkbox instead. Thus, we'll use a SelectionList with
+                a single option but we'll get the checkboxes instead of radio buttons by putting
+                the SelectionList in multiple selection mode. Because there's only one option
+                there will only be one checkbox.
+            </p>
+
+            <p>
+
+                The second section is just like the first one but for the local city. The third
+                section is for the temperature unit selection (Celsius or Fahrenheit) and we'll
+                implement it as a single selection SelectionList control. And finally the fourth
+                section is for the Save and Cancel FormButton controls.
+            </p>
+
+            <p>
+
+                The options for the selection controls will be created just before we create
+                the controls themselves. The daylight saving time and temperature unit options
+                are just static JSON defined option lists since we know what the options are.
+                But for the city selection we'll create it dynamically by asking the business
+                logic engine for a list of all the supported cities. We'll then create one option
+                for each city.
+            </p>
+
+            <p>
+
+                Because we'll need to access the controls in the settings view from outside the
+                creation function we'll need to create global references to them:
+            </p>
+
+<pre>
+
+// Settings view controls.
+var homeCitySelection;
+var homeCityDSTSelection;
+var localCitySelection;
+var localCityDSTSelection;
+var temperatureUnitSelection;
+</pre>
+
+            <p>
+
+                We can now implement the settings view creation function:
+            </p>
+
+<pre>
+
+// Creates the settings view.
+function createSettingsView() {
+    // empty caption text to display the caption bar - custom background using CSS
+    settingsView = new ListView(null, "");
+    
+    // create city options from cities array
+    var cityOptions = [];
+    var cities = engine.getCities();
+    for (var i = 0; i &lt; cities.length; i++) {
+        cityOptions.push({ value: cities[i], text: cities[i].name });
+    }
+    
+    // create DST option
+    dstOptions = [ { value: true, text: "DST (+1h)" } ];
+    
+    // home city
+    homeCitySelection = new SelectionMenu(null, "Home City", cityOptions);
+    settingsView.addControl(homeCitySelection);
+    
+    // home city DST (using a multiple selection but only one option to get a single checkbox)
+    homeCityDSTSelection = new SelectionList(null, "Daylight Saving Time (home)", dstOptions, true);
+    settingsView.addControl(homeCityDSTSelection);
+    
+    // separator
+    settingsView.addControl(new Separator());
+    
+    // local city
+    localCitySelection = new SelectionMenu(null, "Local City", cityOptions);
+    settingsView.addControl(localCitySelection);
+    
+    // local city DST (using a multiple selection but only one option to get a single checkbox)
+    localCityDSTSelection = new SelectionList(null, "Daylight Saving Time (local)", dstOptions, true);
+    settingsView.addControl(localCityDSTSelection);
+    
+    // separator
+    settingsView.addControl(new Separator());
+    
+    // temperature unit
+    var temperatureUnitOptions = [ { value: "c", text: "Celsius" }, { value: "f", text: "Fahrenheit" } ];
+    temperatureUnitSelection = new SelectionList(null, "Temperature Unit", temperatureUnitOptions);
+    settingsView.addControl(temperatureUnitSelection);
+    
+    // separator
+    settingsView.addControl(new Separator());
+    
+    // save button
+    var saveSettingsButton = new FormButton(null, "Save");
+    saveSettingsButton.addEventListener("ActionPerformed", saveSettingsClicked);
+    settingsView.addControl(saveSettingsButton);
+    
+    // cancel button
+    var cancelSettingsButton = new FormButton(null, "Cancel");
+    cancelSettingsButton.addEventListener("ActionPerformed", showMainView);
+    settingsView.addControl(cancelSettingsButton);
+}
+</pre>
+
+            <p>
+
+                Note that we used the actual city as the value for the city options. You can
+                use anything you want for the value property for a selection control option
+                and in this case we used the actual city object because it will come in handy
+                later when we want to set the home and local cities that the user has selected
+                to the engine.
+            </p>
+
+            <p>
+
+                Our save button calls the saveSettingsClicked() function we talked about earlier
+                but we haven't created that function yet. We'll continue implementing the user
+                interface by writing this function.
+            </p>
+
+            <p>
+
+                You'll recall that the business logic engine actually stores all the preferences
+                so all we really need to do is read what values have been selected in the settings
+                view, telling these values to the engine, calling the savePreferences() method in
+                the engine to persist the settings, and then return to the main view.
+            </p>
+
+<pre>
+
+// Called when the user clicks on the "save" button in the settings view.
+function saveSettingsClicked() {
+    // update the selected home city
+    var selectedHomeCityOption = homeCitySelection.getSelected();
+    if (selectedHomeCityOption != null) {
+        engine.setHomeCity(selectedHomeCityOption.value);
+    }
+    
+    // update the selected local city
+    var selectedLocalCityOption = localCitySelection.getSelected();
+    if (selectedLocalCityOption != null) {
+        engine.setLocalCity(selectedLocalCityOption.value);
+    }
+    
+    // update home and local city DST
+    // there's only one checkbox but we are using a multiple-selection menu.
+    // if the selected array has one element then the checkbox is checked.
+    engine.setHomeCityDST(homeCityDSTSelection.getSelected().length == 1);
+    engine.setLocalCityDST(localCityDSTSelection.getSelected().length == 1);
+    
+    // update temperature unit
+    var selectedTemperatureUnitOption = temperatureUnitSelection.getSelected();
+    if (selectedTemperatureUnitOption != null) {
+        engine.setTemperatureUnit(selectedTemperatureUnitOption.value);
+    }
+    
+    // save settings
+    engine.savePreferences();
+    
+    // go back to the main view
+    showMainView();
+}
+</pre>
+
+            <p>
+
+                We're writing defensive code here and making sure that the selection controls
+                actually have anything selected at all. This should never be possible with
+                single selection control if they have one option already selected, but we'll
+                use the principle of "better safe than sorry".
+            </p>
+
+            <p>
+
+                Notice that the daylight saving time selection is checked by asking for the
+                selected options array (we're using a multiple selection control) and checking
+                if there is exactly one selected option. We don't care about the actual selected
+                option because we know that there's only one. Either it's selected or it's not.
+            </p>
+
+            <p>
+
+                We have now implemented two of the three steps we said were necessary to get the
+                settings view fully functional. Let's implement the final step: showing the view.
+                Showing the settings view is done by first updating the settings view controls
+                to reflect the current configuration, setting the right softkey to the state that
+                it should be in for the settings view and then asking the user interface manager
+                to show the settings view.
+            </p>
+
+<pre>
+
+// Displays the settings view.
+function showSettingsView() {
+    // update settings view controls to match current configuration
+    // the DST selected sets are either the options array with its single option or an empty array
+    
+    // home city and DST setting
+    homeCitySelection.setSelected(homeCitySelection.getOptionForValue(engine.getHomeCity()));
+    homeCityDSTSelection.setSelected(engine.getHomeCityDST() ? homeCityDSTSelection.getOptions() : []);
+    
+    // local city and DST setting
+    localCitySelection.setSelected(localCitySelection.getOptionForValue(engine.getLocalCity()));
+    localCityDSTSelection.setSelected(engine.getLocalCityDST() ? localCityDSTSelection.getOptions() : []);
+    
+    // temperature unit
+    temperatureUnitSelection.setSelected(temperatureUnitSelection.getOptionForValue(engine.getTemperatureUnit()));
+    
+    setSettingsViewSoftkeys();
+    uiManager.setView(settingsView);
+}
+</pre>
+
+            <p>
+
+                We're using the convenient getOptionForValue() function that all selection controls
+                have to retrieve the right option to select for each of the selection controls. The
+                way we handle the daylight saving time selection controls may seem a little strange
+                at first but remember that we only have a single option and thus if that option should
+                be selected then the selected options array is identical with the options array - both
+                are arrays containing the one and same option. Selection controls always copy the options
+                and selected options arrays when the setOptions() and setSelected() methods are called
+                so there is no problem in passing the options array as the selected options array.
+            </p>
+
+            <p>
+
+                The settings view is now completed. You can try it out and play with it, change the
+                settings, open it up again, change some more settings, cancel the changes, etc. to
+                verify that it's working as it should.
+            </p>
+
+            <div class="fignone" id="GUID-989D17CC-F019-46BB-B6F5-49166E258ACA__GUID-66154A40-DD96-45B3-BF53-01594426BA71"><a name="GUID-989D17CC-F019-46BB-B6F5-49166E258ACA__GUID-66154A40-DD96-45B3-BF53-01594426BA71"><!-- --></a><span class="figcap">Figure 2. 
+Travel Companion settings view</span>
+
+                
+                <br /><img src="Travel_Companion_Settings_Screenshot_1.png" /><br />
+            </div>
+
+        </div>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html">Travel Companion</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit Tutorials" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-506C11E3-E6F3-43EC-9495-FCFA638B7E08" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit Tutorials</title>
+</head>
+<body id="GUID-506C11E3-E6F3-43EC-9495-FCFA638B7E08"><a name="GUID-506C11E3-E6F3-43EC-9495-FCFA638B7E08"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit Tutorials</h1>
+
+    <div>
+
+        <p>
+
+            The WRTKit tutorials guide you through the process of using the WRTKit user
+            interface toolkit to build widgets. Even if you're familiar with widget
+            development or a veteran HTML, CSS and JavaSCript developer, these tutorials
+            will probably be useful to you as they focus on using the WRTKit to create
+            and manage the user interface.
+        </p>
+
+        <p>
+
+            There are three tutorials all in all and in each one we will take a look at one
+            of the examples that are included with the WRTKit SDK.
+        </p>
+
+        <p>
+
+            The first one is a gentle start where we will create the classic "Hello World"
+            application but using the WRTKit for the user interface. This is a good starting
+            point because it covers the basics of using the WRTKit, how to organize files,
+            how to initialize the user interface toolkit, and such topics.
+        </p>
+
+        <p>
+
+            The next tutorial is an actual useful widget: an RSS Reader. As with all WRTKit
+            tutorials we will focus on the user interface portion of this widget, but you
+            will also learn how to integrate a WRTKit -based user interface with data that
+            has been pulled in using AJAX. Feel free to use this example widget as a basis
+            for your own RSS Reader.
+        </p>
+
+        <p>
+
+            In the third tutorial we'll create create a widget called "Travel Companion"
+            in order to learn how to use the WRTKit to build complex widgets with multiple
+            views, showing complex custom content, using timers to automatically update
+            views in the background, as well as how to separate the user interface code from
+            the back-end logic code and data. Since the tutorial is about how to use the
+            WRTKit we will not actually create any real back-end logic but rather use a
+            mock back-end that will give us data that looks real but is actually hard-coded.
+        </p>
+
+        <p>
+
+            If you want you can complete the widget to make it work against actual data
+            sources on the Internet. Since the user interface is entirely separated from
+            the back-end logic you should be able to do this without touching any of the
+            user interface code!
+        </p>
+
+        <p>
+
+            When you go through the tutorials it could be a good idea to have your code
+            editor open so that you can inspect the example widget code as you read about
+            it. We will be talking a lot about the various classes and methods in the WRTKit
+            so having the
+            <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">
+WRTKit API Reference</a>
+            open is probably also a good idea.
+        </p>
+
+    </div>
+
+<div>
+<ul class="ullinks">
+<li class="ulchildlink"><strong><a href="WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.html">Hello World</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html">RSS Reader</a></strong><br />
+</li>
+<li class="ulchildlink"><strong><a href="WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html">Travel Companion</a></strong><br />
+</li>
+</ul>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_UIElement_Class-GUID-37b82f75-720c-4f54-9769-cda18453ffa3.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,322 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit UIElement Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-37B82F75-720C-4F54-9769-CDA18453FFA3" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit UIElement Class</title>
+</head>
+<body id="GUID-37B82F75-720C-4F54-9769-CDA18453FFA3"><a name="GUID-37B82F75-720C-4F54-9769-CDA18453FFA3"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit UIElement Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The UIElement class is the base class for all user interface elements
+                such as views and controls. Don't instantiate UIElement directly but rather
+                use one of its subclasses.
+            </p>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-B15AF535-27D2-4C6A-9956-65EED6F40FE8"><a name="GUID-B15AF535-27D2-4C6A-9956-65EED6F40FE8"><!-- --></a>
+
+        <h2 class="topictitle2">
+getEventListeners()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Array] UIElement.getEventListeners(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Allows retrieval of the currently registered event listeners for this user interface element.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    An array of event listeners currently registered to the user interface element.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-5C747208-730D-4ACF-BB07-CAEF1A26CAA3"><a name="GUID-5C747208-730D-4ACF-BB07-CAEF1A26CAA3"><!-- --></a>
+
+        <h2 class="topictitle2">
+addEventListener()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] UIElement.addEventListener(String eventType, Function listener)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Allows registration of a callback function to a user interface element in order to get
+                    notifications of events in the user interface element. Event registration can be done
+                    for a specific type of event or for all events.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+eventType</p>
+
+                        
+
+                            <p>
+
+                                The name of the event type the listener should be called for or null if
+                                all event types. The available event type names depend on the actual user
+                                interface element class that this method is caled for.
+                            </p>
+
+                            <p>
+
+                                The most common event type names are ActionPerformed for button control clicks,
+                                SelectionChanged for selection controls, FocusStateChanged for all controls to
+                                indicate that focus was gained or lost and FocusedControlChanged for views to
+                                announce that a new control has been brought into (or out of) focus.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+listener</p>
+
+                        
+
+                            <p>
+
+                                The function that should be called when the specified event type occurs.
+                                The function should be defined with a single argument that will receive the
+                                event object. The object has three properties: source, type and value. The
+                                source property specifies the user interface element (e.g. control) from where
+                                the event originated. The type property contains the event type name. The
+                                contents of the value property depends between event types but contains
+                                additional information about the event. For example if the value changes in
+                                a selection control then the value property contains the new value.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-A39809F7-CEC7-45E9-85E4-EC1F36E255EB"><a name="GUID-A39809F7-CEC7-45E9-85E4-EC1F36E255EB"><!-- --></a>
+
+        <h2 class="topictitle2">
+removeEventListener()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] UIElement.removeEventListener(String eventType, Function listener)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Allows a specific event listener to be unregistered from a user interface control.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+eventType</p>
+
+                        
+
+                            <p>
+
+                                The event type name of the listener that should be removed. Use the exact
+                                same event type name as when adding the event listener.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+listener</p>
+
+                        
+
+                            <p>
+
+                                The callback function of the listener that should be removed.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-A48BCE83-38D7-4DF3-B9C1-FF9A305359BD"><a name="GUID-A48BCE83-38D7-4DF3-B9C1-FF9A305359BD"><!-- --></a>
+
+        <h2 class="topictitle2">
+id</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[String] UIElement.id</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    The id property is a unique identifier for the user interface element.
+                    The identifier is used for the root HTML element in the element hierarchy
+                    that defines the user interface element and is useful for example in
+                    specifying specific CSS rules for a particular user interface element.
+                    The identifier can also be used to recognize the source of an event in an
+                    event callback by accessing the id property of the source property in the
+                    event object passed to the event listener callback.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_UIManager_Class-GUID-937146c8-3889-40f5-b9f7-0f774ac9f5fe.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,451 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit UIManager Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-937146C8-3889-40F5-B9F7-0F774AC9F5FE" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit UIManager Class</title>
+</head>
+<body id="GUID-937146C8-3889-40F5-B9F7-0F774AC9F5FE"><a name="GUID-937146C8-3889-40F5-B9F7-0F774AC9F5FE"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit UIManager Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The UIManager class manages a set of views and related user interface elements
+                such as the scrollbar that indicates the scroll position for the current view,
+                as well as notification popup dialogs.
+            </p>
+
+            <p>
+
+                A typical WRTKit user interface consists of one or more views that are commanded
+                to be displayed using the UIManager. When a view is commanded to be shown, the
+                UIManager will remove the currently displayed view (if any) and attach the
+                requested view. The UIManager creates and maintains the state of a scrollbar so
+                that it matches the scrolling position and viewport extent at any given
+                time, regardless of what goes on in the view (e.g. added or removed content),
+                screen rotations and resizes, etc.
+            </p>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-1F6C6376-EC85-4F79-AFAE-89F4C6078C7A"><a name="GUID-1F6C6376-EC85-4F79-AFAE-89F4C6078C7A"><!-- --></a>
+
+        <h2 class="topictitle2">
+Constructor</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[UIManager] new UIManager(HTMLElement viewParentElement, HTMLElement scrollbarParentElement)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Creates a new instance of the ContentPanel class.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+viewParentElement</p>
+
+                        
+
+                            <p>
+
+                                The HTML element to attachs views to. Normally this argument would be
+                                omitted, which causes the UIManager to create its own view parent alement
+                                that attaches to the document body element. You only need to supply an
+                                HTML element to this argument in rare cases when it's not desirable to
+                                have views take up the entire document area.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+scrollbarParentElement</p>
+
+                        
+
+                            <p>
+
+                                The HTML element to attachs the scrollbar to. Normally this argument would be
+                                omitted, which causes the UIManager to create its own scrollbar parent alement
+                                that attaches to the document body element. You only need to supply an
+                                HTML element to this argument in rare cases when it's not desirable to
+                                have the scrollbar in its default location.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    A new instance of the UIManager class.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-C31ACB4A-D7B2-4CA5-B0B5-025E289293E5"><a name="GUID-C31ACB4A-D7B2-4CA5-B0B5-025E289293E5"><!-- --></a>
+
+        <h2 class="topictitle2">
+getView()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[String] UIManager.getView(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the current view.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current view or null if none.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-34ECA4D5-EFA3-41C0-A391-B4F0A97D39BB"><a name="GUID-34ECA4D5-EFA3-41C0-A391-B4F0A97D39BB"><!-- --></a>
+
+        <h2 class="topictitle2">
+setView()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] UIManager.setView(View view)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Sets the view to display. Calling this method removes the current view and
+                    displays the specified one instead. If null is passed as the argument to this
+                    method then the current view is removed but no new view is displayed instead.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+view</p>
+
+                        
+
+                            <p>
+
+                                The new view to display or null to simply remove the current view.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-9416DD56-09E0-4231-8B45-446C14C6E56E"><a name="GUID-9416DD56-09E0-4231-8B45-446C14C6E56E"><!-- --></a>
+
+        <h2 class="topictitle2">
+showNotification()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] UIManager.showNotification(Integer displayTime, String type, String text, Float progress)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Displays a notification popup dialog. If a dialog is already showing then calling this
+                    method again will change the content of the already displayed notification popup.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <br /><ul>
+
+                    <li>
+
+                        <p>
+displayTime</p>
+
+                        
+
+                            <p>
+
+                                The duration that the dialog should be displayed before automatically hiding.
+                                Specified in milliseconds (i.e. 1000ms = 1s). If the notification dialog should
+                                not automatically hide then a negative value can be specified.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+type</p>
+
+                        
+
+                            <p>
+
+                                Type of notification to display. This argument affects the look of the dialog
+                                and should have a value of either "info", "warning" or "wait". "Info" should be
+                                used for informational popups, "warning" for errors and other warning messages
+                                and "wait" for progress dialogs. If the argument is null then no type icon
+                                will be shown in the dialog.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+text</p>
+
+                        
+
+                            <p>
+
+                                The text to display in the popup dialog. If the argument is null then no text
+                                will be shown, however this is not recommended as it would be unclear to the
+                                user.
+                            </p>
+
+                        
+                    </li>
+
+                    <li>
+
+                        <p>
+progress</p>
+
+                        
+
+                            <p>
+
+                                This argument should be omitted except when a progress dialog is desired, i.e.
+                                when used with the "wait" type. The value of progress should be a floating
+                                point number between 0.0 and 1.0, where 0.0 means "0% progress" and 1.0 means
+                                "100% progress". A negative number means "unknown progress" and results in a
+                                different progress bar style than for known progress.
+                            </p>
+
+                        
+                    </li>
+
+                </ul>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-E37D4CC9-0EA4-4850-9F68-BA5C65B1A223"><a name="GUID-E37D4CC9-0EA4-4850-9F68-BA5C65B1A223"><!-- --></a>
+
+        <h2 class="topictitle2">
+hideNotification()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[void] UIManager.hideNotification()</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Hides the currently displayed notification popup dialog, if any. If this method
+                    is called when no notification dialog is displayed then the method call is simply
+                    ignored but no harm is done.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Using_buttons-GUID-8b14cec9-92cc-4bde-83c2-ad0a30a84942.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Using buttons" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-8B14CEC9-92CC-4BDE-83C2-AD0A30A84942" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Using buttons</title>
+</head>
+<body id="GUID-8B14CEC9-92CC-4BDE-83C2-AD0A30A84942"><a name="GUID-8B14CEC9-92CC-4BDE-83C2-AD0A30A84942"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Using buttons</h1>
+
+    <div>
+
+        <p>
+
+            You can let users trigger actions by placing a FormButton or 
+            NavigationButton control in a view. Use FormButtons for actions that 
+            start some process and NavigationButton controls for situations 
+            where pressing the button should take the viewer to another view.
+        </p>
+
+        <div class="fignone" id="GUID-8B14CEC9-92CC-4BDE-83C2-AD0A30A84942__GUID-B008BB2B-C5B2-446D-BCED-2824528CF7CC"><a name="GUID-8B14CEC9-92CC-4BDE-83C2-AD0A30A84942__GUID-B008BB2B-C5B2-446D-BCED-2824528CF7CC"><!-- --></a><span class="figcap">Figure 1. 
+FormButton controls</span>
+
+            
+            <br /><img src="FormButton_Controls_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            You can find out when a button has been pressed by registering a 
+            callback function as an event listener to the button. The event type 
+            for button presses is "ActionPerformed". You can use whatever name 
+            you like for the callback function. The function is passed the event 
+            object as an argument. A typical callback function looks like this:
+        </p>
+
+<pre>
+
+// Callback function for button presses.
+function buttonPressed(event) {
+    // implement what happens when the button is pressed here
+}
+</pre>
+
+        <p>
+
+            Creating a button, registering the event listener and adding the 
+            button to a view is demonstrated below. The example creates a 
+            FormButton:
+        </p>
+
+<pre>
+
+// create button
+var button = new FormButton("button1", "Press me!");
+button.addEventListener("ActionPerformed", buttonPressed);
+exampleView.addControl(button);
+</pre>
+
+        <p>
+
+            Note that the example assumes that a view has already been created 
+            and that the "exampleView" variable refers to that view. "button1" 
+            is a unique identifier for the button that allows it to be identified
+            for example if several different controls are using a shared event
+            listener function. The event listener function could examine the event
+            object and check the identifier of the source control for the event.
+        </p>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Using_notification_popups-GUID-39c7a69a-9334-45d1-92f6-8c239831a0a2.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Using notification popups" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-39C7A69A-9334-45D1-92F6-8C239831A0A2" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Using notification popups</title>
+</head>
+<body id="GUID-39C7A69A-9334-45D1-92F6-8C239831A0A2"><a name="GUID-39C7A69A-9334-45D1-92F6-8C239831A0A2"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Using notification popups</h1>
+
+    <div>
+
+        <p>
+
+            Notification popup dialogs are an easy way to show information to 
+            users. In the WRTKit notification popups are used using two methods 
+            in the UIManager class: showNotification() and hideNotification(). 
+            If a notification is already showing when another is commanded to be 
+            shown then the current notification is replaced with the new one. 
+            Notifications can be either auto-hiding after a specified time or 
+            manually hidden by calling hideNotification(). Auto-hiding is an 
+            easy way in situations where a message just needs to be shown but 
+            doesn't require user acknowledgement, e.g. to let the user know that 
+            new content has loaded or similar.
+        </p>
+
+        <div class="fignone" id="GUID-39C7A69A-9334-45D1-92F6-8C239831A0A2__GUID-05D19BA1-DC3E-40EE-B587-387039A547C2"><a name="GUID-39C7A69A-9334-45D1-92F6-8C239831A0A2__GUID-05D19BA1-DC3E-40EE-B587-387039A547C2"><!-- --></a><span class="figcap">Figure 1. 
+Wait notification with unknown progress</span>
+
+            
+            <br /><img src="RSS_Reader_Main_Screenshot_3.png" /><br />
+        </div>
+
+        <p>
+
+            The API for showNotification() takes four arguments: displayTime, 
+            type, text and progress. The "displayTime" argument is an integer 
+            that specifies how long the notification popup dialog should be 
+            shown for before automatically hiding. The value is given in 
+            milliseconds (1000ms = 1s) and negative values can be used to 
+            specify that the dialog should not automatically hide. The second 
+            argument "type" is used to specify a visual style for the popup. 
+            There are three types of notifications: "info", "warning" and 
+            "wait". Info is intended for informative messages, warning for 
+            errors or other similar negative messages and finally wait is 
+            intended for dialogs that are letting the user know that some 
+            process (e.g. loading data from the Internet) is taking a long time. 
+            The fourth argument "progress" is a decimal number that should be 
+            omitted or null in all other cases except when the dialog should be 
+            a progress dialog (typically notifications of type "wait"). For 
+            progress dialogs the value should be between 0.0 and 1.0 to specify 
+            how far along the process is (0.0 for "0% done" and 1.0 for "100% 
+            done"). A negative value can be specified if the progress is 
+            unknown, resulting in an animated progress bar that indicates that 
+            the wait time and progress is not known.
+        </p>
+
+        <p>
+
+            The code below show various examples of how to show notification 
+            popup dialogs. The examples assume that the UIManager has been 
+            instantiated and that a variable called uiManager refers to that 
+            instance.
+        </p>
+
+<pre>
+
+// show an info notification - auto-hide in 3 seconds
+uiManager.showNotification(3000, "info", "Informative message here");
+
+// show a warning notification - no auto-hide
+uiManager.showNotification(-1, "warning", "Warning message here");
+
+// show a progress notification - no auto-hide, 40% progress
+uiManager.showNotification(-1, "wait", "Loading...", 0.4);
+
+// show a progress notification - no auto-hide, unknown progress
+uiManager.showNotification(-1, "wait", "Loading...", -1.0);
+</pre>
+
+        <p>
+
+            The example below shows how to hide a notification. If no
+            notification is showing when the method is called then the
+            call is ignored.
+        </p>
+
+<pre>
+
+// hide the current notification (if any)
+uiManager.hideNotification();
+</pre>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Using_selection_controls-GUID-5e36d276-cce8-4bc9-bcba-78e721adb8c6.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,211 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Using selection controls" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-5E36D276-CCE8-4BC9-BCBA-78E721ADB8C6" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Using selection controls</title>
+</head>
+<body id="GUID-5E36D276-CCE8-4BC9-BCBA-78E721ADB8C6"><a name="GUID-5E36D276-CCE8-4BC9-BCBA-78E721ADB8C6"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Using selection controls</h1>
+
+    <div>
+
+        <p>
+
+            Selection controls are used to let users make selections among a set 
+            of options. The WRTKit has two controls: SelectionList and 
+            SelectionMenu that have an identical API but differ in look and 
+            feel. The SelectionList shows all the options and selections 
+            directly in the view while the SelectionMenu only shows the selected 
+            options and opens up a menu with the options when the user activates 
+            the control. Selection controls can either be in single or multiple
+            selection mode. In single selection mode only one of the options can
+            be selected at a time while in multiple selection mode any number
+            (including zero) can be selected.
+        </p>
+
+        <div class="fignone" id="GUID-5E36D276-CCE8-4BC9-BCBA-78E721ADB8C6__GUID-9F9B7E8B-2E27-4D95-AFBD-246DD16580B2"><a name="GUID-5E36D276-CCE8-4BC9-BCBA-78E721ADB8C6__GUID-9F9B7E8B-2E27-4D95-AFBD-246DD16580B2"><!-- --></a><span class="figcap">Figure 1. 
+SelectionList controls</span>
+
+            
+            <br /><img src="SelectionList_Controls_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            The SelectionList control is recommended to be used with the pointer 
+            navigation mode or if there are few options to choose from. The 
+            SelectionMenu control is recommended for large numbers of options or in 
+            the tab navigation mode.
+        </p>
+
+        <div class="fignone" id="GUID-5E36D276-CCE8-4BC9-BCBA-78E721ADB8C6__GUID-B3A04D05-2DA2-48B1-B37F-F0803B499DCC"><a name="GUID-5E36D276-CCE8-4BC9-BCBA-78E721ADB8C6__GUID-B3A04D05-2DA2-48B1-B37F-F0803B499DCC"><!-- --></a><span class="figcap">Figure 2. 
+SelectionMenu control</span>
+
+            
+            <br /><img src="SelectionMenu_Control_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            The options of a selection control are defined as an array of option 
+            objects, each with two properties: value and text. The value 
+            property can be any JavaScript value and represent the concrete 
+            value of the option, while the text property is a string that is 
+            shown in the user interface for the option.
+        </p>
+
+        <p>
+
+            Option arrays can conveniently be created using JavaScript object
+            notation (JSON) for example as follows:
+        </p>
+
+<pre>
+
+// create an array with three options
+var options = [
+        { value: 1, text: "Coffee" },
+        { value: 2, text: "Tea" },
+        { value: 3, text: "Water" }
+    ];
+</pre>
+
+        <p>
+
+            The selected options are defined differently depending on whether 
+            the selection control is in single or multiple selection mode. In 
+            single selection mode the selected option is defined as a reference 
+            to the option in the control that should be selected. In multiple 
+            selection mode the selected options set is defined as an array of 
+            references to options in the control. Note that the references must 
+            be to one of the options objects defined for the control. It is not 
+            sufficient to define new option objects that happen to be identical 
+            to the ones in the control.
+        </p>
+
+<pre>
+
+// create a set of two selected options for multiple selection control
+var selectedOptions = [ options[1], options[2] ];
+</pre>
+
+        <p>
+
+            Note that the selectedOptions array is constructed so that the two 
+            elements in the array refer to the "Tea" and "Water" options in the 
+            options array.
+        </p>
+
+        <p>
+
+            The code below creates a SelectionList control in multiple selection
+            mode and initializes it with the options and selectedOptions arrays
+            created above. The code assumes that a view has already been created
+            and that a variable called exampleView refers to it.
+        </p>
+
+<pre>
+
+// create selection list control
+var drinkList = new SelectionList("selection1", "Favorite drinks",
+                                  options, true, selectedOptions);
+exampleView.addControl(drinkList);
+</pre>
+
+        <p>
+
+            "selection1" is a unique identifier for the control, "Favorite 
+            drinks" is the control caption, the option argument refers to the 
+            options array that we previously created, the following argument 
+            determines whether the control is in multiple selection mode, and 
+            finally the selectedOptions argument refers to the array with 
+            selected options and defines which of the options in the control
+            should be selected by default.
+        </p>
+
+        <p>
+
+            All of the arguments are optional and can be specified later as
+            needed. For example if the options are not known when the control
+            is created, or if the options change, they can be set using the
+            setOptions() method. In the same way the selected options can be
+            set using the setSelected() method.
+        </p>
+
+<pre>
+
+// set options
+drinkList.setOptions(options);
+
+// set selected options
+drinkList.setSelected(selectedOptions);
+</pre>
+
+        <p>
+
+            The currently selected options can be retrieved using the 
+            getSelected() method. As mentioned earlier, in single selection mode 
+            the selected is just a single reference to an option (or null if no 
+            option is selected), while in multiple selection mode it's an array 
+            with references to the selected options. If no options are selected 
+            in multiple selection mode then the array is empty.
+        </p>
+
+<pre>
+
+// find out which options are currently selected
+var selected = drinkList.getSelected();
+</pre>
+
+        <p>
+
+            Selection controls fire "SelectionChanged" events when a user changes
+            the selection of options in a control. These events can be handled
+            using by registering an event listener to the control. The code below
+            shows what a typical callback function would look like:
+        </p>
+
+<pre>
+
+// Callback function for selection change events.
+function favoriteDrinkChanged(event) {
+    // implement what happens when the selection changed here
+}
+</pre>
+
+        <p>
+
+            Registering the event listener function is done as follows, for
+            example right after the control was created:
+        </p>
+
+<pre>
+
+// register event listener
+drinkList.addEventListener("SelectionChanged", favoriteDrinkChanged);
+</pre>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Using_text_entry_controls-GUID-76aeb0e3-698d-41de-a34b-8fea6d8e00d2.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,125 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Using text entry controls" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-76AEB0E3-698D-41DE-A34B-8FEA6D8E00D2" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Using text entry controls</title>
+</head>
+<body id="GUID-76AEB0E3-698D-41DE-A34B-8FEA6D8E00D2"><a name="GUID-76AEB0E3-698D-41DE-A34B-8FEA6D8E00D2"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Using text entry controls</h1>
+
+    <div>
+
+        <p>
+
+            The WRTKit supports two controls for text entry: TextField for 
+            a single line of text and TextArea for multiple lines of text.
+            The API for both controls is identical, except for the constructor.
+            The TextField can be created in masked mode, which is useful for
+            entry of text that should not be displayed (e.g. passwords). For
+            every character that is typed in masked mode, an asterisk is shown
+            instead in the text field. While a TextArea control can hold an
+            unlimited number of lines of text, its height (as number of rows
+            to display without scrolling) is specified when it is constructed.
+        </p>
+
+        <div class="fignone" id="GUID-76AEB0E3-698D-41DE-A34B-8FEA6D8E00D2__GUID-D4E1D422-DAB9-4F40-9A13-231B4ACF1FE5"><a name="GUID-76AEB0E3-698D-41DE-A34B-8FEA6D8E00D2__GUID-D4E1D422-DAB9-4F40-9A13-231B4ACF1FE5"><!-- --></a><span class="figcap">Figure 1. 
+TextField and TextArea controls</span>
+
+            
+            <br /><img src="Text_Entry_Controls_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            TextField and TextArea controls are created and added to views like 
+            any other controls in the WRTKit. The code assumes that a view has 
+            already been created and that a variable called exampleView refers 
+            to it.
+        </p>
+
+<pre>
+
+// create textfield
+var nameField = new TextField("field1", "Enter your name");
+exampleView.addControl(nameField);
+</pre>
+
+        <p>
+
+            "field1" is a unique identifier for the control and "Enter your 
+            name" is the control caption. An optional third argument to the 
+            constructor can be used to specify the text to display in the 
+            control, however the text can also be set at any time later on using 
+            the setText() method as follows:
+        </p>
+
+<pre>
+
+// set the text in the textfield
+nameField.setText("John Smith");
+</pre>
+
+        <p>
+
+            The current text in a text entry control can be retrieved using the
+            getText() method:
+        </p>
+
+<pre>
+
+// get the current text from the textfield
+var text = nameField.getText();
+</pre>
+
+        <p>
+
+            Text entry controls fire "TextChanged" events when a user edits the 
+            text in a control. These events can be handled using by registering 
+            an event listener to the control. The code below shows what a 
+            typical callback function would look like:
+        </p>
+
+<pre>
+
+// Callback function for text changed events.
+function nameChanged(event) {
+    // implement what happens when the text changed here
+}
+</pre>
+
+        <p>
+
+            Registering the event listener function is done as follows, for
+            example right after the control was created:
+        </p>
+
+<pre>
+
+// register event listener
+nameField.addEventListener("TextChanged", nameChanged);
+</pre>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_View_Class-GUID-e673fe1a-cf46-46f5-b243-ce7422c69cc5.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,203 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="WRTKit View Class" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-E673FE1A-CF46-46F5-B243-CE7422C69CC5" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+WRTKit View Class</title>
+</head>
+<body id="GUID-E673FE1A-CF46-46F5-B243-CE7422C69CC5"><a name="GUID-E673FE1A-CF46-46F5-B243-CE7422C69CC5"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+WRTKit View Class</h1>
+
+    <div>
+
+        <div class="section"><h2 class="sectiontitle">
+Description</h2>
+
+            
+            <p>
+
+                The View class is an abstract base class for all views. Views are containers for controls
+                and are used to collect the set of controls that constitutes a logical view in a
+                widget user interface. The displayed view is controlled by the UIManager. Don't
+                instantiate View directly but rather one of its subclasses, e.g. ListView.
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Inherits from</h2>
+
+            
+            <p>
+
+                <a href="WRTKit_UIElement_Class-GUID-37b82f75-720c-4f54-9769-cda18453ffa3.html">
+UIElement</a>
+            </p>
+
+        </div>
+
+        <div class="section"><h2 class="sectiontitle">
+Events</h2>
+
+            
+            <br /><ul>
+
+                <li>
+
+                    <p>
+FocusedControlChanged</p>
+
+                    
+
+                        <p>
+
+                            This event is fired when the focused control has changed in the view.
+                        </p>
+
+                    
+                </li>
+
+            </ul>
+
+        </div>
+
+    </div>
+
+    <div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
+</div>
+</div>
+<div class="nested1" id="GUID-03FF9D38-7DA8-47F6-BE17-05C06A45EC23"><a name="GUID-03FF9D38-7DA8-47F6-BE17-05C06A45EC23"><!-- --></a>
+
+        <h2 class="topictitle2">
+getFocusedControl()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Control] View.getFocusedControl(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Retrieves the currently focused control in the view or null if none.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    The current focused control or null if none.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="nested1" id="GUID-A80F4155-D5E3-42FF-9ECA-214C7AFB8483"><a name="GUID-A80F4155-D5E3-42FF-9ECA-214C7AFB8483"><!-- --></a>
+
+        <h2 class="topictitle2">
+focusFirstControl()</h2>
+
+        <div>
+
+            <div class="section"><h3 class="sectiontitle">
+Syntax</h3>
+
+                
+                <pre>
+[Control] View.focusFirstControl(void)</pre>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Description</h3>
+
+                
+                <p>
+
+                    Attempts to focus the first focusable control in the view. Note that
+                    this method call might fail to actually focus the control in certain
+                    circumstances, such as when the view is not visible or if no focusable
+                    control exists.
+                </p>
+
+                <p>
+
+                    This method is rarely needed because focus handling is to a high degree
+                    handled automatically by the user interface toolkit. For example when
+                    a new view is displayed the first focusable control is automatically
+                    given focus.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Arguments</h3>
+
+                
+                <p>
+
+                    This method does not take any arguments.
+                </p>
+
+            </div>
+
+            <div class="section"><h3 class="sectiontitle">
+Return value</h3>
+
+                
+                <p>
+
+                    This method does not return a value.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/WRTKit_Views_and_the_UIManager-GUID-f95b4ad6-0e86-4023-8371-3ff2a45e95fe.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Views and the UIManager" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-F95B4AD6-0E86-4023-8371-3FF2A45E95FE" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>
+Views and the UIManager</title>
+</head>
+<body id="GUID-F95B4AD6-0E86-4023-8371-3FF2A45E95FE"><a name="GUID-F95B4AD6-0E86-4023-8371-3FF2A45E95FE"><!-- --></a>
+
+
+
+    <h1 class="topictitle1">
+Views and the UIManager</h1>
+
+    <div>
+
+        <p>
+
+            All WRTKit user interfaces are divided into "views". The concept of 
+            a view is simply a set of user interface elements, such as buttons, 
+            textfields, etc., that are hosted in a container. The WRTKit 
+            architecture defines a contract for views through a base class 
+            called View and implements a concrete view class called ListView 
+            that lays out controls vertically. This layout is similar to what is 
+            commonly used in mobile device user interfaces and is thus 
+            sufficient for the vast majority of widget user interfaces. However 
+            the WRTKit allows developers to create their own custom views if 
+            some other kind of layout is preferred instead. Creating a custom 
+            view is an advanced topic that isn't covered here, but roughly 
+            speaking it is a simple matter of creating a subclass of the View 
+            class (just like ListView) and implementing all the functions that 
+            the View class defines, plus whatever custom layout the developer 
+            wants.
+        </p>
+
+        <p>
+
+            Because the ListView uses a vertical list layout for controls, 
+            adding controls can be done either to the end of the list or by 
+            inserting before a specified control in the list. There is no need 
+            to worry about actual control locations, coordinates or anything of 
+            that sort. The ListViews handles all of this automatically.
+        </p>
+
+        <p>
+
+            In addition to controls, the ListView has a view caption that is 
+            displayed at the very top of the view. The caption is optional but 
+            is good to include in order to show what a particular view is about. 
+            E.g. a view for settings could have a caption "Settings".
+        </p>
+
+        <div class="fignone" id="GUID-F95B4AD6-0E86-4023-8371-3FF2A45E95FE__GUID-E6398D37-32D1-4DF7-8313-5991D28067F9"><a name="GUID-F95B4AD6-0E86-4023-8371-3FF2A45E95FE__GUID-E6398D37-32D1-4DF7-8313-5991D28067F9"><!-- --></a><span class="figcap">Figure 1. 
+ListView with caption</span>
+
+            
+            <br /><img src="Travel_Companion_Main_Screenshot_1.png" /><br />
+        </div>
+
+        <p>
+
+            Only one view can be visible at any given time, as is common in 
+            mobile device applications. Views are commanded to be shown using a 
+            class called UIManager, which attaches the view to the "view root". 
+            The view root is an HTML element that can be specified to the 
+            UIManager when it is created, but typically this argument is 
+            omitted, resulting in the UIManager creating a view root element 
+            that makes views take up the entire screen.
+        </p>
+
+    </div>
+
+<div>
+<div class="familylinks">
+<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a></div>
+</div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/commonltr.css	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,323 @@
+/*
+Style sheet for S60 API reference
+version 0.1
+
+History
+0.1	OOjala	Cleaned up original RoboHelp version
+
+*/
+
+body {
+	color: #000000;
+	background-color: #ffffff;
+	/*font-size: 80%;*/
+	font-size: 10pt;
+	font-family: Arial, sans-serif;
+	/*line-height: 125%;*/
+}
+
+p {
+	font-weight: normal;
+}
+
+code {
+	/*font-size: 150%;*/
+	font-size: 10pt;
+}
+
+h1 {
+	line-height: 125%;
+	font-size: 20pt;
+	font-weight: bold;
+	font-style: normal;
+}
+
+h2 {
+	line-height: 125%;
+	font-size: 16pt;
+	font-weight: bold;
+	font-style: normal;
+}
+
+h3 {
+	font-size: 14pt;
+	font-weight: bold;
+}
+
+h4 {
+	font-size: 12pt;
+	font-weight: bold;
+}
+
+h5 {
+	font-size: 11pt;
+	font-weight: bold;
+}
+
+h6 {
+	font-size: 10pt;
+	font-weight: bold;
+}
+
+/* ------------------- LINKS ------------------- */
+
+a img {
+  border: 0;
+}
+
+a:link {
+	color: #0033cc;
+}
+
+a:visited {
+	color: #0033cc;
+}
+
+a:hover {
+	color: #ffaa00;
+}
+
+a.qindex {
+}
+
+a.el {
+	font-weight: normal;
+}
+
+a.code {
+	font-weight: normal;
+	color: #4444ee;
+}
+
+/* ------------------- LISTS ------------------- */
+
+/* #### check */
+dl.el {
+	margin-left: -1cm;
+}
+
+div.toc ul {
+  font-weight: normal;
+  list-style-type: none;
+  margin-left: 2em;
+  padding-left: 0;
+}
+
+div.tabs ul { 
+  padding: 3px 0;
+  margin-left: 0;
+  border-bottom: 1px solid #778;
+}
+
+div.tabs li { 
+  list-style: none;
+  margin: 0;
+  display: inline;
+
+  border: 1px solid #778;
+  border-bottom: none;
+  background: #eef;
+
+  padding: 3px 0.5em;
+  margin-left: 3px;
+}
+
+div.tabs ul li a { 
+  padding: 0;
+  margin: 0;
+/*
+  padding: 3px 0.5em;
+  margin-left: 3px;
+
+  border: 1px solid #778;
+  border-bottom: none;
+  background: #eef;
+*/
+  text-decoration: none;
+}
+
+
+div.tabs ul li#current { 
+  background: #ed7;
+}
+
+
+/* ------------------- DIV ------------------- */
+
+div.fragment {
+	width: 100%;
+	border: none;
+	background-color: #eeeeee;
+}
+
+div.example {
+	width: 100%;
+	border: none;
+	background-color: #eeeeee;
+}
+
+pre.fragment {
+	width: 100%;
+	/*border: 1px solid black;*/
+	background-color: #eeeeee;
+	font-size: 10pt;
+}
+
+#footerLeft { 
+  float: left;
+  width: 50%;
+  margin-top: 0;
+  padding-top: 0;
+  font-size: 8pt;
+}
+
+#footerRight { 
+  margin-top: 0;
+  padding-top: 0;
+  text-align: right;
+}
+
+
+/* ------------------- TABLE ------------------- */
+
+table {
+  border-collapse: collapse;
+  border-style: hidden;
+  font-size: 10pt;
+  /*caption-side: bottom;*/
+}
+
+table caption {
+  padding: 4px;
+  text-align: left;
+  margin-bottom: 0.5em;
+}
+
+.specTable thead {
+  background-color: #eeeeee;
+  border-bottom: 5px double black;
+  text-align: left;
+  padding: 5px;
+}
+
+.specTable thead td {
+  border: none;
+  font-weight: bold;
+}
+
+th {
+  background-color: #eeeeee;
+  border-style: hidden;
+  border-bottom: 5px double black;
+  text-align: left;
+  padding: 5px;
+}
+
+/* tr:hover { background: yellow; } */
+
+table p {
+  padding-top: 0px;
+  margin-top: 0px;
+  line-height: 100%;
+}
+
+.specTable td {
+  border-right: 1px solid black;
+  border-bottom: 1px dashed #cacaca;
+  vertical-align: top;
+  padding: 5px;
+}
+
+col.qref { 
+  border: 1px solid black;
+}
+
+td.mdescLeft {
+	padding: 0px 8px 4px 8px;
+	font-style: italic;
+	background-color: #FAFAFA;
+	border: 1px none #E0E0E0;
+	margin: 0px;
+}
+
+td.mdescRight {
+	padding: 0px 8px 4px 8px;
+	font-style: italic;
+	background-color: #FAFAFA;
+	border: 1px none #E0E0E0;
+	margin: 0px;
+}
+
+td.memItemLeft {
+	padding: 1px 0px 0px 8px;
+	margin: 4px;
+	border: 1px none #E0E0E0;
+	border-top: 1px solid #E0E0E0;
+	background-color: #FAFAFA;
+}
+
+td.memItemRight {
+	padding: 1px 8px 0px 8px;
+	margin: 4px;
+	border: 1px none #E0E0E0;
+	border-top: 1px solid #E0E0E0;
+	background-color: #FAFAFA;
+}
+
+td.md {
+	background-color: #f0f0f0;
+	line-height: 150%;
+	font-family: "Courier New", Courier, monospace;
+}
+
+td.mdrow {
+	background-color: #F0F0F0;
+	line-height: 150%;
+}
+
+td.mdname1 {
+	background-color: #F0F0F0;
+	line-height: 150%;
+	font-family: "Courier New", Courier, monospace;
+}
+
+td.mdname {
+	background-color: #F0F0F0;
+	line-height: 150%;
+	font-family: "Courier New", Courier, monospace;
+}
+
+
+/* ------------------- SPAN ------------------- */
+
+/* span class="keyword"? */
+font.keyword {
+	color: #008000;
+}
+
+font.keywordtype {
+	color: #604020;
+}
+
+font.keywordflow {
+	color: #e08000;
+}
+
+font.comment {
+	color: #800000;
+}
+
+font.preprocessor {
+	color: #806020;
+}
+
+font.stringliteral {
+	color: #002080;
+}
+
+font.charliteral {
+	color: #008080;
+}
+
+
+/* ------------------- END ------------------- */
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/commonltr_original.css	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,130 @@
+/*
+ | This file is part of the DITA Open Toolkit project hosted on 
+ | Sourceforge.net. See the accompanying license.txt file for 
+ | applicable licenses.
+*/
+
+/*
+ | (c) Copyright IBM Corp. 2004, 2005 All Rights Reserved.
+ */
+ 
+.unresolved { background-color: skyblue; }
+.noTemplate { background-color: yellow; }
+
+.base { background-color: #ffffff; }
+
+/* Add space for top level topics */
+.nested0 { margin-top : 1em;}
+
+/* div with class=p is used for paragraphs that contain blocks, to keep the XHTML valid */
+.p {margin-top: 1em}
+
+/* Default of italics to set apart figure captions */
+.figcap { font-style: italic }
+.figdesc { font-style: normal }
+
+/* Use @frame to create frames on figures */
+.figborder { border-style: solid; padding-left : 3px; border-width : 2px; padding-right : 3px; margin-top: 1em; border-color : Silver;}
+.figsides { border-left : 2px solid; padding-left : 3px; border-right : 2px solid; padding-right : 3px; margin-top: 1em; border-color : Silver;}
+.figtop { border-top : 2px solid; margin-top: 1em; border-color : Silver;}
+.figbottom { border-bottom : 2px solid; border-color : Silver;}
+.figtopbot { border-top : 2px solid; border-bottom : 2px solid; margin-top: 1em; border-color : Silver;}
+
+/* Most link groups are created with <div>. Ensure they have space before and after. */
+.ullinks { list-style-type: none }
+.ulchildlink { margin-top: 1em; margin-bottom: 1em }
+.olchildlink { margin-top: 1em; margin-bottom: 1em }
+.linklist { margin-bottom: 1em }
+.linklistwithchild { margin-left: 1.5em; margin-bottom: 1em  }
+.sublinklist { margin-left: 1.5em; margin-bottom: 1em  }
+.relconcepts { margin-top: 1em; margin-bottom: 1em }
+.reltasks { margin-top: 1em; margin-bottom: 1em }
+.relref { margin-top: 1em; margin-bottom: 1em }
+.relinfo { margin-top: 1em; margin-bottom: 1em }
+.breadcrumb { font-size : smaller; margin-bottom: 1em }
+.prereq { margin-left : 20px;}
+
+/* Set heading sizes, getting smaller for deeper nesting */
+.topictitle1 { margin-top: 0pc; margin-bottom: .1em; font-size: 1.34em; }
+.topictitle2 { margin-top: 1pc; margin-bottom: .45em; font-size: 1.17em; }
+.topictitle3 { margin-top: 1pc; margin-bottom: .17em; font-size: 1.17em; font-weight: bold; }
+.topictitle4 { margin-top: .83em; font-size: 1.17em; font-weight: bold; }
+.topictitle5 { font-size: 1.17em; font-weight: bold; }
+.topictitle6 { font-size: 1.17em; font-style: italic; }
+.sectiontitle { margin-top: 1em; margin-bottom: 0em; color: black; font-size: 1.17em; font-weight: bold;}
+.section { margin-top: 1em; margin-bottom: 1em }
+.example { margin-top: 1em; margin-bottom: 1em }
+
+/* All note formats have the same default presentation */
+.note { margin-top: 1em; margin-bottom : 1em;}
+.notetitle { font-weight: bold }
+.notelisttitle { font-weight: bold }
+.tip { margin-top: 1em; margin-bottom : 1em;}
+.tiptitle { font-weight: bold }
+.fastpath { margin-top: 1em; margin-bottom : 1em;}
+.fastpathtitle { font-weight: bold }
+.important { margin-top: 1em; margin-bottom : 1em;}
+.importanttitle { font-weight: bold }
+.remember { margin-top: 1em; margin-bottom : 1em;}
+.remembertitle { font-weight: bold }
+.restriction { margin-top: 1em; margin-bottom : 1em;}
+.restrictiontitle { font-weight: bold }
+.attention { margin-top: 1em; margin-bottom : 1em;}
+.attentiontitle { font-weight: bold }
+.dangertitle { font-weight: bold }
+.danger { margin-top: 1em; margin-bottom : 1em;}
+.cautiontitle { font-weight: bold }
+.caution { font-weight: bold; margin-bottom : 1em; }
+
+/* Simple lists do not get a bullet */
+ul.simple { list-style-type: none }
+
+/* Used on the first column of a table, when rowheader="firstcol" is used */
+.firstcol { font-weight : bold;}
+
+/* Various basic phrase styles */
+.bold { font-weight: bold; }
+.boldItalic { font-weight: bold; font-style: italic; }
+.italic { font-style: italic; }
+.underlined { text-decoration: underline; }
+.uicontrol { font-weight: bold; }
+.parmname { font-weight: bold; }
+.kwd { font-weight: bold; }
+.defkwd { font-weight: bold; text-decoration: underline; }
+.var { font-style : italic;}
+.shortcut { text-decoration: underline; }
+
+/* Default of bold for definition list terms */
+.dlterm { font-weight: bold; }
+
+/* Use CSS to expand lists with @compact="no" */
+.dltermexpand { font-weight: bold; margin-top: 1em; }
+*[compact="yes"]>li { margin-top: 0em;}
+*[compact="no"]>li { margin-top: .53em;}	
+.liexpand { margin-top: 1em; margin-bottom: 1em }
+.sliexpand { margin-top: 1em; margin-bottom: 1em }
+.dlexpand { margin-top: 1em; margin-bottom: 1em }
+.ddexpand { margin-top: 1em; margin-bottom: 1em }
+.stepexpand { margin-top: 1em; margin-bottom: 1em }
+.substepexpand { margin-top: 1em; margin-bottom: 1em }
+
+/* Align images based on @align on topic/image */
+div.imageleft { text-align: left }
+div.imagecenter { text-align: center }
+div.imageright { text-align: right }
+div.imagejustify { text-align: justify }
+
+/* The cell border can be turned on with
+   {border-right:solid}
+   This value creates a very thick border in Firefox (does not match other tables)
+
+   Firefox works with 
+   {border-right:solid 1pt}
+   but this causes a barely visible line in IE */
+.cellrowborder { border-left:none; border-top:none; border-right:solid 1px; border-bottom:solid 1px }
+.row-nocellborder { border-left:none; border-right:none; border-top:none; border-right: hidden; border-bottom:solid 1px}
+.cell-norowborder { border-top:none; border-bottom:none; border-left:none; border-bottom: hidden; border-right:solid 1px}
+.nocellnorowborder { border:none; border-right: hidden;border-bottom: hidden }
+
+pre.screen { padding: 5px 5px 5px 5px; border: outset; background-color: #CCCCCC; margin-top: 2px; margin-bottom : 2px; white-space: pre}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/commonrtl.css	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,124 @@
+/*
+ | This file is part of the DITA Open Toolkit project hosted on 
+ | Sourceforge.net. See the accompanying license.txt file for 
+ | applicable licenses.
+*/
+
+/*
+ | (c) Copyright IBM Corp. 2004, 2005 All Rights Reserved.
+ */
+ 
+.unresolved { background-color: skyblue; }
+.noTemplate { background-color: yellow; }
+
+.base { background-color: #ffffff; }
+
+/* Add space for top level topics */
+.nested0 { margin-top : 1em;}
+
+/* div with class=p is used for paragraphs that contain blocks, to keep the XHTML valid */
+.p {margin-top: 1em}
+
+/* Default of italics to set apart figure captions */
+.figcap { font-style: italic }
+.figdesc { font-style: normal }
+
+/* Use @frame to create frames on figures */
+.figborder { border-style: solid; padding-left : 3px; border-width : 2px; padding-right : 3px; margin-top: 1em; border-color : Silver;}
+.figsides { border-left : 2px solid; padding-left : 3px; border-right : 2px solid; padding-right : 3px; margin-top: 1em; border-color : Silver;}
+.figtop { border-top : 2px solid; margin-top: 1em; border-color : Silver;}
+.figbottom { border-bottom : 2px solid; border-color : Silver;}
+.figtopbot { border-top : 2px solid; border-bottom : 2px solid; margin-top: 1em; border-color : Silver;}
+
+/* Most link groups are created with <div>. Ensure they have space before and after. */
+.ullinks { list-style-type: none }
+.ulchildlink { margin-top: 1em; margin-bottom: 1em }
+.olchildlink { margin-top: 1em; margin-bottom: 1em }
+.linklist { margin-top: 1em; margin-bottom: 1em }
+.linklistwithchild { margin-top: 1em; margin-right: 1.5em; margin-bottom: 1em  }
+.sublinklist { margin-top: 1em; margin-right: 1.5em; margin-bottom: 1em  }
+.relconcepts { margin-top: 1em; margin-bottom: 1em }
+.reltasks { margin-top: 1em; margin-bottom: 1em }
+.relref { margin-top: 1em; margin-bottom: 1em }
+.relinfo { margin-top: 1em; margin-bottom: 1em }
+.breadcrumb { font-size : smaller; margin-bottom: 1em }
+.prereq { margin-right : 20px;}
+
+/* Set heading sizes, getting smaller for deeper nesting */
+.topictitle1 { margin-top: 0pc; margin-bottom: .1em; font-size: 1.34em; }
+.topictitle2 { margin-top: 1pc; margin-bottom: .45em; font-size: 1.17em; }
+.topictitle3 { margin-top: 1pc; margin-bottom: .17em; font-size: 1.17em; font-weight: bold; }
+.topictitle4 { margin-top: .83em; font-size: 1.17em; font-weight: bold; }
+.topictitle5 { font-size: 1.17em; font-weight: bold; }
+.topictitle6 { font-size: 1.17em; font-style: italic; }
+.sectiontitle { margin-top: 1em; margin-bottom: 0em; color: black; font-size: 1.17em; font-weight: bold;}
+.section { margin-top: 1em; margin-bottom: 1em }
+.example { margin-top: 1em; margin-bottom: 1em }
+
+/* All note formats have the same default presentation */
+.note { margin-top: 1em; margin-bottom : 1em;}
+.notetitle { font-weight: bold }
+.notelisttitle { font-weight: bold }
+.tip { margin-top: 1em; margin-bottom : 1em;}
+.tiptitle { font-weight: bold }
+.fastpath { margin-top: 1em; margin-bottom : 1em;}
+.fastpathtitle { font-weight: bold }
+.important { margin-top: 1em; margin-bottom : 1em;}
+.importanttitle { font-weight: bold }
+.remember { margin-top: 1em; margin-bottom : 1em;}
+.remembertitle { font-weight: bold }
+.restriction { margin-top: 1em; margin-bottom : 1em;}
+.restrictiontitle { font-weight: bold }
+.attention { margin-top: 1em; margin-bottom : 1em;}
+.attentiontitle { font-weight: bold }
+.dangertitle { font-weight: bold }
+.danger { margin-top: 1em; margin-bottom : 1em;}
+.cautiontitle { font-weight: bold }
+.caution { font-weight: bold; margin-bottom : 1em; }
+
+/* Simple lists do not get a bullet */
+ul.simple { list-style-type: none }
+
+/* Used on the first column of a table, when rowheader="firstcol" is used */
+.firstcol { font-weight : bold;}
+
+/* Various basic phrase styles */
+.bold { font-weight: bold; }
+.boldItalic { font-weight: bold; font-style: italic; }
+.italic { font-style: italic; }
+.underlined { text-decoration: underline; }
+.uicontrol { font-weight: bold; }
+.parmname { font-weight: bold; }
+.kwd { font-weight: bold; }
+.defkwd { font-weight: bold; text-decoration: underline; }
+.var { font-style : italic;}
+.shortcut { text-decoration: underline; }
+
+/* Default of bold for definition list terms */
+.dlterm { font-weight: bold; }
+
+/* Use CSS to expand lists with @compact="no" */
+.dltermexpand { font-weight: bold; margin-top: 1em; }
+*[compact="yes"]>li { margin-top: 0em;}
+*[compact="no"]>li { margin-top: .53em;}
+.liexpand { margin-top: 1em; margin-bottom: 1em }
+.sliexpand { margin-top: 1em; margin-bottom: 1em }
+.dlexpand { margin-top: 1em; margin-bottom: 1em }
+.ddexpand { margin-top: 1em; margin-bottom: 1em }
+.stepexpand { margin-top: 1em; margin-bottom: 1em }
+.substepexpand { margin-top: 1em; margin-bottom: 1em }
+
+/* Align images based on @align on topic/image */
+div.imageleft { text-align: left }
+div.imagecenter { text-align: center }
+div.imageright { text-align: right }
+div.imagejustify { text-align: justify }
+
+.cellrowborder { border-right:none; border-top:none; border-left:solid 1px; border-bottom:solid 1px }
+.row-nocellborder { border-left:none; border-right:none; border-top:none; border-left: hidden; border-bottom:solid 1px}
+.cell-norowborder { border-top:none; border-bottom:none; border-right:none; border-bottom: hidden; border-left:solid 1px}
+.nocellnorowborder { border:none; border-left: hidden;border-bottom: hidden }
+
+pre.screen { padding: 5px 5px 5px 5px; border: outset; background-color: #CCCCCC; margin-top: 2px; margin-bottom : 2px; white-space: pre}
+
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/dita.list	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,16 @@
+#Tue Jan 22 15:14:10 EET 2008
+user.input.file=WRTKit-GUID-5174c7a2-5203-4e12-8c7c-1add5e8c98cd.ditamap
+conreftargetslist=
+user.input.dir=d\:\\work\\Nokia_application_S60WidgetsUIKit\\Documentation
+fullditamaplist=WRTKit-GUID-5174c7a2-5203-4e12-8c7c-1add5e8c98cd.ditamap
+conreflist=
+flagimagelist=
+fullditatopiclist=WRTKit_TextArea_Class-GUID-137b9641-f3a5-4fc0-bf30-017533e2ad69.xml,WRTKit_Design_considerations-GUID-cd4c583d-e6d8-4aab-b2d8-dba09dd7a009.xml,WRTKit_Separator_Class-GUID-b9a1bbb9-5858-4996-9c25-2ede2507f3a3.xml,WRTKit_Using_buttons-GUID-8b14cec9-92cc-4bde-83c2-ad0a30a84942.xml,WRTKit_Using_selection_controls-GUID-5e36d276-cce8-4bc9-bcba-78e721adb8c6.xml,WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.xml,WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.xml,WRTKit_Customizing_the_WRTKit_look-GUID-43369c51-23cf-41ac-a2f4-6320dc6eda9a.xml,WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.xml,WRTKit_Terminology-GUID-ebd8d7c4-03f6-498d-becc-eb8d4081ed8b.xml,WRTKit_ListView_Class-GUID-a7f24a67-d46c-4156-8276-a97b945235d6.xml,WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.xml,WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.xml,WRTKit_Separator-GUID-ec82d9ea-6b88-48c6-92c2-09a4dd56b31a.xml,WRTKit_Displaying_content-GUID-57647864-5231-47e5-8ad5-f2adb1848760.xml,WRTKit_Creating_a_widget_that_uses_the_WRTKit-GUID-8d71ee32-1826-4141-8fb6-76420a5472a4.xml,WRTKit_NavigationButton_Class-GUID-3c5aaba9-899d-463a-8337-b6f7c09e190b.xml,WRTKit_Actions-GUID-38771443-166b-4112-9569-c07229cd7449.xml,WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.xml,WRTKit_Handling_events-GUID-a1a86c8a-6e66-4dc8-8967-b5c9c7bc6563.xml,WRTKit_SelectionMenu_Class-GUID-3ae54fdf-e938-400b-969d-e41575331aa0.xml,WRTKit_View_Class-GUID-e673fe1a-cf46-46f5-b243-ce7422c69cc5.xml,WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.xml,WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.xml,WRTKit_TextField_Class-GUID-799b7dea-1e4d-4147-bc27-acc4b91d8bf9.xml,WRTKit_Selections-GUID-23145d13-f2e7-48be-b24b-bc49754b2919.xml,WRTKit_Label_Class-GUID-64730e7f-835f-443a-9322-6753fa72fd09.xml,WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.xml,WRTKit_SelectionList_Class-GUID-c3be7a8a-9028-4cec-a0c0-d355d0621b37.xml,WRTKit_Control_states-GUID-f98575ac-f913-466d-a790-0ff0207463a3.xml,WRTKit_Showing_content_in_a_view-GUID-7020d9ea-747d-42f3-b47c-16ad1f45db82.xml,WRTKit_RSS_Reader_user_interface-GUID-1083a0c4-a953-4b6e-a4d0-45a031e51c35.xml,WRTKit_Using_notification_popups-GUID-39c7a69a-9334-45d1-92f6-8c239831a0a2.xml,WRTKit_High_level_view_of_the_WRTKit-GUID-a3abe57e-9a71-4f94-923a-b84ccd1b0905.xml,WRTKit_Text_entry-GUID-b52e3343-5a39-4a83-ae97-461a53761207.xml,WRTKit_UIManager_Class-GUID-937146c8-3889-40f5-b9f7-0f774ac9f5fe.xml,WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.xml,WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.xml,WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.xml,WRTKit_RSS_Reader_first_steps-GUID-db42b227-1647-4020-bdb9-dacb26771779.xml,WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.xml,WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.xml,WRTKit_Introduction_to_the_WRTKit-GUID-dcf05457-f800-4f05-b284-a4e24ab8be79.xml,WRTKit_FormButton_Class-GUID-9f99492d-b232-4a78-baed-bd284839b367.xml,WRTKit_Feed_updates-GUID-25cd0e54-0516-4469-965e-c5781cf44dc9.xml,WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.xml,WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.xml,WRTKit_UIElement_Class-GUID-37b82f75-720c-4f54-9769-cda18453ffa3.xml,WRTKit_Using_text_entry_controls-GUID-76aeb0e3-698d-41de-a34b-8fea6d8e00d2.xml,WRTKit_Notification_popups-GUID-8696212c-4114-412a-9990-ef9755fc1942.xml,WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.xml,WRTKit_Views_and_the_UIManager-GUID-f95b4ad6-0e86-4023-8371-3ff2a45e95fe.xml,WRTKit_Travel_Companion_planning_the_widget-GUID-891068c7-c802-4da7-8674-8e8292aef7eb.xml
+hreftargetslist=WRTKit_TextArea_Class-GUID-137b9641-f3a5-4fc0-bf30-017533e2ad69.xml,WRTKit_Design_considerations-GUID-cd4c583d-e6d8-4aab-b2d8-dba09dd7a009.xml,WRTKit_Separator_Class-GUID-b9a1bbb9-5858-4996-9c25-2ede2507f3a3.xml,WRTKit_Using_buttons-GUID-8b14cec9-92cc-4bde-83c2-ad0a30a84942.xml,WRTKit_Using_selection_controls-GUID-5e36d276-cce8-4bc9-bcba-78e721adb8c6.xml,WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.xml,WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.xml,WRTKit_Customizing_the_WRTKit_look-GUID-43369c51-23cf-41ac-a2f4-6320dc6eda9a.xml,WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.xml,WRTKit_Terminology-GUID-ebd8d7c4-03f6-498d-becc-eb8d4081ed8b.xml,WRTKit_ListView_Class-GUID-a7f24a67-d46c-4156-8276-a97b945235d6.xml,WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.xml,WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.xml,WRTKit_Separator-GUID-ec82d9ea-6b88-48c6-92c2-09a4dd56b31a.xml,WRTKit_Displaying_content-GUID-57647864-5231-47e5-8ad5-f2adb1848760.xml,WRTKit_Creating_a_widget_that_uses_the_WRTKit-GUID-8d71ee32-1826-4141-8fb6-76420a5472a4.xml,WRTKit_NavigationButton_Class-GUID-3c5aaba9-899d-463a-8337-b6f7c09e190b.xml,WRTKit_Actions-GUID-38771443-166b-4112-9569-c07229cd7449.xml,WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.xml,WRTKit_Handling_events-GUID-a1a86c8a-6e66-4dc8-8967-b5c9c7bc6563.xml,WRTKit_SelectionMenu_Class-GUID-3ae54fdf-e938-400b-969d-e41575331aa0.xml,WRTKit_View_Class-GUID-e673fe1a-cf46-46f5-b243-ce7422c69cc5.xml,WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.xml,WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.xml,WRTKit_TextField_Class-GUID-799b7dea-1e4d-4147-bc27-acc4b91d8bf9.xml,WRTKit_Selections-GUID-23145d13-f2e7-48be-b24b-bc49754b2919.xml,WRTKit_Label_Class-GUID-64730e7f-835f-443a-9322-6753fa72fd09.xml,WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.xml,WRTKit_SelectionList_Class-GUID-c3be7a8a-9028-4cec-a0c0-d355d0621b37.xml,WRTKit_Control_states-GUID-f98575ac-f913-466d-a790-0ff0207463a3.xml,WRTKit_Showing_content_in_a_view-GUID-7020d9ea-747d-42f3-b47c-16ad1f45db82.xml,WRTKit_RSS_Reader_user_interface-GUID-1083a0c4-a953-4b6e-a4d0-45a031e51c35.xml,WRTKit_Using_notification_popups-GUID-39c7a69a-9334-45d1-92f6-8c239831a0a2.xml,WRTKit_High_level_view_of_the_WRTKit-GUID-a3abe57e-9a71-4f94-923a-b84ccd1b0905.xml,WRTKit_Text_entry-GUID-b52e3343-5a39-4a83-ae97-461a53761207.xml,WRTKit_UIManager_Class-GUID-937146c8-3889-40f5-b9f7-0f774ac9f5fe.xml,WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.xml,WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.xml,WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.xml,WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.xml,WRTKit_RSS_Reader_first_steps-GUID-db42b227-1647-4020-bdb9-dacb26771779.xml,WRTKit_Introduction_to_the_WRTKit-GUID-dcf05457-f800-4f05-b284-a4e24ab8be79.xml,WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.xml,WRTKit_FormButton_Class-GUID-9f99492d-b232-4a78-baed-bd284839b367.xml,WRTKit_Feed_updates-GUID-25cd0e54-0516-4469-965e-c5781cf44dc9.xml,WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.xml,WRTKit_UIElement_Class-GUID-37b82f75-720c-4f54-9769-cda18453ffa3.xml,WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.xml,WRTKit_Using_text_entry_controls-GUID-76aeb0e3-698d-41de-a34b-8fea6d8e00d2.xml,WRTKit_Notification_popups-GUID-8696212c-4114-412a-9990-ef9755fc1942.xml,WRTKit_Views_and_the_UIManager-GUID-f95b4ad6-0e86-4023-8371-3ff2a45e95fe.xml,WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.xml,WRTKit_Travel_Companion_planning_the_widget-GUID-891068c7-c802-4da7-8674-8e8292aef7eb.xml
+copytotarget2sourcemaplist=
+fullditamapandtopiclist=WRTKit_TextArea_Class-GUID-137b9641-f3a5-4fc0-bf30-017533e2ad69.xml,WRTKit_Design_considerations-GUID-cd4c583d-e6d8-4aab-b2d8-dba09dd7a009.xml,WRTKit_Separator_Class-GUID-b9a1bbb9-5858-4996-9c25-2ede2507f3a3.xml,WRTKit_Using_buttons-GUID-8b14cec9-92cc-4bde-83c2-ad0a30a84942.xml,WRTKit_Using_selection_controls-GUID-5e36d276-cce8-4bc9-bcba-78e721adb8c6.xml,WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.xml,WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.xml,WRTKit_Customizing_the_WRTKit_look-GUID-43369c51-23cf-41ac-a2f4-6320dc6eda9a.xml,WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.xml,WRTKit_Terminology-GUID-ebd8d7c4-03f6-498d-becc-eb8d4081ed8b.xml,WRTKit_ListView_Class-GUID-a7f24a67-d46c-4156-8276-a97b945235d6.xml,WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.xml,WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.xml,WRTKit_Separator-GUID-ec82d9ea-6b88-48c6-92c2-09a4dd56b31a.xml,WRTKit_Displaying_content-GUID-57647864-5231-47e5-8ad5-f2adb1848760.xml,WRTKit_Creating_a_widget_that_uses_the_WRTKit-GUID-8d71ee32-1826-4141-8fb6-76420a5472a4.xml,WRTKit_NavigationButton_Class-GUID-3c5aaba9-899d-463a-8337-b6f7c09e190b.xml,WRTKit_Actions-GUID-38771443-166b-4112-9569-c07229cd7449.xml,WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.xml,WRTKit_Handling_events-GUID-a1a86c8a-6e66-4dc8-8967-b5c9c7bc6563.xml,WRTKit_SelectionMenu_Class-GUID-3ae54fdf-e938-400b-969d-e41575331aa0.xml,WRTKit_View_Class-GUID-e673fe1a-cf46-46f5-b243-ce7422c69cc5.xml,WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.xml,WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.xml,WRTKit_TextField_Class-GUID-799b7dea-1e4d-4147-bc27-acc4b91d8bf9.xml,WRTKit_Selections-GUID-23145d13-f2e7-48be-b24b-bc49754b2919.xml,WRTKit_Label_Class-GUID-64730e7f-835f-443a-9322-6753fa72fd09.xml,WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.xml,WRTKit_SelectionList_Class-GUID-c3be7a8a-9028-4cec-a0c0-d355d0621b37.xml,WRTKit_Control_states-GUID-f98575ac-f913-466d-a790-0ff0207463a3.xml,WRTKit_Showing_content_in_a_view-GUID-7020d9ea-747d-42f3-b47c-16ad1f45db82.xml,WRTKit_RSS_Reader_user_interface-GUID-1083a0c4-a953-4b6e-a4d0-45a031e51c35.xml,WRTKit_Using_notification_popups-GUID-39c7a69a-9334-45d1-92f6-8c239831a0a2.xml,WRTKit_High_level_view_of_the_WRTKit-GUID-a3abe57e-9a71-4f94-923a-b84ccd1b0905.xml,WRTKit_Text_entry-GUID-b52e3343-5a39-4a83-ae97-461a53761207.xml,WRTKit_UIManager_Class-GUID-937146c8-3889-40f5-b9f7-0f774ac9f5fe.xml,WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.xml,WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.xml,WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.xml,WRTKit_RSS_Reader_first_steps-GUID-db42b227-1647-4020-bdb9-dacb26771779.xml,WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.xml,WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.xml,WRTKit_Introduction_to_the_WRTKit-GUID-dcf05457-f800-4f05-b284-a4e24ab8be79.xml,WRTKit_FormButton_Class-GUID-9f99492d-b232-4a78-baed-bd284839b367.xml,WRTKit_Feed_updates-GUID-25cd0e54-0516-4469-965e-c5781cf44dc9.xml,WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.xml,WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.xml,WRTKit_UIElement_Class-GUID-37b82f75-720c-4f54-9769-cda18453ffa3.xml,WRTKit_Using_text_entry_controls-GUID-76aeb0e3-698d-41de-a34b-8fea6d8e00d2.xml,WRTKit_Notification_popups-GUID-8696212c-4114-412a-9990-ef9755fc1942.xml,WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.xml,WRTKit_Views_and_the_UIManager-GUID-f95b4ad6-0e86-4023-8371-3ff2a45e95fe.xml,WRTKit-GUID-5174c7a2-5203-4e12-8c7c-1add5e8c98cd.ditamap,WRTKit_Travel_Companion_planning_the_widget-GUID-891068c7-c802-4da7-8674-8e8292aef7eb.xml
+subtargetslist=
+copytosourcelist=
+htmllist=
+imagelist=SelectionMenu_Control_Screenshot_1.png,Travel_Companion_Main_Screenshot_1.png,RSS_Reader_Main_Screenshot_1.png,FormButton_Controls_Screenshot_2.png,RSS_Reader_Settings_Screenshot_1.png,Hello_World_Screenshot_1.png,SelectionList_Controls_Screenshot_1.png,Label_Control_Screenshot_1.png,RSS_Reader_Main_Screenshot_3.png,TextArea_Control_Screenshot_1.png,NavigationButton_Controls_Screenshot_1.png,TextField_Control_Screenshot_1.png,Travel_Companion_Info_Screenshot_1.png,Travel_Companion_Converter_Screenshot_1.png,Text_Entry_Controls_Screenshot_1.png,Travel_Companion_Settings_Screenshot_1.png,RSS_Reader_Main_Screenshot_2.png,FormButton_Controls_Screenshot_1.png
+hrefditatopiclist=WRTKit_TextArea_Class-GUID-137b9641-f3a5-4fc0-bf30-017533e2ad69.xml,WRTKit_Separator_Class-GUID-b9a1bbb9-5858-4996-9c25-2ede2507f3a3.xml,WRTKit_Using_buttons-GUID-8b14cec9-92cc-4bde-83c2-ad0a30a84942.xml,WRTKit_Using_selection_controls-GUID-5e36d276-cce8-4bc9-bcba-78e721adb8c6.xml,WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.xml,WRTKit_ListView_Class-GUID-a7f24a67-d46c-4156-8276-a97b945235d6.xml,WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.xml,WRTKit_Separator-GUID-ec82d9ea-6b88-48c6-92c2-09a4dd56b31a.xml,WRTKit_Displaying_content-GUID-57647864-5231-47e5-8ad5-f2adb1848760.xml,WRTKit_NavigationButton_Class-GUID-3c5aaba9-899d-463a-8337-b6f7c09e190b.xml,WRTKit_Actions-GUID-38771443-166b-4112-9569-c07229cd7449.xml,WRTKit_SelectionMenu_Class-GUID-3ae54fdf-e938-400b-969d-e41575331aa0.xml,WRTKit_View_Class-GUID-e673fe1a-cf46-46f5-b243-ce7422c69cc5.xml,WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.xml,WRTKit_TextField_Class-GUID-799b7dea-1e4d-4147-bc27-acc4b91d8bf9.xml,WRTKit_Selections-GUID-23145d13-f2e7-48be-b24b-bc49754b2919.xml,WRTKit_Label_Class-GUID-64730e7f-835f-443a-9322-6753fa72fd09.xml,WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.xml,WRTKit_SelectionList_Class-GUID-c3be7a8a-9028-4cec-a0c0-d355d0621b37.xml,WRTKit_Control_states-GUID-f98575ac-f913-466d-a790-0ff0207463a3.xml,WRTKit_Showing_content_in_a_view-GUID-7020d9ea-747d-42f3-b47c-16ad1f45db82.xml,WRTKit_RSS_Reader_user_interface-GUID-1083a0c4-a953-4b6e-a4d0-45a031e51c35.xml,WRTKit_Using_notification_popups-GUID-39c7a69a-9334-45d1-92f6-8c239831a0a2.xml,WRTKit_High_level_view_of_the_WRTKit-GUID-a3abe57e-9a71-4f94-923a-b84ccd1b0905.xml,WRTKit_Text_entry-GUID-b52e3343-5a39-4a83-ae97-461a53761207.xml,WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.xml,WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.xml,WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.xml,WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.xml,WRTKit_Introduction_to_the_WRTKit-GUID-dcf05457-f800-4f05-b284-a4e24ab8be79.xml,WRTKit_FormButton_Class-GUID-9f99492d-b232-4a78-baed-bd284839b367.xml,WRTKit_Feed_updates-GUID-25cd0e54-0516-4469-965e-c5781cf44dc9.xml,WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.xml,WRTKit_Using_text_entry_controls-GUID-76aeb0e3-698d-41de-a34b-8fea6d8e00d2.xml,WRTKit_Notification_popups-GUID-8696212c-4114-412a-9990-ef9755fc1942.xml,WRTKit_Views_and_the_UIManager-GUID-f95b4ad6-0e86-4023-8371-3ff2a45e95fe.xml
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/html/index.html	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en">
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<meta name="copyright" content="(C) Copyright 2005" />
+<meta name="DC.rights.owner" content="(C) Copyright 2005" />
+<meta content="concept" name="DC.Type" />
+<meta name="DC.Title" content="Views and the UIManager" />
+<meta scheme="URI" name="DC.Relation" content="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html" />
+<meta content="XHTML" name="DC.Format" />
+<meta content="GUID-F95B4AD6-0E86-4023-8371-3FF2A45E95FE" name="DC.Identifier" />
+<meta content="en" name="DC.Language" />
+<link href="commonltr.css" type="text/css" rel="stylesheet" />
+<title>WRTKit Documentation</title>
+</head>
+<body>
+<h1>WRTKit Documentation</h1>
+<ul>
+<li><a href="WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.html"><b>WRTKit Developer's Guide</b></a>
+<ul>
+<li><a href="WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html">Overview of the WRTKit</a>
+<ul>
+<li><a href="WRTKit_Introduction_to_the_WRTKit-GUID-dcf05457-f800-4f05-b284-a4e24ab8be79.html">Introduction to the WRTKit</a></li>
+<li><a href="WRTKit_Terminology-GUID-ebd8d7c4-03f6-498d-becc-eb8d4081ed8b.html">Terminology</a></li>
+<li><a href="WRTKit_Design_considerations-GUID-cd4c583d-e6d8-4aab-b2d8-dba09dd7a009.html">WRTKit design considerations</a></li>
+</ul>
+</li>
+<li><a href="WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">Developing widgets using the WRTKit</a>
+<ul>
+<li><a href="WRTKit_High_level_view_of_the_WRTKit-GUID-a3abe57e-9a71-4f94-923a-b84ccd1b0905.html">High level view of the WRTKit</a></li>
+<li><a href="WRTKit_Control_states-GUID-f98575ac-f913-466d-a790-0ff0207463a3.html">Control states</a></li>
+<li><a href="WRTKit_Views_and_the_UIManager-GUID-f95b4ad6-0e86-4023-8371-3ff2a45e95fe.html">Views and the UIManager</a></li>
+<li><a href="WRTKit_Notification_popups-GUID-8696212c-4114-412a-9990-ef9755fc1942.html">Notification popups</a></li>
+<li><a href="WRTKit_Displaying_content-GUID-57647864-5231-47e5-8ad5-f2adb1848760.html">Displaying content</a></li>
+<li><a href="WRTKit_Actions-GUID-38771443-166b-4112-9569-c07229cd7449.html">Actions</a></li>
+<li><a href="WRTKit_Selections-GUID-23145d13-f2e7-48be-b24b-bc49754b2919.html">Selections</a></li>
+<li><a href="WRTKit_Text_entry-GUID-b52e3343-5a39-4a83-ae97-461a53761207.html">Text entry</a></li>
+<li><a href="WRTKit_Separator-GUID-ec82d9ea-6b88-48c6-92c2-09a4dd56b31a.html">Separator</a></li>
+</ul>
+</li>
+<li><a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a>
+<ul>
+<li><a href="WRTKit_Creating_a_widget_that_uses_the_WRTKit-GUID-8d71ee32-1826-4141-8fb6-76420a5472a4.html">Creating a widget that uses the WRTKit</a></li>
+<li><a href="WRTKit_Using_buttons-GUID-8b14cec9-92cc-4bde-83c2-ad0a30a84942.html">Using buttons</a></li>
+<li><a href="WRTKit_Using_selection_controls-GUID-5e36d276-cce8-4bc9-bcba-78e721adb8c6.html">Using selection controls</a></li>
+<li><a href="WRTKit_Using_text_entry_controls-GUID-76aeb0e3-698d-41de-a34b-8fea6d8e00d2.html">Using text entry controls</a></li>
+<li><a href="WRTKit_Showing_content_in_a_view-GUID-7020d9ea-747d-42f3-b47c-16ad1f45db82.html">Showing content in a view</a></li>
+<li><a href="WRTKit_Using_notification_popups-GUID-39c7a69a-9334-45d1-92f6-8c239831a0a2.html">Using notification popups</a></li>
+<li><a href="WRTKit_Handling_events-GUID-a1a86c8a-6e66-4dc8-8967-b5c9c7bc6563.html">Handling events</a></li>
+<li><a href="WRTKit_Customizing_the_WRTKit_look-GUID-43369c51-23cf-41ac-a2f4-6320dc6eda9a.html">Customizing the WRTKit look</a></li>
+</ul>
+</li>
+</ul>
+</li>
+<li><a href="WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html"><b>WRTKit Tutorials</b></a>
+<ul>
+<li><a href="WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.html">Hello World</a>
+<ul>
+<li><a href="WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.html">Creating the Hello World widget</a></li>
+</ul>
+</li>
+<li><a href="WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html">RSS Reader</a>
+<ul>
+<li><a href="WRTKit_RSS_Reader_first_steps-GUID-db42b227-1647-4020-bdb9-dacb26771779.html">First steps</a></li>
+<li><a href="WRTKit_RSS_Reader_user_interface-GUID-1083a0c4-a953-4b6e-a4d0-45a031e51c35.html">RSS Reader user interface</a></li>
+<li><a href="WRTKit_Feed_updates-GUID-25cd0e54-0516-4469-965e-c5781cf44dc9.html">Feed updates</a></li>
+</ul>
+</li>
+<li><a href="WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html">Travel Companion</a>
+<ul>
+<li><a href="WRTKit_Travel_Companion_planning_the_widget-GUID-891068c7-c802-4da7-8674-8e8292aef7eb.html">Planning the widget</a></li>
+<li><a href="WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.html">Travel Companion user interface</a></li>
+<li><a href="WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.html">Functionality</a></li>
+</ul>
+</li>
+</ul>
+</li>
+<li><a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html"><b>WRTKit API Reference</b></a>
+<ul>
+<li><a href="WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.html">WRTKit ActionControl Class</a></li>
+<li><a href="WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.html">WRTKit ContentPanel Class</a></li>
+<li><a href="WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html">WRTKit Control Class</a></li>
+<li><a href="WRTKit_FormButton_Class-GUID-9f99492d-b232-4a78-baed-bd284839b367.html">WRTKit FormButton Class</a></li>
+<li><a href="WRTKit_Label_Class-GUID-64730e7f-835f-443a-9322-6753fa72fd09.html">WRTKit Label Class</a></li>
+<li><a href="WRTKit_ListView_Class-GUID-a7f24a67-d46c-4156-8276-a97b945235d6.html">WRTKit ListView Class</a></li>
+<li><a href="WRTKit_NavigationButton_Class-GUID-3c5aaba9-899d-463a-8337-b6f7c09e190b.html">WRTKit NavigationButton Class</a></li>
+<li><a href="WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.html">WRTKit SelectionControl Class</a></li>
+<li><a href="WRTKit_SelectionList_Class-GUID-c3be7a8a-9028-4cec-a0c0-d355d0621b37.html">WRTKit SelectionList Class</a></li>
+<li><a href="WRTKit_SelectionMenu_Class-GUID-3ae54fdf-e938-400b-969d-e41575331aa0.html">WRTKit SelectionMenu Class</a></li>
+<li><a href="WRTKit_Separator_Class-GUID-b9a1bbb9-5858-4996-9c25-2ede2507f3a3.html">WRTKit Separator Class</a></li>
+<li><a href="WRTKit_TextArea_Class-GUID-137b9641-f3a5-4fc0-bf30-017533e2ad69.html">WRTKit TextArea Class</a></li>
+<li><a href="WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.html">WRTKit TextEntryControl Class</a></li>
+<li><a href="WRTKit_TextField_Class-GUID-799b7dea-1e4d-4147-bc27-acc4b91d8bf9.html">WRTKit TextField Class</a></li>
+<li><a href="WRTKit_UIElement_Class-GUID-37b82f75-720c-4f54-9769-cda18453ffa3.html">WRTKit UIElement Class</a></li>
+<li><a href="WRTKit_UIManager_Class-GUID-937146c8-3889-40f5-b9f7-0f774ac9f5fe.html">WRTKit UIManager Class</a></li>
+<li><a href="WRTKit_View_Class-GUID-e673fe1a-cf46-46f5-b243-ce7422c69cc5.html">WRTKit View Class</a></li>
+</ul>
+</li>
+</ul>
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/plugin.xml	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?eclipse version="3.4"?>
+<plugin>
+   <extension
+         point="org.eclipse.help.toc">
+      <toc
+            file="toc.xml"
+            primary="true">
+      </toc>
+      <toc
+            file="WRT_Doc.xml">
+      </toc>
+   </extension>
+   <extension
+         point="org.eclipse.ui.helpSupport">
+   </extension>
+
+</plugin>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/src/org/symbian/tools/wrttools/doc/WRTKit/Activator.java	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,50 @@
+package org.symbian.tools.wrttools.doc.WRTKit;
+
+import org.eclipse.ui.plugin.AbstractUIPlugin;
+import org.osgi.framework.BundleContext;
+
+/**
+ * The activator class controls the plug-in life cycle
+ */
+public class Activator extends AbstractUIPlugin {
+
+	// The plug-in ID
+	public static final String PLUGIN_ID = "org.symbian.tools.wrttools.doc.WRTKitGuide";
+
+	// The shared instance
+	private static Activator plugin;
+	
+	/**
+	 * The constructor
+	 */
+	public Activator() {
+	}
+
+	/*
+	 * (non-Javadoc)
+	 * @see org.eclipse.ui.plugin.AbstractUIPlugin#start(org.osgi.framework.BundleContext)
+	 */
+	public void start(BundleContext context) throws Exception {
+		super.start(context);
+		plugin = this;
+	}
+
+	/*
+	 * (non-Javadoc)
+	 * @see org.eclipse.ui.plugin.AbstractUIPlugin#stop(org.osgi.framework.BundleContext)
+	 */
+	public void stop(BundleContext context) throws Exception {
+		plugin = null;
+		super.stop(context);
+	}
+
+	/**
+	 * Returns the shared instance
+	 *
+	 * @return the shared instance
+	 */
+	public static Activator getDefault() {
+		return plugin;
+	}
+
+}
--- a/org.symbian.wrttools.doc.WRTKit/src/org/symbian/wrtools/lib/wrtkit/Activator.java	Thu Mar 04 17:06:00 2010 -0800
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,50 +0,0 @@
-package org.symbian.wrtools.lib.wrtkit;
-
-import org.eclipse.ui.plugin.AbstractUIPlugin;
-import org.osgi.framework.BundleContext;
-
-/**
- * The activator class controls the plug-in life cycle
- */
-public class Activator extends AbstractUIPlugin {
-
-	// The plug-in ID
-	public static final String PLUGIN_ID = "org.symbian.wrtools.lib.WRTKit";
-
-	// The shared instance
-	private static Activator plugin;
-	
-	/**
-	 * The constructor
-	 */
-	public Activator() {
-	}
-
-	/*
-	 * (non-Javadoc)
-	 * @see org.eclipse.ui.plugin.AbstractUIPlugin#start(org.osgi.framework.BundleContext)
-	 */
-	public void start(BundleContext context) throws Exception {
-		super.start(context);
-		plugin = this;
-	}
-
-	/*
-	 * (non-Javadoc)
-	 * @see org.eclipse.ui.plugin.AbstractUIPlugin#stop(org.osgi.framework.BundleContext)
-	 */
-	public void stop(BundleContext context) throws Exception {
-		plugin = null;
-		super.stop(context);
-	}
-
-	/**
-	 * Returns the shared instance
-	 *
-	 * @return the shared instance
-	 */
-	public static Activator getDefault() {
-		return plugin;
-	}
-
-}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.wrttools.doc.WRTKit/toc.xml	Thu Mar 04 17:06:37 2010 -0800
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?NLS TYPE="org.eclipse.help.toc"?>
+<toc label="Nokia WRTKit Documentation" topic="html/index.html">
+<topic label="WRTKit Developer's Guide" href="html/WRTKit_Developers_Guide-GUID-1758770c-bb60-4390-b6de-9eb5b8ef399f.html">
+<topic label="Overview of the WRTKit" href="html/WRTKit_Overview_of_the_WRTKit-GUID-14c414f6-a220-40b6-8614-df13141495ab.html">
+<topic label="Introduction to the WRTKit" href="html/WRTKit_Introduction_to_the_WRTKit-GUID-dcf05457-f800-4f05-b284-a4e24ab8be79.html"></topic>
+<topic label="Terminology" href="html/WRTKit_Terminology-GUID-ebd8d7c4-03f6-498d-becc-eb8d4081ed8b.html"></topic>
+<topic label="WRTKit design considerations" href="html/WRTKit_Design_considerations-GUID-cd4c583d-e6d8-4aab-b2d8-dba09dd7a009.html"></topic>
+</topic>
+
+<topic label="Developing widgets using the WRTKit" href="html/WRTKit_Developing_widgets_using_the_WRTKit-GUID-a321db96-0a01-4e55-b24b-96905f40cb5c.html">
+<topic label="High level view of the WRTKit" href="html/WRTKit_High_level_view_of_the_WRTKit-GUID-a3abe57e-9a71-4f94-923a-b84ccd1b0905.html"></topic>
+<topic label="Control states" href="html/WRTKit_Control_states-GUID-f98575ac-f913-466d-a790-0ff0207463a3.html"></topic>
+<topic label="Views and the UIManager" href="html/WRTKit_Views_and_the_UIManager-GUID-f95b4ad6-0e86-4023-8371-3ff2a45e95fe.html"></topic>
+<topic label="Notification popups" href="html/WRTKit_Notification_popups-GUID-8696212c-4114-412a-9990-ef9755fc1942.html"></topic>
+<topic label="Displaying content" href="html/WRTKit_Displaying_content-GUID-57647864-5231-47e5-8ad5-f2adb1848760.html"></topic>
+<topic label="Actions" href="html/WRTKit_Actions-GUID-38771443-166b-4112-9569-c07229cd7449.html"></topic>
+<topic label="Selections" href="html/WRTKit_Selections-GUID-23145d13-f2e7-48be-b24b-bc49754b2919.html"></topic>
+<topic label="Text entry" href="html/WRTKit_Text_entry-GUID-b52e3343-5a39-4a83-ae97-461a53761207.html"></topic>
+<topic label="Separator" href="html/WRTKit_Separator-GUID-ec82d9ea-6b88-48c6-92c2-09a4dd56b31a.html"></topic>
+</topic>
+
+<topic label="Common WRTKit tasks" href="html/WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">
+<topic label="Creating a widget that uses the WRTKit" href="html/WRTKit_Creating_a_widget_that_uses_the_WRTKit-GUID-8d71ee32-1826-4141-8fb6-76420a5472a4.html"></topic>
+<topic label="Using buttons" href="html/WRTKit_Using_buttons-GUID-8b14cec9-92cc-4bde-83c2-ad0a30a84942.html"></topic>
+<topic label="Using selection controls" href="html/WRTKit_Using_selection_controls-GUID-5e36d276-cce8-4bc9-bcba-78e721adb8c6.html"></topic>
+<topic label="Using text entry controls" href="html/WRTKit_Using_text_entry_controls-GUID-76aeb0e3-698d-41de-a34b-8fea6d8e00d2.html"></topic>
+<topic label="Showing content in a view" href="html/WRTKit_Showing_content_in_a_view-GUID-7020d9ea-747d-42f3-b47c-16ad1f45db82.html"></topic>
+<topic label="Using notification popups" href="html/WRTKit_Using_notification_popups-GUID-39c7a69a-9334-45d1-92f6-8c239831a0a2.html"></topic>
+<topic label="Handling events" href="html/WRTKit_Handling_events-GUID-a1a86c8a-6e66-4dc8-8967-b5c9c7bc6563.html"></topic>
+<topic label="Customizing the WRTKit look" href="html/WRTKit_Customizing_the_WRTKit_look-GUID-43369c51-23cf-41ac-a2f4-6320dc6eda9a.html"></topic>
+</topic>
+</topic>
+
+<topic label="WRTKit Tutorials" href="html/WRTKit_Tutorials-GUID-506c11e3-e6f3-43ec-9495-fcfa638b7e08.html">
+<topic label="Hello World" href="html/WRTKit_Hello_World_Tutorial-GUID-67e0a561-48ac-4938-8f1b-852422b71380.html">
+<topic label="Creating the Hello World widget" href="html/WRTKit_Creating_the_Hello_World_widget-GUID-d638159a-d12b-476c-a74c-99055672b7be.html"></topic>
+</topic>
+<topic label="RSS Reader" href="html/WRTKit_RSS_Reader_Tutorial-GUID-678d197f-c7b0-4e5e-85e2-f8549c75bbe8.html">
+<topic label="First steps" href="html/WRTKit_RSS_Reader_first_steps-GUID-db42b227-1647-4020-bdb9-dacb26771779.html"></topic>
+<topic label="RSS Reader user interface" href="html/WRTKit_RSS_Reader_user_interface-GUID-1083a0c4-a953-4b6e-a4d0-45a031e51c35.html"></topic>
+<topic label="Feed updates" href="html/WRTKit_Feed_updates-GUID-25cd0e54-0516-4469-965e-c5781cf44dc9.html"></topic>
+</topic>
+<topic label="Travel Companion" href="html/WRTKit_Travel_Companion_Tutorial-GUID-be79ba64-fa03-4968-964e-d7dcc42d7053.html">
+<topic label="Planning the widget" href="html/WRTKit_Travel_Companion_planning_the_widget-GUID-891068c7-c802-4da7-8674-8e8292aef7eb.html"></topic>
+<topic label="Travel Companion user interface" href="html/WRTKit_Travel_Companion_user_interface-GUID-989d17cc-f019-46bb-b6f5-49166e258aca.html"></topic>
+<topic label="Functionality" href="html/WRTKit_Travel_Companion_functionality-GUID-384f2430-3de9-4006-ac8e-86c5774c3a79.html"></topic>
+</topic>
+</topic>
+<topic label="WRTKit API Reference" href="html/WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">
+<topic label="WRTKit ActionControl Class" href="html/WRTKit_ActionControl_Class-GUID-6a7cb034-d676-4119-b799-7b3e3b5948e4.html"></topic>
+<topic label="WRTKit ContentPanel Class" href="html/WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.html"></topic>
+<topic label="WRTKit Control Class" href="html/WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html"></topic>
+<topic label="WRTKit FormButton Class" href="html/WRTKit_FormButton_Class-GUID-9f99492d-b232-4a78-baed-bd284839b367.html"></topic>
+<topic label="WRTKit Label Class" href="html/WRTKit_Label_Class-GUID-64730e7f-835f-443a-9322-6753fa72fd09.html"></topic>
+<topic label="WRTKit ListView Class" href="html/WRTKit_ListView_Class-GUID-a7f24a67-d46c-4156-8276-a97b945235d6.html"></topic>
+<topic label="WRTKit NavigationButton Class" href="html/WRTKit_NavigationButton_Class-GUID-3c5aaba9-899d-463a-8337-b6f7c09e190b.html"></topic>
+<topic label="WRTKit SelectionControl Class" href="html/WRTKit_SelectionControl_Class-GUID-35c4291f-dc3a-439c-890f-1d140864aca0.html"></topic>
+<topic label="WRTKit SelectionList Class" href="html/WRTKit_SelectionList_Class-GUID-c3be7a8a-9028-4cec-a0c0-d355d0621b37.html"></topic>
+<topic label="WRTKit SelectionMenu Class" href="html/WRTKit_SelectionMenu_Class-GUID-3ae54fdf-e938-400b-969d-e41575331aa0.html"></topic>
+<topic label="WRTKit Separator Class" href="html/WRTKit_Separator_Class-GUID-b9a1bbb9-5858-4996-9c25-2ede2507f3a3.html"></topic>
+<topic label="WRTKit TextArea Class" href="html/WRTKit_TextArea_Class-GUID-137b9641-f3a5-4fc0-bf30-017533e2ad69.html"></topic>
+<topic label="WRTKit TextEntryControl Class" href="html/WRTKit_TextEntryControl_Class-GUID-07359ff7-6015-4d2c-a9bf-b345fcf49090.html"></topic>
+<topic label="WRTKit TextField Class" href="html/WRTKit_TextField_Class-GUID-799b7dea-1e4d-4147-bc27-acc4b91d8bf9.html"></topic>
+<topic label="WRTKit UIElement Class" href="html/WRTKit_UIElement_Class-GUID-37b82f75-720c-4f54-9769-cda18453ffa3.html"></topic>
+<topic label="WRTKit UIManager Class" href="html/WRTKit_UIManager_Class-GUID-937146c8-3889-40f5-b9f7-0f774ac9f5fe.html"></topic>
+<topic label="WRTKit View Class" href="html/WRTKit_View_Class-GUID-e673fe1a-cf46-46f5-b243-ce7422c69cc5.html"></topic>
+</topic>
+</toc>