Developing Gadgets

Developing Gadgets by Craig Raw CTO Quirk eMarketing

Building gadgets is easy

Why gadgets?

Why gadgets?
Easy to develop!

Why gadgets?
Easy to develop!
Write once, runs almost anywhere

Why gadgets?
Easy to develop!
Enables participation

Why gadgets?
Easy to develop!
Enables participation
Traffic!

Standard web technologies

HTML

HTML
Javascript

HTML
Javascript
XML

Hello World Example <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="hello world example" /> <Content type="html"> <![CDATA[ Hello, world! ]]> </Content> </Module>

Hello World Example

Anatomy of a Gadget <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="My First Gadget" description="This gadget prints hello world." author=”Craig Raw" author_email=”craig@quirk.biz"/> <UserPref name="Locations" datatype="list" /> <UserPref name="Color" datatype="string" /> <UserPref name="Toggle" datatype="bool" /> <Content type="html"> <![CDATA[ <b style="color: red">hello world!</b> ]]> </Content> </Module> Metadata

Anatomy of a Gadget

Anatomy of a Gadget <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="My First Gadget" description="This gadget prints hello world." author=”Craig Raw" author_email=”craig@quirk.biz"/> <UserPref name="Locations" datatype="list" /> <UserPref name="Color" datatype="string" /> <UserPref name="Toggle" datatype="bool" /> <Content type="html"> <![CDATA[ <b style="color: red">hello world!</b> ]]> </Content> </Module> Preferences

Anatomy of a Gadget

Anatomy of a Gadget <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="My First Gadget" description="This gadget prints hello world." author=”Craig Raw" author_email=”craig@quirk.biz"/> <UserPref name="Locations" datatype="list" /> <UserPref name="Color" datatype="string" /> <UserPref name="Toggle" datatype="bool" /> <Content type="html"> <![CDATA[ <b style="color: red">hello world!</b> ]]> </Content> </Module> HTML/Javascript

Developing

Developing Use the Google Gadget Editor Gadget URL

Testing

Testing Use the Developer Gadget Turn caching off!

Hosting

