Zur Übersicht Gadget unter Shindig

Beispiel: OpenSocial/Apache Shindig-Gadget

Apache Shindig ist die Referenzimplementierung eines OpenSocial-Containers auf Basis der Gadgets-Spezifikation. Damit können Sie OpenSocial-Anwendungen für Social-Networks einfach entwickeln und testen. Apache Shindig bietet alle dafür erforderlichen server- und clientseitigen Komponenten und Schnittstellen. Shindig läuft auf Apache Tomcat und dem Apache Webserver in Kombination mit PHP.

Das Beispiel-Gadget zeigt die letzten 5 Artikel von Golem.de an. Der Code kann mit keinen oder wenigen Änderungen in vielen Social Networks eingesetzt werden, die OpenSocial anbieten, zum Beispiel MySpace und iGoogle. Der Quellcode des Gadgets steht bereit unter: http://api.golem.de/download/index.php?#shindigexample

Ein Opensocial-Gadget besteht aus einer XML-Datei, welche die Eigenschaften des Gadgets beschreibt und den Javascript-, HTML- und CSS-Code beinhaltet. Das Basisgerüst des Gadgets sieht wie folgt aus:

<Module>
 <ModulePrefs title="Golem.de"
              description="Golem.de - Neuste Artikel">
   <Require feature="opensocial-0.7"></Require>
   <Require feature="dynamic-height"></Require>
 </ModulePrefs>
 <Content type="html">
   <![CDATA[
   ...
  ]]>
  </Content>
</Module>

Die Bedeutung der XML-Tags und ihrer möglichen Werte können Sie in der Gadgets- und Shindig-Dokumentation nachschlagen. Für das Beispiel relevant ist der Code innerhalb des Content-Tags. Das Attribut type mit dem Wert html weist den Container an, den Code des Gadgets dem Tag-Inhalt zu lesen. Auch wenn html etwas anderes nahe legt, enthält dieser Abschnitt den kompletten Quellcode einschließlich Javascript-Code und möglichen CSS-Angaben.

Der HTML-Code des Gadgets umfasst nur eine leere Liste mit einer eindeutigen ID. Sie müssen nicht den üblichen HTML-Überbau mit head- und body-Tag definieren, da dieser vom Container bereitgestellt wird.

 ...
 <Content type="html">
   <![CDATA[
   
   ...
   
   <ul id="list">
   </ul>

   ]]>
  </Content>
  ...

Das Javascript des Gadgets besteht aus der init()Funktion: Sie holt die Liste der aktuellen Artikel vom Server.

Gadget unter iGoogle

Innerhalb eines OpenSocial-Containers können Sie zumeist die Javascript-API von Golem.de nicht nutzen, da die Anbieter die Einbindung fremder Javascript-Dateien zumeist unterbinden. Deswegen müssen Sie die Server-Abfrage direkt durchführen und das Ergebnis selbst auswerten.

Im Beispiel wird die Methode gadgets.io.makeRequest() verwendet, um den entsprechenden Webservice aufzurufen. Die Methode erwartet drei Parameter:

  • die URL des Webservices
  • eine Callback-Funktion
  • und zusätzliche Parameter für die Abfrage

Die URL für den Abruf der neusten 5 Artikel müssen Sie von Hand zusammensetzen. Den Aufbau der URL für einen Golem.de-Webservice finden Sie in der Webservice-Referenz.

http://api.golem.de/api/article/latest/5/?key=entwicklerschlüssel&format=json

Als zusätzlichen Parameter wird nur definiert, dass die Server-Antwort JSON-kodiert ist.

 ...
 function init() {

  var developerkey = '...';

  var elList = document.getElementById('list');

  var params = {};
  var url = "http://api.golem.de/api/article/latest/5/?key=" + developerkey;

  params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
  gadgets.io.makeRequest(url, 
        function(requestData) {

            var data = requestData.data;

            if(data.success && true == data.success) {

                var articles = data.data;

                for(var i = 0; i < articles.length; i++) {

                    var elItem = document.createElement('li');

                    elItem.innerHTML = '<a href="' + articles[i].url + '" target="_blank"> +
                                    articles[i].headline + '</a>';

                    elList.appendChild(elItem);

                }

            }

        }, params);
    ...
Gadget unter MySpace

Innerhalb der Callback-Funktion wird die Serverantwort ausgewertet. Aufgrund obiger Zuweisung wird die Serverantwort automatisch dekodiert und der Funktion als anonymes Objekt in requestData übergeben. Die eigentlichen Daten vom Webservice befinden sich im Objektliteral data.

Um sicher zu stellen, dass der Webservice die Anfrage auch tatsächlich korrekt verarbeiten konnte, erfolgt eine Prüfung des Wertes data.success. Wenn dieser true ist, dann war er erfolgreich und die Artikel befinden sich im Array data.data.

Das Array wird in einer Schleife durchlaufen und dann für jeden Eintrag ein Listenelement generiert und in die HTML-Liste eingefügt.

Am Ende des Javascript-Teils wird die Funktion gadgets.util.registerOnLoadHandler() aufgerufen und ihr die Funktion init als Argument übergeben, damit sie aufgerufen wird, wenn das Gadget fertig geladen wurde.

Gadget unter Lokalisten.de

Zur Übersicht