Here’s the source code:

google.load("visualization","1", {"packages":["piechart"]});
google.setOnLoadCallback(drawChart);
 
function drawChart() {
	table = new google.visualization.DataTable();
	table.addColumn("string","Languages");
	table.addColumn("number","Hours worked");
	table.addRows(3);
	table.setValue(0,0,"PHP");
	table.setValue(1,0,"Python");
	table.setValue(2,0,"JS");
	table.setValue(0,1,5);
	table.setValue(1,1,1);
	table.setValue(2,1,3);
 
	targetDiv = document.getElementById('chart');
	chart = new google.visualization.PieChart(targetDiv);
	chart.draw(table, {width: 400, height: 240, is3D: true, title: 'Languges Worked With (in hours)'});
 
	new google.visualization.events.addListener(chart, 'select', selectionHandler);
 
	function selectionHandler(e) {
			selectedData = chart.getSelection();
			row = selectedData[0].row;
			item = table.getValue(row,0);
			time = table.getValue(row,1);
			resultDiv = document.getElementById('res');
			resultDiv.innerHTML = "Selected Language: " + item + " / Working Hours: " + time + "<br>";
		}
 
 
	}

It’s very simple and easy. First we include the root javascript from: http://google.com/jsapi and then put the above codes in a script tag inside head.

We use the google loader to load the visualization package and then use it to build a PieChart. When the loading is done, the setOnLoadCallback() method invokes another function to proceed with further execution. We packed our main code inside a drawChart() function and set it as the callback.

To assemble the data, we first need a DataTable. A data table is an object with virtual columns and rows. First, we need to define the columns. We do that by calling the addColumn() method. The first parameter is the data type and the second one is the name. In our example, we added two columns.

Next, we call the addRows() passing an integer as the only parameter. This method creates “filler” or empty sets for putting data into.

Then, we use the setValue() call to insert/update data. The first parameter is the row number counted from 0. The second one is the index of column. Remember the sequence of the column definitions? Yes, follow that sequence. The first column is the index 0. The 3rd parameter is the actual value for that row and column.

table.setValue(2,1,"meaow")

The above call will insert the string “meaow” into the second column of the 3rd row. It’s easy!
PS: Please be aware of the data type of the column while inserting/updating data.

Now that we have a DataTable at our disposal, all we need to do is feed this data to a PieChart and draw it up. First, we created a new div with the id “chart”. This div will be holding the chart. Then we call the PieChart constructor with this div element. Then we call the draw() method of the chart object to paint it on the screen. The first parameter is the datatable and the second one is an object (dictionary/associative array like) defining the look and feel of the charts.

That draws the chart alright. But I need to let the users interact with the chart. So, I added a Listener to listen to any “select” events and call the handler function back. We get a event object but for select events, they don’t have any properties. That is they don’t tell you what the user clicked. You have to get the data by calling the getSelection() method of the chart. The returned object will have “row” and “column” values. For PieChart, alone the row value does the job. We get the row index. Then call the getValue() method of the data table to get the value of a certain column in a row. In this case, I just iterated over both columns. Built a text string out of the data and dynamically updated a div with that!

It’s pretty simple. It’s powerful and user friendly as well.

PS: I really liked the Google Ajax Playground. I am gonna play a lot in there from now on
I just realized I’m becoming a good coder as well. I wrote the above codes without any pretty printer or code formatter. It looks well indented to me

Integration is quite easy. First we add a fbAsyncInit object to the window object for asynchronous initiating. The following code snippet was borrowed from the official docs and then slightly modified:

 
            window.fbAsyncInit = function() {
                FB.init({appId: appId, status: true, cookie: true, xfbml: true});
 
                /* All the events registered */
                FB.Event.subscribe('auth.login', function(response) {
                    // do something with response
                    login();
                });
                FB.Event.subscribe('auth.logout', function(response) {
                    // do something with response
                    logout();
                });
 
                FB.getLoginStatus(function(response) {
                    if (response.session) {
                        // logged in and connected user, someone you know
                        login();
                    }
                });
            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/en_US/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e);
            }());
 
           function login() {
           alert('login');
           }
 
           function logout() {
           alert('logout');
           }

Thanks to the elegance of Javascript, we called the newly constructed object immediately after initiating, with a callback that loaded the JS sdk on our page. We registered the auth.login, auth.logout events and for initially looking for any logged in user, we made the getLoginStatus() call. In fact this code snippet initiates the facebook access on the page. Registering the events to our custom functions, we just made sure that, we know when something important happens. While iniating, if the user is already logged in, the login() function gets called because of the getLoginStatus() call. Later, after initiating, if the user logs in or logs out, the auth.login and auth.logout events get fired. Our registered handlers will be called in those cases.

To make things easy for the end user, you can use a fb:login-button tag from FBML. I believe Facebook app developers are already aware of that. Still, I was just reminding that you can still use those tags A login button is going to help you. Because, it’s mandatory that you call the FB.login() on an user event (like button click) because most browsers won’t allow opening a popup on a non-user event.

