A presentation by Craig Raw on developing gadgets.

1. Developing Gadgets by Craig Raw CTO Quirk eMarketing

2. Building gadgets is easy

3. Why gadgets?

8. Standard web technologies

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

13. Hello World Example

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

15. Anatomy of a Gadget

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

17. Anatomy of a Gadget

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

19. Developing

20. Developing Use the Google Gadget Editor Gadget URL

21. Testing

22. Testing Use the Developer Gadget Turn caching off!

23. Hosting

27. Content <Content type=&quot;html&quot;> <![CDATA[ … ]]> </Content>

28. Content Types <Content type=“ ? ”/>

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

34. A More Advanced Example Making remote Javascript calls

38. A More Advanced Example <div id=&quot;container&quot;></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=&quot;' + entry.Link + '&quot;>' + 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(&quot;http://news.google.com/?output=atom&quot;, callback, 3, true); </script>

39. User preferences Personal settings for every user

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

45. Tabs

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

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

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

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

51. Caching external resources Gadgets on iGoogle receive lots of traffic

55. Caching external resources Remaining problem: caching images, Flash

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

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

65. Programming Tips

71. Where can I put my gadget?

75. Publishing your gadget Publish to Google Content Directory

76. Publishing your gadget Publish to Google Content Directory

77. Preparing for Publication

80. Preparing for Publication

84. When you’re ready… Submitting your gadget for publication

87. Syndicating Anyone can put your gadget on their site

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

92. Syndicating Javascript include on webpage <script src=&quot;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&quot;> </script>

93. What’s coming iGoogle V2

97. Want to know more?

101. Thank you Questions?