Difference between revisions of "Widget"

From BC$ MobileTV Wiki
Jump to: navigation, search
 
(117 intermediate revisions by 23 users not shown)
Line 1: Line 1:
 +
[[Image:Widget_architecture.png|thumb|425px|W3C Widget Architecture]]
 
A '''Widget''' is a small functional component of a larger application, service or community. It is typically used to summarize data or remotely access information or services from another location outside of an application's original hosting/deployment environment.
 
A '''Widget''' is a small functional component of a larger application, service or community. It is typically used to summarize data or remotely access information or services from another location outside of an application's original hosting/deployment environment.
  
  
 +
''' What is a widget, you ask? '''
  
 +
Whether you call it a widget, gadget, badge, module, capsule, snippet, framed window, representation, implementation, micro, mini, page flake or anything else; a widget is a small web or desktop application that brings information to you, so you dont have to look for the information yourself. Some widgets are helpful like clocks, calculators or calendars. Some widgets let you write desktop notes and see weather forecasts. REALLY GREAT widgets do even more incredible stuff, like let you feed Dilbert in color straight to your Facebook or MySpace pages, your blog, your personal web page or even your desktop.
  
== What is a widget, you ask? ==
+
Widgets are designed to be shared. You can send your favorite widgets to friends and co-workers, and anyone who sees a widget on your personal pages can download it for themselves. So just click the "Grab it" button, decide where you want to put your widget, and then pass it along. Even The Boss will smile when he gets that email. <ref>Dilbert Widget: http://widget.dilbert.com/</ref>
 
+
Whether you call it a widget, gadget, badge, module, capsule, snippet, mini or flake; a widget is a small web or desktop application that brings information to you, so you dont have to look for the information yourself. Some widgets are helpful like clocks, calculators or calendars. Some widgets let you write desktop notes and see weather forecasts. REALLY GREAT widgets do even more incredible stuff, like let you feed Dilbert in color straight to your Facebook or MySpace pages, your blog, your personal web page or even your desktop.
+
 
+
Widgets are designed to be shared. You can send your favorite widgets to friends and co-workers, and anyone who sees a widget on your personal pages can download it for themselves. So just click the "Grab it" button, decide where you want to put your widget, and then pass it along. Even The Boss will smile when he gets that email.  
+
<ref>Dilbert Widget: http://widget.dilbert.com/</ref>
+
 
+
  
  
 +
[[Image:200x200.jpg|right|thumb|200px|AJAX Widget platform]]
  
  
Line 20: Line 18:
  
  
== Universal Widget API ==
+
=== W3C - Widgets ===
 
+
Universal Widget API (UWA) is an open widget standard by Widget pioneer NetVibes. Netvibes opened its platform in 2008 to allow publishers and developers to benefit from our technology. Netvibes Universal Widget API (UWA) is a free and elegant widget framework that uses XHTML for structure, CSS for styling and JavaScript/AJAX for behavioral/DOM control; it can also use iframes and plugins such as Flash. UWA supports all major widget platforms, including Netvibes, iGoogle, Windows Vista, Mac OS X, iPhone and more.
+
 
+
 
+
* '''NetVibes - OpenSource center''': http://netvibes.org/
+
* NetVibes - (Widget) Developer Center: http://dev.netvibes.com/
+
* '''Netvibes Ecosystem API: http://dev.netvibes.com/doc/api/eco'''
+
* What is the Universal Widget API?: http://dev.netvibes.com/doc/universal_widget_api
+
* ''EXAMPLES -- CSS templates & JavaScript controls: http://dev.netvibes.com/doc/uwa/templates_and_controls''
+
* Anatomy of a UWA widget: http://dev.netvibes.com/doc/uwa/documentation/anatomy_of_a_uwa_widget
+
 
+
 
+
=== Specification ===
+
 
+
* Universal Widget API (UWA) 1.2: http://netvibes.org/specs/uwa/current-work/
+
 
+
 
+
 
+
 
+
 
+
 
+
== W3C - Widgets ==
+
 
+
<ref>W3C Widgets - Vodafone Mobile Widget Camp: http://zope.cetis.ac.uk/members/scott/blogview?entry=20090420144900</ref><ref>W3C Widgets 1.0 Requirements Updated: http://stickiwidgets.com/2007/07/11/w3c-widgets-10-requirements-updated/</ref>
+
  
 
* Widget Landscape: http://www.w3.org/TR/widgets-land/  
 
* Widget Landscape: http://www.w3.org/TR/widgets-land/  
Line 52: Line 26:
 
* Widgets 1.0 -- Compatibility Matrix for Packaging and Configuration: http://samaxes.svn.beanstalkapp.com/widgets_compatibility_matrix/trunk/index.html
 
* Widgets 1.0 -- Compatibility Matrix for Packaging and Configuration: http://samaxes.svn.beanstalkapp.com/widgets_compatibility_matrix/trunk/index.html
  
 +
<ref>'''W3C Widgets spec adoption: https://www.quirksmode.org/m/widgets.html'''</ref>
 +
<ref>W3C Widgets - Vodafone Mobile Widget Camp: http://zope.cetis.ac.uk/members/scott/blogview?entry=20090420144900</ref>
 +
<ref>Vodafone team pitch on "W3C Widgets adoption in Android" to Google: https://www.slideshare.net/pp.koch/google-presentation-the-open-web-goes-mobile/ (proof Google took most of the PWA concepts from W3C Widgets)</ref>
 +
<ref>W3C Widgets 1.0 Requirements Updated: http://stickiwidgets.com/2007/07/11/w3c-widgets-10-requirements-updated/</ref>
 +
<ref>Widgets - the Wookie project: https://www.slideshare.net/scottw/widgets-the-wookie-project-presentation (Scott Wilson early presentation on his Widget portal project's work with Sakai LMS)</ref>
 +
<ref>W3C talk on Widgets (2011): https://www.w3.org/2011/Talks/mwc-widgets/</ref>
 +
