Universal Widget API: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 8: Line 8:
* Also can be loaded into iGoogle, Apple Dashboard (and more to come)
* Also can be loaded into iGoogle, Apple Dashboard (and more to come)


== A simple example ==
== 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:
The example can be found at http://tecfa.unige.ch/guides/js/ex/netvibes/ (it's free). It is based on Netvibes [http://dev.netvibes.com/doc/uwa_widget/helloworld hello world] example and
* http://dev.netvibes.com/doc/uwa_widget/helloworld
a glance at [http://dev.netvibes.com/doc/uwa_specification UWA specs]
* http://dev.netvibes.com/doc/uwa_specification/using_javascript_and_ajax


To see how it works, click on file[http://tecfa.unige.ch/guides/js/ex/netvibes/hello.html].
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.
If you want to play with it also get the [http://tecfa.unige.ch/guides/js/ex/netvibes/helloapi.phps helloapi.phps].
 
To see how it works, click on file [http://tecfa.unige.ch/guides/js/ex/netvibes/hello.html hello.html]. You will be invited to include in a netvibes page (also iGoogle, but it doesn't work).
If you want to play with the code also get the [http://tecfa.unige.ch/guides/js/ex/netvibes/helloapi.phps helloapi.phps].


; JS CODE
; JS CODE

Revision as of 13:33, 22 May 2007

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 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, but it doesn't work). 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" 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 "<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