UWA Widgets coden

Web 2.0, Just Do It…

Je besser man etwas kennt, desto besser kann man darüber lästern… Ich habe beschlossen, mich ganz praktisch durch das Tal der Tränen zu kämpfen und mich auf dieser Wanderung mit den technischen Teilen von Web 2.0 herumzuschlagen. Wie fühlt sich Ajax an? Wieviel Schatten spendet der DOM-Tree? XML oder JSON, JavaScript und APIs sollten die Dämonen auf meinem Weg sein.

Das Resultat

Das Resultat kann im Ecosystem angesehen und installiert werden. Es ist ein Widget, das Adressen über tel.search.ch sucht.
Tel.search.ch bietet ein geniales, gut dokumentiertes REST API an.

Ein paar Screenies?
So siehts in Netvibes aus:
Das tel.search.ch Widget in Netvibes

So in iGoogle:
Das tel.search.ch Widget in iGoogle

Und so in der Sidebar von Windows Vista:
tel.search.ch UWA Widget in Windows Vista Sidebar

Weiterlesen

PHP-UWA Widget Library

[lang_de]Update Jan 2011: Die PHP-UWA-Library wurde völlig überarbeitet und funktioniert nun mit der aktuellen IFrame-Methode. Das Prinzip bleibt das Gleiche, die Aufrufe sind leicht anders: Projekt auf oncode.info.[/lang_de]
[lang_en]Update Jan 2011: The PHP-Update library has been completely rewritten and does now support the current IFrame-Method. The principles are still the same, but the API has changed quite a bit: Projekt auf oncode.info.[/lang_en]
[lang_de]

Widgets und Web 2.0

Universal Widget ArchitectureWidgets sind kleine Miniapplikationen, die übersichtlich wichtige Daten anzeigen oder kleinere Funktionen ausführen. Es gibt sie für Windows Vista, Mac, iPhone sowie Webbasiert für iGoogle, Yahoo!, Netvibes und so weiter und so fort. Um die Entwicklung zu forcieren, stellt nun Netvibes ein Rahmenwerk vor, das die Entwicklung von Widgets für alle diese Plattformen vereinfachen soll: Die Universal Widget Architecture. Die Widgets, die nach diesem Standard programmiert sind, sollen unter allen diesen Plattformen laufen…[/lang_de]
[lang_en]

Widgets and Web 2.0

Universal Widget ArchitectureWidgets are little miniapplications which show data in a clearly arranged way or perform a more or less simple task for the user. Widgets are present on Windows Vista, Mac, iPhone and also in a webbased form for iGoogle, Yahoo!, Netvibes and many other portals. To give a boost to widget development, Netvibes presented a new framework which shall facilate the coding of widgets. The child is called Universal Widget Architecture. Widgets coded with the help of this framework should work on all the mentioned plattforms.[/lang_en]

[lang_de]

UWA Standard

Ein Widget im UWA-Standard ist ein XML-Dokument. Es enthält Metadaten, Einstellungen und den aktiven Teil, geschrieben in Javascript. Besonders die Einstellungen sind interessant, denn über diese können widgetspezifische Parameter angepasst werden. Einige Toolfunktionen runden das UWA-Paket ab.[/lang_de]
[lang_en]

UWA Standard

A widged, coded with UWA is basically a XML-Dokument. It contains metadata, settings and the active part, written in Javascript. Especially the Preferences are of interest, because they are dynamic and allow widgetspecific settings. There are also some convenience-functions in the UWA-library.[/lang_en]

[lang_de]Die UWA-Spezifikation hat ihre eigene Homepage und ist gut dokumentiert. Es gibt Beispiele, ein Code-Skelett mit Erklärung, ein Schritt-für-Schritt Tutorial, ein Forum und sogar ein Cheat-Sheet. Der Einstieg wird einem wirklich so einfach wie möglich gemacht.[/lang_de]
[lang_en]The UWA specification has its own homepage and is very well documented. There are examples, a code-skeleton with explanations, a step-by-step tutorial, a forum and even a cheat-sheet. The start is very easy with such a lot of documentation.[/lang_en]

[lang_de]

Widget Repository

Fertige Widgets können im Widget Repository (Ecosystem) der Öffentlichkeit zur Verfügung gestellt werden. Von diesem System aus können die Widgets zu den verschiedenen Plattformen mittels Mausklick hinzugefügt werden. Im Repository hat es auch noch Widgets, die nach dem veralteten Mini-API Standard funktionieren, diese werden jedoch (hoffentlich) bald verschwinden.[/lang_de]
[lang_en]

Widget Repository

Finished and released widgets can be made available for the public and published in the Widget Repository (Ecosystem). Widgets ion this website can be added to the different platforms with a single (or double) click). There are some widgets in the repository which are coded in the deprecated Mini-API standard, but these will dissappear soon (hopefully).[/lang_en]

[lang_de]

Implementationen