<ref>Misconceptions about W3C Widgets: https://www.w3.org/community/native-web-apps/2011/10/09/misconceptions-about-w3c-widgets/</ref>
  
=== Specification ===
 
  
 +
== Specifications ==
 +
 +
* W3C - Widgets 1.0 Family of Specifications: http://www.w3.org/2008/webapps/wiki/WidgetSpecs
 
* '''Widgets 1.0 -- Packaging and Configuration''': http://www.w3.org/TR/widgets/
 
* '''Widgets 1.0 -- Packaging and Configuration''': http://www.w3.org/TR/widgets/
 
* Widgets 1.0: APIs and Events: http://www.w3.org/TR/widgets-apis/
 
* Widgets 1.0: APIs and Events: http://www.w3.org/TR/widgets-apis/
 
* Widgets 1.0: Requirements: http://www.w3.org/TR/2009/WD-widgets-reqs-20090430/
 
* Widgets 1.0: Requirements: http://www.w3.org/TR/2009/WD-widgets-reqs-20090430/
 
* Widgets 1.0: Access Requests Policy: http://www.w3.org/TR/widgets-access/
 
* Widgets 1.0: Access Requests Policy: http://www.w3.org/TR/widgets-access/
* W3C - Widgets 1.0 Family of Specifications: http://www.w3.org/2008/webapps/wiki/WidgetSpecs
+
* Digital Signatures for Widgets: http://www.w3.org/TR/widgets-digsig/
 +
* Widget Access Request Policy: http://dev.w3.org/2006/waf/widgets-access/
 +
* Widgets 1.0 -- View Modes Media Feature: http://www.w3.org/TR/widgets-vmmf/
 +
<ref>System Applications Working Group: https://www.w3.org/2012/sysapps/</ref><ref>Relationship between the W3C System Application spec (MobileApp-focused) & W3C Widgets spec (WebApp-focused): https://github.com/marcoscaceres/runtime/commit/5ba8eaf0bf572372f0b71e3cd15bc85ce96f0a9d</ref><ref>Runtime & Security Model for Web Applications - Packaged Applications: https://www.w3.org/TR/runtime/#packaged-applications</ref>
  
 +
=== Universal Widget API ===
  
 +
'''U'''niversal '''W'''idget '''A'''PI (''UWA'') is an open widget standard by Widget pioneer NetVibes. Netvibes opened its platform in 2008 to allow publishers and developers to benefit from our technology. Netvibes Universal Widget API (UWA) is a free and elegant widget framework that uses [[XHTML]] for structure, CSS for styling and JavaScript/AJAX for behavioral/DOM control; it can also use [[iFrame]]s and plugins such as [[Flash]]. ''UWA'' supports all major widget platforms, including Netvibes, iGoogle, Windows Vista, Mac OS X, iPhone and more.
  
 +
* '''Universal Widget API (UWA) 1.2''': http://netvibes.org/specs/uwa/current-work/
 +
* NetVibes - OpenSource center: http://netvibes.org/
 +
* NetVibes - (Widget) Developer Center: http://dev.netvibes.com/
 +
* '''Netvibes Ecosystem API: http://dev.netvibes.com/doc/api/eco'''
 +
* What is the Universal Widget API?: http://dev.netvibes.com/doc/universal_widget_api
 +
* ''EXAMPLES -- CSS templates & JavaScript controls: http://dev.netvibes.com/doc/uwa/templates_and_controls''''
 +
* Anatomy of a UWA widget: http://dev.netvibes.com/doc/uwa/documentation/anatomy_of_a_uwa_widget
  
 +
=== Opera Widgets SDK ===
  
 +
* Opera Widgets SDK: http://dev.opera.com/articles/view/opera-widgets-sdk/
 +
* '''The ins and outs of config.xml''' (for W3C Widgets & Opera Extensions): http://dev.opera.com/articles/view/config-xml-howto/
  
== Tutorials ==
+
=== Google Wave Gadgets ===
  
 +
* Google Wave Gadget API: http://code.google.com/apis/wave/extensions/gadgets/guide.html
  
=== iNetTuts ===
+
=== Java Portlets ===
  
* How to Mimic the iGoogle Interface: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
+
* JSR-168 Portlet specification: http://jcp.org/aboutJava/communityprocess/final/jsr168/<ref>All JSR-168 documents: http://www.jcp.org/en/jsr/detail?id=168</ref><ref>Introducing the Portlet Specification (diagrams): http://www.javaworld.com/javaworld/jw-09-2003/jw-0905-portlet2.html?page=2</ref><ref>Develop Java portlets: http://www.javaworld.com/javaworld/jw-02-2003/jw-0207-iviews.html</ref>
* iNettuts with Cookies!: http://james.padolsey.com/javascript/inettuts-with-cookies/
+
* JSR-286 Portlet 2.0 specification: http://jcp.org/aboutJava/communityprocess/final/jsr286/<ref>Introducing Java Portlet Specifications - JSR 168 and JSR 286: http://developers.sun.com/portalserver/reference/techart/jsr168/</ref><ref>What Is a Portlet?: http://oreilly.com/pub/a/java/archive/what-is-a-portlet.html</ref><ref>Understanding the Java Portlet Specification: http://www.developer.com/java/web/article.php/3366111/Understanding-the-Java-Portlet-Specification.</ref>
* How to Mimic the iGoogle Interface with Database: http://jsabino.wordpress.com/2009/09/19/how-to-mimic-the-igoogle-interface-with-database/
+
  
  
 +
== Inter Widget Communication ==
  
 +
'''I'''nter '''W'''idget '''C'''ommunication (''IWC'') is the transmission and reception of data between code components and/or containers in a given platform (i.e. browser and/or Operating System).
  
----
+
* pmrpc -- HTML5 Inter-window and web workers remote procedure call library: http://code.google.com/p/pmrpc/
 +
* IWCProjects -- List of systems that enable inter-window or web worker communication: http://code.google.com/p/pmrpc/wiki/IWCProjects
 +
