Pageflakes: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 15: Line 15:
* '''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.
* '''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/hello.html
Source: http://tecfa.unige.ch/guides/js/ex/pageflakes/ (files hello.html or hello.php).


<code><pre>
<code><pre>
Line 40: Line 40:
== Simple Flake example ==
== 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.
</code></pre>
<!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>
</pre></code>




Revision as of 20:43, 22 May 2007

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" > 

 <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
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Pageflakes&oldid=12076"