Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Automatically save and load user input in Web Runtime widgets

From Wiki
Jump to: navigation, search
jappit (Talk | contribs)
(This article explains how to automatically save and re-load user inputs in a Web Runtime widget)
 
hamishwillee (Talk | contribs)
m (Hamishwillee - Tidy wiki text)
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Code Examples]][[Category:Web Runtime (WRT)]][[Category:How To]][[Category:Usability]]
+
[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:How To]][[Category:Usability]]
This article explains '''how to automatically save user input''', and how to '''reload the saved input values''' within a Web Runtime widget.
+
{{Abstract|This article explains how to automatically save user input, and how to reload the saved input values within a Web Runtime widget.}}
 +
 
 +
{{ArticleMetaData <!-- v1.1 -->
 +
|sourcecode= [[Media:TextFieldAutoSaveWidget.zip]]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090622
 +
|author= [[User:Jappit]]
 +
}}
  
 
==Description==
 
==Description==
'''User input on mobile devices is slower and more difficult than on desktop devices''', due to different factors, as:
+
User input on mobile devices is slower and more difficult than on desktop devices, due to different factors, as:
* '''users in mobility''', that are usually performing other actions (e.g.: walking) while entering data
+
* users in mobility, that are usually performing other actions (e.g.: walking) while entering data
* '''different input methods''' (e.g.: small keyboards, touchscreen keyboards)
+
* different input methods (e.g.: small keyboards, touchscreen keyboards)
* '''smaller display resolutions'''
+
* smaller display resolutions
  
So, mobile applications should always provide a '''functionality to allow the user not to lose the entered data''', when some kind of interruptions happen, as:
+
So, mobile applications should always provide a functionality to allow the user not to lose the entered data, when some kind of interruptions happen, as:
* '''the application is closed''' (both for a '''user interaction''', or for '''another application's interruption''' causing the current one to close)
+
* the application is closed (both for a user interaction, or for another application's interruption causing the current one to close)
* '''device turns off''' (e.g.: due to empty battery)
+
* device turns off (e.g.: due to empty battery)
* '''user wants to go to another screen''' of the same application, and could continue to input data later
+
* user wants to go to another screen of the same application, and could continue to input data later
In these and other cases it's a good practice to '''allow the user to continue editing the previous entered data''', when he goes back to the previous input screen. This greatly '''improves the final user experience''', since it '''avoids unnecessary actions''' and inputs from the user, and allows a '''more flexible usage of the mobile application'''.
+
In these and other cases it's a good practice to allow the user to continue editing the previous entered data, when he goes back to the previous input screen. This greatly improves the final user experience, since it avoids unnecessary actions and inputs from the user, and allows a more flexible usage of the mobile application.
  
 
==How to==
 
==How to==
This example shows how to '''automatically save and load user input from 2 text fields''', without requiring any extra actions to the user. The same approach can be used with more complex forms, and with different kinds of fields.<br/>
+
This example shows how to automatically save and load user input from 2 text fields, without requiring any extra actions to the user. The same approach can be used with more complex forms, and with different kinds of fields.<br/>
 
[[Image:Wrt_inputautosave_widget.png]]<br/>
 
[[Image:Wrt_inputautosave_widget.png]]<br/>
 
===The HTML code===
 
===The HTML code===
For this example, a '''basic SMS form is built''', with the classic user input fields:
+
For this example, a basic SMS form is built, with the classic user input fields:
* a '''field for the receiver's phone number'''
+
* a field for the receiver's phone number
* a '''field for the message body'''
+
* a field for the message body
 
<code html4strict>
 
<code html4strict>
 
<html>
 
<html>
Line 41: Line 65:
 
</code>
 
</code>
 
===Saving the user input===
 
===Saving the user input===
In order to save the user input, '''different approaches''' are possible:
+
In order to save the user input, different approaches are possible:
* save it at '''predefined time intervals''': this option '''could cause more savings than necessary''', since there's no guarantee that the input values will change within the specified interval
+
* save it at predefined time intervals: this option could cause more savings than necessary, since there's no guarantee that the input values will change within the specified interval
* save it when the '''user press some buttons (e.g.: a "Save draft" button)''': this option require an '''explicit interaction from the user''', so it is no optimal from a usability point of view
+
* save it when the user press some buttons (e.g.: a "Save draft" button): this option require an explicit interaction from the user, so it is no optimal from a usability point of view
* save it when '''the value of a input field changes''': this option is both '''optimal for the user''', since it has not to perform any action, and from a '''performance point of view''', since the value of an input field will be actually saved only when actually changed
+
* save it when the value of a input field changes: this option is both optimal for the user, since it has not to perform any action, and from a performance point of view, since the value of an input field will be actually saved only when actually changed
  
 
----
 
----
  
So, the last proposed approach will be used, and entered data will be saved only when actually changed. In order to be '''notified of any changes of an input field''', the '''onchange''' event handler is used.
+
So, the last proposed approach will be used, and entered data will be saved only when actually changed. In order to be notified of any changes of an input field, the onchange event handler is used.
The following '''startAutosave()''' method takes a field and a key as arguments, and '''starts listening to the change events of that field'''. When this event is fired, the '''saveValue()''' function is called, that performs the actual saving of the input field value:
+
The following {{Icode|startAutosave()}} method takes a field and a key as arguments, and starts listening to the change events of that field. When this event is fired, the {{Icode|saveValue()}} function is called, that performs the actual saving of the input field value:
 
<code javascript>
 
<code javascript>
 
function startAutosave(field, key)
 
function startAutosave(field, key)
Line 75: Line 99:
 
</code>
 
</code>
 
===Loading the saved data===
 
===Loading the saved data===
Once the user exits and reopen the widget, or simply goes back to the previous form view, the '''previously saved input values have to be restored''', and this can be easily done by reading the preferences stored by the previous '''saveValue()''' function. The following '''loadSavedValue()''' method takes a field and a key as arguments and, if available, restores the saved value in the input field:
+
Once the user exits and reopen the widget, or simply goes back to the previous form view, the previously saved input values have to be restored, and this can be easily done by reading the preferences stored by the previous {{Icode|saveValue()}} function. The following loadSavedValue() method takes a field and a key as arguments and, if available, restores the saved value in the input field:
 
<code javascript>
 
<code javascript>
 
function loadSavedValue(field, key)
 
function loadSavedValue(field, key)
Line 87: Line 111:
 
}
 
}
 
