Not your usual Flex

Got bored of the usual Flexy look of Flex applications? Take a look at these:

Noise monitoring system for Amsterdam Airport Schiphol [ via ]
Belgacom TV [via]
Kuler[via]

Cool huh?

Ajax Quickstart -explained

For those who need further explanation of the Ajax quickstart tutorial,[which was meant to be just a simple indroduction to Ajax] here it is.
[This is a follow up for the original article here. If you havent seen it, try it before reading this.]
You can download the companion files here.
Unzip and open up Home.html in an editor.

Basically, all that the code does is , fetch content of an external html file and relpace the content of a div with this new content fetched.In real world scenario, this can be content from an xml file, or a response from a web service,or something like that.Right now, in our example , to keep things simple all we do is, fetch content of an external html file and replace the content of a div with this external content, asynchronously, through an Ajax call.

Take a look at the code between the body tags.See the div with an id, "content" ? This is the div that will act as a container for the external content.See those links with a javascript call? Those are the links which, when clicked , initiate the Ajax call and other related tasks.

Before we dive into the explanation, there is something, very basic,that you need to understand.
document.getElementById(id)
A call like that in javascript, returns a reference to an object[or simply a tag], with the specified id.
document.getElementById(id).innerhtml
This refers to the content inside the tag ,with the specified id.
This is not a read only method,which means that, the call can be used to replace existing values.ie., assigning a value to document.getElementById(id).innerhtml will rewrite the content in that element.

Consider a div as follows:
<div>This is the content inside the div</div>

Calling document.getElementById("myid").innerhtml ,will return , "This is the content inside the div".

If you assign a value as follows, the content of div will be replaced with the new value assigned.
document.getElementById("myid").innerhtml="new content to be filled";

With that in mind, lets get into the Ajax part.
Ajax helps you communicate with server in an asynchronous manner. Which in loose language means that, Ajax helps you load external content into your page , without a page reload.
To start an asynchronous communication with server[ which means, start an Ajax call], you need to first create an XMLHttpRequest object. Lets see how this can be done.
Different browsers use different ways of creating an XMLHttpRequest object.
For Mozilla, and other Gecko browsers, this is done as follows:
new XMLHttpRequest();
For Internet Explorer:
new ActiveXObject("Microsoft.XMLHTTP");

In our example, this is done when the page loads for the first time, using the following code:
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();//for firefox
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE.
}

Now that we have created the XMLHttpRequest object, we can establish a connection with the server,using the open method of XMLHttpRequest object.
The open method takes 5 parameters.
open(type, url, async, username,password)
type[string] refers to the type of connectoin . In our case, we use GET. Other possible options include, POST, PUT, PROPFIND.
url[string], refers to the url to which the request goes.
async is a boolean value which states if we want the call to be asynchronous. By default, its TRUE, which means asynchronous.
username and password refers to the authentication info , you need , in case the site accessing requires authentication.

In our example, we just pass in the three necessary arguments.

Once we open a connection , we need to send the request to server. This can be done using send method.
send(content_if_any);
if you have no content to send, just use null.
[onreadystatechange will be explained shortly]
Summing up, the following code, does all this task in our example:

function requestContent(url) {
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange =statusListener;
xmlhttp.send(null);
}

xmlhttp is the variable to which we have assigned the XMLHttpRequest object in our example.

In our case, we have kept url as an argument, so that we can make mutiple calls easily.

So , we have opened and sent an Ajax request to server. How do we handle the response from server?
One of the coolest thing about XMLHttpRequest object is that, it can automatically notify us of the current status of our request to server.To make use of this feature, all we need to do is call onreadystatechange method of XMLHttpRequest object and assign it to a function. This function will be called everytime, the status of the request changes.
So what is status?
Status, simply refers to the state of our request, whether the request is being executed, or is it finished etc. etc. .This will help you show a "loading" message , while the content is being fetched from server.
Basically, what happens is that, depending on the status of request, the readyState value of XMLHttpRequest is dynamically changed.
In our example, statusListener is a simple function which will be called automagically ,every time readyState value of XMLHttpRequest changes. Inside statusListener, we check the value of readyState. The possible values are as follows:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
[from Apple's article]

So, inside statusListener ,if readyState is 1, we assign the div with a string "loading...", which tells the end user that , some activity is going on.
When it becomes 4, we can confirm that, the request is finished successfully.At that point, we are ready to show the response from server.

The response from server is available by calling responseText value of XMLHttpRequest object.
In our example xmlhttp.responseText refers to the content of the html file , we requested.

In real world scenario, if you requested an xml file, you may have to parse through the response, before using the data.

So that concludes the exaplanation of the example i posted earlier. Hope that helps. Feel free to drop a comment on what you think.

Thanks !