Universal Widget API: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 35: Line 35:
     <link rel="icon" type="image/png"  
     <link rel="icon" type="image/png"  
       href="http://www.netvibes.com/favicon.ico" />
       href="http://www.netvibes.com/favicon.ico" />
 
</code>
<code>
     <script type="text/javascript">
     <script type="text/javascript">
       var HelloWidget = {
       var HelloWidget = {
Line 60: Line 61:
; PHP code
; PHP code


<nowiki>
<code>
  <?php
  <?php
  error_reporting(E_ALL);
  error_reporting(E_ALL);
Line 77: Line 78:
       target="new">http://tecfa.unige.ch/guides/js/ex/netvibes/</p>';
       target="new">http://tecfa.unige.ch/guides/js/ex/netvibes/</p>';
  ?>  
  ?>  
</nowiki>
</code>


== Links ==
== Links ==

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

I like " . $user_pref . "

"; echo "

Click Edit to change your preference!

"; echo '

Soure code: <a href="http://tecfa.unige.ch/guides/js/ex/netvibes/" target="new">http://tecfa.unige.ch/guides/js/ex/netvibes/

';

?> 

Links