Simple Flake 2 - Simple2.html

Let's add some javascript to our flake:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sample Page 2</title>    
    <script>    
    function showName()
    {
	var textBox = $('name');	// $ = document.getElementById
	alert( textBox.value );
    }    
    </script>
    <script id="_PAGEFLAKES_Instance" type="text/javascript"></script>
</head>
<body>
<input type="textbox" value="Enter your name" id='name' onfocus="this.select()" />
<input type="button" value="Show" onclick="showName()" />
</body>
</html>

This gives you a page like this:

Test the page thoroughly in a browser window and make sure everything works fine. When you're done, put it inside Pageflakes from "Add Content", just like we did it with Simple Flake 1:

Copy the page to a webserver.
Click "Add Content" from Pageflakes.com.
Enter the URL of the page.
Click on the title to put it inside Pageflakes.

This is your first interactive flake! And of course the fun is just beginning.

As a developer you may be wondering how this happened? How did my script get processed? What if I add this simple flake twice? Let's see how it works:

Pageflakes first extracts the <script> and <body> tag.
Then it adds the content inside the <script> to its own script collection.
Now it gets the content inside the <body> tag and put's it inside the DIV that is showing the flake window.

Now you can easily see, if you add the same flake twice, the script is going to be added twice and there's going to be a conflict. You flake will not longer work because there are duplicate declarations of the same functions inside the <script> tag. In order to prevent such problems, read on to learn the proper way to create real flakes.