Pageflakes

The educational technology and digital learning wiki
Jump to navigation Jump to search

Draft

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" >
   <!-- Made by Daniel K. Schneider, TECFA, University of Geneva May 2007, Freeware -->
  <head>
    <title>Quote of the Day</title>
    <!-- The following script is needed for running the page locally under IE -->
    <script id="_TESTBLOCK_LocalTestScripts" type="text/javascript"
      src="http://www.pageflakes.com/Scripts.ashx?Scripts=LocalTestScriptsIE">
    </script>
    <!-- The following script is needed for running the page locally under Mozilla
    <script id="_TESTBLOCK_LocalTestScripts" type="text/javascript"
      src="http://www.pageflakes.com/Scripts.ashx?Scripts=LocalTestMozilla">
    </script>
    -->

   <!-- ********** Flake class definition ******** -->

   <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 block essential to create an instance of the flake **** -->

   <script id="_PAGEFLAKES_Instance" type="text/javascript" >
        var _PAGEFLAKES_ = new QuotesFlake('_PAGEFLAKES_');
    </script>
  </head>

  <!-- What would this vodoo to ?? 
  <body onload="_PAGEFLAKES_.load(App.modules['_PAGEFLAKES_'])">
  -->
   
  <body>
    <!-- This DIV is shown when user clicks the 'edit' link on flake title bar -->
    <!-- All UI element id are prefixed with the word "_PAGEFLAKES_" -->

    <div id="_PAGEFLAKES_edit" class="edit">
      <strong>Tell me the quote</strong><br />
      <div id="_PAGEFLAKES_BorderDiv" style="padding:5px; background-color:#F1EDED;">
	Please enter your quote:<br />
	<input id="_PAGEFLAKES_QuoteStatement" type="text" />
	<input id="_PAGEFLAKES_Submit" type="button" value="Submit"
	       onclick="_PAGEFLAKES_.submit();"/>
	<br />
       </div>
      <div id="_PAGEFLAKES_Feedback" style="display:none">
	Your quotes ought to safe, you can return to Pakeflakes
      </div>
     </div>
    <div id="_PAGEFLAKES_content" style="display:block">
     HOO
    </div>
  </body>
</html>


Links

PageFlakes
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Pageflakes&oldid=12077"