Hosting
Place gadget anywhere Google can see
( http://your.domain.com/gadget.xml)

Hosting
Google can host your gadget
( http://gadget-googlesa.googlecode.com/svn/trunk/hiv/hiv-tb.xml )

Hosting
Google can host your gadget
( http://gadget-googlesa.googlecode.com/svn/trunk/hiv/hiv-tb.xml )
Add to the iGoogle Content Directory

Content <Content type="html"> <![CDATA[ … ]]> </Content>

Content Types <Content type=“ ? ”/>

Content Types <Content type=“ html ”> <![CDATA[ ]]> </Content>
HTML

Content Types <Content type=“ url ” href=“my.domain.com/mygadget.html” />
HTML
URL

Content Types <Content type=“ html-inline ”> <![CDATA[ ]]> </Content>
HTML
URL
Inline (Deprecated)

HTML
Easier to use the gadget API
Make remote AJAX calls
Google caches
Cross-gadget communication
URL
No need for AJAX or Javascript magic
Integration with your existing infrastructure

Using Javascript <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="Hello World Javascript"/> <Content type="html"> <![CDATA[ <script> function myFunction() { return "Hello <em>World</em>"; } document.write(myFunction()); </script> ]]> </Content> </Module> Sets <iframe> content

A More Advanced Example Making remote Javascript calls

_IG_FetchContent(url, func)

_IG_FetchXmlContent(url, func)

_IG_FetchXmlContent(url, func)
_IG_FetchFeedAsJSON(url, func, num, summary)

A More Advanced Example <div id="container"></div> <script> function callback(response) { // Iterate through each entry and generate HTML var html = new Array(); for (var n = 0; n < response.Entry.length; n++) { var entry = response.Entry[n]; html.push('<a href="' + entry.Link + '">' + entry.Title + '</a>’ + '<div>' + entry.Summary + '</div>'); } _gel('container').innerHTML = html.join('<hr/>'); } // Fetch 3 entries from Google News Atom feed and include summaries _IG_FetchFeedAsJSON("http://news.google.com/?output=atom", callback, 3, true); </script>

User preferences Personal settings for every user

Store a string, boolean, list, hidden etc

Replaces __UP_name_ in your code

Can also use Prefs API

Can also use Prefs API
Not available for syndicated gadgets

User preferences <Module> <ModulePrefs> <Require feature="setprefs"/> <UserPref name=”number" default_value=”3" /> </ModulePrefs> <Content type="html"><![CDATA[ <div id="container"></div> <script> function callback(response) { … } var prefs = new _IG_Prefs(); _IG_FetchFeedAsJSON("http://news.google.com/?output=atom", callback, prefs.getInt(”number") , true); </script> Required library Get stored preference

Tabs <Module> <ModulePrefs> <Require feature="tabs"/> </ModulePrefs> <Content type="html"><![CDATA[ <script> var tabs = new _IG_Tabs(__MODULE_ID__, "HIV"); tabs.addTab("HIV", { contentContainer: _gel("hivId"), callback: getContent, tooltip: "HIV Info" }); tabs.addTab("TB", { contentContainer: _gel("tbId"), callback: getContent, tooltip: "Tuberculosis" }); </script> Required library

Analytics <Module> <ModulePrefs> <Require feature=”analytics"/> </ModulePrefs> <Content type="html"><![CDATA[ <script> _IG_Analytics("UA-000000-0", "/mygadget"); </script> Path to gadget

Internationalisation
Support multiple languages in a single gadget
The language can change depending on user
Google automatically uses the right language
Increase your audience reach
A default language is also supported

Internationalisation <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title=“__MSG_title__"> <Locale lang=“en” messages=“en.xml” /> <Locale lang=“ja” messages=“ja.xml” /> </ModulePrefs> <Content type="html"> <![CDATA[ __MSG_hello__ ]]> </Content> </Module> File per language

Internationalisation <?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”>Title</msg> <msg name=“hello”>Hello, World!</msg> </messagebundle> <?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”> 題名 </msg> <msg name=“hello”> こんにちは世界 </msg> </messagebundle> en.xml ja.xml

Caching external resources Gadgets on iGoogle receive lots of traffic

Google caches all gadget XML files

Google caches all _IG_Fetch…() requests

Google caches all _IG_Fetch…() requests
Use the Developer Gadget to disable caching

Caching external resources Remaining problem: caching images, Flash

Use API methods to cache all embedded resources on iGoogle

_IG_GetImage(url) - Returns HTML image fetched from the cache _IG_GetImageUrl(url) - Returns URL used to fetch the image via cache _IG_GetCachedUrl(url) - Returns URL used to fetch the resource via cache

<img id="goImg" src="" width=100 height=150 /> <script> _gel("goImg").src = _IG_GetImageUrl("http://xyz.com/go.gif"); </script> <div id="container"></div> <script> var cacheUrl = _IG_GetCachedUrl(‘http://xyz.com/flashvideo.swf’); _IG_EmbedFlash(cacheUrl, ‘container’, { width: 300, height: 250 }); </script>

Gadget-to-Gadget Communication Gadgets on iGoogle can communicate with each other

Via user preferences

One gadget publishes, the other subscribes

Pub/Sub

Pub/Sub
Only HTML type, non-syndicated gadgets

Gadget-to-Gadget Communication Gadgets agree share user preference name <UserPref name="test" display_name="Message" default_value="Bonjour Monde” publish="true" /> <UserPref name="test" display_name="Message" default_value="Hello World" listen="true" on_change="updateMessage" /> Publisher Subscriber

Programming Tips

Programming Tips
Start small

Programming Tips
Start small
Study existing gadgets

Programming Tips
Start small
Use Firebug (http://www.getfirebug.com)

Programming Tips
Start small
Use Firebug ( http://www. getfirebug .com )
Keep it light

Programming Tips
Start small
Use Firebug ( http://www. getfirebug .com )
Keep it light
Test often!

Where can I put my gadget?

Google Content Directory

Google Code

Google Code
Your own server/service

Publishing your gadget Publish to Google Content Directory

Preparing for Publication

Try all combinations of UserPref values

Test different widths and heights

Test different environments

Test different browsers

Test different browsers
Include ModulePref metadata

When you’re ready… Submitting your gadget for publication

When you’re ready…
Via Google Gadget Editor
Submitting your gadget for publication

When you’re ready…
Via Google Gadget Editor
Submit directly to Content Directory
Submitting your gadget for publication

Syndicating Anyone can put your gadget on their site

No user preferences

No user preferences
Variable width and height

No user preferences
Variable width and height
Shown in an <iframe>

Syndicating GGE -> File -> Publish -> Add to a webpage

Syndicating Javascript include on webpage <script src="http://www.gmodules.com/ig/ifr? url=http://brandseye.com/…/brandseye.xml& synd=open& w=400& h=200& title=BrandsEye+Recent+Mentions& border=%23ffffff%7C3px%2C1px+solid+%23999999& output=js"> </script>

What’s coming iGoogle V2

OpenSocial API

OpenSocial API
Canvas (maximised) view

OpenSocial API
Canvas (maximised) view
http://www.google.com/ig/sandbox

Want to know more?

Want to know more?
Google Gadgets API Docs
( http://www. google . com/apis/gadgets )

Want to know more?
( http://www.google.com/apis/gadgets )
Discussion Group
(http://groups.google.com/group/Google-Gadgets-API)

Want to know more?
( http://www.google.com/apis/gadgets )
Discussion Group
( http://groups.google.com/group/Google-Gadgets-API )
Google Gadget Guidelines
( http://www.google.com/webmasters/gadgets/guidelines.html)

Thank you Questions?

Developing Gadgets

by Quirk on Aug 26, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Developing Gadgets — Presentation Transcript