Now the user is logged in and authorized the apps, you can start customizing your contents for the user. You can always check for available users by calling the FB.getSession() function. It returns null if no user is available, otherwise, it returns a session object with access_token, app key and secret and most importantly the user uid.

session = FB.getSession()
if(session) {
    alert(session.uid);
        } else {
     alert('no user logged in');
}

You can use the dir() function on the session object to explore it on the Firebug console.

Now, you can make calls to the Graph API using the normal path pattern:

FB.api("/me/photos", function(response) { alert(response.data[0].link) });

The above code will alert() the user’s latest photo URI. Well, make sure that the applicaton has permissions to make the calls.

You can even mix up with the legacy API by passing an object with a “method” parameter pointing to the method name and related args. You can build the Facbook UIs using the FB.ui() call. Have a look how we use legacy API and UI to build a nifty sharing dialog box.

var share = {
   method: 'stream.share',
   u: 'http://masnun.com/'
 };
 
 FB.ui(share, function(response) { console.log(response); });

Here, instead of alert()ing the response, we logged it to the console

In this way, you can interact with the user the way you want. It’s plain and simple. So, start digging now and have fun.

The Offcial js-sdk docs can be found here: http://developers.facebook.com/docs/reference/javascript/

Happy developing! Happy Facebooking!

JavaScript is a programming language. Yeah, just like the interpreted languages like Python, PHP and Ruby, JS is another good old programming language. My ignorance, I never knew this! I have always thought that JavaScript is merely a client side scripting language that works with web browsers only

My perceptions started changing few months ago when I saw some server side applications of JavaScript coding. Lately, a few days back I saw the node.js projects which is quite similar to the Twisted project implemented in Python. I started wondering how JS is being interpreted on the server side. Google answered me There are JavaScript interpreters for even shell scripting

I first tried the interpreters from Mozilla but unfortunately couldn’t make them work on my machine. So, I switched to JSDB The interpreter is available free for download at: http://www.jsdb.org/

They say on their homepage:

JSDB is JavaScript for databases, a scripting language for data-driven, network-centric programming on Windows, Mac, Linux, and SunOS. JSDB works with databases, XML, the web, and email. It is free and open-source. Use it as a JavaScript shell, to run CGI programs, or as a web server.

Yeah, I indeed use it as a JavaScript Shell

Here is the Documentation of what JSDB has inside. I have made a PDF print out of the page for offline reading!

I really find the tool interesting because I am writing small throw away programs those are not really that much useful but the development curve is contributing to my JS skills

Download App: http://masnun.googlecode.com/files/maSnun-AIR.air

Download Source: http://masnun.googlecode.com/files/maSnun_AIR_Source.zip

I have added a few more JavaScript files for better interactions

I read just one article and it helped understand the basics. Later I had some issues regarding the packaging system but managed to hack through

First, I downloaded the Adobe AIR runtime and Adobe AIR SDK for Linux since I am on Ubuntu 9.04. I installed the runtime environment for testing the final product. The SDK has built in tools for testing and debugging the apps. I extracted the SDK into my home folder and then added the “bin” directory of the SDK to the system path by editing the “/etc/environment” file.

I then created a directory for the air application named “myair”. Inside that directory, I created an application descriptor named “myair.xml”. Here’s the source code for the file:

<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>com.example.masnun-air</id>
  <version>1.0</version>
  <filename>maSnun-AIR</filename>
  <initialWindow>
    <content>index.html</content>
    <visible>true</visible>
    <width>300</width>
    <height>600</height>
  </initialWindow>
  <icon>
    <image16x16>icons/AIRApp_16.png</image16x16>
    <image32x32>icons/AIRApp_32.png</image32x32>
    <image48x48>icons/AIRApp_48.png</image48x48>
    <image128x128>icons/AIRApp_128.png</image128x128>
  </icon>
</application>

This descriptor file holds all the basic information regarding the application. I created three more directories under the application directory:

– icons: for the icons described in the descriptor
– js: for the javascript files (mainly jQuery)
– build: for building the final product (packaging)

Then I went on building the initial and only view of the application. It’s nothing but a very simple html file. Here’s the source of the “index.html” file:

