![A Simple Gadget <?xml version="1.0" encoding="UTF-8" ?> < Module > < ModulePrefs title =" Park ... " width =" 160 " height =" 300 " author =" ... " author_email = "..." author_location =" ... " category =" fun "/> < Content type =" html "> <![CDATA[ <div> <a id="myphotos" title="Park ..." href="http://picasaweb.google.com/..."> <img alt="Starting Photo" src="..." title="See all"> </a> </div> ]]> </ Content > </ Module > The < Module > tag indicates that this XML file contains a gadget. You specify the gadget parameters using the < ModulePrefs > element. < Content type =" html "> indicates the gadget's content type (it can contain HTML, CSS and JavaScript code). The CDATA section contains the gadget content code used to render and activate the gadget.](https://image.slidesharecdn.com/2011101/85/Mashups-as-Collection-of-Widgets-7-320.jpg)
![Describing widgets timers < timer name =" doChannelAnimation " interval =" .01 " ticking =" false "> < onTimerFired > <![CDATA[ if (state == "closed") { doChannelEase(0,75,300); } else { doChannelEase(75,0,300); } ]]> </ onTimerFired > </ timer > name defines the timer name interval defines the periodicity of the timer execution (sec) ticking allows to turn a timer on and off by setting it to true and false , respectively. If you want to disable a timer set ticking =" false " . Later, set it to true, and it starts firing again. < onTimerFired > contains the JavaScript code that has to be executed periodically](https://image.slidesharecdn.com/2011101/85/Mashups-as-Collection-of-Widgets-12-320.jpg)
![BBC What's on Yahoo Widget <?xml version="1.0" encoding="UTF-8"?> < widget > < window title =" BBC What's On "> ... </ window > < about-box > ... </ about-box > < image src =" resources/bgTop.png "> ... </ image > < action trigger =" onLoad "> <![CDATA[ JS code implementing the action ]]> </ action > < action trigger =" onMouseEnter "> ... </ action > < timer name =" doChannelAnimation " interval =" .01 " ticking =" false "> < onTimerFired > <![CDATA[ JS code implementing the action ]]> </ onTimerFired > </ timer > ... </ widget >](https://image.slidesharecdn.com/2011101/85/Mashups-as-Collection-of-Widgets-15-320.jpg)
Mashups as Collection of Widgets
- 1. Mashups as Collection of Widgets Adrian Giurca
- 2. What is a Widget? A widget is a small client-side application that is authored using Web standards, but whose content can also be embedded into Web documents Actually there is no widget creation and execution standard Widgets 1.0: Packaging and Configuration is W3C Candidate Recommendation, on 23 July 2009. It defines Companies such as Google, Yahoo, Microsoft, Amazon, IBM develop their own widgets and widgets platforms
- 3. Widget Tools Google Desktop Gadgets , Google, ver. 1.x, Windows XP, Windows Vista Konfabulator , Yahoo!, Windows XP, Windows Vista, MacOS Opera Widgets , Opera, ver. 9.5 Beta, Mac OS 10.5, Windows XP, Windows Vista Windows Sidebar , Microsoft, ver. 1.0, Windows Vista Dashboard , Apple, ver.1.1, Mac OS 10.5 Web-Runtime , Nokia, ver. 1.0 Beta, S60 3rd Edition, Feature Pack 2 (emulator) Joost Widgets , Joost, ver.1.0 Beta, Mac OS 10.5, Windows XP, Windows Vista Amazon Widgets , Amazon
- 4. Google Gadgets ... are stored as XML files. For example, http://www.google.com/ig/modules/calendar3.xml is a Google Calendar Gadget that embeds your Google calendar to your iGoogle page (or any other web page) ... have to be published on Google Gadget server i.e. their code is processed by Google Gadgets Engine ... are embeddable in any web page, typically by using a < script > element. The usual result of the script execution is the creation of an < iframe > element in the embedding page DOM.
- 5. iGoogle is a Collection of Gadgets
- 6. The architecture of a Google Gadget A gadget is made of XML, HTML, JavaScript, and optionally, CSS, used as follows: XML describes the gadget's structure. HTML and CSS provide the presentation layer. JavaScript supplies the gadget's logic. Google does not provide a formal grammar of the XML gadget file (such as XML Schema) Check http://code.google.com/apis/gadgets/docs/dev_guide.html for the latest developments You can find all Google gadgets at http://www.google.com/ig/directory?synd=open&cat=all
- 7. A Simple Gadget <?xml version="1.0" encoding="UTF-8" ?> < Module > < ModulePrefs title =" Park ... " width =" 160 " height =" 300 " author =" ... " author_email = "..." author_location =" ... " category =" fun "/> < Content type =" html "> <![CDATA[ <div> <a id="myphotos" title="Park ..." href="http://picasaweb.google.com/..."> <img alt="Starting Photo" src="..." title="See all"> </a> </div> ]]> </ Content > </ Module > The < Module > tag indicates that this XML file contains a gadget. You specify the gadget parameters using the < ModulePrefs > element. < Content type =" html "> indicates the gadget's content type (it can contain HTML, CSS and JavaScript code). The CDATA section contains the gadget content code used to render and activate the gadget.
- 8. Yahoo Widgets ... are stored as XML files. ... their grammar is DTD based ... have to be published on Yahoo Widgets Server (Konfabulator) ... requires a widget engine to be installed on your local machine ... are embeddable in any web page, typically by using a < script > element.
- 9. Yahoo Widgets Logically, Yahoo widgets are programmatic interfaces that implements actions triggered by specific events Yahoo Widgets DTD provides XML elements for Describing widget presentation Describing widgets actions Describing widgets periodic events (timers) Describing the widget preferences There is a DTD for widget metadata too.
- 10. Describing widget presentation < window title =" BBC What's On "> < name > mainWindow </ name > < width > 315 </ width > < height > 600 </ height > < visible > true </ visible > < shadow > false </ shadow > < contextMenuItems > < menuItem > < name > api </ name > < title > Build your own using the BBC Web API </ title > < onSelect > openURL( "http://www0.rdthdo.bbc.co.uk/services/api/" ); </ onSelect > </ menuItem > </ contextMenuItems > </ window >
- 11. Describing widgets actions < action trigger =" onMouseEnter "> //focusState = "inactive"; if ( state == "closed" ) { .opacity = 200; .opacity = 200; } </ action > The trigger attribute sets the action triggering event The < action > content is typically JavaScript code that is executed when the action is performed
- 12. Describing widgets timers < timer name =" doChannelAnimation " interval =" .01 " ticking =" false "> < onTimerFired > <![CDATA[ if (state == "closed") { doChannelEase(0,75,300); } else { doChannelEase(75,0,300); } ]]> </ onTimerFired > </ timer > name defines the timer name interval defines the periodicity of the timer execution (sec) ticking allows to turn a timer on and off by setting it to true and false , respectively. If you want to disable a timer set ticking =" false " . Later, set it to true, and it starts firing again. < onTimerFired > contains the JavaScript code that has to be executed periodically
- 13. Describing the widget preferences < preferenceGroup name =" channelGroup " icon =" resources/BBC.png "> < title > Channel </ title > < order > 0 </ order > </ preferenceGroup > < preference name =" channelPref " hidden =" true " > < group > channelGroup </ group > < title > Choose Channel: </ title > < type > popup </ type > < defaultValue > 0 </ defaultValue > < option > BBC One </ option > < optionValue > 0 </ optionValue > < option > BBC Two </ option > < optionValue > 1 </ optionValue > </ preference >
- 14. Yahoo Widget Packaging A widget is packaged as an archive with the following structure: myWidget.widget Contents widget.xml myWidget.kon Resources <any files used by the Widget> Contents and Resources are folders widget.xml contains the widget metadata myWidget.kon is the widget description file
- 15. BBC What's on Yahoo Widget <?xml version="1.0" encoding="UTF-8"?> < widget > < window title =" BBC What's On "> ... </ window > < about-box > ... </ about-box > < image src =" resources/bgTop.png "> ... </ image > < action trigger =" onLoad "> <![CDATA[ JS code implementing the action ]]> </ action > < action trigger =" onMouseEnter "> ... </ action > < timer name =" doChannelAnimation " interval =" .01 " ticking =" false "> < onTimerFired > <![CDATA[ JS code implementing the action ]]> </ onTimerFired > </ timer > ... </ widget >
- 16. Amazon Widgets ...a library of widgets built on top Amazon Services APIs ... embeddable in any web page ...e-commerce capabilities For example the mp3 Widget allows to choose mp3 music, listen mp3 music (of course a fragment) and buy mp3 music. ... do not offer programmatically access to widgets . Only configuration before embedding
- 17. Summary Typically widgets are embedded using < iframe > therefore implementing client-side widget dependency is not trivial Widgets are described platform independent (by using XML) but the generated executable code is platform dependent (as in the Google case) or requires installation of third party software (such as Yahoo, Joost ...) The standardization is a work in progress and is also a question if actual providers will follow the standard The security (including cross-site scripting problem) is handled by the deployment servers (widget engines) While Google Gadgets are large based on JavaScript programming, Yahoo Widgets introduce a bit more structure.