Widget

From BC$ MobileTV Wiki
(Redirected from W3C Widget)
Jump to: navigation, search
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

Retrieved from "http://wiki.bcmoney-mobiletv.com/index.php?title=Widget&oldid=58784"