* easyXDM: http://easyxdm.net/wp/
 +
* easyXDM demo: http://consumer.easyxdm.net/current/example/methods.html
  
 +
 +
 +
 +
----
  
 
Adding a new widget.
 
Adding a new widget.
Line 87: Line 94:
 
2. On the create new widget event (button, anchor or whatever), clone the hidden widget (do a deep clone by setting the parameter for clone to true)
 
2. On the create new widget event (button, anchor or whatever), clone the hidden widget (do a deep clone by setting the parameter for clone to true)
  
Here is my code: — assume that there is a “hidden” widget with a unique id
+
Here is my code: — assume that there is a "hidden" widget with a unique id
  
 +
<pre>
 
  var new_widget = $(’#newwidget’).clone(true);  
 
  var new_widget = $(’#newwidget’).clone(true);  
 
  $(’#column2′).append(new_widget);  
 
  $(’#column2′).append(new_widget);  
Line 95: Line 103:
 
  new_widget.find(’div.widget-content’).html(”Added new Widget “);
 
  new_widget.find(’div.widget-content’).html(”Added new Widget “);
 
  new_widget.show(’slow’);
 
  new_widget.show(’slow’);
 +
</pre>
  
 
This seemed to solve the problem of not being able to move the widget once it was created.
 
This seemed to solve the problem of not being able to move the widget once it was created.
Line 100: Line 109:
  
 
<ref>iNetTuts with Cookies - Adding new Widget: http://james.padolsey.com/javascript/inettuts-with-cookies/#comment-12090</ref>
 
<ref>iNetTuts with Cookies - Adding new Widget: http://james.padolsey.com/javascript/inettuts-with-cookies/#comment-12090</ref>
 
  
 
----
 
----
  
 +
<pre>
 
  function insertWidget(where, opt) {
 
  function insertWidget(where, opt) {
 
   var selectorOld = iNettuts.settings.widgetSelector;
 
   var selectorOld = iNettuts.settings.widgetSelector;
Line 121: Line 130:
 
  });
 
  });
 
}}
 
}}
 
+
</pre>
 
<ref>Add/Insert a new Widget: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-19351</ref>
 
<ref>Add/Insert a new Widget: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-19351</ref>
 
  
 
----
 
----
 
  
 
Here’s a fix for jquery-ui-1.7.1 & jquery-1.3.2
 
Here’s a fix for jquery-ui-1.7.1 & jquery-1.3.2
  
 
REPLACE
 
REPLACE
 +
<pre>
 
  var notSortable = ”;
 
  var notSortable = ”;
 
+
</pre>
 
WITH
 
WITH
  var notSortable = #none,;
+
<pre>
 
+
  var notSortable = '#none,';
Without the fix, you will not be able to move any widget around unless you have an ‘id’ associated with at least one widget.
+
</pre>
 
+
Without the fix, you will not be able to move any widget around unless you have an 'id' associated with at least one widget.<ref>jquery-ui-1.7.1 & jquery-1.3.2: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-54343</ref>
PS: If anyone has a better solution, please post! Thx!
+
<ref>jquery-ui-1.7.1 & jquery-1.3.2: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-54343</ref>
+
 
+
 
+
----
+
 
+
 
+
 
+
 
+
 
+
  
 
----
 
----
Line 171: Line 169:
 
   $(settings.columns).sortable(’disable’);
 
   $(settings.columns).sortable(’disable’);
 
  }
 
  }
 
Great job thanks to you from France.
 
  
 
<ref>Upgrade to jQuery 1.3.2: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-54343</ref>
 
<ref>Upgrade to jQuery 1.3.2: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-54343</ref>
Line 180: Line 176:
  
  
 +
== Resources ==
  
 +
* W3C Widgets - Spec Development folder: http://dev.w3.org/2006/waf/
  
 +
=== JAVA ===
  
 +
==== Wookie ====
 +
[[Image:wookie-overview-lg.png|thumb|right|250px|Wookie Widget platform]]
 +
Wookie is a project to create open source software for adding widgets to your applications.
  
== Tools ==
+
* '''Wookie project: http://www.getwookie.org/Welcome.html'''
 +
* Wookie wiki (goodness me): http://wiki.apache.org/incubator/WookieProposal
 +
* Wookie Server Administrators Guide: http://cwiki.apache.org/confluence/display/WOOKIE/Wookie+Server+Administrators+Guide
 +
* Wookie download: http://tencompetence.cvs.sourceforge.net/viewvc/tencompetence/wp6/org.tencompetence.widgetservice/builds/
 +
* WOOKIE Google Group (Talk about Widgets): http://groups.google.com/group/talk-about-widgets
 +
* Wookie -- Use-Cases for inter-widgets communication (IWC): http://groups.google.com/group/talk-about-widgets/web/use-cases-for-iwc
 +
* Wookie Meetup: http://www.slideshare.net/scottw/wookie-meetup-2232012
 +
* Wookie Meets Shindig -- OpenSocial and W3C Widgets in Moodle: http://zope.cetis.ac.uk/members/scott/blogview?entry=20090227190013
 +
* Implementation Report -- Widgets Packaging and Configuration: http://dev.w3.org/2006/waf/widgets/imp-report/
 +
* Screencast Widget tutorial - Build a W3C Widget in under 5 Minutes: http://people.kmi.open.ac.uk/ullmann/tutorials/wookie/widget.htm
 +
* Screencast - How to run your Widget: http://people.kmi.open.ac.uk/ullmann/tutorials/wookie/widgetUploadWookie.htm
 +
* Wookie REST API: http://incubator.apache.org/wookie/wookie-rest-api.html
 +
* Embedding Wookie Widgets in other Applications: http://cwiki.apache.org/confluence/display/WOOKIE/Embedding+Wookie+Widgets+in+other+Applications
 +
* Wookie FAQ: https://cwiki.apache.org/confluence/display/WOOKIE/FAQ
  
