Google Chrome

I've just installed Google Chrome web browser. I can say it's a Google product indeed: simple, powerful and elegant. 

JavaScript Object Model - OO Programming

JavaScript is a C++-like scripting language and like most of its relatives let the programmers to write in both object oriented and procedural style. But there is a big difference between JavaScript and other popular OO languages such as C++ and Java which are class based languages.
OO languages are either class based or prototype based. JavaScript is one of prototype based languages out there.
There are lots of references and tutorials about OO programming in JavaScript in the Net. Most of them are so useful and explain a single aspect of OO programming in the language. Some are based on a particular framework such as Prototype, JQuery ... while some explain the pure JavaScript rules.If you are curious to read yet another nice article about JavaScript Object Model, I strongly suggest you to spend 15 minutes to read JavaScript's class-less objects by Stoyan Stefanov.
The article explains the dynamic features of the JavaScript and explains different ways to implement inheritance in the language and then compare them with Java's way.

Current version of AjaxCSSJS

Ajax Islands page!
You can download the AjaxCSSJS class here too.

AjaxCSSJS - JavaScript and CSS on-demand

Ajax has converted web pages to web applications!!! I mean we don't have separate pages for doing different things. Different functionalities are done in one single page nowadays. Sometime the users don't face a new page (refresh) even when they click a navigation link, and the new content will come to the page in an Ajax manner. It is excellent for users, but it brings a new problem for developers. Any page has its own layout and functionality, naturally it needs its own CSS and JavaScript files as well. It is not rational that we load all CSS and JavaScript files in the first main page, because it is possible that the user never click on some links and never use some functionalities in the website (web app). So we must load the CSS and JavaScript files when we need them. On the other hand we won't have any chance to refresh the page, so we can not load them by adding the <link rel=STYLESHEET and <script type="text/javascript" to the head section of the document.

Ajax Islands Solution
Download AjaxCSSJS here.
You can load JavaScript and CSS files dynamically (on-demand) by means of AjaxCSSJS which is the 4th class of AjaxIslands (the 2nd and 3ed classes are not released yet!).
You can load your CSS or JavaScript files this way:

new AjaxCSSJS('css/grid.css', 'css');
new AjaxCSSJS('js/ajaxform.js', 'js');

You load a JavaScript to use it! don't you?
I mean usually you call a function or make an object after loading a JavaScript file. In this example you are going to make an AjaxForm object like this:

new AjaxCSSJS('js/ajaxform.js', 'js');
var af = new AjaxForm("frmProfile", "profile.act.php", "loader1.gif", "profileBoard");

But your second line of code will fail!
The browser try to load the ajaxform.js asynchronously! It means that the browser won't wait for the file to be loaded and will continue executing the rest of the code. So the second line which is trying to instantiate the AjaxForm will run before the file is loaded!!!
Don't worry! AjaxCSSJS class has a nice feature to solve this problem too!
You can pass a function as 3ed argument to the constructor of the class. This function will be executed as soon as the browser loads the file. So we should change the code this way:

new AjaxCSSJS('js/ajaxform.js', 'js',
function() {
var af = new AjaxForm("frmProfile", "profile.act.php", "loader1.gif", "profileBoard");
});

Don't hesitate to comment on this class.

Trick in AjaxForm

There is a small problem in using AjaxForm or any other Ajax tools, that is the visitor may cause JavaScript errors to be displayed if he/she triggers a function call before the JavaScript libraries or tools loads completely (Of course only if you try to load the JavaScript files dynamically!).
In the case of AjaxForm, it is possible that the user click submit button while the AjaxForm or Prototype is not loaded.
Solution is to prevent the user to submit the form before the libraries (JS files are loaded). So you must hide the submit button by setting its CSS attribute visibility to hidden. The AjaxForm object will make it visible automatically as soon as it is created.
So you should write the form this way:

<form id="form1">
username:
<input type="text" id="username" name="username" />
<br />
password:
<input type="password" id="password" name="password" />
<br />
<input style="visibility: hidden" type="submit" value="send" />
<input type="reset" value="reset" />
</form>

AjaxForm methods

Method	Description
submit()	You can submit the form by calling this function, but it is not necessary to use it usually, for example you can set the last field onBlure event to a function which calls this method.
reset()	You can reset the form and clear the message board by calling this method, but it is not necessary usually and it is called from other methods of the class.
resetForm()	You can reset the form but not clear the message board by calling this method.
hideForm()	This method will hide the form element (form tag). You may call this function when the server script has processed the data and the process was successful and user won't need the form anymore, similar to the login forms after successful login.
showMessage(msg, color)	This method let you show a message to the user such as data validation messages. The firs parameter is the message itself which is string and the second one is the color of message which is string too and could contain a color name e.g. "red" or a color value e.g. "#FF0000"
focusForm()	By calling this method the first input of the form will receive the focus. You may call this method after creating the object in order to make form ready to receive user's data.

AjaxForm

After a long break in the development process of those Ajax components I promised to release here, I eventually, convinced myself to put the latest but still incomplete version of AjaxForm (the first component I decided to design and develop) here. I hope you enjoy its design and ease of use, that let you ajaxify a form by creating an object and calling some methods of that object from both client side scripts and the script which is coming from the server side result.
e.g.

var ajaxForm = new AjaxForm("frmEditUser", "edituser.act.php", "loader1.gif", "editBoard");
ajaxForm.focusForm();

But don't forget that all of these components which I'm working on are based on Prototype.js framework.

So in all examples I assume that you have the following line in your document's head section.

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

You can download the current version of AjaxForm here.

The design is based on the idea that each form has 4 main elements to be working as an web 2.0 form. (it is my idea, you may disagree with that)

1. The form itself - HTML element (tag) of form, so we need to pass the ID of the form element to the AjaxForm object.
   
2. The server side script which the forms's data will be sent to, so we pass the URL of the script to the object.
3. The image that should be displayed as a loading animation while the user is waiting to receive the server result. We need to pass the URL of the image file to the AjaxForm object.
4. The exact portion of the page that the animation image should be displayed, and also the place that other potential messages to the users should be displayed. So we pass the ID of an HTML element to the object.

The 4th factor could be divided to 2 separated factors, one HTML element for the animation image and one for the user messages, but I decided to have one for both, in order to keep the concept simple. I may add the feature in the final version. Anyway, according to these 4 factors, we can create an object of AjaxForm class like the following codes.

Example1

First add the followings to the head section of your page:

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

The HTML form.

<form id="form1">
username:
<input type="text" id="username" name="username" />
<br />
password:
<input type="password" id="password" name="password" />
<br />
<input type="submit" value="send" />
<input type="reset" value="reset" />
</form>

The place-holder for messages and the animation image.

<div id="board"></div>

Main part (instantiating the object)

<script type="text/javascript">
<!--
var ajaxForm = new AjaxForm("form1", "action1.php", "loader1.gif", "board");
ajaxForm.focusForm();
//-->
</script>

Don't forget to locate the following files in the same directory as your page directory:

• prototype.js - you can download it here.
  
• ajaxform.js - download it here.
  
• loader1.gif - any gif animation
• action1.php - a php file that will handle the request data

Now it's time to write the server side code. The server side script could be developed in any technology such as Java servlet, JSP, PHP, PERL, Python, ASP, ASP .NET and ...
In this example I write it using PHP (action1.php).

action1.php

<?php
$username = $_POST['username'];
$password = $_POST['password'];

$login = false;

if (empty($username)) {
$message = "You should enter your username!";
$color = "red";
} else if (empty($password)) {
$message = "You should enter your password!";
$color = "#FF7000";
} else if($username == 'ehsun' && $password == '7') {
$login = true;
$message = "You have logged in successfully.";
$color = "#335599";
} else {
$message = "Your username or password is incorrect!";
$color = "#9F9000";
}

echo "<script>";
echo "ajaxForm.showMessage('$message', '$color');";

if ($login) {
echo "ajaxForm.hideForm();";
} else {
echo "ajaxForm.focusForm();";
}

echo "</script>";

sleep(3);
?>

The sleep command is for simulating the delay! you don't need it in the real codes.

As you may noticed you have access to the AjaxForm object which has been created in the client side from the JavaScript code which is coming from server side script, that is very useful feature!
The AjaxForm has some other methods that I will explain in the next posts. Please give me your suggestions.