First of all, i found it rather interesting how scrambled the Information’s are you can find on that Subject are, but i think you can break it down to 2 Points:

• its done in Open Social: http://wiki.opensocial.org/index.php?title=Main_Page
• before you can do Anything you need to Register as an Developer at Studi VZ or Mein VZ, in this case i choose Studi VZ: http://www.studivz.net/Developer

So, after some Hours you will, i got an confirmation mail from the friendly fellows over at VZ. So, lets set the Goals for what I want to accomplish here:

Goal

The Application should syndicate Information from an existing source, probably an XML Feed or something like that, and give VZ Users the Opportunity to forward this inside the network, nothing fancy.

Getting Started and setting up the Views

Okay first Things first, I will start with the Basic Structure of the App, all I need is an XML-File, and a zip File including this File – and all additional ones needed:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Information Gadget" >
<Require feature="views" />
</ModulePrefs>
<Content type="html" view="canvas"><![CDATA[
<h1 id="View">view</h1>
<h1 id="Greeting">greetings earthling</h1>
]]></Content>
</Module>

Please note that the XML File must have the same Name as the ZIP File it will be a Part of, otherwise VZ wont accept it, when you have your zip go to the VZ Sandbox Create a new Gadget, upload the Zip and test your different Viewing Options.

As you may have noticed the only Result you get is when using the canvas View, and I think you can see why? Right, I defined a Content Node with the view Canvas, so yeah, you can use all kind of different Views, but I will stick with the main View, the canvas View for now.

Including our Information

So here comes to OpenSocial API, since I dont need any Interaction between VZ and my Back end i don’t need to set up an OAuth Service on my Site (this would be necessary otherwise, luckily Zend included an OAuth Class in there 1.10 Framework Release).

I will just use the API to pull the Information from an existing XML Source and implement this Information with JS, probably JQuery then:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="example App" >
<Require feature="views" />
<Require feature="cache" />
</ModulePrefs>

<Content type="html" view="canvas,popup"><![CDATA[
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css" />

<div id="bg"></div>
<h1>Hallo im Canvas View</h1>
<div><img id="img" /></div>
<script type="text/javascript">
function requestCallback(xml) {
$(xml.data).find('artikel').each(function(){
var text = $(this).find('text').text();
var titel = $(this).find('titel').text();
var bild = $(this).find('bild').text();

$('#posts'). append('<div class="post"><img class="spwbild" src="http://www.example.tld/images/' + bild + '" alt="' + titel + '" /><div class="post-text"><h1>' +
titel + '</h1><div class="post"><p>' + text + '</p></div></div><div style="clear:both;"></div>'
);
});

}

gadgets.util.registerOnLoadHandler(function() {
gadgets.cache.getCachedCss(['css/main.css']);

var url = 'http://www.example.tld/source/vz.xml?256';
var params = {};

params[gadgets.io.RequestParameters.CONTENT_TYPE]="XML";
gadgets.io.makeRequest(url, requestCallback, params);

});
</script>
<div id="posts"></div>
]]></Content>
</Module>

So as you see, i include jQuery via the google library, and an Yahoo Style reset, mostly because I’m just lazy that way. The gadgets.io.makeRequest function gets the external Content (beware of using umlauts and anything like that here). And then I build the Content with regular jQuery, if you want to use any kind of JS or CSS Files you have to use the cache function. The files will then be added to the VZ CDN and made available for you.

So, here you go a simple App that makes nothing else then get existing Information and shows them.

notes:

There is an Eclipse Plugin that looks nice, but seems to be quite the Overkill for what i want to accomplish here so i will bookmark it but not use it for now.