Difference between revisions of "Widget"

From BC$ MobileTV Wiki
Jump to: navigation, search
Line 262: Line 262:
 
==== Weather ====
 
==== Weather ====
  
 +
* 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/
 
* 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
 
* Weather station scripts - Forecast Canada : http://saratoga-weather.org/scripts-ECforecast.php#ECforecast?udat=20091110Z2045
Line 268: Line 270:
  
  
 +
==== Map ====
  
 +
* 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
  
  

Revision as of 16:16, 11 November 2009

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, 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. [1]



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.


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.



Specification




W3C - Widgets

[2][3]


Specification




Tutorials

iNetTuts




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.


[4] 


function insertWidget(where, opt) {
 var selectorOld = iNettuts.settings.widgetSelector;
 iNettuts.settings.widgetSelector = '.new';
salida = "

  • " + opt.title + "

    " + opt.content + "

    • "; 
     $(where).append(salida);
 iNettuts.addWidgetControls();
 iNettuts.settings.widgetSelector = selectorOld;
}
insertWidget("#column1", {
 color: "blue",
 title: "Prueba",
 content: "ESTO ES UNA PRUEBA"
});

    }}

    [5]



    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.

    PS: If anyone has a better solution, please post! Thx! [6]





    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’);
}

    Great job thanks to you from France.

    [7]





    Tools




    Resources

    jQuery


    WidgetBuilder


    FusionWidgets




    Examples

    Platforms

    BBC


    Multiply


    NetVibes


    iGoogle


    Yahoo!


    Widgets

    Weather


    Map


    Tools

    Wookie

    Wookie is a project to create open source software for adding widgets to your applications.




    External Links



    References

    1. ↑ Dilbert Widget: http://widget.dilbert.com/
    2. ↑ W3C Widgets - Vodafone Mobile Widget Camp: http://zope.cetis.ac.uk/members/scott/blogview?entry=20090420144900
    3. ↑ W3C Widgets 1.0 Requirements Updated: http://stickiwidgets.com/2007/07/11/w3c-widgets-10-requirements-updated/
    4. ↑ iNetTuts with Cookies - Adding new Widget: http://james.padolsey.com/javascript/inettuts-with-cookies/#comment-12090
    5. ↑ Add/Insert a new Widget: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-19351
    6. ↑ jquery-ui-1.7.1 & jquery-1.3.2: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-54343
    7. ↑ Upgrade to jQuery 1.3.2: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/#comment-54343




    See Also

    Gadget

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