Now @ tumblr

Tumblr

Free Burma!

Digg for a cause
Have your say

Apollo on Techcrunch

Techcrunch has just published a great post on Apollo [ by Ryan Stewart ]. Dont forget to go through the comments. Its evident that commenters ,just like the dev community,are concerned about security.

Digg the story here.

Desktop 3.0 is here kiddies![and its here to stay!]

Ajax Quick start tutorial II -Handling xml response

This is supposed to be a follow up tutorial for the first Ajax Quick start tutorial.

Purpose:
In the first quick start[link], all we did was replace a div with plaintext content[if you noticed it,those html tags where internally treated as a plain string] from external html file.In this version, we will see how to receive xml response from server side script[PHP], and how to parse through the XML data in client side Javascript.

Scenario:
Depending on the variable passed, php file will generate an xml response. In this case, city name and population of a city in California is passed to PHP.The xml response from server is fetched into client through an Ajax call, which is then parsed to dig out city name and population values.

Explanation:
Everything is just the same as in first example except:

1. Now we use responseXML instead of responseText, so that javascript handles the response as an XML Object instead of just a plain string
2. Once xml response is recieved, its parsed through to extract data.
   The example shows two most important tasks of an xml parser.Extract nodevalues, and attribute values.

Consider the following xml response:

<California>
<County population="50000">La Mirada</County>
</California>

Here La Mirada is the nodevalue of County tag
and 50000 is the population attribute of County tag

In the code, this is depicted by the following code:

docx.getElementsByTagName('County')[0].firstChild.nodeValue; -->shows how to extract the nodevalue
docx.getElementsByTagName('County')[0].getAttribute("population"); -->shows how to extract attribute value

The explanation of Ajax portion of example is same as that in the first Ajax Quick start example. Feel free to take a look at it.

You can download the companion file here.To see this in action, all you have to do is unzip the content into a folder in your server, enabled with PHP.

[On a lighter note, all aspects in this tutorial are not fully thought of!If you find something misleading, feel free to post it in the comments .]

Code follows: [or else just download the companion file]

client.html

<html>
<head>
<script>
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

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


function statusListener() {
if (xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML="loading..";
}
if (xmlhttp.readyState == 4) {
var docx=xmlhttp.responseXML;
document.getElementById('cityname').innerHTML=docx.getElementsByTagName('County')[0].firstChild.nodeValue;
document.getElementById('population').innerHTML=docx.getElementsByTagName('County')[0].getAttribute("population");
}
}
</script>

</head>

<body>
<a href='javascript:requestContent("citylist.php?city=La Mirada&population=50000");'>city 1</a> <a href='javascript:requestContent("citylist.php?city=Irwindale&population=2000");'>city 2</a>
<div id="cityname">City name</div>
<div id="population">Population</div>
</body>
</html>

citylist.php

<?php
$city=$_GET['city'];
$population=$_GET['population'];
header('Content-Type: text/xml');
$return_value ='<California><County population="'.$population.'">'.$city.'</County></California>';
echo $return_value;
die();
?>

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 !

Ajax Quickstart tutorial

Personally, when i start learning something new, i would usually just skip the text and read the code first.
So in this tutorial, im gonna put the code first. For most of you , this would be more than enough . The purpose of this tutorial is to make you 'Ajax aware' in the least possible steps. And here we go.

End result: fetch content from external docment, and update the existing document without reload[without reload! thts the keyword]

<html>
<head>

<script>

//create a XMLHttpRequest Object.
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

//call this function with url of document to open as attribute
function requestContent(url) {
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange =statusListener;
xmlhttp.send(null);
}

//statusListener function is called automatically whenever readystate value of XMLHttpRequest Object changes.
//see xmlhttp.onreadystatechange =statusListener; statement above.
//When readystate is 1, its a loading state.
//When readystate is 4, content is loaded
function statusListener() {
if (xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML="loading..";
}

if (xmlhttp.readyState == 4) {
//xmlhttp.responseText is the content of document requested
document.getElementById('content').innerHTML=xmlhttp.responseText;
}
}
</script>

</head>

<body>
<a href='javascript:requestContent("1.html");'>1.html</a> <a href='javascript:requestContent("2.html");'>2.html</a>
<div id="content">This text will be replaced by external content without reload</div>
</body>
</html>




Explanation:

The whole Ajax thing starts with the creation of an instance of XMLHttpRequest object.
For firefox,new XMLHttpRequest(); will create one, and for IE,new ActiveXObject("Microsoft.XMLHTTP");

The stuff in requestContent function does the job of initiating the call, and listening to progress.

