Universal Widget API

The educational technology and digital learning wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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.

Netvibe's UWA widgets run in

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

See also: AJAX, the introduction to web widgets and Pageflakes API (an other mashup).

A simple AJAX example

The example can be found at http://tecfa.unige.ch/guides/js/ex/netvibes/ (it's free). It is based on Netvibes hello world example and a glance at UWA specs

It will display a short message that can be changed by editing the preferences of the widget. When you hit ok, the string you entered will be sent to a php program via a XMLHttpRequest and PHP will send back a XML text string.

To see how it works, click on file hello.html. You will be invited to include in a netvibes page (also iGoogle). If you want to play with the code also get the helloapi.phps.

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('<p>' + HelloWidget.completeHello + '</p>');
        }
      }

      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>
    <p>Loading...</p>
  </body>
 </html>
PHP code
 <?php
 error_reporting(E_ALL);
 header ("Content-type: application/xml");   
 echo '<?xml version="1.0" ?>';

 if (array_key_exists('hellowho', $_GET))  
  { $user_pref  = $_GET['hellowho']; }
  else 
   $user_pref="nothing";

 // echo "Query string was: " .  $_SERVER["QUERY_STRING"];
 echo "<div><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/</a></p></div>';
 ?> 

Links