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)

Widgets Usability

From Wiki
Jump to: navigation, search
Rahulsingh1m (Talk | contribs)
mayankkedia (Talk | contribs)
m (Formatting and bold of some text)
Line 5: Line 5:
 
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==
 
==What is a Widget==
  
* '''Standalone Web applications running without a browser.'''
+
#Standalone Web applications running without a browser.
* '''Web services provided by the S60 Web Runtime (WRT) environment.'''
+
#Web services provided by the S60 Web Runtime (WRT) environment.
* '''Behaviour defined using JavaScript.'''
+
#Behaviour defined using JavaScript.
* '''Consists of a few files defining appearance (icon), layout, and behaviour.'''
+
#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.'''
+
#Accesses a URL like a normal Web application to get data from the Web server.
  
 
==What is a S60 Web Runtime==
 
==What is a S60 Web Runtime==
  
* '''A library providing APIs for widget developers for Menu creation, URL access, Data download from URL.'''
+
#A library providing APIs for widget developers for Menu creation, URL access, Data download from URL.
* '''Based on open-source Web technologies.'''
+
#Based on open-source Web technologies.
* '''Empowered by Web Browser for S60.'''
+
#Empowered by Web Browser for S60.
* '''Several widgets can be executed at the same time.'''
+
#Several widgets can be executed at the same time.
* '''Due to physical limitations of the screen, only a single widget is on the foreground.'''
+
#Due to physical limitations of the screen, only a single widget is on the foreground.
  
 
==Widget building blocks==
 
==Widget building blocks==
Line 27: Line 27:
  
 
==Widget deployment==
 
==Widget deployment==
'''1. At least two mandatory files (manifest and main HTML files) are required.'''<br/>
+
1. At least two mandatory files (manifest and main HTML files) are required.<br/>
'''2. Files are packed into a ".zip" package.'''<br/>
+
2. Files are packed into a ".zip" package.<br/>
'''3. The package extension is changed to ".wgz".'''<br/>
+
3. The package extension is changed to ".wgz".<br/>
'''4. The package is transferred to the device through bluetooth or USB cable.'''<br/>
+
4. The package is transferred to the device through bluetooth or USB cable.<br/>
  
 
==The role of JavaScript==
 
==The role of JavaScript==
* '''Implements widget behaviour.'''<br/>
+
 
UI interactions.<br/>
+
#Implements widget behaviour.
Communication functionality.<br/>
+
#UI interactions.<br/>
Dynamic construction of UI elements.
+
#Communication functionality.
* '''JavaScript functions are associated with tags.'''<br/>
+
#Dynamic construction of UI elements.
* '''Functions are assigned with certain attributes (for example, onClick) causing the function to be called.'''
+
 
 +
 
 +
<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>
 
<node onclick="get('Name');">Name</node>
  
 
==Accessing Web services==
 
==Accessing Web services==
* '''Ajax allows asynchronous HTTP requests.'''<br/>
+
 
* '''No need to wait for the result by blocking the UI.'''<br/>
+
#Ajax allows asynchronous HTTP requests.<br/>
* '''Use XMLHttpRequestobject'''<br/>
+
#No need to wait for the result by blocking the UI.<br/>
In object creation, register a callback, which is called when the request has been completed.<br/>
+
#Use XMLHttpRequestobject<br/>
In the callback, handle the results, view the fetched content in the UI.
+
 
 +
 
 +
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.==
Line 55: Line 64:
 
* 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 62: Line 71:
  
 
* 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>
 
* 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>
 +
  
 
[http://wiki.forum.nokia.com/index.php/Category:Web_Runtime_%28WRT%29 More Widget articles can be found here]
 
[http://wiki.forum.nokia.com/index.php/Category:Web_Runtime_%28WRT%29 More Widget articles can be found here]

Revision as of 06:05, 1 July 2009


Contents

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.

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.

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.

Widget building blocks

Widget11.jpg

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.

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>

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.

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

130 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.

×