statusListener function is called whenever onreadystatechange value of Object changes. When its is 4, ie. xmlhttp.readyState == 4, the loading is finished.

Use document.getElementById to replace a divs content with the new content.



update: If you need further detailed explanation , feel free to take a look at this post.

This code was originally written somewhere in mid-2005, based on the famous Ajax tutorial in Apple Developer Connection.In real world scenario, instead of a plain file[as in this example], you will be calling a server side script that returns xml formatted data[After all, thats the X in Ajax is!],which should be parsed through.This is described in the second version of this tutorial[another quick one ;) ].


Download example zip [If the link is not working, just leave a comment.]

Apple developer Connection article.

Adobe CEO,Bruce Chizen

All about Adobe CEO, Bruce Chizen.

FLASH PRO 9 Preview: FLASH PLAYER 9 : ON AIR!

Its a me too post.
Flash Player 9
FLASH PRO 9 Preview
Flex 2 is released!

AWESOME!

ADOBE-Ellison's Next Target , says FOOL.

An article posted by The Motley Fool predicts a possible takeover of Adobe by Oracle.And the projected reason is pretty much the same old stuff, Giant with slow organic growth swallowing smaller faster competitor and blah blah blah.. But the article contradicts in its own claims! It calls Adobe a "fast growing competitor" and then points at declining revenue. While Forbes says the declining revenue is a short term one, since [we] developers are waiting for the next release of flash IDE and other suits[ true in my case],the Fool article doesnt say anything about it. Looks like a quick assignment for Ryan Fuhrmann.

ADOBE BUSINESS

A great article that touches everything from current business slowdown to future perfect Apollo is here.

Flash in Forbes

With video content delivery booming,Forbes has published an article about Flash today.Eventhough Flash gets a good coverage, i dont think Adobe is going to get any advantage out of this.Its going to be RED5. {read the article here}

FlashLite has Moved!

Sorry about about this late notification ,but the flashlite part of this blog has a new home. Go there!!

Fun Cartoon To prevent Child Abuse??!!

Just came across this campaign by Saatchi & Saatchi for NSPCC to prevent child abuse. But i deeply suspect if it will ever serve the purpose. The campaign features a funny looking charachter, who behaves totally funny when he is being "abused".
The campaign resembles more to tom and jerry show where a rat is being "abused" sooo badly that all of us[we,12 yr olds!] laugh.I think this campaign will have almost the same impact.Its just a failure.Infact, it could even encourage someone try out the " funny side" of child abuse.

The Flashlite Business

Motley Fool has published a really cool article[by Bobby Shethia] on Adobe business, and talks a lot about Flashlite,the money involved and more.

Its here

Flashlite in S60 {WHITEPAPER TOO!}

s60.com has included a section on Flashlite alongside Java. And they have a white paper too !
The point worth noting is that, the white paper actually says :
"Flash Lite 2 will be available for wide implementation in devices starting with S60 3rd Edition Feature Pack 1.Also Nokia Series 40 plans to implement support for Flash Lite 2."
Aint that awesome??!!

BYHOOK

Just came across this site with some really cooool animation{video} Requires Flash 8

49 O - RIGHT NOT TO VOTE

49 O is the right by which, a person can decline to vote for any candidates that represent his locality.This is by far, one of the most extreme of all democratic rights.
This option is available in India, and is granted based on The Conduct of Elections Rules, 1961
Basically, its an Indian citizen's right to NOT VOTE.The bottom line is, if all the candidates in your area are the ones you don't prefer, you can really speak out and say NO to all !! Now thats what you really call a RIGHT :)

related post

SECURITY VULNERABILITY IN FLASH PLAYER

A press release from Adobe on March 14 says about a security flaw,that could allow a malicious user to take control of a computer. Flash player is installed in more than 97.7% of internet enabled computers. It was distributed with Windows XP SP1 and SP2 updates, which explains how widely it is available. But to find details about this security problem, you have to go to
Home / Developer Center / Security Topic Center / Security Zone /

First of all ,only content developers visit Developer center. This means that you have to be extra ordinarily security savvy and should keep track of these kind of security issues all the time.Does a normal computer user ever do that?? I dont think so.

Again , if you hear about this problem and go to MM site for an update, you have to hunt it down!
They have updated the downloadable player with the new fixed one,but says nothing about an update or anything.

Taking into consideration the penetration level of Flash player,Adobe should act in a more responsible way.They should put information about things like this in BIG BLOCK LETTERS.

Stand-Alone uninstaller for F 8.5

Here is a very interesting sequenze of events ,which almost lead to the release of F 8.5 standalone uninstaller .[Nah! Im just kidding! ]