* VODAFONE -- Widget SDK: http://www.betavine.net/bvportal/resources/widgets/research
+
 
 +
===== Examples =====
 
   
 
   
 +
* Drag and drop with HTML 5 and Wookie: http://zope.cetis.ac.uk/members/scott/blogview?entry=20090623135357
 +
* '''HTML 5 Drag and Drop + Microformats = a whole world of possibilities''': http://zope.cetis.ac.uk/members/scott/blogview?entry=20090624222327
 +
* Wookie - Live Widget Demo: http://cwiki.apache.org/confluence/display/WOOKIE/Widget+Demo
  
  
 +
==== WidgetFX ====
  
 +
JavaFX-based widgets which work in both the browser and desktop.
  
 +
* WidgetFX: http://widgetfx.org/
  
  
== Resources ==
 
  
=== jQuery ===
 
  
* '''jQuery Plugins - Widgets category: http://plugins.jquery.com/project/Plugins/category/50'''
+
=== JavaScript ===
* MBContainersPlus: http://pupunzi.wordpress.com/2009/02/01/mbcontainersplus/
+
* Easy Widgets (jQuery): http://plugins.jquery.com/project/easywidgets
+
* Calculator Widget (by Keith Wood): http://keith-wood.name/calculator.html
+
  
 +
==== Widgeon ====
  
=== WidgetBuilder ===
+
* Widgeon -- A W3C Widgets implementation using XULRunner : http://code.google.com/p/widgeon/
  
* FileDialog demo: http://www.ardentedge.com/pr_WidgetBuilder_FileDialog.htm
 
  
 +
==== Geppeto ====
  
=== FusionWidgets ===
+
* Geppeto: http://geppeto.fer.hr/
 +
* Geppeto - Demo portal: http://161.53.65.222:8080/geppeto/index.html
  
* FusionWidgets -- Live Demos: http://www.fusioncharts.com/widgets/LiveDemos.asp
 
  
 +
==== Dijit ====
  
 +
Dijits are "Dojo Toolkit" widgets.
  
 +
* Writing Your Own Widget: http://dojotoolkit.org/reference-guide/quickstart/writingWidgets.html#quickstart-writingwidgets
  
  
  
 +
=== PHP ===
 +
 +
==== Phidget ====
  
== Examples ==
+
* [[wikipedia: Phidget]]
 +
* The Phidget Project Gallery: http://grouplab.cpsc.ucalgary.ca/phidgets/
 +
* Phidget SVN: svn://svn.pureenergy.cc/phidget
  
=== BBC ===
 
  
* BBC homepage: http://www.bbc.co.uk/?edit
+
==== MyWiWall ====
  
 +
* mywiwall -- web 2.0 widget portal: http://code.google.com/p/mywiwall/
  
=== Multiply ===
 
  
* Multiply profiles (when logged in and click CUSTOMIZE): http://bcmoney.multiply.com/
 
  
  
  
=== NetVibes ===
 
  
* NetVibes - The original Widget-driven portal: http://netvibes.com
+
=== FLEX ===
  
 +
==== VizSage ====
  
 +
* Vizsage Information Widgets: http://vizsage.com/
 +
 +
 +
 +
 +
 +
 +
 +
 +
== Platforms ==
 +
 +
=== Windows ===
 +
 +
* Windows - Vista Dashboard "Gadgets": http://vista.gallery.microsoft.com/vista/SideBar.aspx?mkt=en-us
 +
* Windows - Vista Dashboard "Gadgets" developer center: http://msdn.microsoft.com/en-us/library/aa965850%28VS.85%29.aspx
 +
* Windows Sidebar and gadgets (overview): http://windows.microsoft.com/en-us/windows-vista/Windows-Sidebar-and-gadgets-overview
 +
* Creating a Sidebar Gadget for Windows Vista: http://www.innovatewithgadgets.com/2007/01/daily-dilbert-sidebar-gadget-for.html
 +
 +
=== Mac ===
 +
 +
* Apple - Dashboard Widgets: http://www.apple.com/downloads/dashboard/
 +
* Apple - Dashboard Widget developer center: http://developer.apple.com/macosx/dashboard.html
 +
* DashboardWidgets - Community: http://www.dashboardwidgets.com/
 +
 +
=== BBC ===
 +
 +
* BBC homepage: http://www.bbc.co.uk/?edit
 +
 +
=== Multiply ===
 +
 +
* Multiply profiles (when logged in and click CUSTOMIZE): http://bcmoney.multiply.com/
 +
 +
=== NetVibes ===
 +
 +
* NetVibes - The original Widget-driven portal: http://eco.netvibes.com/apps
  
 
=== iGoogle ===
 
=== iGoogle ===
Line 247: Line 306:
 
* Google adds OAuth to widget mashups: http://news.cnet.com/8301-17939_109-10105186-2.html?part=rss&tag=feed&subj=Webware
 
* Google adds OAuth to widget mashups: http://news.cnet.com/8301-17939_109-10105186-2.html?part=rss&tag=feed&subj=Webware
  
 +
==== OpenSocial ====
  
 +
* OpenSocial: http://www.opensocial.org/
 +
* OpenSocial - code/API: http://code.google.com/apis/opensocial/
 +
* OpenSocial - Client Libraries: http://wiki.opensocial.org/index.php?title=Client_Libraries
 +
* OAuth Use Cases (in OpenSocial gadgets): http://wiki.opensocial.org/index.php?title=OAuth_Use_Cases
  
 +
===== Shindig =====
  
 +
Shindig is an [[Open Source]] OpenSocial gadget container.
  
 +
* Apache Shindig: http://shindig.apache.org/
  
== Tools ==
+
=== Yahoo! ===
  
=== Wookie ===
+
* Yahoo! Widgets (for Mac and Windows): http://widgets.yahoo.com/
 +
* Yahoo! Widget Developer Center: http://widgets.yahoo.com/tools/
 +
* Widget Repository: http://widgets.yahoo.com/download/
  