<!--
Author: maSnun
URL: http://masnun.com
Email: masnun@gmail.com
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>maSnun's AIR Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/JavaScript"
        src="js/jquery-1.3.2.min.js"></script>
        <script type="text/JavaScript">
            $(document).ready(function() { masnun(); });
 
            function masnun() {
 
                i = 0;
                $("p").prepend("&#187;")
                total = $("p").length - 1;
                $("#hide").click(function (e) {
                    if(i > total) {
                        alert("No more paragraphs to hide!");
                        e.preventDefault();
                    } else {
                        e.preventDefault();
                        $("p:eq("+i+")").hide("slow");
                        i = i + 1;
                    }
                });
 
 
                $("#show").click(function (e) {
                    e.preventDefault();
                    $("p").show("slow");
                    i = 0;
                });
 
 
                $("p").hover(function () {
                    $(this).addClass("hover");
                }, function () {
                    $(this).removeClass("hover");
                });
 
                $("p").click(function() {
                    alert("You clicked a menu item :D");
                });
 
 
            }
        </script>
        <style type="text/css">
            body { font-size:18px; background:black; color:white;  border: dashed 3px fuchsia;
            margin:5pt;}
            p { color:red; margin:5px; cursor:pointer; }
            p.hover { background: blue; color: white; }
        </style>
    </head>
    <body >
        <div style="margin: 10pt; color:lime;">
        <font size="2"> Welcome to the demo AIR app! Clicking the "Hide" option
        hides the menu items one by one. Clicking the "Reset" option brings
        all the hidden items back. Clicking a menu item shows a dialog box :D</font>
            </div>
        <div align="center"  >
            <a href="" id="hide" style="color:orange;">Hide</a> || <a href="" id="show" style="color:orange;">Reset</a>  <br/><br/>
        </div>
        <div align="left" style="color:white;">
            <p> Menu Item 1</p>
            <p> Menu Item 2</p>
            <p> Menu Item 3</p>
            <p> Menu Item 4</p>
            <p> Menu Item 5</p>
            <p> Menu Item 6</p>
            <p> Menu Item 7</p>
            <p> Menu Item 8</p>
            <p> Menu Item 9</p>
        </div>
 
        <div style="margin: 10pt; color:yellow;">
        <font size="2"> <b>Created by:</b> maSnun</font>
            </div>
 
    </body>
</html>

If you are familiar with HTML, CSS and jQuery, the code will be self explanatory for you.

Thats completes the development cycle. I tested the application by typing the following commands on my terminal:

cd myair
adl myair.xml

And it worked!

Now for packaging, I first created a selfsigned certificate:

adt -certificate -cn SelfSign -ou Dev -o "Example" -c US 2048-RSA cert.px masnun

Then packaged the application using the following command:

adt -package -storetype pkcs12 -keystore cert.pfx build/maSnun-AIR.air myair.xml index.html icons/*.png js/*.*

It packaged the application and created an air archive for me. I tested it and it installed, worked and uninstalled fine on my machine.

Download the App: http://masnun.googlecode.com/files/maSnun-AIR.air

Have fun!

I have mainly demonstrated jQuery here. PHP has been used to manipulate desired number of paragraphs quickly

You get a number of paragraphs. Hovering over them changes their style. Clicking the “Hide” link hides the paragraphs one by one.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>jQuery with PHP</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/JavaScript"
        src="jquery-1.3.2.min.js"></script>
        <script type="text/JavaScript">
            $(document).ready(function() { masnun(); });
 
            function masnun() {
 
                i = 0;
                total = $("p").length - 1;
                $("a").click(function (e) {
                    if(i > total) {
                        alert("No more paragraphs to hide!");
                        e.preventDefault();
                    } else {
                        e.preventDefault();
                        $("p:eq("+i+")").hide("slow");
                        i = i + 1;
                    }
                });
                $("p").hover(function () {
                    $(this).addClass("hover");
                }, function () {
                    $(this).removeClass("hover");
                });
 
 
            }
        </script>
        <style>
            p { color:black; margin:5px; cursor:pointer; }
            p.hover { background:black; color: white; }
        </style>
    </head>
    <body>
 
        <a href="">Hide</a> <br/><br/>
 
 
        <?php
        for($i=0; $i < 7; $i++) {
            echo "<p> Paragraph number: {$i} </p>";
        }
        ?>
 
 
 
 
    </body>
</html>

This project was also from Eric Willis who happily chose me for another of his projects. This time I developed http://crowdminz.com . It’a a live web crawler that crawls the www in real time.

As you will notice, the first page has the “web” category pre-selected. And there are three columns showing results from — twitter, digg and friendfeed. You might be surprised to know that search box uses no forms. It just happened that I coded the php portion while the site layout was coded by a third party coder. When I tried to put a form into the right place, the page broke. I then put a single input box and used javascript to make it behave like a html form. When you click the search button, the value of the search box is collected by javascript and the window.location.href is assigned a new value that necessarily contains a new URI with query string. To make it behave like a real form, I had to filter key presses and make sure that the search is performed even when the user pressed the Enter button after typing something in the box.

I used the twitter, digg and friendfeed RSS search results to gather data from them. I used SimpleXML with php to parse the data and form the results. For video, I had to use Youtube and Flickr for image results.

It was a $50 project and I completed it in almost 6 working hours. I took time to dig into the HTML layouts where I lost track every now and then. Finally it was done and I did enjoy coding the javascript portion.