Mashups as Collection of Widgets

Adrian Giurca

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

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

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.

iGoogle is a Collection of Gadgets

The architecture of a Google Gadget• A gadget is made of XML, HTML, JavaScript,

and optionally, CSS, used as follows:o XML describes the gadget's structure. o HTML and CSS provide the presentation layer. o 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 athttp://www.google.com/ig/directory?synd=open&cat=all

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.

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.

Yahoo Widgets• Logically, Yahoo widgets are programmatic

interfaces that implements actions triggered by specific events

• Yahoo Widgets DTD provides XML elements foro Describing widget presentationo Describing widgets actionso Describing widgets periodic events (timers)o Describing the widget preferences

• There is a DTD for widget metadata too.

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>

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

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

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>

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

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>

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

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.