Wookie is a project to create open source software for adding widgets to your applications.
+
=== iPhone ===
  
* Wookie project: http://www.getwookie.org/Welcome.html
+
* iPhone Widget tool: http://www.apple.com/downloads/dashboard/music/iphonewidget.html
* Wookie wiki (goodness me): http://wiki.apache.org/incubator/WookieProposal
+
* Wookie download: http://tencompetence.cvs.sourceforge.net/viewvc/tencompetence/wp6/org.tencompetence.widgetservice/builds/
+
* Wookie Meetup: http://www.slideshare.net/scottw/wookie-meetup-2232012
+
  
 +
=== Nokia ===
  
 +
* Nokia Widgets: http://www.nokiausa.com/get-support-and-software/learn-how/widgets
  
 +
=== BlackBerry ===
  
 +
* BlackBerry Widget SDK: http://na.blackberry.com/eng/developers/browserdev/widgetsdk.jsp
  
 +
=== Motorola ===
  
== External Links ==
+
* Motodev Widget Developer Challenge: http://developer.motorola.com/motodevchallenge/
 +
* Motorola launches WebUI Widget Platform via WebKit: http://www.widgetslab.com/2008/08/11/motorola-launches-webui-widget-platform-via-webkit/
  
* [[wikipedia: Web widget]]
+
=== Vodafone ===
* User-defined interfaces in PHP 5 -- Implementing (X)HTML Widgets: http://www.devshed.com/c/a/PHP/Userdefined-interfaces-in-PHP-5-Implementing-XHTML-Widgets/
+
* Windows Mobile 6.5 – What’s in for developers?: http://blogs.msdn.com/windowsmobile/archive/2009/03/18/windows-mobile-6-5-what-s-in-for-developers.aspx
+
* Widgets Will Spark Internet TV: http://www.internetevolution.com/author.asp?section_id=526&doc_id=175831&
+
* [[wikipedia: Yahoo! Widgets]]
+
* [[wikipedia: Widget engine]]
+
* [[wikipedia: Web widget]]
+
  
 +
* Vodafone - (widget) Developer Center: https://developer.vodafone.com/
 +
* VODAFONE -- Widget SDK: http://www.betavine.net/bvportal/resources/widgets/research
 +
<ref>Vodafone Widget developer center: http://widget.vodafone.com/dev/</ref>
 +
<ref>Vodafone - Appstar competition: http://widget.developer.vodafone.com/appstar</ref>
  
 +
=== MediaWiki ===
  
 +
* MediaWiki Widgets (widgets come to the original wiki platform): http://www.mediawikiwidgets.org
  
  
  
== References ==
 
  
<references />
 
  
 +
== Tools ==
  
 +
* Übersicht - "Dashboard" replacement to get widgets back on Mac OS X 10.15+: http://tracesof.net/uebersicht-widgets/
 +
* MediaWiki Widgets: http://www.mediawikiwidgets.org
 +
* WSO2 Gadget Server: https://wso2.com/products/gadget-server/&quot;;/
  
 +
* FileDialog demo: http://www.ardentedge.com/pr_WidgetBuilder_FileDialog.htm
 +
* FusionWidgets -- Live Demos: http://www.fusioncharts.com/widgets/LiveDemos.asp
  
 +
* '''jQuery Plugins - Widgets category: http://plugins.jquery.com/project/Plugins/category/50'''
 +
* MBContainersPlus: http://pupunzi.wordpress.com/2009/02/01/mbcontainersplus/
 +
* Easy Widgets (jQuery): http://plugins.jquery.com/project/easywidgets
 +
* Calculator Widget (by Keith Wood): http://keith-wood.name/calculator.html
 +
* jQuery UI - Portlet: http://jqueryui.com/demos/sortable/#portlets
  
 +
 +
== Resources ==
 +
 +
* Intro to W3C Widgets: https://www.w3.org/2011/Talks/mwc-widgets/<ref>HTML5 Apps Cross Platform - SWDC 2010, Stockholm: https://www.slideshare.net/wolframkriesing/html5-apps-cross-platform-swdc2010</ref><ref>How to Create an Opera Extension (W3C Widget) from Scratch: https://code.tutsplus.com/articles/how-to-create-an-opera-extension-from-scratch--net-16739</ref>
 +
* Yahoo! Weather RSS Feed: http://developer.yahoo.com/weather/
 +
* How to retrieve Yahoo! Weather using MagPie RSS and JQuery: http://www.bitrepository.com/show-yahoo-weather.html
 +
* Yahoo! Weather widget: http://www.bitrepository.com/demo/show-yahoo-weather/
 +
* Weather station scripts - Forecast Canada : http://saratoga-weather.org/scripts-ECforecast.php#ECforecast?udat=20091110Z2045
 +
* XML processing in Ajax, Part 1 -- Four approaches: http://www.ibm.com/developerworks/xml/library/x-xmlajaxpt1/
 +
* XML processing in Ajax, Part 2 -- Two Ajax and XSLT approachesTransforming XML in Ajax with XSLT: http://www.ibm.com/developerworks/xml/library/x-xmlajaxpt2/
 +
* XML processing in Ajax, Part 3 -- JSON and avoiding proxies (Parsing and transforming XML in Ajax programs): http://www.ibm.com/developerworks/xml/library/x-xmlajaxpt3/
 +
 +
* BING - MultiMap Weather widget: http://www.multimap.com/apidocs/1.2/demos/weatherwidget.htm
 +
* Multimap API V1.2 JavaScript Examples: http://www.multimap.com/apidocs/1.2/demos/advancedwidgets.htm
 +
* Sports Reference widgets: http://widgets.sports-reference.com/
 +
* W3C Widget examples -- WebVTT - subtitle editor: https://github.com/scottbw/web-vtt
 +
* HTML5 Pacman game: https://github.com/scottbw/pacman
 +
