Final examinations!

My final examinations are coming closer and closer! I'm supposed to take the first one and the second one on the coming Sunday! :(
But after Dec 12 I'll have free time to do... :D

Going to Kish

I've not received my employment visa so far, so the company send me to Kish island this evening and will renew my visa... ;)
I've never been there and may have a little fun! :D

Uploading Files, Using Ajax

As you may know it is impossible to upload files to the server using XHR! And the easiest way to upload them in an AJAX way is to use Iframes.
But be aware that uploading files through the XMLHttpRequests is NOT impossible, although it has some security issues.

So we will see how to develop a simple Ajax based upload using Iframe. The upload process by itself doesn't have anything complicated. You can do it in a synchronous style using any kind of server-side technology such as PHP, JSP, ASP or...
It will happen in a document which is displaying on the page using an Iframe so from the whole document point of view it will upload the file as an asynchronous request. But the thing is so important here is the JavaScript integration which is required between the main document and the uploading document (the document inside the Iframe) for showing some progress or loading animations.

In this tutorial I use PHP as server-side language and prototype.js as Ajax/JavaScript framwork.
You can download this script here, or do it yourself step by step:

1. index.html
Create a new file called index.html and write the following code in the body:

<h2>Upload file</h2>
<iframe frameborder=0 src="upload.php"></iframe>
<div id="board"></div>
<div id="images"></div>

The first DIV with ID="board" is for some messages which will be received before/after the upload process from the uploading document (the document inside th IFrame).
And the second one is for displaying uploaded photos. (If the uploaded files are photos!)


2. upload.php
Create another file called upload.php and write the following code inside it:

<?php

?>
<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript">

<!--
var par = parent.content.document;
var board = par.getElementById("board");
var images = par.getElementById("images");

function removeChildrenOf(s) {
while (s.hasChildNodes())
s.removeChild(s.childNodes[0]);
}

function message(msg, color) {
var message = par.createTextNode(msg);
board.setAttribute("style", "color: " + color);
board.appendChild(message);
}

function upload() {
var loader = par.createElement("img");
loader.setAttribute("src", "img/progress.gif");
removeChildrenOf(board);
board.appendChild(loader);
document.forms['photoform'].submit();
}

function addPhoto(source) {
var img = par.createElement("img");
img.setAttribute("src", "img/" + source);
images.appendChild(img);
}

<?php
if(isset($_FILES['file'])) {
sleep(1);
echo "removeChildrenOf(board);";
$ext = substr($_FILES['file']['name'], strrpos($_FILES['file']['name'], '.') + 1);

if((strtoupper($ext) == "JPG" || strtoupper($ext) == "GIF") || (strtoupper($ext) == "PNG" || strtoupper($ext) == "BMP")) {
copy($_FILES['file']['tmp_name'],'img/'.$_FILES['file']['name']);
echo "message('The photo was uploaded successfully.', '#22AA44'); ";
echo "addPhoto('".$_FILES['file']['name']."');";
} else {
echo "message('Invalid format! The valid formats are: JPG, GIF, PNG and BMP.', '#ff4444'); ";
}
}
?>

//-->
</script>

<form action="" method="post" id="photoform" enctype="multipart/form-data">
<input type="file" name="file" onchange="upload()"/>
</form>

3. The other needed files
Don't forget to create a new folder called js and copy the prototype.js file there.
And create another folder called img and copy a GIF animation called progress.gif there.

Enjoy uploading photos asynchronously!

Ajax News

A major announcement today by Isomorphic Software, the SmartClient Ajax platform is being released free and open source, under the LGPL. SmartClient is the *only* Ajax platform that has been used to build the entire user interface of major software products, including:

• Informatica PowerAnalyzer
• Wily Introscope
• Document Sciences xPression
• Copyright Clearance Center RightSphere
• Intuit Quickbooks TimeTracker Online
• Lontra Service Portfolio Manager

---

Three announcements in one, the final versions of Prototype 1.6.0, script.aculo.us 1.8.0 are now available in addition to the Prototype & script.aculo.us book by Christophe Porteneuve. The latest Prototype 1.6.0 got a lot of API changes that you should be familiar if you worked with the RC0 and RC1, and in total there is 20 bug fixes and enhancements since the RC1, which was released by October 16th. More info on this release could be found on the changelog.

---

Gmail just got a new update this week with a faster navigation and improved contact list manager, in addition to a restructured source code. The big change in this release is probably not visible to the public, and will be certainly noticed in the next months with more exciting features to be released. Google didn't comment on the technologies used in this release but just confirmed that it wasn't GWT a Google spokesperson told us "We don't have anything new to share about the technologies used to create Gmail, but I can tell you that we've used Google Web Toolkit to build parts of Google Base and Google Checkout, and all of Google Mashup Editor"

