×
Namespaces

Variants
Actions
(Difference between revisions)

Widgets Usability

From Nokia Developer Wiki
Jump to: navigation, search
jimgilmour1 (Talk | contribs)
m (Description)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(13 intermediate revisions by 5 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]][[Category:Usability]]
+
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.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 -->
 +
|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= 20090620
 +
|author= [[User:Naresh99]]
 +
}}
 +
 
 +
[[Category:Usability]]
  
 
==Description==
 
==Description==
Line 5: Line 28:
 
The widget is used to refer to either the graphic component or its controlling program or to refer to the combination of both. It can be a GUI that allows the user to interface with the application.Widgets display information and invite the user to act in a number of ways. In other words Mobile widgets are the applications that user can install on his mobile device to add functionality to device. Each widget provides functionalities like brings information to you (news widgets), mail to your inbox (mail widgets) & all. Mobile widgets are easliy downloadable from internet or web to once's mobile phone. As now a days many mobile comes with preinstalled widgets on them. There are lots of companies providing widgets, like eBay provides mobile widget ticker, some news sites also offers new related widgets, maps widgets & many more. Widget is also called as gadget, badge, module by other programming systems.
 
The widget is used to refer to either the graphic component or its controlling program or to refer to the combination of both. It can be a GUI that allows the user to interface with the application.Widgets display information and invite the user to act in a number of ways. In other words Mobile widgets are the applications that user can install on his mobile device to add functionality to device. Each widget provides functionalities like brings information to you (news widgets), mail to your inbox (mail widgets) & all. Mobile widgets are easliy downloadable from internet or web to once's mobile phone. As now a days many mobile comes with preinstalled widgets on them. There are lots of companies providing widgets, like eBay provides mobile widget ticker, some news sites also offers new related widgets, maps widgets & many more. Widget is also called as gadget, badge, module by other programming systems.
  
S60 Web Runtime '''Widgets''' is a portable and lightweight application framework that makes mobile web apps easy. It is an extension to the Webkit based browser engine on the S60 Platform - that allows instances of the browser to be run as if they are applications. Widgets can be created using HTML, CSS and JavaScript. Web Runtime Technology allows small applications called '''Widgets''' to be easily distributed and installed.
+
S60 Web Runtime Widgets is a portable and lightweight application framework that makes mobile web apps easy. It is an extension to the Webkit based browser engine on the S60 Platform - that allows instances of the browser to be run as if they are applications. Widgets can be created using HTML, CSS and JavaScript. Web Runtime Technology allows small applications called Widgets to be easily distributed and installed.
 +
 
 +
==What is a Widget==
 +
 
 +
#Standalone Web applications running without a browser.
 +
#Web services provided by the S60 Web Runtime (WRT) environment.
 +
#Behaviour defined using JavaScript.
 +
#Consists of a few files defining appearance (icon), layout, and behaviour.
 +
#Accesses a URL like a normal Web application to get data from the Web server.
 +
 
 +
==What is a S60 Web Runtime==
 +
 
 +
#A library providing APIs for widget developers for Menu creation, URL access, Data download from URL.
 +
#Based on open-source Web technologies.
 +
#Empowered by Web Browser for S60.
 +
#Several widgets can be executed at the same time.
 +
#Due to physical limitations of the screen, only a single widget is on the foreground.
 +
 
 +
==Widget building blocks==
 +
[[File:Widget11.jpg]]
 +
 
 +
==Widget deployment==
 +
1. At least two mandatory files (manifest and main HTML files) are required.<br/>
 +
2. Files are packed into a ".zip" package.<br/>
 +
3. The package extension is changed to ".wgz".<br/>
 +
4. The package is transferred to the device through bluetooth or USB cable.<br/>
 +
 
 +
==The role of JavaScript==
 +
 
 +
#Implements widget behaviour.
 +
#UI interactions.<br/>
 +
#Communication functionality.
 +
#Dynamic construction of UI elements.
 +
 
 +
 
 +
<b>JavaScript functions are associated with tags.</b>
 +
 
 +
*Functions are assigned with certain attributes (for example, onClick) causing the function to be called.
 +
 
 +
Example:-
 +
 
 +
<node onclick="get('Name');">Name</node>
 +
 
 +
==Accessing Web services==
 +
 
 +
#Ajax allows asynchronous HTTP requests.<br/>
 +
#No need to wait for the result by blocking the UI.<br/>
 +
#Use XMLHttpRequestobject<br/>
 +
 
 +
 
 +
In object creation, register a callback, which is called when the request has been completed.In the callback, handle the results, view the fetched content in the UI.
  
 
==Some important guideline regarding widget usability are.==
 
==Some important guideline regarding widget usability are.==
[[Category:Web Runtime (WRT)]]
+
[[Category:Symbian Web Runtime]]
  
 
* Widget should not keep refreshing the screen everytime user makes changes in widget value. Sometimes Unexpected refreshes creates confusion.
 
* Widget should not keep refreshing the screen everytime user makes changes in widget value. Sometimes Unexpected refreshes creates confusion.
Line 14: Line 87:
 
* Support for animated GIFs is limited in early versions of WRT. Testing on actual devices is recommended, especially if animated GIFs are critical to your design.
 