* "WeekendYet!?" ProgressBar: http://erikschlyter.github.io/WeekProgressBar/ | [https://github.com/ErikSchlyter/WeekProgressBar SRC]
 +
* Notes Application: https://github.com/ceelian/PinkMagicNotes/tree/master/widget/Notizzettel
 +
 +
* W3C Widget Server in C#: https://github.com/mattchanner/widgt
 +
* WidgetSigner: https://github.com/paddybyers/widgetsigner (Java CLI utility for signing W3C Widgets)
 +
 +
 +
== Tutorials ==
 +
 +
* W3C Widget Tutorial: http://www.slideshare.net/behi_at/widget-tutorial
 +
* W3C widget configuration and packaging with Wookie (IBM developer series): http://www.ibm.com/developerworks/opensource/library/wa-w3cwidget/index.html
 +
* '''How to Mimic the iGoogle Interface: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/'''
 +
* '''iNettuts with Cookies!''': http://james.padolsey.com/javascript/inettuts-with-cookies/
 +
* '''How to Mimic the iGoogle Interface with Database:''' http://jsabino.wordpress.com/2009/09/19/how-to-mimic-the-igoogle-interface-with-database/
 +
* Create a Twitter-Like “Load More” Widget : http://net.tutsplus.com/tutorials/javascript-ajax/create-a-twitter-like-load-more-widget/
 +
* Tutorial - What's a Widget?: http://www.yola.com/tutorials/article/Tutorial-What-s-a-Widget-1285944434131/Basics-getting-started?cid=500315
 +
* Build a Web Widget in jQuery: http://alexmarandon.com/articles/web_widget_jquery/
 +
 +
 +
== External Links ==
 +
 +
* [[wikipedia: Web widget]]
 +
* [[wikipedia: Yahoo! Widgets]]
 +
* [[wikipedia: Widget engine]]
 +
* [[wikipedia: Widget toolkit]]
 +
* [[wikipedia: GUI widget]]
 +
* [[wikipedia: Dashboard (software)]]
 +
* [[wikipedia: Windows_Desktop_Gadgets]]
 +
* [[wikipedia: Portlet]]
 +
* World Wide Web of Widgets: http://www.readwriteweb.com/archives/world_wide_web_of_widgets.php
 +
* Rebranding W3C Widgets as ''HTML5 apps'': http://www.quirksmode.org/blog/archives/2010/03/html5_apps.html
 +
* User-defined interfaces in PHP 5 -- Implementing (X)HTML Widgets: http://www.devshed.com/c/a/PHP/Userdefined-interfaces-in-PHP-5-Implementing-XHTML-Widgets/
 +
* Windows Mobile 6.5 – What’s in for developers?: http://blogs.msdn.com/windowsmobile/archive/2009/03/18/windows-mobile-6-5-what-s-in-for-developers.aspx
 +
* Widgets Will Spark Internet TV: http://www.internetevolution.com/author.asp?section_id=526&doc_id=175831&
 +
* JavaScript RSS/ATOM Web Widget: http://www.hashemian.com/tools/rss-atom-widget.htm
 +
* A step in the right direction -- Widget company Clearspring passes ad audit: http://digital.venturebeat.com/2008/06/24/a-step-in-the-right-direction-widget-company-clearspring-passes-ad-audit/
 +
* Pure Sensia widget-running -- DAB radioTweet while you stream: http://www.reghardware.co.uk/2009/12/05/review_dab_radio_pure_sensia/
 +
* Pmrpc - inter-widget cross-domain RPC library based on HTML5 postMessage API: http://groups.google.com/group/talk-about-widgets/browse_thread/thread/7dede8aadfe0c930#
 +
* Commercial Widget Distribution Platforms: http://blog.snipperoo.com/2007/09/widget-distri-1.html
 +
* Can Widgets Save the Television Industry?: http://www.businessweek.com/innovate/content/apr2009/id20090413_723482.htm
 +
