Universal Widget API

The educational technology and digital learning wiki
Jump to navigation Jump to search

Draft

The Universal Widget API (UWA for short) is the name of the 1.0 release of the Netvibes API, i.e. it is a specification for building web widgets.

UWA widgets run in

  • Netvibes
  • Standalone
  • Also can be loaded into iGoogle, Apple Dashboard (and more to come)

A simple example

The example can be found at http://tecfa.unige.ch/guides/js/ex/netvibes/ and it is based on

JS CODE

<html xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:widget="http://www.netvibes.com/ns/">
 <head>
   <meta name="author" content="Daniel K. Schneider" />
   <meta name="description" content="Testing the Hello widget" />
   <meta name="apiVersion" content="1.0" />
   <meta name="inline" content="true" />
   <meta name="debugMode" content="false" />
   <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>
   <widget:preferences>
     <preference name="hellowho" type="text" label="What do you like ?" 
       defaultValue="World" />
   </widget:preferences>
   <title>Hello World</title>
   <link rel="icon" type="image/png" 
     href="http://www.netvibes.com/favicon.ico" />
   <script type="text/javascript">
     var HelloWidget = {
       completeHello: false,
       parse: function(completeHello) {
         if (completeHello) HelloWidget.completeHello = completeHello;

widget.setBody('

' + HelloWidget.completeHello + '

');

       }
     }
     widget.onLoad = function() {
     // Call PHP with argument hellowho=...
     var url = 'http://tecfa.unige.ch/guides/js/ex/netvibes/helloapi.php?' + 'hellowho' + '=' + widget.getValue('hellowho');
     // We expect simple text output from php
     UWA.Data.getText(url, HelloWidget.parse);
     }
   </script>
 </head>
 <body>

Loading...

 </body>
</html>

PHP code

<?php error_reporting(E_ALL); header ("Content-type: application/xml"); echo '<?xml version="1.0" encoding="ISO-8859-1" ?>'; if (array_key_exists('hellowho', $_GET)) { $user_pref = $_GET['hellowho']; } else $user_pref="nothing"; // echo "Query string was: " . $_SERVER["QUERY_STRING"]; echo "<p>I like " . $user_pref . "</p>"; echo "<p>Click Edit to change your preference!</p>"; echo '<p>Soure code: <a href="http://tecfa.unige.ch/guides/js/ex/netvibes/" target="new">http://tecfa.unige.ch/guides/js/ex/netvibes/</p>';  ?>

Links