* Support for animated GIFs is limited in early versions of WRT. Testing on actual devices is recommended, especially if animated GIFs are critical to your design.
  
* Most required input fields should be kept in up-front. Use asterisk at the end of the field label to indicate it as required field.'''
+
* Most required input fields should be kept in up-front. Use asterisk at the end of the field label to indicate it as required field.
  
 
* Transitions and animations can be extremely CPU intensive. Always test animations on several devices and use the Nokia Energy Profiler to determine the load on the CPU.
 
* Transitions and animations can be extremely CPU intensive. Always test animations on several devices and use the Nokia Energy Profiler to determine the load on the CPU.
Line 20: Line 93:
 
* If you wish to include text with a custom font, use a graphic image instead of solutions such as SiFR (an approach to custom fonts based on Flash and JavaScript technology), which may be too heavy for most mobile devices.
 
* If you wish to include text with a custom font, use a graphic image instead of solutions such as SiFR (an approach to custom fonts based on Flash and JavaScript technology), which may be too heavy for most mobile devices.
  
* Help for the widgets should be provided for understanding the use & the flow of widget. Help content should be simple & clear enough to understand. Help options should also be place in the position where user easily find it.
+
* Help for the widgets should be provided for understanding the use & the flow of widget. Help content should be simple & clear enough to understand. Help options should also be place in the position where user easily find it.<br>
 +
 
 +
 
 +
[[:Category:Web Runtime (WRT)|More Widget articles can be found here]]

Latest revision as of 06:42, 9 May 2012

Article Metadata
Article
Created: naresh99 (20 Jun 2009)
Last edited: hamishwillee (09 May 2012)

Contents

[edit] Description

The widget is used to refer to either the graphic component or its controlling program or to refer to the combination of both. It can be a GUI that allows the user to interface with the application.Widgets display information and invite the user to act in a number of ways. In other words Mobile widgets are the applications that user can install on his mobile device to add functionality to device. Each widget provides functionalities like brings information to you (news widgets), mail to your inbox (mail widgets) & all. Mobile widgets are easliy downloadable from internet or web to once's mobile phone. As now a days many mobile comes with preinstalled widgets on them. There are lots of companies providing widgets, like eBay provides mobile widget ticker, some news sites also offers new related widgets, maps widgets & many more. Widget is also called as gadget, badge, module by other programming systems.

S60 Web Runtime Widgets is a portable and lightweight application framework that makes mobile web apps easy. It is an extension to the Webkit based browser engine on the S60 Platform - that allows instances of the browser to be run as if they are applications. Widgets can be created using HTML, CSS and JavaScript. Web Runtime Technology allows small applications called Widgets to be easily distributed and installed.

[edit] What is a Widget

  1. Standalone Web applications running without a browser.
  2. Web services provided by the S60 Web Runtime (WRT) environment.
  3. Behaviour defined using JavaScript.
  4. Consists of a few files defining appearance (icon), layout, and behaviour.
  5. Accesses a URL like a normal Web application to get data from the Web server.

[edit] What is a S60 Web Runtime

  1. A library providing APIs for widget developers for Menu creation, URL access, Data download from URL.
  2. Based on open-source Web technologies.
  3. Empowered by Web Browser for S60.
  4. Several widgets can be executed at the same time.
  5. Due to physical limitations of the screen, only a single widget is on the foreground.

[edit] Widget building blocks

Widget11.jpg

[edit] Widget deployment

1. At least two mandatory files (manifest and main HTML files) are required.
2. Files are packed into a ".zip" package.
3. The package extension is changed to ".wgz".
4. The package is transferred to the device through bluetooth or USB cable.

[edit] The role of JavaScript

  1. Implements widget behaviour.
  2. UI interactions.
  3. Communication functionality.
  4. Dynamic construction of UI elements.


JavaScript functions are associated with tags.

  • Functions are assigned with certain attributes (for example, onClick) causing the function to be called.

Example:-

<node onclick="get('Name');">Name</node>

[edit] Accessing Web services

  1. Ajax allows asynchronous HTTP requests.
  2. No need to wait for the result by blocking the UI.
  3. Use XMLHttpRequestobject


In object creation, register a callback, which is called when the request has been completed.In the callback, handle the results, view the fetched content in the UI.

[edit] Some important guideline regarding widget usability are.

  • Widget should not keep refreshing the screen everytime user makes changes in widget value. Sometimes Unexpected refreshes creates confusion.
  • Support for animated GIFs is limited in early versions of WRT. Testing on actual devices is recommended, especially if animated GIFs are critical to your design.
  • Most required input fields should be kept in up-front. Use asterisk at the end of the field label to indicate it as required field.
  • Transitions and animations can be extremely CPU intensive. Always test animations on several devices and use the Nokia Energy Profiler to determine the load on the CPU.
  • If you wish to include text with a custom font, use a graphic image instead of solutions such as SiFR (an approach to custom fonts based on Flash and JavaScript technology), which may be too heavy for most mobile devices.
  • Help for the widgets should be provided for understanding the use & the flow of widget. Help content should be simple & clear enough to understand. Help options should also be place in the position where user easily find it.


More Widget articles can be found here

This page was last modified on 9 May 2012, at 06:42.
184 page views in the last 30 days.
×