* Dashboard Widgets converter (converts Windows ''file://'' links to Mac format): http://www.uhus.ch/Dashboard-Widgets.html
 +
* Vista Gadgets and Yahoo! Widgets - a comparison: http://www.extremetech.com/article2/0,1697,2028508,00.asp
 +
* jQuery interface - Sortables (thin sortable widget containers): http://interface.eyecon.ro/docs/sort
 +
* How to make a Widget (in ASP.NET): http://dotnetslackers.com/articles/aspnet/How-to-make-Widget.aspx
 +
* Introducing Photo widget, floating thumbnails for your website: http://www.roytanck.com/2009/04/09/introducing-photo-widget-floating-thumbnails-for-your-website/
 +
* App vs. Widget, HTML5 Apps - cross platform: http://www.slideshare.net/wolframkriesing/app-vs-widget-html5-apps-cross-platform
 +
* An HTML5 <audio> radio player widget: http://dev.opera.com/articles/view/html5-audio-radio-player/
 +
* Click A Scene, Show A Dialog, Create A Widget! : http://blogs.sun.com/geertjan/entry/click_a_scene_show_a
 +
* Are widgets and apps the UI future?: http://v-net.tv/NewsDisplay.aspx?id=467
 +
* Apple threatens to block W3C widget standard: http://www.macnn.com/articles/09/04/07/apple.threatens.w3c/<ref>Report of the Patent Advisory Group on the Widgets Updates Specification: http://www.w3.org/2009/03/widgets-pag/pagreport.html</ref>
 +
* Generic Widgets in PHP Cow - RSS Reader: http://www.phpcow.com/docs/myweb/widgets/generic-widgets
 +
* The Weather Network Widgets (official): http://www.theweathernetwork.com/weather_centre/wcwxbutton <ref>Weather Network's new widgets: http://www.widgetslab.com/2007/11/11/the-weather-network-widgets/</ref>
 +
* Google Code baseball hacks - Display batting stats in a Google Gadget: http://www.ibm.com/developerworks/web/library/wa-googlecode1/index.html
 +
* BlackBerry Widgets Renamed WebWorks, Goes Open Source: http://www.intomobile.com/2010/09/27/blackberry-widgets-renamed-webworks-goes-open-source/
 +
* Ajax and XML - Five cool Ajax widgets: http://www.ibm.com/developerworks/xml/library/x-ajaxxml1/
 +
* A W3C Widget implementation - The Palette Portal: http://www.slideshare.net/avagner/a-w3c-widget-implementation-the-palette-portal
 +
* Spread the Truth with the Infowars Widget: http://www.infowars.com/spread-the-truth-with-the-infowars-widget/
 +
* How to Create Simple W3C Widget: http://www.substanceofcode.com/2010/08/10/how-to-create-simple-w3c-widget/
 +
* Elements of a winning widget: http://www.widgetslab.com/2007/07/17/elements-of-a-winning-widget/
 +
* Manipulating cross-domain iframe (widgets) with JavaScript: http://gem-session.com/2010/08/inception-manipulating-cross-domain-iframes-with-javascript
 +
* W3C Widgets support in Opera Presto 2.5: http://www.opera.com/docs/specs/presto25/widgets/w3cwidgets/
 +
* A Bright Future for Opera Extensions; End of the Road for Unite Apps and Widgets: https://dev.opera.com/blog/end-unite-apps-and-widgets/ (dropping support for Widget spec 1.0 and implementing Wdiget spec 2.0 as new "Opera Extensions" format)
 +
* Harmonising the "W3C Widgets Packaging & Configuration" and "OpenSocial Core Gadgets" specifications: https://www.scribd.com/document/135339515/Mapping-W3C-Widgets-to-OpenSocial
 +
* Widgets in iPadOS 14 Limited to Today View in Landscape Mode: https://www.macrumors.com/2020/06/23/widgets-in-ipados-14-limited-to-today-view/
 +
 +
* '''Integrating Apache Wookie with AEM (by Rima Mittal and Ankit Gubrani): http://codebrains.blogspot.com/2015/10/integrating-apache-wookie-with-aem.html | [http://ankit-gubrani.github.io/AEM-WookieConnector/#/ SLIDES #1] | [https://www.slideshare.net/AEMHub2014/integrating-apache-wookie-with-aem-by-rima-mittal-and-ankit-gubrani SLIDES #2] | [https://github.com/ankit-gubrani/AEM-WookieConnector SRC]'''
 +
* Interwidget Communication with XMPP: http://dbis.rwth-aachen.de/~renzel/slides/fosdem-2012-xmpp/iwc/#2
 +
* Wookie Meets Shindig -- OpenSocial and W3C Widgets in Moodle: http://zope.cetis.ac.uk/members/scott/blogview/index-entry=20090227190013.html
 +
* Side-by-side UI - How lethal is Vodafone’s iPhone killer? You decide: http://mortenjust.com/2010/03/20/how-lethal-is-vodafones-iphone-killer/
 +
 +
 +
== References ==
 +
 +
<references />
  
 
== See Also ==
 
== See Also ==
  
[[Gadget]]
+
[[Gadget]] | [[Component]] | [[W3C]] | [[HTML]] | [[CSS]] | [[JavaScript]] | [[AJAX]] | [[Flash]] | [[Real-Time Web]]

Latest revision as of 20:30, 29 December 2021

W3C Widget Architecture

A Widget is a small functional component of a larger application, service or community. It is typically used to summarize data or remotely access information or services from another location outside of an application's original hosting/deployment environment.


What is a widget, you ask?

Whether you call it a widget, gadget, badge, module, capsule, snippet, framed window, representation, implementation, micro, mini, page flake or anything else; a widget is a small web or desktop application that brings information to you, so you dont have to look for the information yourself. Some widgets are helpful like clocks, calculators or calendars. Some widgets let you write desktop notes and see weather forecasts. REALLY GREAT widgets do even more incredible stuff, like let you feed Dilbert in color straight to your Facebook or MySpace pages, your blog, your personal web page or even your desktop.

Widgets are designed to be shared. You can send your favorite widgets to friends and co-workers, and anyone who sees a widget on your personal pages can download it for themselves. So just click the "Grab it" button, decide where you want to put your widget, and then pass it along. Even The Boss will smile when he gets that email. [1]


AJAX Widget platform


Standards

Until recently, the Widget "market" on the web (and as far as software in general) suffered from a lack of standards and alphabet soup of terminologies, methodologies and proprietary solutions. Now there are 2 standards which stand out, one from the Private Sector (UWA by web Widget pioneer NetVibes) and the other from the (pseudo) Public Sector from the W3C which publishes free and open source standards, recommendations and technologies in the public domain.


W3C - Widgets

[2] [3] [4] [5] [6] [7] [8]


Specifications

[9][10][11]

Universal Widget API

Universal Widget API (UWA) is an open widget standard by Widget pioneer NetVibes. Netvibes opened its platform in 2008 to allow publishers and developers to benefit from our technology. Netvibes Universal Widget API (UWA) is a free and elegant widget framework that uses XHTML for structure, CSS for styling and JavaScript/AJAX for behavioral/DOM control; it can also use iFrames and plugins such as Flash. UWA supports all major widget platforms, including Netvibes, iGoogle, Windows Vista, Mac OS X, iPhone and more.

Opera Widgets SDK

Google Wave Gadgets

Java Portlets


Inter Widget Communication

Inter Widget Communication (IWC) is the transmission and reception of data between code components and/or containers in a given platform (i.e. browser and/or Operating System).




Adding a new widget. Not sure if this the best way to do this, but it seems to work for me.

1. Make a “hidden” widget by setting the display (inline style attribute or in the css file)to none. 2. On the create new widget event (button, anchor or whatever), clone the hidden widget (do a deep clone by setting the parameter for clone to true)

Here is my code: — assume that there is a "hidden" widget with a unique id

 var new_widget = $(’#newwidget’).clone(true); 
 $(’#column2′).append(new_widget); 
 $(’.column’).sortable(’option’,'items’,’.widget’); 
 $(’.column’).sortable(’option’,'connectWith’,’.column’); 
 new_widget.find(’div.widget-content’).html(”Added new Widget “);
 new_widget.show(’slow’);

This seemed to solve the problem of not being able to move the widget once it was created.


[18]


 function insertWidget(where, opt) {
  var selectorOld = iNettuts.settings.widgetSelector;
  iNettuts.settings.widgetSelector = '.new';
  salida = "<li class='new widget color-" + opt.color + "'>
              <div class='widget-head'><h3>" + opt.title + "</h3></div>
              <div class='widget-content'><p>" + opt.content + "</p></div>
            </li>";
  $(where).append(salida);
  iNettuts.addWidgetControls();
  iNettuts.settings.widgetSelector = selectorOld;
 }
 insertWidget("#column1", {
  color: "blue",
  title: "Prueba",
  content: "ESTO ES UNA PRUEBA"
 });
}}

[19]


Here’s a fix for jquery-ui-1.7.1 & jquery-1.3.2

REPLACE

 var notSortable = ”;

WITH

 var notSortable = '#none,';

Without the fix, you will not be able to move any widget around unless you have an 'id' associated with at least one widget.[20]


Note for use with jquery 1.3.2. Widget will have moving width on mouseup() event in makeSortable() function. So replace this code :

if(!$(this).parent().hasClass(’dragging’))
{
  // Patch for jquery.1.3.2
  //$(this).parent().css({width:”});
} 
else
{
  $(settings.columns).sortable(’disable’);
}

in

if($(this).parent().hasClass(’dragging’)) 
{
  $(settings.columns).sortable(’disable’);
}

[21]




Resources

JAVA

Wookie

File:Wookie-overview-lg.png Wookie is a project to create open source software for adding widgets to your applications.


Examples


WidgetFX

JavaFX-based widgets which work in both the browser and desktop.



JavaScript

Widgeon


Geppeto


Dijit

Dijits are "Dojo Toolkit" widgets.


PHP

Phidget


MyWiWall




FLEX

VizSage





Platforms

Windows

Mac

BBC

Multiply

NetVibes

iGoogle

OpenSocial

Shindig

Shindig is an Open Source OpenSocial gadget container.

Yahoo!

iPhone

Nokia

BlackBerry

Motorola

Vodafone

[22] [23]

MediaWiki



Tools


Resources


Tutorials


External Links


References

  1. Dilbert Widget: http://widget.dilbert.com/
  2. W3C Widgets spec adoption: https://www.quirksmode.org/m/widgets.html
  3. W3C Widgets - Vodafone Mobile Widget Camp: http://zope.cetis.ac.uk/members/scott/blogview?entry=20090420144900
  4. Vodafone team pitch on "W3C Widgets adoption in Android" to Google: https://www.slideshare.net/pp.koch/google-presentation-the-open-web-goes-mobile/ (proof Google took most of the PWA concepts from W3C Widgets)
  5. W3C Widgets 1.0 Requirements Updated: http://stickiwidgets.com/2007/07/11/w3c-widgets-10-requirements-updated/
  6. Widgets - the Wookie project: https://www.slideshare.net/scottw/widgets-the-wookie-project-presentation (Scott Wilson early presentation on his Widget portal project's work with Sakai LMS)
  7. W3C talk on Widgets (2011): https://www.w3.org/2011/Talks/mwc-widgets/
  8. Misconceptions about W3C Widgets: https://www.w3.org/community/native-web-apps/2011/10/09/misconceptions-about-w3c-widgets/
  9. System Applications Working Group: https://www.w3.org/2012/sysapps/
  10. Relationship between the W3C System Application spec (MobileApp-focused) & W3C Widgets spec (WebApp-focused): https://github.com/marcoscaceres/runtime/commit/5ba8eaf0bf572372f0b71e3cd15bc85ce96f0a9d
  11. Runtime & Security Model for Web Applications - Packaged Applications: https://www.w3.org/TR/runtime/#packaged-applications
  12. All JSR-168 documents: http://www.jcp.org/en/jsr/detail?id=168
  13. Introducing the Portlet Specification (diagrams): http://www.javaworld.com/javaworld/jw-09-2003/jw-0905-portlet2.html?page=2
  14. Develop Java portlets: http://www.javaworld.com/javaworld/jw-02-2003/jw-0207-iviews.html
  15. Introducing Java Portlet Specifications - JSR 168 and JSR 286: http://developers.sun.com/portalserver/reference/techart/jsr168/
  16. What Is a Portlet?: http://oreilly.com/pub/a/java/archive/what-is-a-portlet.html
  17. Understanding the Java Portlet Specification: http://www.developer.com/java/web/article.php/3366111/Understanding-the-Java-Portlet-Specification.
  18. iNetTuts with Cookies - Adding new Widget: http://james.padolsey.com/javascript/inettuts-with-cookies/#comment-12090
  19. Add/Insert a new Widget: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-19351
  20. jquery-ui-1.7.1 & jquery-1.3.2: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-54343
  21. Upgrade to jQuery 1.3.2: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-54343
  22. Vodafone Widget developer center: http://widget.vodafone.com/dev/
  23. Vodafone - Appstar competition: http://widget.developer.vodafone.com/appstar
  24. HTML5 Apps Cross Platform - SWDC 2010, Stockholm: https://www.slideshare.net/wolframkriesing/html5-apps-cross-platform-swdc2010
  25. How to Create an Opera Extension (W3C Widget) from Scratch: https://code.tutsplus.com/articles/how-to-create-an-opera-extension-from-scratch--net-16739
  26. Report of the Patent Advisory Group on the Widgets Updates Specification: http://www.w3.org/2009/03/widgets-pag/pagreport.html
  27. Weather Network's new widgets: http://www.widgetslab.com/2007/11/11/the-weather-network-widgets/

See Also

Gadget | Component | W3C | HTML | CSS | JavaScript | AJAX | Flash | Real-Time Web