IBM Connections API - Teil 2

Im ers­ten Teil wurde bereits ein Überblick über die API gege­ben, sodass es in die­sem Teil ver­mehrt um die Entwicklung einer klei­nen Erweiterung gehen soll. Ziel ist es ein klei­nes iWidget anzu­le­gen, wel­ches alle Öffentlichen Foren aus­liest und auf der Homepage ange­zeigt. Da es sich nur um ein Beispiel han­delt, wird nicht der gesamte Quelltext aus­ge­ge­ben wer­den, son­dern auf wich­tige Teile beschränkt.

Als Basis für die Erweiterung wird ein klei­nes iWidget erstellt. Befüllt wird das Widget mit­tels JavaScript, wel­ches als Resource in das Widget ein­ge­bun­den wird.

widget.xml:

<iw:iwidget id="communardo_sample"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" supportedModes="view"  
 mode="view" iScope="communardo_sampleScope">      

    <iw:resource id="communardo_jsID" src="communardo_sample.js" />

    <iw:content mode="view">
        <![CDATA[ <div id="ROOT_DIV">Loading...</div>]]>
    </iw:content>
</iw:iwidget>

In der ein­ge­bun­den JavaScript-Datei befin­det sich die kom­plette Programmlogik, sodass keine wei­te­ren Dateien benö­tigt wer­den. Hauptteil ist die onView-Methode, die auto­ma­tisch gela­den wird wenn das Widget gela­den wird.

communardo_sample.js:

...
onView : function() {
    var element = this.iContext.getElementById("ROOT_DIV");    //ROOT-Element laden

    var conn = new dojox.atom.io.Connection();    // Verbindung initialisiert
    var url = this.iContext.io.rewriteURI("/forums/atom/forums/my?view=following&filter=forums");    // URL über Proxy vorbereiten

    conn.getFeed(url,    // getFeed-Aufruf
        function(feed) {    // Callback-Methode für den Erfolgsfall
            element.innerHTML = "";    

            var entries = feed.entries;    // Definition der Einträge
            for( var i = 0 ; i < entries.length ; i++ ){    // Auslesen der Einträge			
                for( var j = 0 ; j < entries[i].links.length ; j++ ){    //Auslesen der Links    
                    if( entries[i].links[j].rel == 'self' ){
                        var a = dojo.create(('a'), { innerHTML: entries[i].title.value, href: entries[i].links[j].href });
                        element.appendChild(a);
                        element.appendChild(dojo.create('br'));
                    }
                }
            }
        }, function(err) {       //Callback-Methode für den Fehlerfall
            console.debug(err);
        });
}, ...

Zu Beginn der Funktion wird das Root-Element gela­den, wel­ches in der widget.xml defi­niert wurde. Anschließend wird mit der Variable "conn" eine Verbindung Atom-Verbindung initia­li­siert, mit der dann anhand der über­ge­be­nen URL (Variable "url") die Feeds gela­den wer­den kön­nen. Weitere Parameter der "getFeed"-Methode sind eine Callback-Funktion, die auf­ge­ru­fen wird, wenn die Daten gela­den wur­den und eine Callback-Funktion die im Fehlerfall aus­ge­führt wird.

Callback-Methode für den Erfolgsfall:

Der Callback-Methode wird beim Aufruf das Feed-Element über­ge­ben, sodass inner­halb der Funktion ein Zugriff auf die Daten gewährt wird. Da die Haupt-Daten inner­halb des Feeds in die­sem Fall unin­ter­es­sant sind,  wer­den sofort nach dem Leeren des Root-Elements die Einträge des Feeds aus­ge­le­sen und in der neuen Variable "ent­ries" defi­niert. Anschließend wer­den alle Einträge in einer Schleife durch­ite­riert und aus­ge­le­sen. Zur Darstellung im Widget genügt uns jedoch nicht der Titel, sodass zusätz­lich noch der Link zum jewei­li­gen Forum aus­ge­le­sen wer­den muss. Dazu wer­den alle Links des jewei­li­gen Eintrags aus­ge­le­sen und anschlie­ßend der Link wei­ter­ver­folgt, der ein Verweis auf das eigene Element bein­hält (rel="self").

Mit die­sen Informationen wird dann das Root-Element befüllt. Im fol­gen­den Screenshot sieht man das Widget in Aktion: