Ajax Islands Tutorial - AjaxCSSJS Class (Part 1)

You can load JavaScript and CSS files dynamically. AjaxCSSJS can do the task for you simply. In this video you can see how to use it to load CSS files.

Ajax Islands Tutorial - AjaxContent Class

In this video, I've shown how to add Ajax links to HTML pages using AjaxContent class and Prototype framework.

AjaxImageReflection

I developed the 5th island which is not actually an Ajax component but DHTML component. Using it you can add nice and customizable reflection effects to IMGs on your pages; Only if your browser supports HTML canvas. It means it doesn't work in IE7.
Something like this:

Go ahead and take a look at examples here. You can download it too.

OpenSolaris

AjaxContent

AjaxContent Class

The 2nd island of Ajax Islands is released. Using this class you can add Ajax links to your HTML pages without getting involved with JavaScript and XMLHttpRequest. You can associate a link (An A tag or any kind of HTML element as a link), a container (A DIV tag or any other container element) and URL(In fact, from the same server). So when the user clicks the link, the content of the URL will appear in the container. You can also introduce an image as a loading indicator to be displayed at the center (horizontally and vertically) of the container, so the user can wait for the new content to be fetched.

Download AjaxContent and take a look at live examples

The class has a very nice and powerful feature:

The last argument of the constructor, which is supposed to be a Boolean value, determines that if the script tags in the content should be added to the document scripts or not!!! (Not using a simple eval). So if you pass a true value to this argument, all script tag from the content will load and can be accessed from the current scripts of the page. 

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.

Galileo - Java Plug-in for RIA

I recently started to translate a book about "Ruby on Rails"... seems a great job, if I can have it done by the predicted deadline.

I was reading an article titled "Can the Java Plug-in Compete?" that first lines of it really fascinated me...
It is about a RIA framework - actually the client side part - which is using Java Plug-in, and Java programming language. Looks very interesting, even imagination of having those nice features of the language which we use in the server side, at the client side too. You can download and read more about the framework here! But remember that you need a Java-enabled browser.

Blogger on my W960

I'm in UAE again. I've just installed "Blogger" software on my phone and am learning how it facilitates to send a new post on your blog. I'm staying in my frind's apartment, so let me select his old but nice photo for test...

My first Java program in Linux

Finally I succeeded in installing Eclipse on my Ubuntu Linux. It detects the gcj which is installed by default on the Linux. Since JAVA_HOME was set successfully. I started coding to check the differences of executing Java programs on a new environment! I checked some simple console programs and then I wrote a simple JFrame program. The frame was so nice in GNOME environment but as I noticed instantly the frame was not responding to the events very well during the resizing, maximizing and ... And it failed to responded when I tried to close it!!! Later on I decided to change my JVM to the Sun JVM. I installed JDK 6u6 and altered JAVA_HOME. Oh yes! now it works fine!!! I should say it could be the gcj fault!

Please write your similar experiences on this topic.

Pronunciation of Linux

Linus Torvalds, creator of Linux, explains how the word should be pronounced.

Sudo is older than me!

I installed my first Ubuntu Linux last night! It is actually my first Unix-based OS that I really got fascinated by it. I'm installing LAMP (actually AMP since L is installed already). During the execution of the commands I got interested in the history of Sudo. I know what it is for and I guessed it should be a new command so I looked for a brief history of Sudo and I found Sudo is 4 years older than me! lol...

AjaxForm

Having my new web project started, I'm thinking about an agile solution for posting forms in an Ajax way with minimized JavaScript code.
Using prototype, my former solution was a functional approach...but now I'm thinking for a better OO approach.
Let see what can I do! I will put my solution here in next days.

Javascript Import / Include

We can load JS files in the HEAD part of a HTML document, but have you ever needed to load a JS file from another script?

you can use this code:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'snip.js';
document.getElementsByTagName('head')[0].appendChild(script);


And if you don't want to write it again and again, and prefer to prevent loading a JS file more than one time you can use this clean function:


function $import(path){
var i, base, src = "grid.js", scripts = document.getElementsByTagName("script");
for (i=0; i<scripts.length; i++){if (scripts[i].src.match(src)){ base = scripts[i].src.replace(src, "");break;}}
document.write("<" + "script src=\"" + base + path + "\">+ "script>");
}

// example

$import("controls/grid.js");
$import("http/request.js");

But I strongly recommend you to use the AjaxCSSJS calss instead.


Gmail in Thunderbird 2

Thunderbird 2 is offering a default configuration for Gmail POP service!

Oh all those cats!!!

Amir Hossein has posted about a book written by Hank Rainwater here which is about leading software teams.
You can download the eBook here! :)

Goodbye Dubai

...it is my last day in office, I'm not supposed to come to office today but I'm here to solve some problems in the live version of portal...I will go home by end of the week. :) The company has some plans for bringing me back to Dubai to work for them 6 months more...and if they can provide me the visa I should come here since I've promised them to do that due to their high level of flexibility during my final examinations. But I hope that they don't bring me back again ;)...



View Larger Map