Developing Gadgets

Developing Gadgets by Craig Raw CTO Quirk eMarketing

Building gadgets is easy

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

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

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

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