Pageflakes
The Pageflakes API allows you to build web widgets for PageFlakes. Unlike Netvibes news UWA's they only will run in Pageflakes or alternatively loaded through Pageflakes (Pageflakes allows to export any module, so you could import it to Netvibes for example).
See also: AJAX, the introduction to web widgets and Universal Widget API (an other mashup).
Simple static Flake example
Simple Flakes with static content are really easy to produce:
- Make a valid XHTML file (no XML declaration needed)
- Add the following JavaScript code to the HEAD:
<script id="_PAGEFLAKES_Instance" type="text/javascript"></script>
- IMPORTANT: HTML will be cached. While you edit contents and make sure it looks good, just name the file *.php and rename it later to *.html for efficiency. Then shift-reload your browser.
Source: http://tecfa.unige.ch/guides/js/ex/pageflakes/ (files hello.html or hello.php).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
<script id="_PAGEFLAKES_Instance" type="text/javascript"></script>
</head>
<body>
Hello, this is my first Pageflake.
[ ... ]
</body>
</html>
Add it to your Pageflakes page: from TECFA
Add it to your Pageflakes page: from TECFA / PHP
Simple Flake example
The next example shows how to make a very simple widget that allows the owner of a page to write a message of the day or something.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Quote of the Day</title>
<script id="_TESTBLOCK_LocalTestScripts" type="text/javascript"
src="http://www.pageflakes.com/Scripts.ashx?Scripts=LocalTestScriptsIE">
</script>
<script id="QuotesFlakeScript" type="text/javascript" >
/* Definition of the class for the flake.
Must contain a single class
'id' is the instance id available at runtime
*/
function QuotesFlake(id) {
// just a constant, remember all variables inside the class
var QUOTE = 'UserQuoteStatement';
// reference to flake instance which will be set soon
var _id = id;
var _instance = null;
var _quoteStatementBox;
var _feedback;
// This will load this flake class (only once).
// 'instance' is the reference to the flake instance
this.load = function(instance)
{
/* The parameter _instance is not the reference to the running
instance of this class. This is an instance of a different class which contains meta data about the flake
*/
_instance = instance;
/* get reference to HTML elements using the 'id' as prefix
$ is a shortcut function for document.getElementById
*/
// _quoteStatementBox gives a handle on contents of the input line
_quoteStatementBox = $(id + 'QuoteStatement');
// _feedback is a div that we will show when the user hits submit
_feedback = $(id + 'Feedback');
// 'Profiles' is a dictionary which stores values that persist across session
if( _instance.Profiles[QUOTE] == null )
{
// do nothing
}
else
{
$(_id+"content").innerHTML= _instance.Profiles[QUOTE]; _quoteStatementBox.value = _instance.Profiles[QUOTE];
}
}
this.submit = function()
{
var quote = _quoteStatementBox.value;
_instance.Profiles[QUOTE] = quote;
// "save" saves the flake instance with all changes made in profiles
_instance.save();
// Give some feedback
_feedback.style.display = "block";
// Let's add the content of QUOTE to the page
$(_id+"content").innerHTML= _instance.Profiles[QUOTE];
}
}
</script>
<script id="_PAGEFLAKES_Instance" type="text/javascript" >
var _PAGEFLAKES_ = new QuotesFlake('_PAGEFLAKES_');
</script>
</head>
<body>
Tell me the quote
Please enter your quote:
<input id="_PAGEFLAKES_QuoteStatement" type="text" />
<input id="_PAGEFLAKES_Submit" type="button" value="Submit"
onclick="_PAGEFLAKES_.submit();"/>
HOO
</body>
</html>
Links
- PageFlakes
- Pageflakes developer pack (i.e. a PDF how-to file).
- Blog (News)