Universal Widget API: Difference between revisions
Jump to navigation
Jump to search
m (using an external editor) |
m (using an external editor) |
||
| Line 10: | Line 10: | ||
== A simple example == | == A simple example == | ||
The example can be found at http://tecfa.unige.ch/guides/js/ex/netvibes/ | The example can be found at http://tecfa.unige.ch/guides/js/ex/netvibes/ (it's free). It is based on: | ||
* http://dev.netvibes.com/doc/uwa_widget/helloworld | * http://dev.netvibes.com/doc/uwa_widget/helloworld | ||
* http://dev.netvibes.com/doc/uwa_specification/using_javascript_and_ajax | * http://dev.netvibes.com/doc/uwa_specification/using_javascript_and_ajax | ||
| Line 26: | Line 26: | ||
<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 37: | ||
<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" /> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var HelloWidget = { | var HelloWidget = { | ||
| Line 45: | Line 46: | ||
} | } | ||
} | } | ||
widget.onLoad = function() { | widget.onLoad = function() { | ||
// Call PHP with argument hellowho=... | // Call PHP with argument hellowho=... | ||
| Line 73: | Line 75: | ||
// 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/</a></p></div>'; | |||
?> | ?> | ||
</pre></code> | </pre></code> | ||
Revision as of 13:25, 22 May 2007
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/ (it's free). It is based on:
- http://dev.netvibes.com/doc/uwa_widget/helloworld
- http://dev.netvibes.com/doc/uwa_specification/using_javascript_and_ajax
- 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
- dev.netvibes website