Björn M. Wibben | Interaktive Medien und Audio
Tweets mittels jQuery und YQL in einem Google Wave-Gadget
Am 3. September 2009 fand das 1. Treffen der Google Technology UserGroup Frankfurt (GTUGFRA) statt.
Diesbezüglich habe ich nach einer sehr guten Einführung von Norbert R. Möhring zu den Wave-Gadgets meine ersten Versuche gemacht.
Ein Wave-Gadgets ist sowas wie ein Widget, welches man in eine Wave einbinden kann. Wave-Gadgets können im Gegensatz zu “normalen” Widgets mit der Wave in geringem Maße interagieren.
Allerdings nutzt dieses Wave-Gadget noch keine Wave-spezifischen multi-user Möglichkeiten.
Vielmehr ging es mir primär darum externe Quellen in die Wave zu integrieren.
So entstand ein Gadget, welches mittels jQuery und YQL die letzten 5 Tweets – welche mit dem Hashtag #gtugfra versehen sind – in die Wave einbindet.
Ein Wave-Gadgets ist im Prinzip nichts anderes als eine XML-Datei mit einer CDATA-Sektion, in welcher dann HTML, CSS und JavaScript eingebettet ist.
Somit ist das syntax highlighting leider nicht mehr gegeben.
Das Debuggen mittels FireBug oder Safari’s Web Inspector war – zumindest auf meinem MacBook Pro – nicht möglich, da schon das Öffnen der Debugger und ein Blick in’s DOM den ganzen Browser zum Absturz brachte. Zum debuggen stellt die Wave-API zum Glück die Funktion wave.util.printJson zur Verfügung.
[Update: Debuggen mittels DOM-Inspektoren funktioniert jetzt stabil.]
Das Grundgerüst eines Wave-Gadgets sieht recht einfach aus:
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Der Titel" height="300" author="Name" author_email="eMail"> <Require feature="wave" /> <Require feature="dynamic-height" /> </ModulePrefs> <Content type="html"> <![CDATA[ /* place your HTML, CSS and JavaScript here */ ]]> </Content> </Module>
Innerhalb der CDATA-Sekton habe ich jetzt folgendes eingebunden:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type='text/javascript'> (function () { function stateUpdated() { $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%2Cauthor.name%20from%20feed%20where%20url%3D'http%3A%2F%2Fsearch.twitter.com%2Fsearch.atom%3Fq%3D%2B%2523gtug'%20AND%20link.rel%3D'image'%20LIMIT%205&format=json&callback=?", function (data) { if (data.query.results.entry.length !== undefined) { var len = data.query.results.entry.length; var toDom = ""; for (var i = 0; i < len; i++) { toDom += '<img src="'+data.query.results.entry[i].link.href+'" />'+data.query.results.entry[i].author.name+": "+data.query.results.entry[i].title+"<br/>"; } $("#test").html(toDom); } else { $("#test").html("<p>Sorry, currently no results for #gtugfra</p>"); } gadgets.window.adjustHeight(); }); } function init() { if (!wave && !wave.isInWaveContainer()) { return; } $(document).ready(function() { wave.setStateCallback(stateUpdated); }); } gadgets.util.registerOnLoadHandler(init); })(); </script> <div id="test" style="height: 500px;"></div>
Um den JavaScript Namespace nicht weiter zu belasten, habe ich den eigentlichen Code innerhalb einer sich selbst ausführenden, anonymen Funktion gepackt.
Mit gadgets.util.registerOnLoadHandler(callback); wird ein Callback definiert, welcher für die Initalisierung des Gadgets zuständig ist. Innerhalb dieser Funktion muss man prüfen, ob das Gadget sich innerhalb eines Wave Containers befindet. Ist dies der Fall wird in der Regel ein weiterer Callback definiert.
Mittels wave.setStateCallback(callback); registriert man einen Callback für State Changes einer Wave. Dieser wird mindestens einmal ausgeführt. Sollte man später den State durch z. B. submitDelta ändern, wird der Callback erneut getriggert. Dies ist in meinem Beispiel jedoch nicht der Fall.
In der Funktion stateUpdated geschieht die eigentliche Arbeit.
Mit jQuery’s getJSON hole ich mir mit Hilfe von YQL den RSS-Feed der Twitter Suche zum Hashtag #gtugfra und lasse mir das ganze als JSON zurück geben. In der For-Schleife gehe ich jetzt das JSON-Objekt durch und erzeuge einen String, welchen ich dann in das DOM einfüge. Zum Abschluss rufe ich gadgets.window.adjustHeight(); auf um die Höhe des Gadgets anzupassen.
YQL-Query:
SELECT title,link,author.name FROM feed WHERE url='http://search.twitter.com/search.atom?q=+%23gtugfra' AND link.rel='image' LIMIT 5
Natürlich benötigt man nicht unbedingt jQuery. Die Wave-Gadget API bietet mit gadgets.io.makeRequest eine eigene Möglichkeit an. Wie das funktioniert zeige ich in einem folgenden Beitrag.
Der komplette Source-Code befindet sich hier.
Links:
Eintrag in der Google Wave Sample Gallery
Offizielle Website der GTUGFRA
Eindrücke des 1. GTUGFRA Treffens
Embeded Wave:
Tags: jQuery, Twitter, Wave-Gadget, Widget, YQL
Der Beitrag wurde am Sonntag, den 6. September 2009 um 20:17 Uhr veröffentlicht und wurde unter Google-Wave, Lab abgelegt. Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.
[...] Björn Wibben has created a blog about using jQuery in gadgets it looks quite interesting. [...]