Universal Widget API

From EduTech Wiki
Jump to: navigation, search

This article or section is a stub. A stub is an entry that did not yet receive substantial attention from editors, and as such does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.

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).

1 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>';
 ?> 

2 Links