SlideShare a Scribd company logo
1 of 17
Mashups as Collection of Widgets Adrian Giurca
What is a Widget? ,[object Object],[object Object],[object Object],[object Object]
Widget Tools ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Google Gadgets ,[object Object],[object Object],[object Object]
iGoogle is a Collection of Gadgets
The architecture of a Google Gadget ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
A Simple Gadget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> < Module > < ModulePrefs  title =&quot; Park ... &quot; width =&quot; 160 &quot;  height =&quot; 300 &quot; author =&quot; ... &quot;  author_email = &quot;...&quot; author_location =&quot; ... &quot;  category =&quot; fun &quot;/> < Content  type =&quot; html &quot;> <![CDATA[ <div> <a  id=&quot;myphotos&quot; title=&quot;Park ...&quot; href=&quot;http://picasaweb.google.com/...&quot;> <img alt=&quot;Starting Photo&quot; src=&quot;...&quot; title=&quot;See all&quot;> </a> </div> ]]> </ Content > </ Module > ,[object Object],[object Object],[object Object],[object Object]
Yahoo Widgets ,[object Object],[object Object],[object Object],[object Object],[object Object]
Yahoo Widgets ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Describing widget presentation < window  title =&quot; BBC What's On &quot;> < 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( &quot;http://www0.rdthdo.bbc.co.uk/services/api/&quot; ); </ onSelect > </ menuItem > </ contextMenuItems > </ window >
Describing widgets actions < action  trigger =&quot; onMouseEnter &quot;> //focusState = &quot;inactive&quot;; if ( state == &quot;closed&quot; ) { .opacity = 200; .opacity = 200; } </ action > ,[object Object],[object Object]
Describing widgets timers < timer  name =&quot; doChannelAnimation &quot;  interval =&quot; .01 &quot;   ticking =&quot; false &quot;> < onTimerFired > <![CDATA[ if (state == &quot;closed&quot;) { doChannelEase(0,75,300); } else { doChannelEase(75,0,300); } ]]> </ onTimerFired > </ timer > ,[object Object],[object Object],[object Object],[object Object]
Describing the widget preferences < preferenceGroup  name =&quot; channelGroup &quot;  icon =&quot; resources/BBC.png &quot;> < title > Channel </ title > < order > 0 </ order > </ preferenceGroup > < preference  name =&quot; channelPref &quot;  hidden =&quot; true &quot;   > < 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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
BBC What's on  Yahoo Widget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> < widget > < window  title =&quot; BBC What's On &quot;> ...  </ window > < about-box >  ...  </ about-box > < image  src =&quot; resources/bgTop.png &quot;>  ...  </ image > < action  trigger =&quot; onLoad &quot;> <![CDATA[ JS code implementing the action ]]>   </ action > < action  trigger =&quot; onMouseEnter &quot;>  ...  </ action > < timer  name =&quot; doChannelAnimation &quot;   interval =&quot; .01 &quot;  ticking =&quot; false &quot;> < onTimerFired > <![CDATA[ JS code implementing the action ]]> </ onTimerFired > </ timer > ... </ widget >
Amazon Widgets ,[object Object],[object Object],[object Object],[object Object],[object Object]
Summary ,[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

What's hot

jQuery Mobile & PhoneGap
jQuery Mobile & PhoneGapjQuery Mobile & PhoneGap
jQuery Mobile & PhoneGapSwiip
 
Magento Product Types Demystified
Magento Product Types DemystifiedMagento Product Types Demystified
Magento Product Types DemystifiedAOE
 
Introduction To ASP.NET MVC
Introduction To ASP.NET MVCIntroduction To ASP.NET MVC
Introduction To ASP.NET MVCAlan Dean
 
21 android2 updated
21 android2 updated21 android2 updated
21 android2 updatedGhanaGTUG
 
Android the Agile way
Android the Agile wayAndroid the Agile way
Android the Agile wayAshwin Raghav
 
Vaadin Components @ Angular U
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular UJoonas Lehtinen
 

What's hot (7)

jQuery Mobile & PhoneGap
jQuery Mobile & PhoneGapjQuery Mobile & PhoneGap
jQuery Mobile & PhoneGap
 
Magento Product Types Demystified
Magento Product Types DemystifiedMagento Product Types Demystified
Magento Product Types Demystified
 
DevDays09 Internet Explorer 8
DevDays09 Internet Explorer 8DevDays09 Internet Explorer 8
DevDays09 Internet Explorer 8
 
Introduction To ASP.NET MVC
Introduction To ASP.NET MVCIntroduction To ASP.NET MVC
Introduction To ASP.NET MVC
 
21 android2 updated
21 android2 updated21 android2 updated
21 android2 updated
 
Android the Agile way
Android the Agile wayAndroid the Agile way
Android the Agile way
 
Vaadin Components @ Angular U
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular U
 

Viewers also liked

Linked Sensor Data cube
Linked Sensor Data cubeLinked Sensor Data cube
Linked Sensor Data cubeLaurent Lefort
 
Semantic Pipes and Semantic Mashups
Semantic Pipes and Semantic MashupsSemantic Pipes and Semantic Mashups
Semantic Pipes and Semantic Mashupsgiurca
 
A Graph-Based Approach to Learn Semantic Descriptions of Data Sources
A Graph-Based Approach to Learn Semantic Descriptions of Data SourcesA Graph-Based Approach to Learn Semantic Descriptions of Data Sources
A Graph-Based Approach to Learn Semantic Descriptions of Data SourcesMohsen Taheriyan
 
Building Intelligent Mashups
Building Intelligent MashupsBuilding Intelligent Mashups
Building Intelligent Mashupsgiurca
 
Intelligent Mashups
Intelligent MashupsIntelligent Mashups
Intelligent Mashupsgiurca
 
Learning the Semantics of Structured Data Sources
Learning the Semantics of Structured Data SourcesLearning the Semantics of Structured Data Sources
Learning the Semantics of Structured Data SourcesMohsen Taheriyan
 

Viewers also liked (6)

Linked Sensor Data cube
Linked Sensor Data cubeLinked Sensor Data cube
Linked Sensor Data cube
 
Semantic Pipes and Semantic Mashups
Semantic Pipes and Semantic MashupsSemantic Pipes and Semantic Mashups
Semantic Pipes and Semantic Mashups
 
A Graph-Based Approach to Learn Semantic Descriptions of Data Sources
A Graph-Based Approach to Learn Semantic Descriptions of Data SourcesA Graph-Based Approach to Learn Semantic Descriptions of Data Sources
A Graph-Based Approach to Learn Semantic Descriptions of Data Sources
 
Building Intelligent Mashups
Building Intelligent MashupsBuilding Intelligent Mashups
Building Intelligent Mashups
 
Intelligent Mashups
Intelligent MashupsIntelligent Mashups
Intelligent Mashups
 
Learning the Semantics of Structured Data Sources
Learning the Semantics of Structured Data SourcesLearning the Semantics of Structured Data Sources
Learning the Semantics of Structured Data Sources
 

Similar to Mashups as Collection of Widgets

Developing Gadgets
Developing GadgetsDeveloping Gadgets
Developing GadgetsQuirk
 
Gadgets Intro (Plus Mapplets)
Gadgets Intro (Plus Mapplets)Gadgets Intro (Plus Mapplets)
Gadgets Intro (Plus Mapplets)Pamela Fox
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overviewreybango
 
Wookie Meetup
Wookie MeetupWookie Meetup
Wookie Meetupscottw
 
Wookie Meetup
Wookie MeetupWookie Meetup
Wookie Meetupscottw
 
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp VictoriaWidgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp VictoriaJeff Richards
 
Dan Holevoet, Google
Dan Holevoet, GoogleDan Holevoet, Google
Dan Holevoet, Google500 Startups
 
Devoxx 09 (Belgium)
Devoxx 09 (Belgium)Devoxx 09 (Belgium)
Devoxx 09 (Belgium)Roger Kitain
 
GTLAB Installation Tutorial for SciDAC 2009
GTLAB Installation Tutorial for SciDAC 2009GTLAB Installation Tutorial for SciDAC 2009
GTLAB Installation Tutorial for SciDAC 2009marpierc
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile WidgetsJose Palazon
 
Expanding a tree node
Expanding a tree nodeExpanding a tree node
Expanding a tree nodeHemakumar.S
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsRicardo Varela
 
WRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAirWRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAirpetrosoininen
 
Krazykoder struts2 plugins
Krazykoder struts2 pluginsKrazykoder struts2 plugins
Krazykoder struts2 pluginsKrazy Koder
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008Volkan Unsal
 

Similar to Mashups as Collection of Widgets (20)

Developing Gadgets
Developing GadgetsDeveloping Gadgets
Developing Gadgets
 
Gadgets Intro (Plus Mapplets)
Gadgets Intro (Plus Mapplets)Gadgets Intro (Plus Mapplets)
Gadgets Intro (Plus Mapplets)
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
PPT
PPTPPT
PPT
 
Wookie Meetup
Wookie MeetupWookie Meetup
Wookie Meetup
 
Wookie Meetup
Wookie MeetupWookie Meetup
Wookie Meetup
 
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp VictoriaWidgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
Widgets: Making Your Site Great and Letting Others Help - WordCamp Victoria
 
Grails and Dojo
Grails and DojoGrails and Dojo
Grails and Dojo
 
Dan Holevoet, Google
Dan Holevoet, GoogleDan Holevoet, Google
Dan Holevoet, Google
 
Devoxx 09 (Belgium)
Devoxx 09 (Belgium)Devoxx 09 (Belgium)
Devoxx 09 (Belgium)
 
GTLAB Installation Tutorial for SciDAC 2009
GTLAB Installation Tutorial for SciDAC 2009GTLAB Installation Tutorial for SciDAC 2009
GTLAB Installation Tutorial for SciDAC 2009
 
BluePrint Mobile Framework
BluePrint Mobile FrameworkBluePrint Mobile Framework
BluePrint Mobile Framework
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile Widgets
 
Expanding a tree node
Expanding a tree nodeExpanding a tree node
Expanding a tree node
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile Widgets
 
WRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAirWRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAir
 
Krazykoder struts2 plugins
Krazykoder struts2 pluginsKrazykoder struts2 plugins
Krazykoder struts2 plugins
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Rich faces
Rich facesRich faces
Rich faces
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008
 

More from giurca

Microdata for Dummies
Microdata for DummiesMicrodata for Dummies
Microdata for Dummiesgiurca
 
From Data to Knowledge thru Grailog Visualization
From Data to Knowledge thru Grailog VisualizationFrom Data to Knowledge thru Grailog Visualization
From Data to Knowledge thru Grailog Visualizationgiurca
 
Rule-based Modeling of Mashups
Rule-based Modeling of MashupsRule-based Modeling of Mashups
Rule-based Modeling of Mashupsgiurca
 
Mashups and Web Services
Mashups and Web ServicesMashups and Web Services
Mashups and Web Servicesgiurca
 
Introduction to visual rules modeling
Introduction to visual rules modelingIntroduction to visual rules modeling
Introduction to visual rules modelinggiurca
 
Introduction to Rule-based Applications
Introduction to  Rule-based ApplicationsIntroduction to  Rule-based Applications
Introduction to Rule-based Applicationsgiurca
 
JSON Rules Language
JSON Rules LanguageJSON Rules Language
JSON Rules Languagegiurca
 
Introduction to Drools
Introduction to DroolsIntroduction to Drools
Introduction to Droolsgiurca
 
Annotating with RDFa
Annotating with RDFaAnnotating with RDFa
Annotating with RDFagiurca
 

More from giurca (9)

Microdata for Dummies
Microdata for DummiesMicrodata for Dummies
Microdata for Dummies
 
From Data to Knowledge thru Grailog Visualization
From Data to Knowledge thru Grailog VisualizationFrom Data to Knowledge thru Grailog Visualization
From Data to Knowledge thru Grailog Visualization
 
Rule-based Modeling of Mashups
Rule-based Modeling of MashupsRule-based Modeling of Mashups
Rule-based Modeling of Mashups
 
Mashups and Web Services
Mashups and Web ServicesMashups and Web Services
Mashups and Web Services
 
Introduction to visual rules modeling
Introduction to visual rules modelingIntroduction to visual rules modeling
Introduction to visual rules modeling
 
Introduction to Rule-based Applications
Introduction to  Rule-based ApplicationsIntroduction to  Rule-based Applications
Introduction to Rule-based Applications
 
JSON Rules Language
JSON Rules LanguageJSON Rules Language
JSON Rules Language
 
Introduction to Drools
Introduction to DroolsIntroduction to Drools
Introduction to Drools
 
Annotating with RDFa
Annotating with RDFaAnnotating with RDFa
Annotating with RDFa
 

Mashups as Collection of Widgets

  • 1. Mashups as Collection of Widgets Adrian Giurca
  • 2.
  • 3.
  • 4.
  • 5. iGoogle is a Collection of Gadgets
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. Describing widget presentation < window title =&quot; BBC What's On &quot;> < 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( &quot;http://www0.rdthdo.bbc.co.uk/services/api/&quot; ); </ onSelect > </ menuItem > </ contextMenuItems > </ window >
  • 11.
  • 12.
  • 13. Describing the widget preferences < preferenceGroup name =&quot; channelGroup &quot; icon =&quot; resources/BBC.png &quot;> < title > Channel </ title > < order > 0 </ order > </ preferenceGroup > < preference name =&quot; channelPref &quot; hidden =&quot; true &quot; > < 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.
  • 15. BBC What's on Yahoo Widget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> < widget > < window title =&quot; BBC What's On &quot;> ... </ window > < about-box > ... </ about-box > < image src =&quot; resources/bgTop.png &quot;> ... </ image > < action trigger =&quot; onLoad &quot;> <![CDATA[ JS code implementing the action ]]> </ action > < action trigger =&quot; onMouseEnter &quot;> ... </ action > < timer name =&quot; doChannelAnimation &quot; interval =&quot; .01 &quot; ticking =&quot; false &quot;> < onTimerFired > <![CDATA[ JS code implementing the action ]]> </ onTimerFired > </ timer > ... </ widget >
  • 16.
  • 17.