developing gadgets

Developing Gadgetsby 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!

• Write once, runs almost anywhere

• Enables participation

Why gadgets?

• Easy to develop!

• Write once, runs almost anywhere

• Enables participation

• Traffic!

Standard web technologies

Standard web technologies

• HTML

Standard web technologies

• HTML

• Javascript

Standard web technologies

• 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 cachingoff!

Hosting

Hosting

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

Hosting

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

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

Hosting

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

• 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

A More Advanced Example

Making remote Javascript calls

• _IG_FetchContent(url, func)

A More Advanced Example

Making remote Javascript calls

• _IG_FetchContent(url, func)

• _IG_FetchXmlContent(url, func)

A More Advanced Example

Making remote Javascript calls

• _IG_FetchContent(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

User preferences

Personal settings for every user

• Store a string, boolean, list, hidden etc

User preferences

Personal settings for every user

• Store a string, boolean, list, hidden etc

• Replaces __UP_name_ in your code

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

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

• 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

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

Caching external resources

Gadgets on iGoogle receive lots of traffic

• Google caches all gadget XML files

Caching external resources

Gadgets on iGoogle receive lots of traffic

• Google caches all gadget XML files

• Google caches all _IG_Fetch…() requests

Caching external resources

Gadgets on iGoogle receive lots of traffic

• Google caches all gadget XML files

• Google caches all _IG_Fetch…() requests

• Use the Developer Gadget to disable caching

Caching external resources

Remaining problem: caching images, Flash

Caching external resources

Remaining problem: caching images, Flash

• Use API methods to cache all embedded resources on iGoogle

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

Caching external resources

Remaining problem: caching images, Flash

• Use API methods to cache all embedded resources on iGoogle

<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 witheach other

Gadget-to-Gadget Communication

Gadgets on iGoogle can communicate witheach other

• Via user preferences

Gadget-to-Gadget Communication

Gadgets on iGoogle can communicate witheach other

• Via user preferences

• One gadget publishes, the other subscribes

Gadget-to-Gadget Communication

Gadgets on iGoogle can communicate witheach other

• Via user preferences

• One gadget publishes, the other subscribes

• Pub/Sub

Gadget-to-Gadget Communication

Gadgets on iGoogle can communicate witheach other

• Via user preferences

• One gadget publishes, the other subscribes

• 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

• Study existing gadgets

• Use Firebug (http://www.getfirebug.com)

Programming Tips

• Start small

• Study existing gadgets

• Use Firebug (http://www.getfirebug.com) • Keep it light

Programming Tips

• Start small

• Study existing gadgets

• Use Firebug (http://www.getfirebug.com) • Keep it light

• Test often!

Where can I put my gadget?

Where can I put my gadget?

• Google Content Directory

Where can I put my gadget?

• Google Content Directory

• Google Code

Where can I put my gadget?

• Google Content Directory

• Google Code

• Your own server/service

Publishing your gadget

Publish to Google Content Directory

Publishing your gadget

Publish to Google Content Directory

Preparing for Publication

Preparing for Publication

• Try all combinations of UserPref values

Preparing for Publication

• Try all combinations of UserPref values

• Test different widths and heights

Preparing for Publication

Preparing for Publication

• Try all combinations of UserPref values

• Test different widths and heights

• Test different environments

Preparing for Publication

• Try all combinations of UserPref values

• Test different widths and heights

• Test different environments

• Test different browsers

Preparing for Publication

• Try all combinations of UserPref values

• Test different widths and heights

• Test different environments

• 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

Syndicating

Anyone can put your gadget on their site

• No user preferences

Syndicating

Anyone can put your gadget on their site

• No user preferences

• Variable width and height

Syndicating

Anyone can put your gadget on their site

• 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&amp; synd=open&amp; w=400&amp; h=200&amp; title=BrandsEye+Recent+Mentions&amp; border=%23ffffff%7C3px%2C1px+solid+%23999999&amp; output=js"></script>

What’s coming

iGoogle V2

What’s coming

iGoogle V2

• OpenSocial API

What’s coming

iGoogle V2

• OpenSocial API

• Canvas (maximised) view

What’s coming

iGoogle V2

• 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?

• Google Gadgets API Docs (http://www.google.com/apis/gadgets)

• Discussion Group (http://groups.google.com/group/Google-Gadgets-API)

Want to know more?

• Google Gadgets API Docs (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?