</code>
 
</code>
In order to restore the values as soon as the user enters the widget, the '''loadSavedValue()''' can be called in the widget's init() method:
+
In order to restore the values as soon as the user enters the widget, the {{Icode|loadSavedValue()}} can be called in the widget's {{Icode|init()}} method:
 
<code javascript>
 
<code javascript>
 
function init()
 
function init()

Latest revision as of 05:21, 10 February 2012

This article explains how to automatically save user input, and how to reload the saved input values within a Web Runtime widget.

Article Metadata
Code ExampleArticle
Created: jappit (22 Jun 2009)
Last edited: hamishwillee (10 Feb 2012)

Contents

[edit] Description

User input on mobile devices is slower and more difficult than on desktop devices, due to different factors, as:

  • users in mobility, that are usually performing other actions (e.g.: walking) while entering data
  • different input methods (e.g.: small keyboards, touchscreen keyboards)
  • smaller display resolutions

So, mobile applications should always provide a functionality to allow the user not to lose the entered data, when some kind of interruptions happen, as:

  • the application is closed (both for a user interaction, or for another application's interruption causing the current one to close)
  • device turns off (e.g.: due to empty battery)
  • user wants to go to another screen of the same application, and could continue to input data later

In these and other cases it's a good practice to allow the user to continue editing the previous entered data, when he goes back to the previous input screen. This greatly improves the final user experience, since it avoids unnecessary actions and inputs from the user, and allows a more flexible usage of the mobile application.

[edit] How to

This example shows how to automatically save and load user input from 2 text fields, without requiring any extra actions to the user. The same approach can be used with more complex forms, and with different kinds of fields.
Wrt inputautosave widget.png

[edit] The HTML code

For this example, a basic SMS form is built, with the classic user input fields:

  • a field for the receiver's phone number
  • a field for the message body
<html>
[...]
 
<body onLoad="javascript:init();">
 
<div id="sms_form">
 
<label for="receiver">Phone Number</label>
<input type="text" name="receiver" id="receiver" />
 
<label for="message">Message</label>
<textarea name="message" id="message"></textarea>
 
<input type="submit" value="Send">
</div>
</body>
</html>

[edit] Saving the user input

In order to save the user input, different approaches are possible:

  • save it at predefined time intervals: this option could cause more savings than necessary, since there's no guarantee that the input values will change within the specified interval
  • save it when the user press some buttons (e.g.: a "Save draft" button): this option require an explicit interaction from the user, so it is no optimal from a usability point of view
  • save it when the value of a input field changes: this option is both optimal for the user, since it has not to perform any action, and from a performance point of view, since the value of an input field will be actually saved only when actually changed

So, the last proposed approach will be used, and entered data will be saved only when actually changed. In order to be notified of any changes of an input field, the onchange event handler is used. The following startAutosave() method takes a field and a key as arguments, and starts listening to the change events of that field. When this event is fired, the saveValue() function is called, that performs the actual saving of the input field value:

function startAutosave(field, key)
{
var changeHandler = function()
{
saveValue(field, key);
};
 
field.onchange = changeHandler;
}
function saveValue(field, key)
{
widget.setPreferenceForKey(field.value, key);
}

So, the the widget's init() method, the startAutosave() method is called for both the receiver and the message inputs:

function init()
{
startAutosave(document.getElementById('receiver'), 'sms_receiver');
 
startAutosave(document.getElementById('message'), 'sms_message');
}

[edit] Loading the saved data

Once the user exits and reopen the widget, or simply goes back to the previous form view, the previously saved input values have to be restored, and this can be easily done by reading the preferences stored by the previous saveValue() function. The following loadSavedValue() method takes a field and a key as arguments and, if available, restores the saved value in the input field:

function loadSavedValue(field, key)
{
var value = widget.preferenceForKey(key);
 
if(value)
{
field.value = value;
}
}

In order to restore the values as soon as the user enters the widget, the loadSavedValue() can be called in the widget's init() method:

function init()
{
loadSavedValue(document.getElementById('receiver'), 'sms_receiver');
 
loadSavedValue(document.getElementById('message'), 'sms_message');
}

[edit] Downloads

A sample widget, that shows the auto-save and auto-load functionalities, is available for download here: Media:TextFieldAutoSaveWidget.zip

This page was last modified on 10 February 2012, at 05:21.
175 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×