Das klingt echt faszinierend und schreit danach, genutzt zu werden. Widgets selbst werde ich später implementieren, als erstes wollte ich sie wirklich für eigene Projekte nutzbar machen. Dafür habe ich eine kleine PHP- Klasse entworfen und sie grosskotzig PHP-UWA Widget Library genannt. Mit ihr ist die Handhabung von Widgets ziemlich einfach. Etwas ambitionierter ist das Parsing der widgetabhängigen Einstellungen.[/lang_de]
[lang_en]

Implementations

That sounded fascinating and must have a use somewhere… I will implement some widgets later, I needed to make these widgets usable in our own projects first. So I wrote a little PHP-class which I called pretentious PHP-UWA Widget Library.Handling widged should be easy, using this class. A little bit more ambitious is the handling of widget dependend preferences.[/lang_en]

[lang_de]Ein Minimalbeispiel ist im Download-Paket dabei und kann auch online aufgerufen werden.[/lang_de]
[lang_en]A minimal example is included in the download-package and can also be checked online.[/lang_en]

PHP-UWA Widget Library Example

[lang_de]Ein Widget anzuzeigen geht recht fix:[/lang_de]
[lang_en]Displaying a widget should be straight forward:[/lang_en]

<?php
require_once('uwawidget.php');
$uwawidget=new uwawidget('http://www.netvibes.com/api/uwa/examples/digg.xhtml');
echo $uwawidget->getWidgetHTML();
?>

[lang_de]Informationen über das Widget (sobald die URL angegeben wurde) geben die folgenden zwei Methoden:[/lang_de]
[lang_en]There are two classmembers which can give more information about the widget:[/lang_en]

getMetaData()
[lang_de]Metadaten wie Autor, Keywords, Beschreibung, … Siehe Doku.[/lang_de][lang_en]Metadaten like author, keywörds, description, … See the docu.[/lang_en]
getAdditionalData()
[lang_de]Zusätzliche Daten wie Icon, Stylesheet, …[/lang_de][lang_en]Additional info like icons, stylesheets, …[/lang_en]

[lang_de]Grundsätzlich gibt folgende Einstellungsbereiche:[/lang_de][lang_en]Basically, there are the following sections for settings:[/lang_en]

general
[lang_de]Die URL zum Widget.[/lang_de][lang_en]The widgets URL.[/lang_en]
configuration
[lang_de]Anzeigeparameter, die in der Doku beschrieben sind.[/lang_de][lang_en]Displayparameters, which described in the docs.[/lang_en]
preferences
[lang_de]Widgetabhängige Einstellungen, die ebenfalls in der Doku erwähnt sind.[/lang_de][lang_en]Widget dependent preferences, also mentioned in the docs[/lang_en]

[lang_de]Zu allen diesen Einstellungen gibt es folgende Methoden:[/lang_de][lang_en]For all these settings, there are the following classmembers:[/lang_en]

[lang_de]Setters und Getters[/lang_de][lang_en]Setters and Getters[/lang_en]
setModuleUrl(), setConfiguration(), setPreferences()
getModuleUrl(), getConfiguration(), getPreferences()
getSettingsFormData($section)
[lang_de]Gibt die Settings in einem lesefreundlichen Array wieder, aus welchem ziemlich einfach ein Form generiert werden kann. $section ist dabei "general", "configuration" oder "preferences"[/lang_de][lang_en]Returns the settings in a friendly array, from which a form can be generated. $section can be "general", "configuration" or "preferences"[/lang_en]
getSettingsHTML($section)
[lang_de]Gibt die Settings in Array der Form "Label" => "HTML" zurück. $section ist dabei "general", "configuration" oder "preferences"[/lang_de][lang_en]Returns the settings in an array with the format "Label" => "HTML". $section can be "general", "configuration" or "preferences"[/lang_en]

[lang_de]Zum Test habe ich Moodleblock erstellt, welcher nun die Darstellung von UWA-Widgets innerhalb des LMS erlaubt. Heyo, WordPress, Xoops, etc-Coderz, wie wärs bei Euch mit einer UWA Integration???[lang_de]
[lang_en]For a test, I coded a Moodle block, which allows to use UWA Widgets inside the LMS. Heyo, WordPress, Xoops, etc-Coderz, how about an integration of the Widgets in your system???[/lang_en]

[lang_de]Beispiele vom Moodleblock:[lang_de]
[lang_en]Examples from the Moodle block:[/lang_en]

Moodle UWA Calculator Moodle UWA Converter Moodle UWA Translator
Moodle UWA Google Notes Moodle UWA Spider Moodle UWA ToDo
[lang_de]Die Konfiguration unter Moodle:[/lang_de][lang_en]The configuration in Moodle:[/lang_en]
Widget settings in Moodle

[lang_de]

Ui, fast…

…wäre ich schneller als das aktuelle c’t gewesen, welches eine gute aber knappe Einführung in UWA-Widgets enthält.[/lang_de]
[lang_en]

Uh, almost…

…I was almost faster than the german computer magazine c’t which has a short bit good introduction into UWA-Widgets.[/lang_en]