Zustandsforschung » uwa http://www.zustandsforschung.de Mit offenen Augen durch die Welt Wed, 21 Jul 2010 09:37:54 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Universal Widget API http://www.zustandsforschung.de/index.php/universal-widget-api/ http://www.zustandsforschung.de/index.php/universal-widget-api/#comments Mon, 21 Jul 2008 14:44:32 +0000 Benedikt http://www.zustandsforschung.de/?p=579 Im Rahmen eines Projektes auf der Arbeit hatte ich die Gelegenheit, mich mit der Universal Widget API zu beschäftigen.

Da bisher jeder Hersteller von Widgets seine eigene Variante hatte, um so etwas zu bauen mussten Programmierer ihre Widgets für jede Plattform anpassen oder komplett umbauen. An dieser Stelle kommt die Universal Widget API von Netvibes ins Spiel, die es sich zur Aufgabe gemacht hat, ein einheitliches Framework und eine API zu schaffen, mittel dessen Widgets auf vielen Verschiedenen Systemen lauffähig gemacht werden können. Aktuell werden unterstützt iGoogle, Windows Vista, Apple Dashboard, Live.com, iPhone, Opera, MySpace und die Integration in Blogs.

Als Beispiel habe ich ein kleines Widget gebastelt, was das jeweils aktuellste Bild aus dem RSS-Feed von FFFFOUND! darstellt.

Im Prinzip besteht ein Widget für die UWA aus einer einzelnen XHTML-Datei, die sich aus 5 wesentlichen Teilen zusammensetzt:

Der Header
Im Header werden Metainformationen wie der Titel des Widgets, der Autor, eine Beschreibung und ähnliche Dinge eingetragen.

<meta name="author" content="Zustandsforschung" />
<meta name="description" content="image bookmarking" />
<meta name="apiVersion" content="1.0" />
<meta name="autoRefresh" content="20" />
<meta name="debugMode" content="true" />

<link rel="stylesheet" type="text/css"
href="http://www.netvibes.com/themes/uwa/style.css" />
<script type="text/javascript"
src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>

<title>FFFFOUND!</title>
<link rel="icon" type="image/png"
href="http://ffffound.com/favicon.ico" />

Die Konfiguration
Mittels eines speziellen XML-Formates wird dann die Konfiguration definiert, wobei man Checkboxen, Eingabefelder oder Dropdowns anlegen kann. Die vom Benutzer dort eingetragenen Werte können dann über eine API wieder ausgelesen und verwendet werden.

Bei meinem Beispiel hat’s keine Konfiguration – das geht auch und sieht dann so aus:

<widget:preferences>
</widget:preferences>

Styles
Da es sich bei einem UWA-Widget letztendlich um HTML handelt, kann das Widget mit CSS gestylt werden:

<style type="text/css">
.ffffound {
text-align:center;
}
.ffffound img {
max-width:250px;
}
</style>

JavaScript
Der Hauptteil des Widgets ist ein JavaScript: Hier muss man eine widget.onLoad-Funktion schreiben, die beim Start des Widgets aufgerufen wird. Ansonsten kann man hier so ziemlich alles machen, was man mit JavaScript so alles machen kann. Außerdem gibt’s noch eine API für den vereinfachten Zugriff auf AJAX-Funktionen und ein paar DOM-Erweiterungen.

<script type="text/javascript">
var FFFFound = {};

FFFFound.feedUrl = "http://feeds.feedburner.com/ffffound/everyone";

FFFFound.display = function(feed) {
widget.log(feed);
widget.log(feed.items[0].content);
widget.setBody("<div class=\"ffffound\">"
+feed.items[0].content+"</div>");
}

widget.onLoad = function() {
UWA.Data.getFeed(FFFFound.feedUrl, FFFFound.display);
}
</script>

Body
Im Body definiert man mit HTML die Grundstruktur des Widgets. Meistens wird man aber eher alles wichtige per JavaScript hinzugefügt und der Body sieht dann so aus:

<body>
<p>Loading... </p>
</body>

Das Endergebnis bzw. den kompletten Sourcecode für das Widget könnt ihr euch hier mal anschauen: ffffound-Widget. Und es gibt natürlich auch hierfür ein tolles Cheat-Sheet, wo alles draufsteht, was man wissen muss, um ein UWA-Widget zu erstellen.

]]> http://www.zustandsforschung.de/index.php/universal-widget-api/feed/ 0