Universal Widget API: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Stub}}
{{Stub}}


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 widget]]s.
The '''Universal Widget API''' (UWA for short) is the name of the 1.0 release of the [http://www.netvibes.com/ Netvibes] API, i.e. it is a specification for building [[web widget]]s.


UWA widgets run in
Netvibe's UWA widgets run in
* [http://www.netvibes.com Netvibes]
* [http://www.netvibes.com Netvibes]
* Standalone
* 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 ==
See also: [[AJAX]], the introduction to [[web widget]]s and [[Pageflakes API]] (an other mashup).


The example can be found at http://tecfa.unige.ch/guides/js/ex/netvibes/ and it is based on  
== A simple AJAX example ==
* http://dev.netvibes.com/doc/uwa_widget/helloworld
 
* http://dev.netvibes.com/doc/uwa_specification/using_javascript_and_ajax
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
a glance at [http://dev.netvibes.com/doc/uwa_specification 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 [http://tecfa.unige.ch/guides/js/ex/netvibes/hello.html 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 [http://tecfa.unige.ch/guides/js/ex/netvibes/helloapi.phps helloapi.phps].


; JS CODE
; JS CODE
<code>
<code><pre>
  <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 26: Line 31:
     <link rel="stylesheet" type="text/css"  
     <link rel="stylesheet" type="text/css"  
       href="http://www.netvibes.com/themes/uwa/style.css" />
       href="http://www.netvibes.com/themes/uwa/style.css" />
     <script type="text/javascript"  
     <script type="text/javascript"  
       src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>
       src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>
     <widget:preferences>
     <widget:preferences>
       <preference name="hellowho" type="text" label="What do you like ?"  
       <preference name="hellowho" type="text" label="What do you like ?"  
Line 35: Line 42:
     <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 45: Line 51:
         }
         }
       }
       }
       widget.onLoad = function() {
       widget.onLoad = function() {
       // Call PHP with argument hellowho=...
       // Call PHP with argument hellowho=...
Line 57: Line 64:
   </body>
   </body>
  </html>
  </html>
</code>
</pre></code>


; PHP code
; PHP code


<code>
<code><pre>
  <?php
  <?php
  error_reporting(E_ALL);
  error_reporting(E_ALL);
  header ("Content-type: application/xml");   
  header ("Content-type: application/xml");   
  echo '<?xml version="1.0" encoding="ISO-8859-1" ?>';
  echo '<?xml version="1.0" ?>';


  if (array_key_exists('hellowho', $_GET))   
  if (array_key_exists('hellowho', $_GET))   
Line 73: Line 80:


  // echo "Query string was: " .  $_SERVER["QUERY_STRING"];
  // echo "Query string was: " .  $_SERVER["QUERY_STRING"];
  echo "<p>I like " . $user_pref . "</p>";
  echo "<div><p>I like " . $user_pref . "</p>";
  echo "<p>Click Edit to change your preference!</p>";
  echo "<p>Click Edit to change your preference!</p>";
  echo '<p>Soure code: <a href="http://tecfa.unige.ch/guides/js/ex/netvibes/"  
  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>';
  target="new">http://tecfa.unige.ch/guides/js/ex/netvibes/</a></p></div>';
  ?>  
  ?>  
</code>
</pre></code>


== Links ==
== Links ==
* [http://dev.netvibes.com/ dev.netvibes] website
* [http://dev.netvibes.com/ dev.netvibes] website


[[Category: Technologies]]
 
[[Category: Social computing]]
[[Category: Social computing]]
[[Category: XML]]
[[Category: XML]]
[[Category: Rich internet applications]]
[[Category: Rich internet applications]]
[[Category: Cloud computing]]

Latest revision as of 11:19, 6 July 2010

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

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Universal_Widget_API&oldid=28610"