Universal Widget API: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
Line 15: Line 15:


; JS CODE
; JS CODE
<nowiki>
<code>
  <html xmlns="http://www.w3.org/1999/xhtml"  
  <html xmlns="http://www.w3.org/1999/xhtml"  
   xmlns:widget="http://www.netvibes.com/ns/">
   xmlns:widget="http://www.netvibes.com/ns/">
Line 45: Line 45:
       }
       }
       widget.onLoad = function() {
       widget.onLoad = function() {
       // Call PHP with argument hellowho=�(;<�(B
       // Call PHP with argument hellowho=...
       var url = 'http://tecfa.unige.ch/guides/js/ex/netvibes/helloapi.php?' + 'hellowho' + '=' + widget.getValue('hellowho');
       var url = 'http://tecfa.unige.ch/guides/js/ex/netvibes/helloapi.php?' + 'hellowho' + '=' + widget.getValue('hellowho');
       // We expect simple text output from php
       // We expect simple text output from php
Line 56: Line 56:
   </body>
   </body>
  </html>
  </html>
</nowiki>
</code>


; PHP code
; PHP code

Revision as of 13:14, 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 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