<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>hacklab.com.br &#187; gadgets</title>
	<atom:link href="http://hacklab.com.br/tag/gadgets/feed/" rel="self" type="application/rss+xml" />
	<link>http://hacklab.com.br</link>
	<description></description>
	<lastBuildDate>Wed, 08 Sep 2010 18:49:14 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Creating a tweet gadget for Google Wave</title>
		<link>http://blog.brunogola.com.br/2009/10/creating-a-tweet-gadget-for-google-wave/</link>
		<comments>http://blog.brunogola.com.br/2009/10/creating-a-tweet-gadget-for-google-wave/#comments</comments>
		<pubDate>Sat, 10 Oct 2009 18:56:07 +0000</pubDate>
		<dc:creator>Bruno Gola</dc:creator>
				<category><![CDATA[hacklab]]></category>
		<category><![CDATA[api]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[free software]]></category>
		<category><![CDATA[gadgets]]></category>
		<category><![CDATA[google gadgets]]></category>
		<category><![CDATA[google wave]]></category>
		<category><![CDATA[hacking]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://blog.brunogola.com.br/?p=118</guid>
		<description><![CDATA[This week bani sent me an invite for trying Google Wave. It&#8217;s a great tool and if it remains as open as Google says it will I think it can really change the way we communicate over the internets. I mean, it&#8217;s much more flexible than e-mail and it takes collaboration to another level. But, [...]]]></description>
			<content:encoded><![CDATA[This week <a href="http://twitter.com/bani">bani</a> sent me an invite for trying <a href="http://wave.google.com">Google Wave</a>. It’s a great tool and if it remains as open as Google says it will I think it can really change the way we communicate over the <em>internets</em>. I mean, it’s much more flexible than e-mail and it takes collaboration to another level. But, as I said, <em>IMO</em> the “key for success” in this case is to stay open and to support the creation of other servers and implementations(as <a href="http://pygowave.net">PyGoWave</a> [which deserves a blog post]).<span id="more-279"></span>

But enough of cheap talk, I’ll show you the code.

My first “useful” piece of code for <em>Wave</em> is a <em>Tweet Gadget</em>. It’s a simple <a href="http://code.google.com/apis/gadgets/">Google Gadget</a> that takes advantage of the <a href="http://code.google.com/apis/wave/extensions/gadgets/guide.html">Wave extensions</a> for interacting with the <em>Wave user</em>. What the gadget does is very simple, it takes a <em>tweet id</em> and using the <a href="http://apiwiki.twitter.com/">Twitter API</a> it places the tweet inside the Wave. It’s a simple way to quote a tweet.

I must say that the original idea is not mine, it’s <a href="http://isnomore.net">rbp</a>’s idea. We were chatting using Google Wave and he wanted to quote a tweet. That’s how we started looking ways of doing it.
<h2>Stateless gadget</h2>
I started writing a <a href="http://brunogola.com.br/tweet_stateless.xml">simple gadget</a> that using the <em>Google Gadgets API</em> makes a request using the Twitter API and shows the tweet in the wave. The problem of this first version was that it does not keep the state, so if you reload/rejoin the wave, you won’t see the tweet, but instead you will see the text box for entering the tweet id.

In this first version you can see how to make a JSON Async Request using the Google Gadgets API. It’s very simple, all you need to do is to set the parameter <em>gadgets.io.RequestParameters.CONTENT_TYPE</em> to <em>gadgets.io.ContentType.JSON</em> and then call <em>gadgets.io.makeRequest(url, callback, params)</em> where <em>callback</em> is a <em>function</em> that receives the JSON object.A very simple example:

<code>
function myCallback(obj) {
jsondata = obj.data;
// access the attributes as jsondata['key']
// ...
}
function makesJSONRequest(url) {
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
gadgets.io.makeRequest(url, myCallback, params);
}
</code>
<h2>Adding state</h2>
Until now the gadget is a simple <em>Google Gadget</em> as it does not use any feature of <em>Google Wave</em>. Also it’s not so useful because it can’t keep the tweet id when you leave the Wave. And worse, people will never see the tweet you quoted. One of the main differences between simple Google Gadgets and Wave Gadgets is their <a href="http://code.google.com/apis/wave/extensions/gadgets/guide.html#state">ability to keep, set and change <em>state</em></a>. By state I mean information. You can keep user preferences, a game score or a <em>tweet id</em> (or even a tweet).

I decided that the easiest way was to store the tweet as it will appear in the wave (with HTML entities and everything). The <a href="http://brunogola.com.br/tweet_state.xml">new version</a> will keep the tweet information when the user enters the tweet id, so everybody in the wave can see the quoted tweet.

You can see the <a href="http://brunogola.com.br/tweet_state.xml">Gadget code</a> to understand how state works in Google Wave, but what’s most important:
<ul>
	<li>use a callback (with wave.setStateCallback()) to be aware of state changes</li>
	<li>wave.getState() returns an state <em>dict-like</em> object which you can set and get information from</li>
	<li>use wave.getState().get(’key’) for getting an information</li>
	<li>and wave.getState().submitDelta({’key1:’ value1, ‘key2′: value2} for setting information</li>
</ul>
And that’s it. It’s very simple, hope you enjoy it <img class="wp-smiley" src="http://blog.brunogola.com.br/wp-includes/images/smilies/icon_smile.gif" alt=":)" />]]></content:encoded>
			<wfw:commentRss>http://blog.brunogola.com.br/2009/10/creating-a-tweet-gadget-for-google-wave/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