"In short, the Gmail team has been working on a major structural code change that we're rolling out to users over the coming weeks to make Gmail faster and more flexible.", explained a Google spokesperson, " To start with, you'll notice faster mail browsing, as well as an upgraded contact manager that presents your contact data in an easy-to-read column view. The new code structure also lays the groundwork for some new Gmail features we'll be launching in the coming months."

Back and forward buttons

Ajax is excellent, of course, but it has its own problems as well. One of the most popular ones is that Ajax requests are not registered in the browser history. So you can not undo or redo them by means of the browsers Back and Forward buttons. Google, Gmail and GWT (Google Web Toolkit) support these functions and the reason is in Google Web Toolkit all the Ajax functionalities are not amazingly based on XMLHttpRequest object! Yes they use IFrames as well, so they can handle the browser history with back and forward buttons.
They started developing Gmail as their first Ajax application many years ago and that time XMLHttpRequest was not supported by all the browsers and it was not accepted by W3C also. But in the current time what is the best solution for keeping the history of Ajax requests and handling them by Back and Forward buttons???

XUL, new gift from Mozilla

I was surfing the Net looking for some DOM manipulation methods that I found a new word in the mozilla developer center, it is XUL! It is the first time I've seen this word! Oh what is it really?
It is mentioned there that it stands for XML User interface Language developed by Mozilla.

Seems delicious! ;)
Visit here also!



I may write more posts about this topic!

W3C accepted XMLHttpRequest

Finally W3C accepted the XMLHttpRequest as an standard object.
You can review the draft of specification here.

And from now on all the browsers will have a united way to create an object of this class:

var client = new win.XMLHttpRequest()

And more cross-browser compatibility!

The interface that all browsers have to implement for this object (class) is like this:

interface XMLHttpRequest {
// event handler
attribute EventListener onreadystatechange;

// state
const unsigned short UNSENT = 0;
const unsigned short OPENED = 1;
const unsigned short HEADERS_RECEIVED = 2;
const unsigned short LOADING = 3;
const unsigned short DONE = 4;
readonly attribute unsigned short readyState;

// request
void open(in DOMString method, in DOMString url);
void open(in DOMString method, in DOMString url, in boolean async);
void open(in DOMString method, in DOMString url, in boolean async, in DOMString user);
void open(in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password);
void setRequestHeader(in DOMString header, in DOMString value);
void send();
void send(in DOMString data);
void send(in Document data);
void abort();

// response
DOMString getAllResponseHeaders();
DOMString getResponseHeader(in DOMString header);
readonly attribute DOMString responseText;
readonly attribute Document responseXML;
readonly attribute unsigned short status;
readonly attribute DOMString statusText;
};

It's also natively implemented in IE7 which means no more ActiveX. ;)

Ajax clock, an alive clock using the server time

In this tutorial we will see how easy is to develop a simple clock using the prototype Ajax classes, specifically Ajax.PeriodicalUpdater class.

You can download this tutorial files here.

Developing a JavaScript clock is not so difficult, and there are a bunch of them available in the net. But sometimes we need to show the server's time on the clock, instead of using the clients' own machine time. So the solution is Ajax if we want to have an interactive (alive) clock on the page which is showing the server's time without refreshing the page again and again.


1.
Create a html file and write the following code :

in the head section:

<script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript"> new Ajax.PeriodicalUpdater('clock', 'clock.php', { method: 'get', frequency: 1 });</script>

in body section:

<div id="clock"></div>


2.
Create a PHP file called clock.php containing the following code:


<?php echo date("H:i:s"); ?>

3.
Create a floder called js besides these files and copy the prototype.js in it. You can download the latest version of prototype framework here.

Thats it! Copy all the files in the apache htdocs folder and enjoy!


Explanation:

We have a div with id="clock" in the html body which is our placeholder for displaying the time.
In the JavaScript section we have created a new object of class Ajax.PeriodicalUpdater which is one of the Ajax classes provided by prototype framework.
According to the prototype document:

This object addresses the common need of periodical update, which is used by all sorts of “polling” mechanisms (e.g. in an online chatroom or an online mail client).

So we don't need to provide a mechanism for fetching the time again and again, this object will repeat its job automatically based on its frequency option in the options parameter.
The first parameter is the id of the HTML element which will show the result and the second one is the URL for the request (XMLHttpRequest).

Enjoy Ajax!

First day in new office

...yesterday was our opening day in the new office, we have launched the web portal as well...



Indi (our boss) 's mom is clicking the mouse button to launch the portal...










Tanvir is looking at our bonus envelope to find out how much it is








Indi and his mom



Tanvir


Asela


...having lunch at 4 o'clock ;)


now, today is the first real work day in the new office, I'm posting these photos...