Codology

jsfiddle Keyboard Shortcuts

noreply@blogger.com (Ryan) — Sat, 28 Jan 2012 10:23:00 +0000

As is usual with me while working with editors, I press a lot of the wrong buttons (whatever that means). Well, sometimes the consequeces are good like what happened to me when I accidentally messed around with the Shift and Ctrl buttons while working with jsfiddle. I just found myself a few keyboard shortcuts. Check em out!

Shift between editor windows

Ctrl + UpArrow, Ctrl + DownArrow

Show/Hide the 'Framework' panel on the left

Ctrl + Shift + UpArrow (Yea, you press the same combination to toggle between show and hide)

Run the code you've just written

Ctrl + Enter

Happy Programming :)

Signing Off

Ryan

jQuery : Exploring Deferred and Promise

noreply@blogger.com (Ryan) — Sat, 28 Jan 2012 09:56:00 +0000

The jQuery Deferred object was introduced as a part of the 1.5 release of the framework. The deferred object in jQuery is based upon the the concept of Promises. In order to understand all about deferred objects, it would wise to try to understand what a Promise is all about.

Many times in our daily lives, we cannot rely on the outcomes of certain actions. However, we may still need to make decisions about the future depending upon an anticipated outcome. All we know for sure is that we are gonna get an outcome. Lets just say that we wrap the term 'outcome' in fancy looking gift wrapper and call it a 'Promise'.

So, what is a 'Promise'? Well, its nothing more than an object returned by a method based upon which you can determine a future course of action.

Lets take a real world analogy.

You decide to take up a job interview for company X - (This is a function that you intend to perform)

The interview has an outcome. You either get the job or you dont.

But you need to have a plan no matter what the outcome of the interview is. And you need to plan that now. You cannot plan it in the future after the interview. For example, you may need to book a travel ticket, ,or may have to book a place for a party if the interview goes through. If it does not go through, then you may have to buy up some books and apply to company Y.

If we were to write this plan programmatically, we would end up writing something like this.

candidate.attendInterview().then(
successFunction(){
 //Book tickets.
 //Order a crate of beer for a party!
 },
failureFunction(){
 //Buy some more books to brush up
 //Apply to company Y
}
);

Now what is interesting about this is that even though you dont know the exact outcome of the attendInterview function, you are able to chain a method to the 'supposed' outcome and specify the functions that should be invoked upon completion of the 'attendInterview' function. This is possible because the attendInterview function would return a 'Promise' object. An interesting aspect of this pattern is the concept of promise resolution. Promise resolution is said to happen when the task that returns the promise completes in reality. So, when you return a Promise object from the attendInterview function, the Promise is said to be unresolved. Only when the result of the operation is available, i.e. when the actual outcome of the interview is obtained after a period of time, the promise object is said to be resolved. Upon resolution, based upon the result of the resolution, either the successFunction or the failureFunction will be invoked.

The concept of promises is important because of three main reasons

It helps you to decouple the logic of future handlers from the actual task invocation.
You can add any number of future handlers.
If you add a handler to an already resolved Promise, the appropriate(success of failure) function would fire immediately.

The advantages of using a promise become much more clear when used in the context of ajax requests. That's because the result of an ajax request is available at a future point of time, and the amount of time required for the completion of an ajax request cannot be determined beforehand.

jQuery introduced the Deferred object in the 1.5 version of the library to handle this scenario. The Deferred object is actually an implementation of the Promise interface. It provides all the features of a Promise, and in addition, it also allows you to create new deferred objects and attach future handlers to them and resolve them programmatically.

Lets understand the jQuery deferred object in terms of an ajax request.

In versions of jQuery prior to 1.5 , in order to attach a success or a failure handler to an ajax request, one would have declare a success callback function when defining the ajax call. Although much more convenient than the under the covers xmlhttprequest handling, this scheme had one drawback. A function that would be invoked in the future (success or failure) had to be defined as a part of the ajax function. Moreover, one could not attach multiple success or failure handlers to the ajax call.

Here is how one would request using a version of jQuery prior to 1.5

$.ajax({
  url: "test.html",
  success: function(){
    alert("ajax request succesful");
  },
  failure: function(){
    alert("ajax request failed");
  }
});

As shown in the code above, it can be see that you are bound to specify the success function while making the ajax request. Moreover there is only one available callback for success and failure each.

As of jQuery 1.5, the introduction of the Deferred changed the game drastically. And its a progressive change to be honest, because it not only adds more effectiveness to the ajax functionality, but it also adds more functionality to the framework as a whole. We shall see how.

Let us now invoke the same ajax call that we saw earlier using a version of jQuery > 1.5.

var myRequest = $.ajax({  url: "test.html" })
 .done(function(data){ 
  alert('ajax request was successful');
  })
 .fail(function(data){ 
  alert('ajax request failed');
 });
 
 //After a few more lines of code
 myRequest.done(function(data){
  $('div.myclass').html('Ajax Response ' + data);
 });

As you see, this is far better than the previous method of invocation of the ajax request. The done and fail functions are used to register callbacks on the object returned by the ajax call. The ajax call returns a Deferred object which implements the Promise interface. Since its a promise, you can attach handlers to it so that when the request completes, the future handlers would be invoked.

Not only that, as you see in the example, we were also able to attach a new success handler (the argument to the done function) at a later point of time. If, until reaching that line, the ajax request has not been completed, in that case the function will be queued and will be invoked at a later point of time. If the request is already complete, then the function will fire immediately in case of success. In a similar way, you can add multiple functions as a to the failure queue as well.

This approach gives you a lot of flexibility in writing code and also makes the code more legible. The Deferred object has a number of other functions. One of them that is pretty interesting is the when() function. This function has a lot of appeal because it allows you to group together deferred objects and then set up future handlers after all the objects have been resolved or rejected.

This opens up the door to create interfaces that depend upon input from a number of sources but need to be rendered together. For example, a certain div contains information based upon a user choice. And the user selection leads to the firing of 2 different ajax requests. If your data is of the nature that the information would make sense only if the data from both the requests are shown together, then using the when function becomes a perfect candidate for such scenarios.

In the below example, you can issue a request to two different url's and only after the data from both the url's is retrieved, the future function that is specified as the argument to 'done' will be invoked.

$.when($.ajax("mypage1.html"), $.ajax("mypage2.html")).done(function(a1,  a2){
     $('div.page1details').html(a1[0]);
     $('div.page1details').html(a2[0]);
  });

Observe that there are 2 function calls inside the when function. You can have as many functions as you may like. The only criteria is that the object returned from the function call should be either a Promise or a Deferred. If it is a promise, then well and fine, If it is a Deferred, the promise() function is invoked and the Promise object is retrieved from the deferred object. A parent Deferred object is created and this parent object keeps track of all the deferred objects of the functions defined inside the when function. Once all the functions declared inside the when function resolved, the done function will be invoked. However if any of the functions declared in the when function fails, the failure callbacks are invoked without waiting for the resolution or rejection of the remaining functions.

You can easily use the done and the fail functions to register future callbacks for a deferred object. Another way you can do the same would be to make use of the then function. If you make use of the when - then function combination, it becomes much more easier to read the code, grammatically, because it appears to form some kind of a sentence. Lets see an example of using the when-then pair, and this time we shall also see how one can register multiple callbacks

$(function(){
    
    function fun1(data1, data2){
        console.log("fun1 : " + data1[0].query + " " + 
                    data1[0].results.length);
        console.log("fun1 : " + data2[0].query + " " + 
                    data2[0].results.length);
    }
    
    function fun2(data1, data2){
        console.log("fun1 : " + data1[0].query + " " + 
                    data1[0].results.length);
        console.log("fun1 : " + data2[0].query + " " + 
                    data2[0].results.length);    }
    
    function fun3(data){
        console.log("fun3 called upon faliure");
    }
    
    function fun4(data){
        console.log("fun4 called upon faliure");
    }    
    
    var successFunctions = [fun1, fun2];
    var failureFunctions = [fun3, fun4];
    
    $.when(
        $.ajax("http://search.twitter.com/search.json", {
            data: {
                q: 'jquery'
            },
            dataType: 'jsonp'
        })
    , 
        $.ajax("http://search.twitter.com/search.json", {
            data: {
                q: 'blogger'
            },
            dataType: 'jsonp'
        })
    ).then(successFunctions,failureFunctions);
    
});

In the above example, I created 4 functions. 2 of them will be invoked upon success and 2 will be invoked upon failure. As you can see, instead of passing a single function as a parameter to the then(), I passed in an array of functions for the success as well as the failure callbacks. Another point to be noted here is that since we have 2 ajax requests in the when() function, the success and failure methods can accept 2 arguments. Each argument will contain the jqXhr object that was returned by the corresponding ajax call. So, the above example demonstrates how to use multiple callbacks, and and also how to use the data that is obtained from a json ajax request.

You may also note that since the ajax functions are making an JSONP request, I have referenced the JSON object in the success callbacks using data1[0] and data2[0] respectively. The data1 and data2 objects are actually arrays of the form [JSONObject, "success",jqXHR]. In case the request was an ordinary ajax request instead of a jsonp request, you would instead have to make use of the jqXHR object and retrieve the responseText as usual.

Until now we have seen examples where the deferred object was the object that was returned by the ajax call. Although used extensively with ajax, the deferred object can be used in other places as well. An example of that would be running future callbacks after a set of animations have finished executing. You can group together the animations in a when() function and then using a deferred object, you can easily invoke future callbacks using the then() function.

The catch here is that animations do not return deferred objects. They always return a simple jQuery object. This is where the Deferred constructor comes to the rescue. The deferred constructor can be used to create a new deferred object and then you can wrap your custom code inside the deferred object and return the wrapper instead of the jQuery object.

Lets see an example for the same. In the following code, we are going to issue an ajax request, and resize a div. After both these tasks are complete, we are going to display the content retrieved via ajax in the div.

$(function(){

    function successFunction(data){
        console.log("successfunction");
        $('div.animateMe').html('Results : ' + data[0].results.length);
    }    
    
    function animateDiv(){
        //As per the documentation, the argument that is passed
        //to the constructor is the newly created deferred object
        var dfd = $.Deferred(function(dfd){
            $('div.animateMe').animate({height:'200px'},2000,dfd.resolve);
        });
        
        return dfd;
    }
    
    function failureFunction(){
        console.log("failureFunction");
    }
    
    $.when(
        $.ajax("http://search.twitter.com/search.json", {
            data: {
                q: 'jquery'
            },
            dataType: 'jsonp'
        }),animateDiv()
    ).then(successFunction,failureFunction);
});

You can also see a jsfiddle here

http://jsfiddle.net/ryan_s/6kRAa/

This example is pretty simple because it does nothing but wait for the ajax request as well as the animation to complete before resolving the Deferred object. The main point of interest of this example is the creation of a Deferred object within the animateDiv function. Within this function, we first create a new Deferred object. The constructor of the Deferred object takes a function as a parameter which is invoked just before the constructor is about to return. This function is passed the newly created Deferred object as an argument. Within, this function, we did an animate and upon animation completion, we indicated that the framework resolve the diferred object by passing the resolve function of the diferred object as an argument. In the next line, we simply return the newly created Deferred object.

In the above example, you might have noticed that we made use of a 'resolve' function. This function allows you to explicitly resolve a deferred object. While the ability to resolve a deferred object programmatically is desirable for non ajax requests, the same cannot be said for ajax requests. That's because an ajax request is said to be resolved only when a response is received from the server. So the resolution of an ajax request takes place internally in the ajax function and should not be available to the programmer directly.

For non ajax requests, as in the example above, the programmer can resolve the deferred object based upon the specific requirement. Since it is the deferred object that has the resolve method and a number of other additional methods, the ajax request actually returns a Promise. This lets you invoke only the methods of the promise interface on the resultant object thereby preventing an explicit invocation of a programmatic resolve before the ajax request actually completes.

When you are creating an non ajax deferred object, there is another method - reject, which indicates a failure and invokes the functions of the failure queue. Without any doubt, the deferred object has small but useful api.

Summing It Up

The deferred object in jQuery is an implementation of the Promise specification. This means that you can a promise where-ever a Deferred can be used.
Future handlers can be added to promise objects.
The future handlers are invoked upon the resolution(success) or the rejection(failure) of the invoked function. You can attach multiple future handlers to any deferred object.
The future handlers can receive parameters, which represent the information that was used to resolve the deferred object.
Non ajax objects can be wrapped in a deferred object by making use of the Deferred constructor.
The jQuery.when method can be used to group together a number of deferred objects and to attach future handlers to them.
Success handlers using the when function are invoked once all the deferred objects are resolved.
Failure handlers using the when function are invoked if any of the deferred object fails irrespective of the status of the remaining deferred objects.

I hope this article has been helpful in helping you gain an understanding of the concept of Promise and Deferred objects. There are a couple of links below that have good explanations of the same. I suggest that you take a look at them too if you still only have a vague idea of things.

Also, there might be a thing or two, that I might have misunderstood! Make sure you point them out!

Many thanks :)

Links and References

http://msdn.microsoft.com/en-us/scriptjunkie/gg723713.aspx
http://addyosmani.com/blog/digging-into-deferreds-1/
http://stackoverflow.com/questions/6080050/how-does-jquerys-promise-method-really-work
http://lithostech.com/2011/04/jquery-deferreds-and-the-jquery-promise-method/ You might want to read about the ajaxPrefilter function in jQuery before you start reading this one.
http://blogs.msdn.com/b/ie/archive/2011/09/11/asynchronous-programming-in-javascript-with-promises.aspx
http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/
https://github.com/jquery/jquery/blob/1.5/src/core.js#L892
http://www.erichynds.com/jquery/using-deferreds-in-jquery/
http://stackoverflow.com/questions/4869609/how-can-jquery-deferred-be-used
http://intridea.com/2011/2/8/fun-with-jquery-deferred?blog=company
https://docs.google.com/present/view?id=dpr5j57_16fpvxznfh : This is a short and sweet presentation.

And then the most important of them all

The jQuery Deferred Documentation

Happy Programming :)

Signing Off
Ryan

JSON and JSONP

noreply@blogger.com (Ryan) — Thu, 26 Jan 2012 17:57:00 +0000

While writing one of my blog posts, I realized that there was something odd when i saw something like 'JSONP'. Now, I am aware that JSON is quite a simple way to format javasript. Heck, its just a simple object format. But then what the heck is JSONP?

A bit of googling led me to a couple of discussions and the wiki page that explains all about JSONP.

If in doubt, you might wanna take a look at these.

http://en.wikipedia.org/wiki/JSONP

http://stackoverflow.com/questions/2067472/please-explain-jsonp

As per my understanding, JSONP is nothing but a smart way to issue cross browser ajax requests. What exactly happens is that when you are making an ajax request to a JSONP enabled server, you need to pass a special request parameter called 'callback' that refers to a function in the current page. This function would take a parameter of type object and simply return this object.

For e.g, this is what your url might look like

xyz.com?callback=callbackFunction

And here is how the callback would look like.

callbackFunction(data){
return data;
};

The above code would simply return whatever data is passed as the argument.

When the JSONP server receives your request, it simply wraps the JSON string in the callback name. For example, if the server was to send this object.

{name:'xyz','org':'xyzcorp'}

It will send the following instead

callbackFunction({name:'xyz','org':'xyzcorp'});

And the above code is nothing but a straightforward invocation of your callback. This is considered as an invocation because when you issue a jsonp request, under the hood, instead of sending an xmlhttp request, which is used only for same-domain requests, an new script tag is created and the value of the src is set to the url. This is the only way to perform a cross domain ajax request because the script tag is the only html element which can be injected from a different domain.

In a nutshell, here's what happens

There should be a callback function in the current page that returns its argument.
A script tag is created Set the value of the script tag is set to the url and the callback is added to the url
The request reaches the server, which constructs a JSON string and wraps it with the callback name.
This string when returned, act as a script, since it was a request for a script tag.
Upon return, it is executed by the browser, and since it is nothing but a method invocation, your callback would be called.
And poof, since your callback simply returns the data that you received from the server, you get the JSON object.

If you are using jQuery, you may observe that jQuery creates a new random callback function for each request. Now I am not sure why they do that. Maybe its because of some security reasons. But since it happens under the hood, you dont need to worry much. All that you need to do is to specify the format of the data type as jsonp when issuing the ajax request.

Here's how you can do it

$.ajax("http://xyz.com",
{dataType: 'jsonp'}
);

As you see, its pretty simple. All you needed to do was to mention the data type, and jQuery took care of creating a callback and returning the JSON object retrieved from the server.

Hope that helped!

Happy Programming :)
Signing Off

Ryan

Reference Types In Java - Part 1

noreply@blogger.com (Ryan) — Thu, 29 Sep 2011 18:27:00 +0000

Lately, I have been learning a thing or two about the JVM internals. And one of the most interesting things that I came to know about was, the existence of different types of references in Java.

To go about it, there are actually 4 kinds of reference types in Java.

Strong references.
Soft references.
Weak references.
Phantom references.

These references are different solely because of the existence of a garbage collection mechanism in the JVM. That is because, the decision of reclaiming memory from the object heap depends not only on the fact that there are active references to an object, but also on the type of reference to the object.

Lets try to see how each of them differ from one another.

Strong references

As a normal programmer(that is, if you consider programmers to be 'normal'), we are most likely to encounter only the most ubiquitous form of references - Strong references. The name of this reference type should by itself give you an idea of the importance of the reference in the opinion of the garbage collector. Any object with an active strong reference to it, will never be garbage collected(except in rare circumstances, such as cyclical references).

Say, for example, when you create a class Employee, and you create a reference to a new employee object like this

Employee emp = new Employee();

you are actually creating a strong reference. An object to which a reference is created in this way will be eligible for garbage collection only when the reference is to it is pointed to null.

So, if you write this

emp=null;

and there are no more references created to this object until the garbage collector runs again, this object will become eligible for garbage collection, and is most likely to be garbage collected.

So, strong references are pretty simple to understand, probably because most of the code that you commonly write mainly consists of strong references. And we let the smart garbage collector take care of cleaning up the memory for us.

However, there might be cases where you need more control over the lifetime of an object. What if you want to keep some kind of a pool of objects, but still want it to be garbage collected if your JVM is running out of memory? In such cases although you may want a reference to the object most of the time, you are willing to let go of a memory reference for a better JVM performance, when times are crucial. This is where the other kinds of references come into the picture.

The 3 remaining Reference types that I discuss here are subclasses of an abstract class Reference.

Soft references

The soft reference class is used to create a soft reference to an existing object that is already referred to by a strong reference. The actual object on the heap that is being referred to is called the referent.

In order to create a SoftReference to an object, you first need to create a strong reference to that object and then pass that object as a parameter to the constructor of the SoftReference object, as shown in the code below.

Employee emp = new Employee(); //1

SoftReference<Employee> softRef = new SoftReference<employee>(emp);

In the above code, a few interesting things have happened.

In line #1,a (referent)object is created and allocated memory on the heap that represents the Employee object.
Again, in line #1, a strong reference is created to the newly created employee object. We call this reference 'emp'.
In line #2, a new SoftReference object is created and allocated memory on the heap. This is a special object because it contains an internal reference to the (referent) object passed to it in the constructor, i.e. in our case, the actual Employee object on the heap.
Again in line #2, a strong reference is created to the SoftReference object on the heap. We call this reference 'softRef'.

So, in total, we have 2 strong references created. And the object that represents the soft reference, internally holds a reference to the actual employee object.

So what is it that makes soft references useful? Soft references are considered to be a special kind of reference by the garbage collector. Let us assume that at a later point of time, we nullify the 'emp' reference as follows and no new strong references were created to this emp object.

emp=null;

Now lets assume that the garbage collector decides to run at this point of time. What it will see is that the current employee object only has a soft reference pointing to it, and no strong references. The garbage collector may optionally choose to reclaim the memory occupied by the employee object. But what makes soft references even more special is the fact that the garbage collector will always reclaim the memory of objects that have only soft references pointing to them before it throws an OutOfMemory Error. This gives the garbage collector some sort of a last chance to save the life of the JVM.

At any given point of time, if the garbage collector has not yet reclaimed the memory of the actual referent object, you can get a strong reference to the referent via the get method.

Employee resurrectedEmp = softRef.get();

The above code resurrects the employee object in the sense that the garbage collector will not consider it a candidate for garbage collection because it now has a Strong Reference pointing to it.

This makes soft references highly useful in creating object pools, where the size of the pool needs to be dynamic. If you do not know the size of a pool when you begin, or choose not to set a minimum or a maximum size on the object pool, instead you want it to grow dynamically, and at the same time, you want to give the JVM a chance to cleanup unused objects, in that case SoftReferences are a perfect fit.

Weak References

Weak references are even more awesome. Thats because seemingly the garbage collector has no regard for an object that only has a week reference. What that means is that the garbage collector will make it eligible for garbage collection because object only has a week reference pointing to it. Not only is that awesome and useful, but desirable as well in some scenarios.

For example, let us assume that you need to maintain some metadata related to a user per database connection. In such a case you will be tempted to use a hashmap where you can store the database connection as the key and the user metadata as the value. However, this approach has one drawback. When the database connection has been cleaned up by some other part of the application, then you need to ensure the removal of the connection from the hashmap as well. If you forget to do such a thing, a reference to the connection will remain in the hashmap thereby preventing it from being garbage collected. This means that over a period of time, you are bound to end up with a very large hashmap, a clear indication of a memory leak. And the JVM will eventually spit out a OutOfMemoryError.

So, what do you do in such cases? Oh, of course, Weak referencnes to the rescue!

You can simply create a weak reference to the object, in the same way that we created a soft reference.

DBConnection emp = new Employee(); //1

WeakReference<DBConnection> weakRef = new WeakReference<DBConnection>(emp);

This creates a weak reference to the DBConnection object. This means that if at any future point in of time during the execution of the program, if the garbage collector detects that the only reference to the actual DBConnection object is a Weak reference, then it will mark the object for garbage collection.

Weak references are primarily used in conjuction with a WeakHashMap. This is a special kind of hashmap where the keys are all made of weak references. So, in our database example, we could effectively create a weak reference of the Database connection and store it in the WeakHashMap and the metadata of the user as the value in the hashmap. In this way, when the application no longer holds a strong reference to the Database connection, the only reference to the database connection object will be the one that we have via the WeakReference entry in the WeakHashMap. When the garbage collector detects this, it will mark the object for garbage collection. When the object is garbage collected, the entry from the WeakHashMap will be removed. And then, finally, we can all go home and rest in peace.

So, colloquially speaking, this is what the Soft reference and the Weak reference tell us about themselves.

Soft Reference : Hey! I am a soft reference. Ill take your shit as long as the JVM has patience. When it begins running out of patience(i.e. about to throw an OutOfMemoryError), i take no more. Your object will be gone. And then you simply have to create a new object.

Weak Reference : Hey! You know what. I am even cooler than the WeakReference. Coz I wont take your shit at all. The moment you lose me, if the JVM detects that you're no longer around, am gonna punch you in the face and run away! (i.e. Marked for garbage collection). Can you dig it sucka!

As you see, our two awesome friends, Softy and Weaky, certainly have some ego there. But they are pretty useful, at crucial times.

Before I proceed any further, there is one more puny lil thing that you might need to know. Oh! Did i just say 'might'. Oh no.. I meant, you should know. And that is ReferenceQueues. ReferenceQueues are some sort of a queue where the JVM can store objects of type reference once it has decided to take some action on the objects to which they refer.

What I mean to say is, let us suppose you have a weak reference which points to an object in the heap. And that object has been left lonely and desolate by the rest of the application.i.e. No strong references to it. And the garbage collector detects this object during its garbage collection cycle. Since this object only has a weak reference to it, the garbage collector will mark it for garbage collection. But at the same time, it looks if there is a reference queue associated with the weak reference that points to this object. If yes, it puts this weak reference in the reference queue to indicate that the object has been marked for garbage collection. The subtle point to be noted here is that even though the object has been marked for garbage collection, garbage collection may not have happened yet. This may be because the object has a finalize method, which the JVM needs to execute before reclaiming memory.

This also means that you can, but should not,unless deemed necessary, resurrect an object in the finalize method and create a strong reference to it. But when you do that, the weak reference still remains en-queued in the ReferenceQueue. Overriding the finalize method to resurrect an object is a rare case, but since it is one of the options that the JVM supports, it is therefore something that needs to be considered. Nevertheless, when you do such things, its almost equivalent to artificially manipulating the life of an object. That's because the second time when the object becomes eligible for garbage collection, the finalize method wont run, which is a good thing because if you run it again, its simply gonna revive itself. So, practically speaking, an object in the JVM has only one spare life. You get just one medical kit at the max. And thats it. You screw up again, and ur doomed. Your object will be on mars, having a boss fight with the garbage collecting thread of the JVM, which will eventually win, and reclaim the memory of the object.

The same facts about the reference queue hold true for Soft references as well.

In order to associate a weak or a soft reference with a reference queue, you can use the 2 argument constructor as shown below.

Employee emp1 = new Employee();
Employee emp2 = new Employee();

ReferenceQueue softQueue = new ReferenceQueue();
ReferenceQueue weakQueue = new ReferenceQueue();

SoftReference softRef = new SoftReference(emp1, softQueue);
WeakReference softRef = new WeakReference(emp2, weakQueue);

Now, aint that simple? Yes of course it is.

Then again, you haven't met the Phantom yet, have ya?

The phantom reference is a place where it gets all the more interesting.

Phantom References

Phantom references tell a long tale themselves and its a topic that warrants a blog post of its own. However, in this blog post, ill give a brief idea about what they are. Phantom references are quite similar to Strong and Weak references in the sense that the garbage collector will collect the referent object if the only reference to it is the phantom reference. But that's where the similarity ends.

What makes Phantom references are unique is the way in which they are used along with a reference queue. A phantom reference is always associated with a references queue during construction time. This is because phantom references are enqueued in the queue only when the the object is about to be garbage collected, after the finalize method(if any) has been executed on it. Calling a get() on the Phantom reference always returns null. And that is quite appropriate because the finalize function has already run on the referent object. So, there should be no 'legal' way of resurrecting the object (resurrecting i.e. creating a strong reference). This may at first seem to make no sense, since, what use is a phantom reference if we cant extract the referent from it? But on giving it a deep thought, you would realize that this is not the reason why phantom references are meant to be useful in the first place. It is the time at which the JVM puts a phantom reference in the reference queue that makes its use so intuitively amazing.

That's something that I will be discussing in more detail in the next post. So stay tuned, because, it might just turn out to be a weird crazy experiment. And of course, its possible that some so called 'laws' will be violated. I am still working on it right now. Ill put it up sooner or later.

So folks, see you on the other side! (Hint : That's what phantom references say too).

Happy Programming :)
Signing Off
Ryan

Dissecting CSS3 gradients - Part 2

noreply@blogger.com (Ryan) — Thu, 25 Aug 2011 15:54:00 +0000

Hello everyone :)

This post is a continuation of my previous article on CSS 3 gradients. If you are completely new to CSS 3 gradients, you might want to take a look at it.

In my previous blog post, we learnt about the basics of CSS 3 gradients. We also learnt about the different types of CSS 3 gradients and understood their basic syntax to get things up and running. And then lastly we saw a few examples demonstrating the use of the syntax.

In this post, we will take things a bit further, frankly because, it CAN be taken further! It seems like the simple CSS 3 gradient syntax that we saw recently can be used in a myriad of different ways that sometimes makes it hard to believe it is in fact CSS 3 gradients that are being used behind the scenes.

In this blog post, I will be trying to answer the following questions.

How to use multiple CSS 3 gradients?
How to use CSS 3 gradients with other CSS 3 properties?
How to use CSS 3 gradients to create Patterns?
Cross Browser CSS 3 gradients.
Where to find resources that smartly generate cross browser CSS 3 gradients for you?

So, lets not waste any more time and get to the point.

1) How to use multiple CSS 3 gradients?

CSS 3 gradients are awesome. And when one gradient is awesome, just imagine what adjective you would have to use if you had more than one gradient(If you manage to come up with the proper word, tell me in a comment!). Adding multiple CSS 3 gradients is a pretty simple task. Instead of passing only one gradient function in the background image, you can pass multiple, comma separated list of gradient functions as the background image. However, while doing so, you would have to keep a few things in mind. Since a gradient is much like a background image, having multiple gradients is almost conceptually equivalent to having a stack of multiple background images. And that means, if you want to be able to see the colors of the gradient that is at a lower level in the stack, you will have to use a transparent color on the upper level of the stack.

So, the two new features that should come to your mind when using multiple backgrounds are

Stacking level of gradients.
Usage of Transparency while making gradients.

Lets understand the stacking level of gradients by using a simple example where we use 2 gradients layers in the gradient stack.

Sample 1

Css Code

background-image: linear-gradient(0deg,#000000 50%,#ffffff 51% ),
radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );

As you can see in the code above, I have applied 2 gradients in the background image property. One is a linear gradient, and the other is a radial gradient. The linear gradient covers half of the block width with black, and the other half with white. The radial gradient is used to create a sharp circle. However, we are not able to see the circle on the browser. That's because of the fact that the order in which you specify the gradient functions is the order in which the stack is created and this stack grows downwards, i.e. the gradients that are specified first appear as the topmost layers, and the gradients that you specify later appear below them. Since in our example, the radial gradient was specified after the linear gradient, and because all the colors in linear gradient were opaque, we were unable to see the underlying radial gradient.

Now lets make use of transparency in the gradient function and see how things change.

Sample 2

Css Code

background-image: linear-gradient(0deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );

As you see, in the above code, I made use of transparency in linear gradient function instead of using a white color. And we were able to see the underlying black color circle.

So, this is a tip. If you are making use of multiple CSS 3 gradients, you can make shapes by mixing and merging the gradient colors with transparency.

2) How to use CSS 3 gradients with other CSS 3 properties?

CSS 3 gradients are a terrific feature. But what makes them even more terrific is that when you use multiple background images, you can also use them with other CSS 3 properties and create something really amazing. The two other CSS 3 properties that I find outstandingly helpful are

background-position
background-size

First lets take a look at the background size property. The background size property is used to define the size of the background. What makes this interesting when using multiple gradients is that instead of supplying one value for the width and height of the background, you can now supply a list of comma separated values of the background size, each of which will be applied to the respective gradient.

What I mean to say is this

background-image : gradient1, gradient2, gradient3;
background-size:gradient1-size, gradient2-size, gradient3-size;

Lets take a look at some code in action. We will make use of the same gradients that we used in the previous example. But we will add a background size property this time and see what happens.

Sample 3

Css Code

background-image: linear-gradient(0deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );
background-size: 100% 100%, 50% 50%;

In the above CSS, I specified 2 background gradients and two corresponding background sizes. For the second background size, I specified it to be 50 percent of the width and height of the element. Because the background is being repeated, the second background gets repeated across the dimensions of the element and you are able to see two circles in the image. If I were to make the linear gradient fully transparent, you would be able to see 4 circles in the element instead of 2. At present those two are being hidden by the linear gradient layer.

Now lets take a look at the effect of background position on gradients.

Sample 4

Css Code

background-image: radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );
background-size: 50% 50%;
background-position:50% 0%;

As you see in the sample code, I just shifted the background position of the gradient in the horizontal direction by 50%.

However there are some quirks when using the background position property along with multiple gradients with different browsers as of this writing. So you would want to be careful when trying it out on your own.

3) How to use CSS 3 gradients to create Patterns?

Now gradient patters are an interesting feature that come into play when you begin to mix and merge multiple gradients and the background-size property.

To start with, lets make a very simple gradient pattern.

Sample 5

Css Code

background-image: linear-gradient(0deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 10% 10%, 25% 25%;

As you see in the code, the the gradient is the same, I just changed the color of the circle to green. But the main thing that I changed was the size of the gradient. And as you see, the effect is quite surprising.

Okey, lets try something else.

Sample 6

Css Code

background-image: linear-gradient(45deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 50% 10%, 25% 25%;

Pretty Cool eh?

One more??

Sample 7

Css Code

background-image: linear-gradient(45deg, #000000 25%, transparent 26%,transparent 75%, #000000 76%),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 50px 50px, 25px 25px;

How about one more??

Sample 8

Css 3 Code

background-image: 
linear-gradient(45deg, #000000 25%, transparent 26%,transparent 75%, #000000 76%),
linear-gradient(45deg, #000000 25%, transparent 26%,transparent 75%, #000000 76%),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 50px 50px, 25px 25px;

A point to be noted in the above example is that although I have specified 3 gradients, I have specified the size of only 2 gradients. Since the third size parameter is not specified, the first parameter of 50px 50px is applied to the third gradient.

Well, I can go on and on and on and endlessly keep creating patterns. Its just a question of playing with the parameter values (or rather playing with your grey matter until they burn and char and turn into dark matter).

For now, Ill stop here as I believe that you've got my point, and that is - CSS 3 gradients are powerful. So lets move ahead and address a more important question.

4) Cross Browser CSS 3 gradients.

As with most CSS 3 properties, browser support is not available unless you add browser specific prefixes to your css code. In case you don't already know the prefixes, these are the prefixes that you may have to use to make the gradient function work on different browsers

Firefox : -moz-
Webkit : -webkit-
Opera : -o-
IE : -ms-

For support in any other browsers, you can obviously check out their documentation to determine what prefix they use.

5) Where to find resources that smartly generate cross browser CSS 3 gradients for you?

Well, this is one of the most important questions to be addressed. That's because, although CSS 3 can be used to make patterns and many other things, you are most likely to find yourself using simple gradients to style your buttons or other elements to create subtle effects much more than anything else. And you're definitely gonna want to make it cross browser, as much as possible, and have a decent fallback color if your site is not going to opened in modern browser with gradient support.

That said, there are a few tools out there than can help you by generating CSS 3 gradients for all the browsers, i.e. with the same effects using all the prefixes for major browsers.

Below are a few links to gradient tools that I prefer to use when trying to make simple gradients. If you are aware of better sites, let me know about them in the comments. Ill take a look, and maybe add it to the main post as well.

Ultimate CSS Gradient Generator : I personally use this gradient generator the most because of the browser support in the generated css.
CSS3 Gradient Generatorby: Damian Galarza : I stumbled across this one recently.
Westciv gradient generator tool : This one is good if you are interested in playing with radial gradients. It exposes all the other options that are available with radial gradients and can get a bit tricky at times.

To conclude, CSS 3 are a great feature and open up new dimentions of thinking for developers and web designers without having to turn to a graphic design tool every-time they change their mind about a particular color. As time will pass, standards compliant browsers are bound to have more support for the new CSS 3 properties. And CSS 3 gradients are definitely going to be an important part of every web designer's toolkit in the time to come.

Happy Programming :)

Signing Off
Ryan

Dissecting CSS3 gradients - Part 1

noreply@blogger.com (Ryan) — Thu, 25 Aug 2011 15:52:00 +0000

One of the features in CSS 3 that I find to be the most intriguing is the application of gradients via simple css rules. The reason why I find it so awesome is because while designing pages, I have usually had to insert dummy placeholder images in the background, or leave the backgrounds as colorless while writing the html and css. So, even when I am almost done with the design, I always have a second task to open up an image editing software, most likely GIMP, and the create the images as per the sizes of my html elements.

Interesting as it may seem, the main problem arises is when I dont like what I see. When you amalgamate all the colors on a website, its highly possible that you dont like the color scheme. This then inevitably brings you back to your image editing software to tweak with the colors to get it right. And this can happen several times, especially when you are prototyping to give a client a demo of what you want things to look like. You will find yourself switching several times between your html editor and your image editor. This is exactly where CSS 3 gradients fit into the picture like cheese fits into a burger. It was just the missing ingredient. So, in this blog post, I am going to cover the following topics that will help you get a better understanding of CSS 3 gradients.

In this two part series, I will be covering all the essentials to get you up and running with CSS 3 gradients.

In this first part of the series, we will try to answer the following questions.

What are CSS 3 gradients? - the basic concepts
What are the types of CSS 3 gradients?
How to use CSS 3 gradients? - elements of design

In the second part of this series, we shall see a bit more advanced usage of CSS 3 gradients and try to answer questions, such as

How to use multiple CSS 3 gradients?
How to use CSS 3 gradients with other CSS 3 properties?
How to use CSS 3 gradients to create Patterns?
Browser issues when using CSS 3 gradients.
Where to find resources that smartly generate cross browser CSS 3 gradients for you?

So, lets get started :)

1) What are CSS 3 gradients? - the basic concepts

If you are graphic designer at any level, I am sure that you are aware of what gradients are. Making gradients in graphic tools like GIMP or Photoshop are pretty easy. But now, using CSS 3, you can create gradients with almost the same ease.

The most important thing to note about CSS 3 gradients is that they are applied as part of the 'background-image' css property.i.e. CSS 3 gradients does not require a new css property, it just adds a new function that can be added to the already existing 'background-image' property. It makes quite a lot of sense to add a css gradient as a part of the background, because that is exactly the way images are used - to lie in the background of an html element.

The next important thing to note is that you can add multiple background gradients, using a comma separated list of gradient functions on the same background css property.

Now lets move on to the next section and learn about the various types of CSS 3 gradients.

2) What are the types of CSS 3 gradients?

There are two types of CSS 3 gradients.

Linear Gradients
Radial Gradients

Linear Gradients :

Linear gradients are the simplest and the most common of all. Let us see the syntax and then see how it works.

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

I just have to say this right now. Linear gradients are HOT!

I totally love them. Instead of breaking down the syntax and explaining the various terms, lets me try to explain the concept of gradients in a way that I see it.

Let us assume that you want to create a linear gradient. What that means is that you want to move from one shade of color to another in a linear fashion. Now lets try to break down our own thought process when we visualize gradients.

Q :What do we need to create a simple linear gradient??

A : At least 2 colors. (ya, i know that was simple).

Q : How do you know what the 2 colors are used for?

A : You define one of the colors as the start of the gradient, and the other color as the end of the gradient. These are called as you color stops. Since(for now) you have just 2 colors, you have 2 color stops.

Q : What is the direction of the gradient?? Is it a horizontal gradient? Is it a vertical gradient? Or is it at a certain angle??

A : We need a direction for our gradient. Mathematically, directions are defined by drawing a vector, from one start point to the other point, with an arrowhead indicating the direction of the vector. So when you draw any such line on a sheet of paper, you obviously will be drawing a line such that it makes an angle with the horizontal axis of the sheet of paper. This angle is the measure of the direction of the vector. Hence, we need a way to specify an angle when specifying a gradient in CSS 3.

So, now we have our three main ingredients to cook our CSS 3 gradient.

A start color.
An end color.
An angle.

Lets put these three together in the gradient syntax.

linear-gradient( angle, start-color, end-color);

Now it looks pretty simple, doesn't it?

Although there is another syntax, I feel that this syntax is not only easily readable, but also gives you an immense amount of flexibility in defining the options. In the sections that follow, we will use colors and create a few linear gradients to see this form of defining gradients.

Radial Gradients :

The other type of gradient is radial gradients. Now radial gradients are quite similar to linear gradients. You have almost the same three main ingredients.

radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

This looks pretty scary, doesn't it? Well it does to me. So, lets try to break it down in the same way that we broke down the syntax for linear gradient.

Apart from the three important ingredients, the new important ingredient in the radial gradient is the 'shape' of the gradient. We know that a radial is something like a circle. In CSS 3, you can define the radial to be one of two shapes - circle, ellipse.

While using the radial gradient, there is one property that is somehow more interesting than the angle. And that is, the coordinates of the center of the radial (circle or ellipse).

The radial gradient has many more options as compared to the linear gradient and therefore we can have several more permutations and combinations of the syntax, which thereby makes it completely impossible for me to cover radial gradients in this blog post. So we will only see the basics and then you can explore the various other options at your own leisure once you have a better understanding of the underlying concepts.

To capitulate, the important ingredients of a radial gradient are

The coordinates of the center of the radial.
The shape of the radial
A start color (which becomes the color of the center).
An end color (which becomes the color of the outer edge of the radial).

Lets put these three together in the gradient syntax.

radial-gradient( center-coordinates, shape , start-color, end-color);

This syntax can be used to define the most basic form of a radial gradient. And we shall see in the upcoming examples, how they can be applied to style the background of an html element.

3) How to use CSS 3 gradients? - The Elements Of Design

So far, we have seen what CSS 3 gradients are. And we also learnt the most basic form of their syntax. Now comes the most interesting part of this post and that is, the part where we demo the various CSS 3 gradients in use.

For the purpose of our demo, I will be making use of an HTML div element having dimensions 200px X 200px and apply the various gradients to it.

Linear gradients

Sample 1:

This one shows a simple gradient from black to white.

Css Code

background-image:linear-gradient(0deg, black, white);

The css code is very simple. You want a horizontal gradient (hence the 0 degrees), the starting color is black, the ending color is white and the gradient effect spreads across the dimention of the entire html element.

Sample 2:

Css Code

background-image:linear-gradient(45deg, black, white);

In this example, we have simply rotated the axis by 45 degrees. As you might have noticed, the axis rotates about the center of the html element. So when you rotate the axis by 45 degrees anticlockwise, the start color automatically starts at the left bottom and the end color ends at the right top, thereby giving you a gradient of 45 degrees about the center of the html element. This is a very important point to note about linear gradients. The following image (that I created using Inkscape, not CSS 3) should be able to give you a better idea of the angle calculation.

The axis/vector representing the direction of the gradient rotates about the center of the html element to which the gradient it applied.

The next example demonstrates using three colors in a gradient. It is similar to the previous two examples, the only difference being the additional parameter that describes the third color.

Sample 3

Css Code

background-image:linear-gradient(45deg, black, white, green);

In this example you see that the gradient started normally from the lower left corner, then it gradually changed to white when it reached the middle and then it gradually changed to green when it reached the upper right corner. This means that the gradient rendering algorithm tried to evenly distribute the area over which the gradient was to be rendered between the three colors that we specified.

In the next example, we will try a tiny variation of the above

Sample 4

Css Code

background-image:linear-gradient(45deg, black 20%, white 50%,green 80%);

As you see in the above code, this is a slight variation of the previous example. I have specified percentage values along with the color. To understand what this percentage means, you need to keep one thing in mind - the direction vector of the gradient. As you move along the direction vector of the gradient, the start of the vector is 0 percent. The end of the vector is 100%. So, when you specify the a percentage along with a color stop when using gradients, you are actually saying that at a given percent distance along the vector, I want my color to be #some-color. i.e. you are defining the position of the color stop along the direction vector. In the above example, I declare black to be the color at 20 percent distance from the start of the direction vector, white to be the color at 50 percent distance from the gradient direction vector, and green to be the color at 80 percent of the distance from the gradient direction vector. Since before 20%, no color is specified, hence the origin color(i.e. black in our case) is used from 0 t 20 percent. And since no color is specified after 80%, hence green is used as the color after 80 percent. So, we see that our gradients in this background are between 20 percent and 80 percent. The remaining parts are fixed colors.

Radial Gradients

In this section we will see a few examples that make use of the simplest form of radial gradients.

Sample 1

Css Code

background-image: radial-gradient(50% 50%, circle , #000000,#ffffff );

In the above example, you can see that the first parameter is used to set the x and y coordinates of the center of the radial. And I have set i to be 50% from the left and 50% from the top. The next parameter specifies the shape of the radial, which in our case is 'circle'. The next parameter gives the start color of the circle from the center. The fourth parameter is used to specify the end color of the radial, which in our case happens to be white. So, we have a simple gradient, starting from black at the center to white at the edges of the element.

Now this may not seem so interesting at first. But when you perform a few tweaks on the parameters, you can create something really cool. Check out the next sample.

Sample 2

Css Code

background-image: radial-gradient(50% 50%, circle , #000000 50%,#ffffff 51% );

As you see in the above code, we were easily able to create a circle with a sharp boundary using gradient parameters. In the syntax above, we have specified a percentage alongside each color value. To understand how this percentage applies, think of it in this way - You have a circle with its center set at the center of your html element. Now Since its a circle, it has a radius. When you specify #000000 50% as the first color, what you are actually saying is that upto 50 percent of the radius, starting from the center, you want the color to be #000000. In the next color parameter, when you say #ffffff 51%, you are saying that from 51 percent of the radius onwards, you want the color to be #ffffff. Since there is only a 1 percent difference between the two colors, you get a nice sharp boundary instead of a gradient between the two colors. If however you were to increase the difference in the percentage, as in the below example, you would get a gradient.

Sample 3

Css Code

background-image: radial-gradient(50% 50%, circle , #000000 50%,#ffffff 71% );

As you see in the css code above, I increased the percentage value of the color #ffffff to 71 percent. So we were able to see a gradient effect from the color #000000 to the color #ffffff between 50% and 70% of the radius of the circle, which looks like a nice halo.

The wonderful thing about radial gradients is that just like linear gradients, you can also add more color stops. So lets try to make a much more realistic halo effect using radial gradients.

Sample 4

Css Code

background-image: radial-gradient(50% 50%, circle , #000000 40%,#FFFF00 41%,#ffffff 71% );

As you see in the above code, creating a halo was just a matter of adding another color stop to the radial gradient function and setting the proper percentage values. Beautiful, is'int it? Kinda looks like a scary eclipse, but still beautiful. Probably because it hardly required any effort to create.

Well, that's the beauty of CSS 3 gradients.

Now that we have a basic idea of CSS 3 gradients, in the next part of this series we will see how we can mix and merge gradients to create something even more powerful, and of course, beautiful, such as creating gradient patterns and using the gradient property with other CSS 3 properties.

Excited anyone? !!

Happy Programming :)

Signing Off
Ryan

Drupal Begins

noreply@blogger.com (Ryan) — Sun, 24 Jul 2011 08:18:00 +0000

I sometimes feel that I have an uncanny affinity for problems. Almost nothing that I do, seems to work on the first go.

Lets take for instance, Installing and creating Drupal on my local machine.

I am using Drupal 7.4.4.

I got this cool error when I tried to import drupal.

Error

The website encountered an unexpected error. Please try again later.

Error message
PDOException: SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') ORDER BY fit DESC LIMIT 0, 1' at line 1: SELECT * FROM {menu_router} WHERE path IN () ORDER BY fit DESC LIMIT 0, 1; Array ( ) in menu_get_item() (line 445 of  D:\personal\drupal\drupal-7.4\includes\menu.inc).

Now that is frickin cool because, I dont know head or tail of drupal and I was simply following instructions from a video tutorial from you tube. And it seemed to work out quite nicely there.

http://www.youtube.com/watch?v=CFLKZFJEWBs

So, what I did was, when trying to import, i changed the sub domain name and the database name to REMOVE the underscore.

Now, i really like underscores. They work well in linux and in windows. Since using spaces for directory names in windows is one of the worst habits that you can have as a developer, underscores became kind of my closest friends.

But oh no, this damn thing wont accept underscores. Anyways, so I had to simply do it without the underscore and now the hostname looks like a congested orgy of characters. I guess Ill just have to deal with it that way!

So, if you have this same problem, you now know how to deal with it.

If it still does not work our for you, take a peek at this

http://drupal.org/node/488010

Happy Programming :)
Signing Off

Ryan

Simple theming in Struts 2

noreply@blogger.com (Ryan) — Sat, 11 Jun 2011 19:19:00 +0000

I was just designing a page in struts. I had already designed the structure of the page using a text editor and also setup the necessary css and javascript for the layout.

But when I introduced a struts tag into the page by replacing the elements with struts tag, somehow the entire layout turned into a huge mess.

Reason? My page contained a form, and struts automatically applies a theme to the form that causes the elements to be rendered in the form of tables. I was like, WTF! When i saw my perfectly looking page utterly distorted coz of no mistake of my own.

If you are facing the same issue, you can simply resolve it by using the simple theme instead of whatever theme struts is using.

In my case, I did the following in my struts form.

Yea, that works. Piece of cake. I guess there should be a way to default the theme for the entire project instead of doing it one form at a time, especially since I like to do the styling of the web pages by myslef. Will have to check that.

Happy Programming :)
Signing Off
Ryan

Demystifying Web Colors : The HSV color scheme

noreply@blogger.com (Ryan) — Sat, 21 May 2011 08:08:00 +0000

Colors always fascinated me. After all, they are present in everything that we see around us. As I write these lines, I feel a bit sad about those who are color blind and for those among us who are completely blind. Makes me realize how fortunate most of us are to be able to experience all the beauty that surrounds us.

And we as programmers and web designers spend most of our waking hours staring at computer screens and interacting with a myriad of colors. Just like 'real life', colors are omnipresent on the web as well, most of them in the form of images. But with newer and better browsers, its becoming increasingly possible to create absolutely amazing coloring effects even without the use of images. Yes, you guessed it right, I am talking about the various new ways in which colors are entering the landscape of web designers by adapting the new CSS 3 specification.

I believe that almost every web designer is quite familiar with the RGB color scheme. However due to some (INSANELY BIZZARE) circumstances you are not aware of this scheme, then of course you need to google a bit, because a basic understanding of this scheme is a must if you want to enjoy making and delivering a design.

Working on the web has made us quite used to the RGB scheme. However, as most of us might know, there are also a few other popular color schemes called the CMY and the HSV color scheme. CMY is used in the print industry. And HSV is important solely because I am going to be discussing about it in this post.

Ok ok, that's not the only reason why HSV is important. HSV is a very important color scheme, and in fact in my opinion, even more important than the RGB scheme, because this is the scheme that represents the way we actually perceive light and colors. When I say light, what I mean to say is 'wavelenghts', because after all, that is exactly what light is. And the HSV scheme speaks of colors in terms of wavelengths.

In this article, I am going to walk you through the HSB color scheme and its relationship with the RGB color scheme.

My intention is that after reading this article, if anyone tells you the HSV values of a color, you should be able to make a mental picture of the color and then almost be able to guess the RGB values for the HSV colors. I believe that the more you do it, the better you will get at guessing and your accuracy may also improve.

Sounds like a fun thing to do, is'int it? Well then, lets get started.

In the RGB scheme , R stands for Red, G for Green and B for Blue. Whereas HSV stands for Hue, Saturation and Values. However, for an easier understanding in this article, i am going to replace the V with a B. B for Brightness. So, while the actual color scheme is HSV, throughout this article, i will be referring to it as HSB, where B is nothing but the Brightness Value.

The RGB scheme is popular because it is the first thing that comes to our mind when we write our CSS. However, almost all color pallete's also give us an option to select a color based upon the HSB scheme.

First the Basics

In the RGB scheme, each color can be represented within a range of 0 to 255.

The value of R represents strength of the color Red in a given color combination of Red, Green and Blue. The same holds true for Green and Blue. So, you can say that the RGB scheme is like an artist's coloring palette where he can mix the three colors to create all the other colors.

The HSV schema differs because it organizes colors in the order of wavelengths. I believe that when you think of HSV, you can think of yourself standing and staring at a colorful circle. This circle can be divided into three equal arcs of 120 degrees wherein each arc represents the most dominant color withing that degree range. The three dominant colors in the HSV circle are Red, Green and Blue. These dominant colors are also called primary colors.

For now, you can imagine your circle to be something like the below image. You can call it your color wheel.

But in reality, in the actual color wheel, within each dominant section, the color varies across the radius and circumferenece to produce an effect as follows.

Lets understand how our colors vary in the color wheel.

I will need you need to first imagine yourself shrinking all of a sudden and finding yourself standing at the edge of the color wheel. I am going to ask you stand at an an angle of 0 degrees on our color wheel, which is the mid point of the red zone on the circumference as depicted in the image above. Now I ask you to take a stroll along the circumference of the circle in the anticlockwise direction, i.e in the increasing order of the angle. As you were to walk and note the values of the colors that your come across, you would make the following observations.

From 0 to 60 : red stays 255 , green 0 changes from 255 , blue stays 0

From 61 to 120 : red changes from 255 to 0 , green stays 255 , blue stays 0

From 121 to 180 : red stays 0 , green stays 255 , blue changes from 0 to 255

From 181 to 240 : red stays 0 , green changes from 255 to 0 , blue stays 255

From 240 to 300 : red changes from 0 to 255 , green stays 0 , blue stays 255

From 300 to 360 : red stays 255 , green stays 0 , blue changes from 255 to 0

Hue

There are a few things that you need to know about your stroll.

As you walked along the circumference, ie at a fixed distance from the center of the circle, you observed the color change. Such a color change that takes place with an increase in the angle is known as the HUE of the color. Hence one could say that at a fixed distance from the center, the HUE of a color is based solely upon the angle. Hence, the value of HUE ranges from 0 to 360, which is just as expected.
You were walking at a fixed distance from the center.
The intensity of the various colors varied from a min of 0 to a max of 255.
Within a given 120 degrees of a dominant color, no other color had a value greater than that of the dominant color at any point of the stroll.
Graphically, the dominant range and the zero range lie opposite to each other on the circle and they span 120 degrees each.

Take a moment and make a note of the following patern

For any given color there is a range where the color is dominant. That range covers and angle of 120 degees. The most important point to be noted is that the intensity of a dominant color remains constant and is the highest in its dominant range as compared to the other colors.

Red : 300-0/360-60 : Total : 120 degrees, i.e. The intensity of Red color in this range is a FIXED_HIGH, and is always greater than or equal to the other colors.
Green : 60-120-180 : Total : 120 degrees, i.e. The intensity of Green color in this range is a FIXED_HIGH, and is always greater than or equal to the other colors.
Blue : 180-240-300 : Total : 120 degrees, i.e. The intensity of Blue color in this range is a FIXED_HIGH, and is always greater than or equal to the other colors.

Then, for the next 60 degrees after its dominant range, the intensity of the dominant color gradually drops to 0 from its current value.

Red : 60-120 : Red value drops from FIXED_HIGH to 0.

Green : 180-240 : Red value drops from FIXED_HIGH to 0.

Blue : 300-0/360 : Red value drops from FIXED_HIGH to 0.

After a color drops to 0, it remains in a steady zero state for the next 120 degrees.

Red : 120 - 240 : Red stays 0

Green : 240 - 360/0 : Green stays 0

Blue : 0/360 to 120 : Blue stays 0

Hence the trend followed by all the colors in the circle is :

Rise to the FIXED_HIGH over a range 60 degrees.
Then stay at the FIXED_HIGH over the next 120 degrees.
Then fall to 0 over the next 60 degrees.
Then stay at 0 over the nenxt 120 degrees.

Note that in the above statements I have made use of the term FIXED_HIGH, and not a value of '255'. That is what takes us to the next step where we discuss the other components of colors - namely saturation and brightness.

Brightness

Brightness determines the value of the strength of the color, which in our case is the variable FIXED_HIGH. The range of the brightness value is from 0 to 100 in the HSV scheme.

Taking our stroll analogy, if we consider our color wheel to have a radius of 255 units, a brightness of 100 means you are waking at 100 percent of the radius, i.e. 255.

A brightness value of 50 indicates that you are walking at 50 percent of the radius , hence the FIXED_HIGH is 128.

A brightness value of 25 indicates that you are walking at 25 percent of the radius , hence the FIXED_HIGH is 64.

So ho do we calculate the RGB for a given hue and brightness ?

First determine the RGB value based on the hue. i.e. the degrees of the arc.

Then the actual RGB at a given brightness = X percent RGB where X is the value of Brightness.

Let us see a few examples to see how this is done.

At 30 degrees, you get a color of orange which is composed of Red and Green but no blue.

Case 1 : At Brightness/FIXED_HIGH of 100 %

Red : 255 , Green : 128 , Blue : 0 (Red is the dominant color, Green is the secondary color, Blue is 0 at 30 degrees)

Case 2 : At Brightness/FIXED_HIGH of 50 %

Red : 128 , Green : 64 , Blue : 0 (Red is the dominant color, Green is the secondary color, Blue is 0 at 30 degrees)

That covers brightness.

Saturation

Saturation determines the amount of non-dominant colors with respect to the dominant colors.

Saturation is applied to the non dominant colors only, that too only after Brightness has been applied to the original combination.

I like to think of saturation as a way of saying how pure a mixture of colors is. The more the saturation, the less is the presence of the non dominant colors, and hence more is the purity of the mixture.

The value of saturation varies from 0 to 100 just like Brightness.

So, how to we calculate the RGB based upon a hue, saturation and brightness level? The algorithm is pretty simple.

First determine the RGB based on the hue.

Then calculate the RGB based upon the brightness : RGB = X percent RGB where X is the value of Brightness.

Determine the difference between the dominant color's value and the non dominant color's value for each color.

For each percentage DECREASE in the saturation, INCREASE the color of the non dominant's by the same percentage of the calculated difference.

The above algorithm should become clear with the example below:

At 30 degrees, you get a color of orange which is composed of Red and Green and no Blue.

Case 1 : At Brightness of 100 %

Red : 255 , Green : 128 , Blue : 0 (Red is the dominant color, Green is the secondary color, Blue is 0 at 30 degrees)

Here saturation is 100 percent. i.e. This is a 100 percent pure form of the color at maximum brightness.

Case 2 : At Brightness of 50 %

Red : 128 , Green : 64 , Blue : 0 (Red is the dominant color, Green is the secondary color, Blue is 0 at 30 degrees)

Here saturation is 100 percent. i.e. This is a 100 percent pure form of the color at 50 percent brightness.

Now lets modify the saturation to 50 percent and see

When we say 50 percent saturation, what we mean is that as compared to the color at a given brightness, the quantity of the non dominant colors have increased by an amount of 50 percent of the difference between their current value and the dominant color's value.

Case 3 : At Brightness of 50 % and saturation 50 percent

Red : 128 , Green : 96 , Blue : 64 (Red is the dominant color, Green is the secondary color, Blue is 0 at 30 degrees)

This is a 50 percent pure form of the color at 50 percent brightness.

To do the Math for case 3.

Initially assume saturation 100%

Step 1 : Identify dominant color

Dominant Color at 30 degrees : Red

Step 2 : Determine the mix at 30 degrees and At Brightness:100%

At Brightness:100%, RGB = R:255, G:128, B:0

Step 3 : Determine mix at 30 degrees and At Brightness:50%

At 50 percent brightness, RGB = R:128, G:64, B:0

Step 4 : Now, consider the saturation for the non dominant colors

(Red value) minus (Green value) at 100 % saturation = (128) - (64) = 64

50 % saturation means = 50 % of 64 = 32

Final value of Green at 50 percent saturation : 64 + 32 = 96

Similarly, we calculate the final value for Blue as

(Red value) - (Blue value) at 100 % saturation = (128) - (0) = 128

50 % saturation means = 50 % of 128 = 64

Final value of Blue at 50 percent saturation : 0 + 64 = 64

Now we are finally done with our HSV scheme. So, the next time that you find yourself playing with a color palette, and you decide to fiddle with the HSV values, I believe that this article would help you have a better understanding of what changes in the color you can expect when you make changes to the respective HSV values. And moreover you should be easily able to tell the RGB colors based upon you HSV colors by doing some mental maths.

Hope you had fun!

Signing Off
Ryan

OMG, IE gave me a surprise!

noreply@blogger.com (Ryan) — Mon, 25 Apr 2011 18:39:00 +0000

I have been trying to determine the best possible way to create an auto expanding text area for the past couple of hours now. I have been using my best friends aka firefox and firebug and jquery to test the feasibility of the various proposed solutions that are scattered across the internet. Some say, you can use timers, some say you can use a hidden div technique. I think ill go for the hidden div technique along with timers, just for fun sake.

However the surprising part of all is that the easiest way that this could be accomplished was in IE which did not require any coding AT ALL!!

You just need to create the textarea using the following code

I feel pretty strange! I mean, wtf! How is it possible for something to have such an easy solution in IE but would need workarounds in other browsers like firefox and chrome! When i saw this thing work in IE, i literally had my jaw drop and all my teeth fall off.

Another strange thing that came across was that if you have something like this

Both IE and Firefox will render 2 columns whereas Firefox will render 2 rows! I dont understand how or why. But the same behavior is observed even on increasing the number of rows. The actual number of rows rendered by firefox is always 1 more than the number of rows defined in the 'rows' attribute. As if having extra rows will make the user to enter extra information! Although thats not such a bad idea if you are keeping your textarea for gathering feedback (and hoping that the user does not spam you text area with arbitrary links because of that extra line!).

Anyways, lets see if I make something sleek and sexy for creating the expanding textarea effect. Will be posting it here when its done. Ye can be always be sure of that.

Happy Programming :)
Signing Off
Ryan

Runtime Class and Method information

noreply@blogger.com (Ryan) — Thu, 17 Mar 2011 17:52:00 +0000

Here is a small snippet that can be used to find the name of the currently executing method in Java.

Throwable t = new Throwable(); 
StackTraceElement[] elements = t.getStackTrace(); 
System.out.println(elements[0].getMethodName());

Create a Throwable object in your method. During the creation of a Throwable instance, the JVM stores information of the currently executing method on the stack trace. Extract the stack trace and print the name of the zeroth element to get your method name.

Here is another small snippet to find the name of the class at runtime.

Thread.currentThread().getStackTrace()[1].getClassName()

Tiny little things, aren't they!

Happy Programming :)
Signing Off

Ryan

Creating a copy of JavaBeans

noreply@blogger.com (Ryan) — Sun, 27 Feb 2011 08:53:00 +0000

In this post, we shall see how to make a copy of an object in Java.

In our applications, JavaBeans play a very important role. However sometimes we simply need to make a copy of our JavaBeans so as to make changes to the copy and keep the original object intact.

There are two ways in which this can be achieved in Java, depending upon the level of access you have to your beans.

Using Object.clone()
Using BeanUtils

Copying using Object.clone()

This method can be used when you have access to the source code of your bean classes. This method requires your JavaBeans to implement the cloneable interface. The Cloneable interface is a marker interface that indicates that the object allows itself to be cloned. We can call the Object.clone() method on only on objects whose classes implement the Cloneable interface. If we attempt to invoke the clone() method on an object of a class that does not implement the Cloneable interface, we get a CloneNotSupportedException.

Also note that the clone() method is a protected method, so you will most likely need to create a public method on your bean class named clone() to mimic the functionality.

We are going to demonstrate both the above methods using a simple Employee class. This class will contain an instance of another javabean 'Address'. We shall see in the below example, how we can obtain a deep copy of our beans.

The following code demonstrates the usage of Object.clone()

Address.java

class Address {

    private int houseNo;

    public int getHouseNo() {
        return houseNo;
    }

    public void setHouseNo(int houseNo) {
        this.houseNo = houseNo;
    }

    @Override
    public String toString() {
        return "houseNo : " + houseNo;
    }
    
}

Employee.java

class Employee implements Cloneable {

    private String name = null;

    private Address address=null;


    @Override
    public String toString() {
        return "name " + this.getName()+ " address : "+ address;
    }
    
    public Employee clone() {

        Employee emp = null;
        try {
            emp = (Employee) super.clone();
        } catch (CloneNotSupportedException e) {
            System.out.println(e);
        }
        return emp;
    }

    public Address getAddress() {
        return address;
    }

    public void setAddress(Address address) {
        this.address = address;
    }

    /**
     * @return the name
     */
    public String getName() {
        return name;
    }

    /**
     * @param name the name to set
     */
    public void setName(String name) {
        this.name = name;
    }
}

Note that in the above classes, the Employee class and the Address class is declared with a visibility of default. We did not have to make them public, although we could have.

Also note the way the clone() method has been written in the Employee class. I explicitly declared it as as a public method and called the superclass implementation of the clone method. Then, I downcasted it to am Employee object before returning.

Lets see the code in action.

public static void main(String[] args) {

        Employee emp1 = new Employee();
        Address add1= new Address();
        add1.setHouseNo(100);

        emp1.setName("ryan");
        emp1.setAddress(add1);

        Employee emp2 = emp1.clone();
        emp2.setName("ryan2");

        print("emp1 : " + emp1);
        print("emp2 : " + emp2);

        print("emp1==emp2 "+(emp1==emp2));

    }

If you execute the following code, you will get the below output

emp1 : name ryan address : houseNo : 100
emp2 : name ryan2 address : houseNo : 100
emp1==emp2 false

You can replace the print statement with your logger statement to run the code.

Note that the == operator indicates that both the objects are created independently on the heap. Moreover, the fields of the Address bean have also been copied.

One crucial thing to be noted here is that you only needed to implement the Cloneable interface in the Employee class. The Address class does not need to implement Cloneable, although there wont be any serious repercussions if you do so!

Now lets see the second method

Using the BeanUtils.cloneBean() class

This method makes use of the BeanUtils class provided by the apache foundation. In order to use this class, you need to have at least the following jar files in your classpath

commons-beanutils-1.7.0.jar

commons-collections-3.1.jar

commons-logging-1.0.4.jar

The version numbers may differ, but you can get the details from the here if the dependencies change.

The BeanUtils class provides us a method called cloneBean that clones all the accessible properties of your beans. Here is the code in Action.

Employee2.class

public class Employee2{

    private String name = null;

    private Address address=null;


    @Override
    public String toString() {
        return "name " + this.getName()+ " address : "+ address;
    }

    /**
     * @return the name
     */
    public String getName() {
        return name;
    }

    /**
     * @param name the name to set
     */
    public void setName(String name) {
        this.name = name;
    }

    public Address getAddress() {
        return address;
    }

    public void setAddress(Address address) {
        this.address = address;
    }    
}

Note the declaration of the Employee2 class. We did not implement the Cloneable interface. Moreover, we made the class "public". Making the class public is required for the BeanUtils class to extract the data from the Bean. Also note that we did not have to write a clone() function in this class.

We can reuse the existing Address class from the previous example, as no changes need to be done to it.

You need to import the following line in your main class

import org.apache.commons.beanutils.BeanUtils;

Now lets take a look at the main function.

public static void main(String[] args) throws Exception{

        BeanUtils bu = new BeanUtils();
        Employee2 emp1 = new Employee2();

        Address add1= new Address();
        add1.setHouseNo(100);

        emp1.setName("ryan");
        emp1.setAddress(add1);

        Employee2 emp2 = (Employee2)bu.cloneBean(emp1);
        emp2.setName("??");



        print(emp1);
        print(emp2);

        print("emp1==emp2 : "+(emp1==emp2));

    }

As you see above, we did not have to do much but simply call the cloneBean method on the BeanUtils object and downcast it to our Employee2 bean. As was expected, a deep copy of the object was created.

If you run the code, you get the following output

name ryan address : houseNo : 100
name ?? address : houseNo : 100
emp1==emp2 : false

As expected, both the objects are considered to be different objects on the heap. They just have the same values for their properties.

In the methods discussed above, you can see that the BeanUtils method can be used in a much wider scope because most of your JavaBeans will be public, but you may not always have access to the code of your JavaBeans to write a clone method.

Thats all for now folks!

Happy Programming :)
Signing Off
Ryan

jQuery : Creating a tag cloud widget

noreply@blogger.com (Ryan) — Wed, 26 Jan 2011 14:34:00 +0000

Tag clouds are pretty common these days on most of the websites that we come across. Tag clouds are useful because not only are they better organised as compared to displaying plain lists, but they also provide visual cues to the user of the frequency of the a particular keyword relative to the other keywords in the cloud.

In this post, I am going to create a simple jQuery widget to create a tag cloud.

Lets look at the requirements first

For any dom element, we need to display a list of anchor elements.

For each anchor element, the relative font size should be directly proportional to the frequency of occurence of the element.

Here is how the requirements will translate into technical terms.

Create an unordered list such that each list item represents a tag.
The unordered list should be placed inside the selected container.
The font-size of each list item is based upon the relative frequency of the tag. The tag with the minimum frequency should have a minimum font size of 1. The Tag of the maximum frequency should have a font size of 2em.

Lets look at the HTML markup first. In fact, since this is a cloud widget, we dont actualy need anu html except for a container that can hold he contents of the cloud.

Ok, that was simple. Thats because all the logic of building the list and its corresponding elements lies in widget.

Lets start with our standard way of creating a widget

(function($){
var tagcloudPrototype={
 options:{
 },
 _create:function(){
  console.log('create');
  var widget=this;
  var $domElement=widget.element;
  var options=widget.options;
 }
};

$.widget('ui.tagcloud',tagcloudPrototype);
})(jQuery);

As can be seen in the above code, all the functionality of the widget lies in the _create function itself which will be called once during widget initialization.

Let us create a few options for the user of our widget, such as providing the css styles for the links in the cloud. our widget basically requires as an argument, an array 'tag' objects that have a particular structure. We will define the structure of the tag in the options element so that it can be configured by the user as per his requirement.

As per our design, we will require that for each tag, three things must be given

name : The name of the tag as it will appear as an anchor.
freq : The number denoting the frequency of the tag.
uri : The uri to which the user will be redirected to once he clicks on the tag anchor.

The values in the array can be obtained via an ajax query or any other way. Here is a sample array

var cloudtags = [
   { name: "Java", freq: "50" , url:"#"},
   { name: "CSS", freq: "53" , url:"#"},
   { name: "XHTML", freq: "27" , url:"#"},
   { name: "jQuery", freq: "71" , url:"#"},
   { name: "MySQL", freq: "35" , url:"#"}
   ];

And here is our options object.

options:{
  tagStructure:{name:'name',freq:'freq',url:'url'},
  linkClass:'tag-static',
  linkHoverClass:'tag-hover',
  tags:[]
 }

As you can see, each tag in the array follows the same structure. Ill show later how you can use the widget if the names in your tag sructure are different from the default. The default are 'name','freq' and 'url'.

Now, lets see what needs to be done in the create function. Sicne we need the size of the tags to be dependent upon the value of the frequency, we will simply scale down the maximum and minimum frequeny between 1 and 2. ie. in our sample cloudtag array, the min value is 27 and the max value is 71. So, we need to use 1em as the font size of the tag with name 'XHTML' and 2em as the font size of the tag with name 'jQuery'.

Once computed, for each element in teh array, we will store the value of the fontSize as a property of that particular tag object array and then we will use it later to set the value of the font-size css property of the anchors.

Here is the code in the _create() function that we will use to scale down the frequency values and store it on the tag object.

var widget=this;
  var $domElement=widget.element;
  var options=widget.options;
  
  var tags=options.tags;
  var name=options.tagStructure.name;
  var freq=options.tagStructure.freq;
  var url=options.tagStructure.url;
  
  var max=0,min;
  $.each(tags,function(index, tag){
   max = Math.max(max,tag[freq]);
  });
  min=max;
  $.each(tags,function(index, tag){
   min = Math.min(min,tag[freq]); 
  });
  
  
  var divisionUnit=(max-min)/10;
  
  $.each(tags, function(index, tag){
   var fontUnit=Math.round((tag[freq]-min)/divisionUnit);
   tag.fontSize=(fontUnit<10)?'1.'+fontUnit+'em':'2.0'+'em';
  });

Now, I am only left with a simple task of creating a new unordered list and adding list items with anchors to it. This list item should reside in the selected container, i.e. the current dom element of the widget. Here is how we do it.

$domElement.append("
");
  
  var $tagList = $('ul',$domElement);
  
  $.each(tags, function(index, tag){
  
   $tagList.append('
'+     '' + tag[name]+''+     '
');
   
  });

As seen above, there is nothing special going on. All i do is iterate over each of the elements of the tags array, and crete list items and anchor tags with the calculated font-size for each of the tag. Now the last thing that I would do is to apply the user specified styles to the anchors. And thats very trivial.

$('a',$domElement).hover(function(){   $(this).toggleClass(options.linkHoverClass);
  });

$tagList.addClass('tag-cloud-ul');
  $('a',$domElement).hover(function(){
   console.log($(this));
   $(this).toggleClass(options.linkHoverClass);
   
  });

Here is the entire widget as one big blob!

(function($){
var tagcloudPrototype={
 options:{
  tagStructure:{name:'name',freq:'freq',url:'url'},
  linkClass:'tag-static',
  linkHoverClass:'tag-hover',
  tags:[]
 },
 _create:function(){
  console.log('create');
  var widget=this;
  var $domElement=widget.element;
  var options=widget.options;
  
  var tags=options.tags;
  var name=options.tagStructure.name;
  var freq=options.tagStructure.freq;
  var url=options.tagStructure.url;
  
  //Scaling down the frequency to a range of 1 to 10 and determining the font size
  var max=0,min;
  $.each(tags,function(index, tag){
   max = Math.max(max,tag[freq]);
  });
  min=max;
  $.each(tags,function(index, tag){
   min = Math.min(min,tag[freq]); 
  });
  
  var divisionUnit=(max-min)/10;
  
  $.each(tags, function(index, tag){
   var fontUnit=Math.round((tag[freq]-min)/divisionUnit);
   tag.fontSize=(fontUnit<10)?'1.'+fontUnit+'em':'2.0'+'em';
  });
  
  //Creating the unordered list
  $domElement.append("
");  
  var $tagList = $('ul',$domElement);
  
  //Adding list items and anchors for each tag in the array
  $.each(tags, function(index, tag){
  
   $tagList.append('
'+     '' + tag[name]+''+     '
');
   
  });
  
  //Styling
  $tagList.addClass('tag-cloud-ul');
  $('a',$domElement).hover(function(){
   console.log($(this));
   $(this).toggleClass(options.linkHoverClass);
   
  });
 }
};

$.widget('ui.tagcloud',tagcloudPrototype);
})(jQuery);

Here is the CSS that I am using.

#tagContainer{
    width:200px;
    height:100px;
    overflow:hidden;
    background-color:#6c6c6c;
   }
   
   .tag-cloud-ul{
    list-style:none;
    margin:0px;
    margin-left:10px;
    margin-top:10px;
    padding:0px;
    width:100%;
    height:100%;
   }
   
   .tag-cloud-li{
    float:left;
    padding:5px;
    height:30px;
    margin:0px;
   }
   
   .tag-static{
    text-decoration:none;
    color:white;
   }
   
   .tag-hover{
    color:blue;
   }

Okey. Thats our widget, now lets see how to use it. Ill show you two ways. the first one shown here uses the default tag structure.

var cloudtags = [
   { name: "Java", freq: "50" , url:"#"},
   { name: "CSS", freq: "53" , url:"#"},
   { name: "XHTML", freq: "27" , url:"#"},
   { name: "jQuery", freq: "71" , url:"#"},
   { name: "MySQL", freq: "35" , url:"#"}
   ];
   
   $('#tagContainer').tagcloud({tags:cloudtags});

The one shown below does uses a custom structure for the tags.

var cloudtags = [
   { tagName: "Java", frequency: "50" , url:"#"},
   { tagName: "CSS", frequency: "53" , url:"#"},
   { tagName: "XHTML", frequency: "27" , url:"#"},
   { tagName: "jQuery", frequency: "71" , url:"#"},
   { tagName: "MySQL", frequency: "35" , url:"#"}
   ];
   
   $('#tagContainer').tagcloud(
   {tags:cloudtags},
   {tagStructure:{name:'tagName',freq:'frequency',url:'url'}}
   );

We're done! As simple as that! Once again, cheers to the jQuery folks!

And of course, suggestions for improvement are most welcome :)

Happy Programming :)
Signing Off
Ryan

jQuery : Creating a simple table sorting widget

noreply@blogger.com (Ryan) — Sun, 23 Jan 2011 07:53:00 +0000

In this article, I am going to create a very simple widget for sorting a html table using jQuery. In this article, we will see how to create a bit more complex widget as compared to the one that I had discussed earlier in my post jQuery : Creating a custom widget.

I am going to call my new widget a 'tablesort'.

First the HTML.

My HTML table comprises of three columns, and contains a list of 4 of my favorite movies. In the first column, i provide the movie name, the second column is my own rating of the movie and the third column is the year in which the movie was released.

Here is our table

   

     Favorite Movies
     My Rating
     Year Of Release
    

   

     October Sky
     9.6
     1999
    

     Forrest Gump
     9.5
     1994
    

     Matrix
     9.9
     1999
    

     Pursuit Of Happiness
     10
     2006

Favorite Movies	My Rating	Year Of Release
October Sky	9.6	1999
Forrest Gump	9.5	1994
Matrix	9.9	1999
Pursuit Of Happiness	10	2006

Okey, lets us first see what features we will include in our tablesort widget.

A user can should be able to make any table sortable which follows more or less the above html structure.
A user should be able to specify which columns can be used as a sort criteria for sorting the rows.
Sorting of both strings and numeric values should be handled. (This is a simple widget, and i am not handling sorting of complex data types like dates because date formats can vary a lot and i still need to figure out how to handle that sort of stuff. Any suggestions on how to do that efficiently would be great.)
The user should be able to reverse the sorting on a particular column, when clicked upon consecutively.

Now lets see how our formal requirements translate in technical terms.

Since our table contains a 'thead' and a 'tbody', we first need a way to associate a column header with all the columns under it. i.e. Association of a 'th' element with a set of 'td' elements.
Secondly, we need to provide a means for the user to specify the columns to be sorted and add the sorting functionality to only those columns. We also need to provide a visual cue to the user to identify the sortable columns.
When a column header is clicked on, the data in the associated 'td' elements should be compared and used as a basis to sort the 'td' elements. Then based upon the ordering of the 'td' elements, we will update the DOM for the table and rearrange the table rows.

I ususally create a prototype object for the widget first and then initialize the widget instead of doing both of them at the same time. Lets first begin by creating the options object

var tablesortPrototype=(
options:{
   header:'thead',
   body:'tbody',
   sortableColumns:[0],
   sortableClass:'sortable'
  }
};

I have explicitly created the header and body variables so as to allow the user a bit of flexibilility of using CSS selectors as well for identifying the head and body elements. The next two variables are to specify the default settings for the sortable columns. We will used a 0 based index, as is common in most javascript functions. So, if the user does not specify anything, the table will be sortable based upon the first column. The next variable is for the css class that can be used for styling the sortable column.

Now lets do the widget initialization. The code for it is pretty simple and i will be doing it in the _create() function of the widget.

_create:function(){
   console.log('create');
   var widget=this;
   var $domTable=widget.element;
   var options=widget.options;
   
   var $headings=$('th',options.header);
   
   //For each column index as specified in the sortable columns, add a click event handler
   //and the necessary css
   $.each(options.sortableColumns,function(index){
   
    var columnIndex=this;
    $headings.eq(columnIndex).click(function(){
     //call event handler for click event
    })
    .addClass(options.sortableClass);
    
   });
  }

As seen in the above code, i have initialized a few local variables to reduce the amount of typing that i may have to do. You dont actually need to do it, but i find it pretty handy because not only does it eliminate unnecessary typing, but it also eliminates extra function calls and helps your scripts run a tad faster.

So, what I have done in the above code is, fetch all the headers, and for each numeric value specified as in the sortableColumns variable, I add a click event handler and a css class.

Okey, right now, our code is pretty useless without the click event handler. Now, lets create another private function _toggleSort that handles sorting of the columns. This function will handle sort toggling, i.e. ascending order and descending order for the clicked column. Here is my empty sort toggling function

_toggleSort:function(columnIndex,srcDomHeader){}

and here is how I will call it in my click event handler

var columnIndex=this;
    $headings.eq(columnIndex).click(function(){
     widget._toggleSort(columnIndex, this);
    })
    .addClass(options.sortableClass);

Okey, now that we have created our function, lets try to break down the code for adding the functionality one by one.

First, i will declare local variables for the javascript objects the way I did so in the _create function

var widget=this;
   var $domTable=widget.element;
   var options=widget.options;

All the following code has comments that would explain what is being doe.

//Get the column which has to be sorted, i.e. get all the td elements of that particular column
   var column=$(options.body,$domTable).find('tr>td:nth-child('+(columnIndex+1)+')');

The column variable is a jQuery object. I need to extract the td objects from it and keep it in an array to allow for sorting and reverse ordering.

//Convert the jQuery object into an array
   var columnArray=[];
   $.each(column,function(index){
    columnArray[index]=$(this);
   });

In this widget, since we want the sorting to be reversed on consecutive clicks, i am going to use a small technique to save resorting every time the header is clicked. What I will do is to store a sortstatus when an unsorted column header is clicked. I will do this using the data() function of jQuery. So, if a header is clicked, and it does not already have the sortstatus value or if it is set to false, we will sort the data. If the value is set to true, then it indicates that this is a consecutive click, and all we need to do is to reverse current order of the rows.

But what this also means is that when a column header is clicked upon, i must clear the sortstatus on the other column headers so that they can be resorted when clicked upon.

This is how I do it

//Get the heading
   var $currentHeading=$(srcDomHeader);
   
   if($currentHeading.data('sortstatus')){
    //If the column is already sorted, just reverse the rows
    columnArray.reverse();
   }
   else{
    //If not already sorted
    
    //Clear the sort status on all the other columns
    $currentHeading.siblings().data('sortstatus',false);

//More code for sorting goes here
}

Once in the else, my next task will be to identify the data types for the columns. As mentioned earlier, i will handle only string and numeric values here. I save the identified datatype as a property on the columnArray variable itself.

//Determine the datatype for the column(whether string or numeric)
    $.each(columnArray,function(index){
     if(isNaN($(this).text())){
      columnArray.dataType='string';
      return false;
     }
    });
    
    if(columnArray.dataType!='string'){
      columnArray.dataType='number';
    }

My next task is to sort the data, based upon the datatype for the data in the column. So, in the following code, i will cast the data to numbers wherever applicable, and then sort the 'td' elements.

//Sort the array using Arrays.prototype.sort by passing a custom function
    columnArray.sort(function(a,b){
     var value1='';
     var value2='';
     if(columnArray.dataType=='string'){
      value1=$(a).text();
      value2=$(b).text();
     }
     else{
      value1=parseFloat($(a).text());
      value2=parseFloat($(b).text());
     }
     return (value1<value2)?-1:(value1==value2?0:1);
    });

Once this is done, my column array now contains the selected 'td' elements in a sorted order.

Now i must add the sorting status to the header

//Set the sort status on the current column heading, 
    //which can be used later to toggle the sorting
    $currentHeading.data('sortstatus',true);

All i now need to do is to manipulate the rows of the respective 'tr' elements for the sorted 'td' elements.

//Append the rows to the table body for each td, thereby sorting them
   $.each(columnArray,function(index){
    var column=$(options.body,$domTable).append($(this).parent());
   });

Once that is done, i can safely creae my widget with the following code

$.widget('ui.tablesort',tablesortPrototype);

Here is the code for the entire widget as one big blob!

(function($){
 var tablesortPrototype={
  options:{
   header:'thead',
   body:'tbody',
   sortableColumns:[0],
   sortableClass:'sortable'
  },
  _create:function(){
   console.log('create');
   var widget=this;
   var $domTable=widget.element;
   var options=widget.options;
   
   var $headings=$('th',options.header);
   
   //For each column index as specified in the sortable columns, add a click event handler
   //and the necessary css
   $.each(options.sortableColumns,function(index){
   
    var columnIndex=this;
    $headings.eq(columnIndex).click(function(){
     widget._toggleSort(columnIndex, this);
    })
    .addClass(options.sortableClass);
    
   });
  },
  _init:function(){
   console.log('init');
  },
  _toggleSort:function(columnIndex,srcDomHeader){
   
   var widget=this;
   var $domTable=widget.element;
   var options=widget.options;
   
   //Get the column which has to be sorted, i.e. get all the td elements of that particular column
   var column=$(options.body,$domTable).find('tr>td:nth-child('+(columnIndex+1)+')');
   
   //Convert the jQuery object into an array
   var columnArray=[];
   $.each(column,function(index){
    columnArray[index]=$(this);
   });
   
   //Get the heading
   var $currentHeading=$(srcDomHeader);
   
   if($currentHeading.data('sortstatus')){
    //If the column is already sorted, just reverse the rows
    columnArray.reverse();
   }
   else{
    //If not already sorted
    
    //Clear the sort status on all the other columns
    $currentHeading.siblings().data('sortstatus',false);
    
    //Determine the datatype for the column(whether string or numeric)
    $.each(columnArray,function(index){
     if(isNaN($(this).text())){
      columnArray.dataType='string';
      return false;
     }
    });
    
    if(columnArray.dataType!='string'){
      columnArray.dataType='number';
    }
    
    //Sort the array using Arrays.prototype.sort by passing a custom function
    columnArray.sort(function(a,b){
     var value1='';
     var value2='';
     if(columnArray.dataType=='string'){
      value1=$(a).text();
      value2=$(b).text();
     }
     else{
      value1=parseFloat($(a).text());
      value2=parseFloat($(b).text());
     }
     return (value1<value2)?-1:(value1==value2?0:1);
    });
    
    //Set the sort status on the current column heading, 
    //which can be used later to toggle the sorting
    $currentHeading.data('sortstatus',true);
    
   }
   
   //Append the rows to the table body for each td, thereby sorting them
   $.each(columnArray,function(index){
    var column=$(options.body,$domTable).append($(this).parent());
   });
  }
 };
 
 $.widget('ui.tablesort',tablesortPrototype);
 
})(jQuery);

Here is how I set up my tablesort widget on my table

$(function(){
   $('#movies').tablesort({sortableColumns:[0,1]});
  });

Yay! Now we have a very very simple table sorter in less than 100 lines of code. jQuery makes it so easy!

Try out the code on your own table or on the table that I showed earlier, click on the column headings and see the effect. Of course, if there is a bug, let me know. If not, I would welcome suggestions on how this can be enhanced, or improved, or simplified.

After all, we all love a KISS(Keep It Simple, Stupid)!

Happy Programming :)
Signing Off
Ryan

Using Struts 2 with JSON and jQuery

noreply@blogger.com (Ryan) — Thu, 13 Jan 2011 03:41:00 +0000

It took a decent amount of time to figure out how to set up struts 2 with JSON. and how to extract the data using jQuery. So, i thought that i'd better make a note of the stuff i learned and just restate the rules, few as they are, so that me or someone else can cross verify them when writing code.

There are a few things that need to be done in order to use JSON with struts 2. Basically, struts provides you with a few result types. For JSON, you will require a new Result Type, because, obviously, since the response is a JSON response, you dont have a page to redirect to.

So, first you need to download the JSON plugin, if you already dont have it in your struts download. As usual, keep it in the lib folder of your application.

The struts 2 JSON plugin allows you to create an action that can be serialized into a JSON object. Ok, what that means in basic terms is that in the response that is sent back to the client, the response is the Javascript object that represents the Action class, and the attributes of the javascipt object are actually named after the public getter methods of the action. If the value of any getter method returns a null, the value of the javascript attribute will be null and vice versa.

The plugin not only handles basic types but also complex types like lists and arrays. We will see a code snippet shortly.

First things first. Lets see what needs to be done for setting up our action for JSON.

Keep the json plugin jar in your lib directory.

In struts.xml, create a new package that extends json-default. If you want to use an existing package, you can simply use a comma separated value for the package names as the value of the extends parameter of the package tag. That is what I will be doing here. (TIP : json-default package extends struts-default.)

Specify the result type of your action class to be 'json'

Thats pretty much all you need to do to get things going from the struts configuration perspective.

The json-default package contains an interceptor and the result type configuration for JSON requests and responses.

Now lets get to the code.

From the browser perspective : jQuery
jQuery allows you to issue an ajax request that expects a JSON object as a response by the getJSON method. Like all other ajax requests, the syntax for making the call is the same. You need to pass the url, a javascript object representing the form parameters, and a function that will be invoked upon the return of the invocation. In the returned function, the data that is returned from the server can be treated as a JSON object.
From the server's perspective : Struts 2
All you need to do is to create instance variables and respective getter and setter methods for variables that need to be accessed via javascript. Once in the execute method, you can simply set the values of these instance variables. Then the action need to be configured to return a json object in the struts configuration file.

The point to be noted here is that all the variables that have a setter can be set to the values as received by the form parameters. And all the variables that have a getter method can be retrieved in the client javascript code.

In the following code sections, we will see how we can not only handle simple data types, but also, lists and maps as JSON objects.

First the HTML. This is just an ordinary form that contains nothing but a text field for the user to enter a name. The struts action that we will write will just be used to say Hi to the user.


Enter Your Name

The form id is introForm. Lets handle the submit event of this form in the code to return false, since we do not want to be going anywhere when the user submits. All the action must stay on this page itself.

$(function(){

 $("#introForm").submit(function(){
 
  return false;

 });
 
});

So, now that we know that the action will stay here, what we need to do is serialize the form inputs and issue a request to the server with the form inputs. But before we do that, we must first create the action class and then configure the action and its url in the struts configuration file. So, lets jump towards the server code for once.

Creating the action class is as simple as it has ever been. Since this is a demo, I have created a few instance variables of type List and Map and will populate some dummy values in them so that they can be retrieved using javascript later. Also note that for all my instance variables, I have created getter methods so that their values can be retrieved.

public class AjaxActions extends ActionSupport{

    private String name;
    private String greeting;
    private List countryList;
    private Map countryMap;

    public String sayHi(){
        
        greeting="HI " +name;

        countryList=new ArrayList();
        countryList.add("US");
        countryList.add("UK");
        countryList.add("Russia");

        countryMap= new HashMap();
        countryMap.put("US",1L);
        countryMap.put("UK",2L);
        countryMap.put("Russia",3L);

        return ActionSupport.SUCCESS;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getGreeting() {
        return greeting;
    }

    public void setGreeting(String greeting) {
        this.greeting = greeting;
    }

    public List getCountryList() {
        return countryList;
    }

    public void setCountryList(List countryList) {
        this.countryList = countryList;
    }

    public Map getCountryMap() {
        return countryMap;
    }

}

So, basically what i have done here in the sayHi() function is to initialize an instance variable call greeting, that says hi to the user. Then i populated a dummy list with the names of a few countries. Then i populated a dummy map with the country codes of those countries. My objective is to fetch the greetig, the list and the map on the action from the javascript code.

In the struts configuration file, the following lines would be sufficient to configure the JSON action.

Now my server side code is ready.

Getting back to the javascript code, I am simply going to print the values on the firefox console, you can choose to do whatever you feel like!

$(function(){

 $("#introForm").submit(function(){
  
  var formInput=$(this).serialize();
  
  $.getJSON('ajax/sayHi.action', formInput,function(data) {
   
   $('.result').html('' + data.greeting + '
');

   $.each(data.countryList,function(index, value){
    console.log("value " + value);
   });

   $.each(data.countryMap,function(key, value){
    console.log("key "+ key + ", value " + value);
   });
  });

  return false;

 });
 
});

That does it! Last but not the least, many thanks to the programmers to write such a easy to use plugin. Kudos to all of you!

Happy Programming :)
Signing Off
Ryan

jQuery : Binding events to dynamic DOM elements

noreply@blogger.com (Ryan) — Mon, 03 Jan 2011 16:43:00 +0000

Today in this blog post am going to discuss about a simple way of binding events to a DOM structure, especially one that changes dynamically.

Binding events to jQuery is simple. All that you need to do is use the bind function to bind a DOM element to a given event or to use the various alias functions like click, dblclick etc etc.

One of the major advantages that jQuery offers is the easy manipulation of DOM objects. That means, you can easily create, add or delete DOM elements on the fly and insert them into the page. However, doing this has its quirks as well when it comes to event binding. Lets take an example.

Consider the following HTML snippet in your page.




1_c1

1_c2



2_c1

2_c2

Let us assume that I want to add a sibling div to the div with class "parent2" whenever a child is clicked upon. Doing that is very simple. Here's how I would do it initially.

$(".child").click(function(){
     var newSibling = '
new_child
';
     $(this).parent().append(newSibling);
    });

Well, that solves our purpose. But there is one small problem. As you see, the new div that i inserted into the DOM has a class attribute with a value "child". So, i should presumably expect that if the user clicks over the newly inserted div element, the click event handler should be triggered. Unfortunately for us, that does no happen.

It seems like the event handlers are bound to the DOM elements statically. i.e. Once the DOM is built, the selectors do not bind the same event handlers to newly introduced elements.

Now that poses a serious problem, because conceptually, it seems like the events should have been bound. So, how do we go about it?

Event bubbling to the rescue!

We know well that events in javascript are bubbled upwards in the DOM structure. This feature enables us to solve the problem of event binding for dynamically created elements.

What we are going to do is to bind the click event handler to the parent div of the "child" elements. So, whenever a child element is clicked upon, the parent div gets notified due to event bubbling. In the click handler, you can identify the source DOM element that was clicked by using the value of event.target, where event is the argument that is passed to the click handler. Once we have got a handle on the source DOM element, the job's done! So, if you add a new DOM element to the parent, since the click handler is bound to the parent, you can always be sure that the new child element will also be clickable because the actual handler function is on the parent element.

Here is the code.

$(".parent1").click(function(event){
     var $source = $(event.target);
     var newSibling = '
new_child
';
     $($source).parent().append(newSibling);
    });

Pretty simple eh? Ya, I know its a dumb example, but, I guess simple is always better for demonstration purposes.

Oh, and I could have used $(this).append(newSibling); instead of $($source).parent().append(newSibling);, because it suits our requirement, but I was just trying to be a bit verbose!

Thats all for now folks!

Happy Programming :)
Signing Off
Ryan

Finding elements using jQuery - Part 3

noreply@blogger.com (Ryan) — Sat, 06 Nov 2010 12:53:00 +0000

In this part of the series, I will be discussing a few more ways that are offered by jQuery to traverse siblings of an element.

The methods that we are going to discuss in this post are

prev()
prevAll()
prevUntil()
next()
nextAll()
nextUntil()

All these functions provide us with a way to traverse the siblings of a given DOM element. Lets see some examples.


0
a
b
c

The prev() function selects the DOM element that lies immediately above the current element. So, if we were to apply the prev function to our list item3, it would select the list item 2. However, if you want to select the previous item only if it matches a particular criteria, then you can pass a selector to the prev() function. Note tat the selector function DOES not select the first matching previous sibling. Instead it first select the previous sibling, and then applies the test criteria to it.

$(".item3").prev().addClass("highlighted");

The above code would select the second list item and would add a class called highlighted to it.

Now lets see this

$(".item3").prev(".other").addClass("highlighted");

The above code would select the previous element and then check if it has a class called other. If not, as it in in our case, it will return an empty jQuery object(note that an empty jQuery object is not a null object. Its just like an empty array). The addClass function is called on the empty array and hence has no effect.

Now lets take a look at the prevAll() function

$(".item3").prevAll().addClass("highlighted");

This function, when called without the arguments will select all the previous siblings of the current element. In our case, all list items except list item with clas .item3 will be selected.

When passed an argument, only those previous siblings are returned that satisfy the test criteria.

$(".item3").prevAll(".item1").addClass("other");

In this case, only the previous siblings that have the class as 'other' will be returned by the selector.

Sometimes you have a requirement of selecting the first previous sibling that matches your selection criteria. For example in the below DOM structure, i have 2 list items with a class called 'other'. Suppose that i am traversing from list item 'item3' and i need to get the item having the html value of 'a'.i.e. the second list item.


0
a
b
c

Here is how it can be done

$(".item3").prevAll(".other").eq(0).addClass("highlighted");

As you see, the prevAll function will traverse in upwards in the DOM for all the siblings. Since you need the first match, you select the element 0 of the matched set and apply your style class to it.

Another very useful function is the prevUntil() function. this function is used to select all the DOM siblings, before the current element, until an element is found that satisfies the search criteria.

$(".item3").prevUntil(".other").addClass("highlighted");

So, in our example, all the previous list items of class 'item3' will be selected until a list item with class 'other' is found on the DOM. This function, when called without the selector argument, works the same way as the prevAll function. So, it would be pointless to call this function without the selector argument.

The other functions - next(), nextAll() and nextUntil() work in exactly the same way as their counterpart function, apart from the fact that instead of selecting the previous siblings, these functions work on the siblings that follow the currently selected element.

These six functions make traversing in a given sibling structure pretty easy.

Happy Programming :)
Signing Off
Ryan

Finding elements using jQuery - Part 2

noreply@blogger.com (Ryan) — Fri, 05 Nov 2010 18:20:00 +0000

Today in this post, I am going to pick up from where i left off in the previous post where I discussed about how to use contexts and the usage of the find function and the children function.

Now, lets take a look at another cool way in which a jQuery allows us to traverse the DOM.

One of my favorite functions is the siblings function. This function, as the name suggests allows you to get the siblings of a the current element. For example, suppose you have a unordered list and you need to change the css of a particular list item on mouse hover to indicate that it is being highlighted, but at the same time, you will also need to clear the other list items that were previously hovered over. As is common in jQuery, there is more than one way to achieve this. Lets check out two different ways in which this can be done.


a
b
c

In order to achieve the effect that we desire, we can simply make use of the hover function.

$(".level1>li").hover(
     function(){$(this).addClass("highlighted")},
     function(){$(this).removeClass("highlighted")}
    );

But lets make things a bit more complicated. Suppose instead of simply highlighting the current li, your currently highlighted elements also need to print the information of the previously highlighted element. In this case, the hover function wont suffice. I know example sound a bit silly, but its a silly silly world out there, and requirements can be bizarre and unpredictable. In the next snippet, i am just going to demonstrate how the siblings function can come to the rescue when we need to countenance such requirements.

I am just going to print the value of the previously selected item on the firefox console(ah, yes I am a firefox fan, if you haven't already noticed that by now, although I occasionally use chrome as well for my adventures). Note that I will be printing it when my mouse pointer is over the new element, instead of when the mouse is coming out of the previous element.

$(".level1>li").mouseover(
     function(){
      var prevHovered = $(this).siblings(".highlighted");
      if(prevHovered.length!=0){
       console.log("prev html : "+prevHovered.html());
       prevHovered.removeClass("highlighted");
      }
      $(this).addClass("highlighted");
     }
    );

As you see in the above code, I use the mouseover function to handle the selection of the element. The siblings function will select all the siblings of the ul, but the important thing to note here is that the current element is not returned in the selected set. So, all you have is a set of siblings of the current element. You can narrow down the search by providing an optional selector to the siblings function so that only those siblings that match the selected criteria will be returned in the set. However, if you don't pass any argument, all the siblings will be returned.

All the above code did was to select the previously selected element, check if it was not null. It its not, print the html of that element on the console and remove the highlighting from that element.

Easy stuff.

But I mentioned before that I used the mouseover function instead of the hover function. The hover function can take either 1 or 2 arguments as callbacks that can be used to call your function. If only one argument is sent, it will called on both of the mouseover and mouseout event. If you provide two functions as arguments, the first will be used for a mouseover and the second will be used for the mouseout event.

I figured, instead of having an empty mouseout, i'd rather use the mouseover function since it is more natural to our requirement in this case. However you can replace the mouseover function with the single argument hover function in the above code, and it would still work the same.

There's more from where that came from. Stay tuned!

Happy Programming :)
Signing Off
Ryan

Struts 2 : Creating and accessing maps.

noreply@blogger.com (Ryan) — Fri, 05 Nov 2010 13:21:00 +0000

Today, in this post, I am going to discuss how to create and access HashMaps in Struts 2.

My environment has the following jar files.

struts2-core-2.1.8.1.jar

ognl-2.7.3.jar

Struts 2 makes extensive use of OGNL in order to retrieve the values of elements. OGNL stands for Object Graph Navigation Language. As the name suggests, OGNL is used to navigate an object graph. In this post, i am going to use the OGNL syntax to create Map on a jsp page, and show you how to iterate over it to fetch the keys and values from the map.

In the following example, i will create a map, on they fly in the iterator tag, and will use it in the body of the iterator tag.

Note the syntax that has been used to create a Map on a jsp page in struts 2 using OGNL. Once the map is created, the iterator tag can be used to iterate over each element of the map.

Now suppose the map that we want to access is in a map inside the HttpRequest. Assume that some action somewhere in the chain has kept a map in the request using the key "myMap". In order to iterate over the elements of the map, we can do the following

Okey now, enough with iterating over maps. I don't think there are any more permutations for accessing maps. But if i do find more, ill document them down here.

Consider a case where you dont want to iterate over the entire map. Instead, all that you want to do is to extract a value form the map based upon a key that is already known to you in your jsp page.

Assume that you have a variable in page scope called "runtimeKey" that you set using the s:set tag. The value of this variable is a string key that can be used to get a value from a map.

Here is how you can fetch the value from the map without iterating over it.

As you see, since the variable "runtimeKey" is an OGNL variable and is available on the value stack, it can be referenced using the # notations. Also not that instead of using the dot notation, I have used square brackets to fetch the key. This is because the value of my expression "#runtimeKey will only be evaluated when its inside the brackets. Also note that the value of the key runtimeKey is contained within single quotes to direct OGNL to evaluate it as a string when setting as the value for my key.

Consider another situation where your keys follow a pattern. For example key_1, key_2. And you have the values 1 and 2 as page scoped variables. So, now instead of having the string value of the key directly, you may have to construct the key using concatenation.

Your key pattern was set above. And you Map has a key called key_1. So, here is how you would have to concatenate your strings in order to construct the key and fetch the value.

Huh. So easy!

Thats all for now folks.. Stay tuned for more!

Happy Programming :)
Signing Off
Ryan

Finding elements using jQuery - Part 1

noreply@blogger.com (Ryan) — Thu, 04 Nov 2010 18:23:00 +0000

Today in this blog post I am going to discuss a few ways in which we can find DOM elements using jQuery.

We all use jQuery selectors in order to select elements to work upon. Most of our selectors are usually based upon the id or the class or some other attribute, and sometimes even the structure of the elements being selected. However, apart from these selectors, jQuery also allows you to select elements in a completely different way, like all the siblings of an element, all the children of an element. It also allows you to search within the context of another element.

Lets see what I mean by that. Consider the following DOM structure.


a
b
c     
c1
c2

As seen in the structure, i have one main ul which has three li elements. this ul acts as the main container. The third li element in the main container in turn has another ul which has three li subelements.

For both the ul elements, the li elements have been assigned classes pertaining to their location in the list. So, we ended up with a total of four li elements having the same class for the li element- item1 and item2.

Now let us see the various ways in which we can select the different elements in this structure.

As usual, we will be writing all our code in the jQuery onload function which is as follows.


$(function(){
//All our code goes here.
});

Lets assume that we want to color all the elements that have the class 'item2' within our ul that has a class 'container'

There are actually three ways to achieve this.

Here is the first.

$(".container .item2").css({"background-color":"blue"});

This way is simple, and we use normal css selectors to find all the sub elements in the DOM under our .container that have a class named as .item2. This, in our case,would set the background color of both the li elements that have the 'item2' class.

Now lets see a second way to do it.

$(".item2",".container").css({"background-color":"blue"});

This is also equivalent tot the previous snippet. This selector makes use of "search context". A search context is nothing but the context in which the elements will be searched. So, if i were to read out the selector expression, it would be read something like this

'Select all the elements that have a class called item, that exist inside the element that has a class called container'

This means that the first argument that is passed to the selector is the actual search expression, whereas the second argument that we passed to the selector becomes the context of our search.

It also means that when we don't pass the second argument, the entire DOM structure is searched by default.

Here is the third way to do it.

$(".container").find(".item2").css({"background-color":"blue"});

In the above code, we are using the find() jQuery function to find the elements. If i were to read it aloud, it would be read as

'Select the elements with a class called container first, and inside all those selected containers, select the elements that have the class called item2.'

Sometimes, if your classes are unique, you may not feel the need to find elements using the context. Or, in many cases, it is possible to find the elements using a normal selector that would traverse the entire DOM. Why use contexts and confuse things?

However, when your structure becomes complicated, it may come in extremely handy to use contexts to find elements. Because, when you find using contexts, jQuery has to traverse fewer DOM elements to get the elements you desire to search, thereby saving you time and improving overall performance.

Sometimes, it it better to make use of a context when you already have a part of the search for the context already done for you.

For example, let us assume you register a click function for your container. And inside the click function, you need to do the same thing that we did above.

Here is how it could be done in the normal way

$(".container").click(function(){
$(".item2",".container").css({"background-color":"blue"});
});

But there is one thing to be noticed here. We are already in side the click handler of the container. That means, jQuery has already searched the DOM for our container. Then why do we need to again ask jQuery to search the DOM for the container? Instead, we can make use of the current context, and simply search for the item we want.

Here is how it can be done.

$(".container").click(function(){
$(".item2",$(this)).css({"background-color":"blue"});
});

The context in a click handler is determined by the value of the 'this' variable. So, finding elements can become easier for jQuery if you just know when and were you can reduce the lookups that jQuery has to do, by making use of an existing context.

That's all for now. I shall discuss more ways of finding elements using jQuery in future posts.

Till then, cya!

Happy Programming :)
Signing Off
Ryan

jQuery : Creating a custom widget

noreply@blogger.com (Ryan) — Wed, 03 Nov 2010 17:38:00 +0000

Today, in this post, I am going to discuss how to create a custom widget using jQuery.

Lets begin with the definition of a widget.

A widget in jQuery means nothing but a function that can be called on a jQuery selector that modifies the behaviour of all the selected elements by attaching data to the selected elements and maintaining individual state for each of these elements.

The important point to be noted here is the "state keeping" that is associated with each selected element. This is what makes the difference between a jQuery plugin and a jQuery widget. A widget can be considered to be an advanced form of a plugin.

Widgets can be of several types. For example, you may create a widget that simply formats the data in an element. Or you may create a widget that is closely associated to the structure of a html snippet, because it uses the html structure to create its layout. for e.g the "tabs" widget.

In this post, I am going to create a very basic widget, that actually does nothing useful. My objective here is to write a basic skeleton structure to create a widget that you can replace anytime with your own functionality.

Our prerequisites :

Download the jQuery UI plugin. This plugin contains the javascript files that are necessary to create a widget. Thats because the widget function is available to us via the UI plugin. Of course that does not mean that you can only create UI related widgets using this plugin. You are always only limited by your imagination.

You can download it from here. For the examples in this post, all you need is the four components that fall under the "UI Core" category. We will only be dealing with the basic stuff here. Come back when you are done.

Okey, now that you're back, I want to ensure two things before we begin.

You have extracted the zip file in some arbitrary location on your disc. lets call it "jQueryUI". This folder should contain the "js" folder and the "development-bundle" folder. We shall be using he "jQueryUI" as the root directory where we would be creating our html page in which we would be using jQuery.
You create a page called widgetExperiment.html in your root directory.

In the head section of your html page, include the following lines of code.

These are the scripts that we need to refer to in order to create our custom widget. As you can see, the version numbers of your script files may differ based upon when you are actually reading this blog. Just go to the appropriate directories and replace the src file names in the script tag with the proper file names.

Now, we are all set to crate our first jQuery widget.

Lets start with the standard "onload" function in jQuery.

$(function(){
//All our Code goes here
});

When creating a widget, the first thing that we need to do is to create an object that represents the functions and the data of our widget. This object acts as a prototype for our widget data. The purpose of this object is to encapsulate the functions and the properties that will be associated with each selected element returned by the jQuery selector expression.

var myPrototype={
      options:{level:1},
      setLevel:function(level){this.options.level=level;},
      getLevel: function () { return this.options.level; },
      _init: function() { this.setLevel(this.getLevel());}
     };

As can be seen above, I named my prototype object "myPrototype". Inside my prototype, i have a few functions and an object called "options".

There are two things that you need to know about the properties that are created inside a widget.

The function names that begin with an underscore are private. i.e. these functions cannot be called from outside of the widget.

All the data, pertaining to the state of the widget should be kept in an internal object called "options".

An instance of the widget is created for each element returned by the selector. The options object ensures that for each instance of the widget that is created, the properties remain private to that particular instance.

Initialization of your widget if required, must take place in the _init function. You can also create a destroy function to perform any cleanup when your widget instance is destroyed. These functions are called automatically and are part of your widget lifecycle.

As seen in the code, for my widget, i created a private property called "level" and two "getter/setter" functions to manipulate this property. The getter/setter functions are public by virtue of not starting with an underscore.

Calling these functions are not done in the usual manner. We shall see how to invoke these public functions once we have created the widget.

Creating a widget is very simple. All that you need to do is to associate your prototype object with a name and pass it to the jQuery widget function. Here is how it is done

$.widget("ui.myWidget",myPrototype);

The jQuery widget plugin function is used to create your widget by assigning it a name in the namespace "ui.myWidget" and then passing the object that we use as the prototype object in the second parameter.

Although the namespacing is "ui.myWidget", your widget is simply named myWidget and that is what your plugin function will be called.

Associating your widget with an element is a complete no brainer. For example, the following code associates all my divs on the page with my widget. (you dont want to associate all your divs with a widget unless ur a total nut, or if you are testing something like the way I am doing now)

$("div").myWidget();

Now lets see how to use our newly created widget. If you remember, when creating the widget, we declared a property called "level" that set to an initial value of 1 in the widget. Now we are going to write a simple click handler for our divs that sets the value of the level and prints it on the console.

$("div").click(function(){
      
      $(this).myWidget("setLevel",4);
      
      console.log($(this).myWidget("getLevel"));
      
     });

In the following example, notice how we called the public functions getLevel and setLevel. Also notice how we passes a parameter to the setLevel function of our widget. The first argument is treated as the function name and the second argument onwards are treated as the arguments for the function being invoked.

Here is the entire code in a single snippet

var myPrototype={
      options:{level:1},
      setLevel:function(level){this.options.level=level;},
      getLevel: function () { return this.options.level; },
      _init: function() { this.setLevel(this.getLevel());}
     };
     
     
     $.widget("ui.myPrototype",myPrototype);
     
     
     $("div").myPrototype();
     
     $("div").click(function(){
      
      $(this).myPrototype("setLevel",4);
      
      console.log($(this).myPrototype("getLevel"));
      
     });

Well, that seemed pretty easy, didn't it? But our widget lacks one important thing that we would need to do in most of our widgets. That is, to access the current element to which the widget is attached, inside the widget. You cannot use "this", because inside the object, the keyword "this" represents an instance of the widget. The actual element associated with the object is accessed via "this.element", which is a jQuery object representing the dom element.

So, if you were in the init method and you wanted to print the value of the id of your selected element, that could easily done by the writing the following lines in the init method

console.log("inside init : "+this.element.attr("id"));

So, thats one more thing settled.

Lets add a little more 'dummy' functionality to our code by allowing it to interact with the mouse. In order to allow your widgets to interact with the mouse, you need to create your widgets in a slightly different way.

Here is how you created the widget in the normal case ;

$.widget("ui.myWidget",myPrototype);

And here is how you will create it when you need mouse interaction

$.widget("ui.myWidget",  $.ui.mouse,myPrototype);

Once you have done that, you can need to override a few functions to handle mouse related events on your widget. But before that you should call the _mouseInit and _mouseDestroy methods in the _init and destroy methods of your widget respectively.

Here is the code in all its mighty form!

var myPrototype={
      options:{level:1},
      setLevel:function(level){this.options.level=level;},
      getLevel: function () { return this.options.level; },
      _init: function() { this._mouseInit();},
      
      
      destroy: function() {
       this._mouseDestroy();
       return this;
      },
      
      _mouseCapture: function(event) {
       console.log("inside capture: x("+event.pageX +") y("+event.pageY+")" );
       return true;
      },
      
      _mouseStart: function(event) {
       console.log("inside start: x("+event.pageX +") y("+event.pageY+")" );
       return true;
      },
      
      _mouseDrag: function(event) {
       console.log("inside drag: x("+event.pageX +") y("+event.pageY+")" );
       return false;
      },
      
      _mouseStop: function(event) {
       console.log("inside stop: x("+event.pageX +") y("+event.pageY+")" );
       return false;
      }
      
     };
     
     
     $.widget("ui.myWidget",  $.ui.mouse,myPrototype);

I hope this bare bones example comes in handy to get you started quickly on creating simple widgets.

Thats all for now folks!

Happy Programming :)
Signing Off
Ryan

Javascript prototype property

noreply@blogger.com (Ryan) — Sat, 30 Oct 2010 13:43:00 +0000

Today, in this post, I am going to discuss about the prototype property of classes in javascript. I came across this property when i was trying to learn about classes in javascript. Javascript, being a dynamic language, allows you to have a number of bizarre yet interesting features that you don't find in mainstream languages. the prototype property is one such feature. Due to its idiosyncrasy, it is usually a source of confusion. I am just going to brush on the basics here so that it becomes easy for us to spot loopholes in the more complex code that we usually write.

Here are our objectives.

Learn where and why the prototype property is usually declared in javascript.
Learn how to use the prototype property in javascrpt.

First, lets try to explain why the prototype property is used in javascript.

The prototype property comes in handy when you have a class and you have already created a set of objects and at a certain point of time, you want to introduce a new property in each of your objects.

Lets see with an example. First we create a class called Person with a property called name

function Person(name){
      this.name = name;
      this.getName=function(){return this.name;};
      
      this.setName=function(nameArg){
       this.name=nameArg;
      };
     }

Then we create a few objects of this class as follows.

var p1= new Person("person1");
var p2= new Person("person2");

Now suppose that need to add a property called 'age' for all the person objects that are currently created. The first way that might come to our mind is to modify the class declaration and add a new property called age to it in the same way that we added name property. But what if the class Person is declared in some common file and is referenced by different scripts, and my requirement necessitates that the new property should be available only for the currently executing script. This is where the prototype property comes to the rescue.

We can add a property to all the instances of the class by writing the following lines of code.

var p1= new Person("person1");
     var p2= new Person("person2");
     
     Person.prototype.age=30;
     
     console.log(p1.age);
     console.log(p2.age);

As seen in the above code, when i print the value of the variable age, both the objects are able to print the new property.

An interesting thing to not here is that the property called age that has been newly created here is actually a class variable. i.e. all the objects created are able to see the same value of the newly added property. What this means is that if we try to modify the property via one variable, all the objects will see the new value of the property. Since objects are equivalent to functions in javascript, the prototype property can be used to create new functions on the class as well.

Lets modify the code for the Person class by adding a function to set the age.

this.setAge=function(argAge){
       Person.prototype.age=argAge;
      }

So far so good.

Now, lets see what happends when we print the age of the objects after modifying the age for one of the objects.

Person.prototype.age=30;
     Person.prototype.setAge=function(argAge){
       Person.prototype.age=argAge;
     }
     
     
     console.log(p1.age);
     console.log(p2.age);
     
     p1.setAge(40);
     
     console.log(p1.age);
     console.log(p2.age);

If you run this, you would see that both the objects p1 and p2 have the same value of age after being modified. So, after all, what was the use of creating a new property if it is being shared across all the objects. Also, we saw that in the setAge function that we are using the fully qualified syntax to access the age property. Lets see what happens if we use the shorthand notation in the setAge method.

Person.prototype.setAge=function(argAge){
       this.age=argAge;
     }

     console.log(p1.age);
     console.log(p2.age);
     
     p1.setAge(40);
     
     console.log(p1.age);
     console.log(p2.age);

Now, if you were to print the age of the two objects, they would differ. Seems like our problem is solved. But what actually was the cause of the problem in the first place? The problem arises due to the way in which the javascript engine searches for the age property on the object.

When trying to access the age property, the engine will first search the property on the instance of object. i.e. this.age. If this property is not available on the object then the engine will search for the property in the prototype property. Since the variable 'age' is declared on the prototype, it is found and printed on the console when we try to print it for the first time.

But when we set the property using the setter method using the "this.age=argAge", a new property is created on the current instance and its value will be set to the value passed as the argument.

You might be wondering, what is the use of creating a property using the prototype method. The main advantage that you get by using the prototype property is that you can create new class level properties or functions at runtime without modifying the class. And from then on you can read the value of this property from all the instantiated objects. You can then also create a property of the same name on the objects using the value of the prototype property.

For example

Person.prototype.addAge=function(){
      this.age=this.age+1;
     }

p2.addAge();
     
     console.log(p2.age);

In the function addAge, the "this.age" on the RHS will refer to the Person.prototype.age the first time it is called and the "this.age" on the LHS will create a new public property called "age" on the current instance. Further invocation on the method will cause the newly created publicly created property.

Thats all for now folks!

Happy Programming :)
Signing Off
Ryan

Javascript classes

noreply@blogger.com (Ryan) — Sat, 30 Oct 2010 08:23:00 +0000

In this post, i am going to discuss how to create classes in javascript and how classes in javascript behave differently as compared to classes in other languages like Java.

Here are our objectives.

Learn how to create javascript classes.
Learn how to create properties in javascript classes.
Accessing the properties of javascript classes.

Lets walk through them one by one.

In javascript, classes are created by merely creating a constructor function of the class. The functions declared within the constructor on the 'this' object become the "public" functions of the class. The variables declared within the function on the "this" object become the "public" variables of the class.

Lets see with an example of a class called person.

function Person(name){
      this.name = name;
      this.getName=function(){return this.name;};
      
      this.setName=function(nameArg){
       console.log(nameArg);
       this.name=nameArg;
      };
     }

As seen above, i created a function named Person. Then i created a property called name on the "this" object. And i also created a bean style getter and setter for this property on the "this" object. Here is how we instantiate the class.

var p1= new Person("ryan");

As you see, instantiation is pretty simple and quite similar to your conventional languages like Java.

Now lets see how to invoke the methods and access the properties.

console.log(p1.name);
     
console.log(p1.getName());
     
p1.setName("public name");
     
console.log(p1.getName());

Note that the property "name" is a public property, because it is declared on the this variable. So, it can be accessed without any getters and setters. I have simply introduced getters and setters for the "name" property to demonstrate how private properties differ from public properties, which i will be covering in the next example.

So far, so good.

Now lets see how the code for the person class would change if i were to make the "name" property private.

function Person(){
      var name;
      this.getName=function(){return name;};
      this.setName=function(nameArg){       
       name=nameArg;
      };
     }

Okey, lets make a note of the differences. First thing you see is that i created a property called "name" using the var keyword. Now it is a private variable. The point here is that all the variables declared in side a class, that are not declared on the this variable are private variables. And the public getter/setter functions, are allowed to set and get the private variable directly without any using the "this" keyword. This is possible due to javascript closures. Closures allow you to access locally declared variables from with locally declared methods. And the scope of the local variable lasts as long as the scope of functions where it is being used.

As i said before, if all local variables are private variables, then the following class declaration should be equivalent to the previous one for declaring private properties.

function Person(name){
      this.getName=function(){return name;};
      this.setName=function(nameArg){
       console.log(nameArg);
       name=nameArg;
      };
     }

And guess what, they are equivalent. Thats because, the variable passed as an argument in a constructor is a local variable in the function, just as in Java. Hence, it automatically becomes a private variable.

Here's how it can be accessed

console.log(p1.getName());
     
     p1.setName("surprise");
     
     console.log(p1.getName());

Pretty simple.

However, it is better not to have private variables and corresponding getter and setter methods for them because for each object that you create, a new copy of the methods would be created for each object, and hence it would have significant memory overload if you intend to create several objects. Its always better to create public properties and mainly use function pointers instead of functions in your classes. Ill be discussing about these topics in my upcoming posts.

Till then.

Hasta La Vista!

Happy Programming :)
Signing Off
Ryan

Struts 2 - Creating Dynamic results

noreply@blogger.com (Ryan) — Mon, 18 Oct 2010 18:08:00 +0000

Hi everyone,

Today, in this blog post, I am going to jot down a way to create dynamic results in struts 2.

Lets first begin with a few questions.

What do i mean by dynamic results?

We all know that struts allows us to configure the pages to which request must be dispatched to redirected to, via the "result" tag. However, at times, it may be hard to determine at configuration time itself, which pages need to be set as the result. For example, your business logic may determine the action or the jsp that you need to forward to. In the following example, I am going to try and allow the dynamic results in Struts 2.

Whats my objective?

To create an action class that determines the jsp page name that we need to forward to based upon some business logic.

Configure the action in my struts configuration file(struts.xml) for dynamic results

Invoke the action.

Now, lets begin.

Firstly, we create an action class called DummyAction2. (STATUTORY WARNING : The naming conventions in this post, and for the record, many others, might sound bit weird, but i have a tonne of experiments, and its really hard to settle on a proper name for every whim that comes to my mind. So, please bear with me on that note. :> )

My action class is like any other action class. It contains an execute method. But in my case, the execute method does not do anything, except return a "success" string. Thats because i have another business method, which i am going to name as(surprise! surprise!) anotherMethod. This is the method that i am going to invoke using my action mapping.

In order to be able to identify the page that we need to display, we need to create an instance variable that holds the name of the page that we need to forward to. And we create getter/setter methods for this instance variable.

Ill just keep the business logic simple, and store the name of the next page to be displayed, in this instance variable when the action is invoked.

Lets take a sneak peek at the code in the action class.

public class DummyAction2 extends ActionSupport{

    private String nextPage;

    public String execute()
    {
        return ActionSupport.SUCCESS;
    }

    public String anotherMethod(){
        String actionStatus=ActionSupport.INPUT;
        System.out.println("Another Method in Dummy Action");
        
        nextPage = "myPage.jsp";

        actionStatus=ActionSupport.SUCCESS;
        return actionStatus;

    }
    /**
     * @return the nextPage
     */
    public String getNextPage() {
        return nextPage;
    }

    /**
     * @param nextPage the nextPage to set
     */
    public void setNextPage(String nextPage) {
        this.nextPage = nextPage;
    }
}

As you see, there's nothing much going on in my anotherMethod. All i do is to set the value of the next page in the instance variable. And then i simply return a success response from the action class.

The mapping is where the real magic takes place. In your mappings, you can dynamically determine the value of a variable in an action using ordinary EL. Lets see the code first.


                ${nextPage}

Okey, i was lying. Its no magic. Its just that, in your struts configuration file, you can access the properties in your current action class using ordinary EL. Thats exactly what we have done here. The string ${nextPage} is used to extract the value of the property named "nextPage" from the current action. And since that action is a jsp page in our case, that's the page that will be rendered to the user.

Invoking the action is done in the same old fashioned way.

Invoke Dynamic Result

I guess, the idea is pretty clear.

Thats all for now. See you folks next time!

Happy Programming :)
Signing Off
Ryan

A sample paint application using jQuery

noreply@blogger.com (Ryan) — Mon, 13 Sep 2010 18:02:00 +0000

In today's post, I am going show how one can associate mouse events to an html element using jQuery. JQuery allows us to bind a large number of events to objects fetched by using a jQuery selector.

The following is the list of events that are recognized by jQuery :

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

Binding events to jQuery usually means making the selected Dom Object aware of the event and take necessary actions based upon it.

The primary function that jQuery uses to perform these binding is called (surprisingly!) the bind() function.

The syntax of the bind function is simple. For a given selected set of jQuery object, you indicate the function that needs to be called when a particular event takes place on that DOM object.

So, basically, its an eventname - handler function() duo. Occasionally, you may also need to pass additional parameters to the handler function. That is done by passing a map of the parameters in the arguments of the bind function.

Following is the basic syntax of the function.

.bind( eventType, [ eventData ], handler(eventObject) )

However, for most tasks, you would be using the following version of the function

.bind( eventType, handler(eventObject) )

In this post, I am going to create a simple application that acts like a very very primitive version of MS Paint. Here's the basic idea : -

I am going to create a div, that will act as a canvas. Using the mouse, the user should be able to draw curves on the screen as he drags the mouse on the canvas, just like the way we do using pencil and paper. The only difference is that instead of the pen, you use the mouse, and instead of the paper, you have a div(to which I will assign appropriate dimensions) on which to draw.

To make things a bit more interesting, (just a bit more), i will allow the user to choose a color for the paintbrush.

The body of my html page has 2 parts- the canvas, and the color palette.





green

blue

red

black

The div that I am going to use as a canvas has been given an id if "canvas".

The palette contains four div's that act as buttons that can be used to select the color. The content of the 4 div's is nothing but the name of the color the div represents.

So, here's the basic plan to achieve what i want to do : -

Track the movement of the mouse, the moment it is pressed, and stop tracking it the moment it is released. This will be achieved by binding appropriate handlers to the mousedown event, the mousemove event and the mouseup event.
When the mouse is being dragged on the canvas, i need to create a dot at the position of the mouse. In this example, i am going to create a 4 pixel dot. This dot is nothing but an span element having absolute positioning. A new span will be created for every position that my mouse cursor moves over in the area described in my canvas.

Here is the basic CSS that I will be using to achieve the desired layout.

.canvasStyle{
 width:500px;
 height:500px;
 background-color:#cfcfcf;
 float:left;
}

.dots{
 width:4px;
 height:4px;
 position:absolute;
}


.palleteStyle{
 float:left;
 padding:10px;
 position:relative;
 text-align:center;
}

.colorChooser{
 border:solid 1px #000000;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 margin:5px;
 padding-bottom:8px;
 width:100px;
 height:12px;
}

The css is pretty simple. I have a class 'canvasStyle' to define the layout of my canvas. Then I have a class 'dots' to define the layout of my dots. Then a class 'palleteStyle' to define the layout of my color palette. And then a class 'colorChooser'.

Now lets talk about the javascript. All my code is in the jQuery onload function. Since this is the only functionality of my sample web page, I have taken the liberty to use global variables within this function. You may have to use a more structured approach if you want such functionality to coexist with your existing code. (making a widget would be a good idea, but we shall see about that later)

The only global variable that i am going to use here is the color of the brush. Initially, I set it to black. Here is the code for it.

$(function(){
 var bkcolor="black"; 
});

Now, the first thing i need to do is to bind the mousedown and mouseup event of the canvas to a particular function in which i will do my additional tasks.

Fortunately, the code for binding mouse events in jQuery is simpler than you can even imagine.

$("#canvas").bind('mousedown',function(event){
 
});


$("#canvas").bind('mouseup',function(){
 
});

The next thing that i need to do is to enable the user to click on any of the four div's on my color palette and be able to set the color variable based upon his selection. Since the color is the same as the inner html of the div's the code to set the color of the brush is pretty trivial. (dont look at me like that, i did this to make my life a bit easier!)

$(".palleteStyle").click(function(event){
 $target=$(event.target);
 bkcolor=$target.html();
});

In the above code, as you can see, instead of binding a separate function to each of my coloring div's, i chose to bind the click event handler to the parent container, i.e. my color palette. Inside the event handler, I determine the target of the click by using the 'target' property of the event object that jQuery allows me to pass to my event handling function. Once I get hold of my target, all I need to do is to set the value of the global variable to the html of the selected div.

Well, now there are only 2 important things remaining. Binding and unbinding the mousemove event on mouseup and mousedown. The other thing is to add a span to my canvas at the position of the mouse cursor.

First things first. Lets see the code for binding and unbinding the mousemove events.

$("#canvas").bind('mousedown',function(event){
 $(this).bind('mousemove',function(event){
         //some code goes here
 });
});


$("#canvas").bind('mouseup',function(){
 $(this).unbind('mousemove');
});

Well, quite simple eh? Ok then, lets move on to the next task of adding a span.

For adding a span, we first need to identify the position of the mouse cursor. This task will be handled in the mousemove handler function. As you can see above, the handler function takes and event variable as an argument. This variable can be used to identify the x and y coordinates of the mouse as and when it moves.

the X and y coordinates of the mouse can be retrieved from the pageX and pageY attributes of the event object. After that, all we need to do is to add the span to the dom inside the canvas. We achieve that by using the append() function. That said, the following code should be easily understandable.

$("#canvas").bind('mousedown',function(event){
 $(this).bind('mousemove',function(event){
  var dot ="";
  $(this).append(dot);
 });
});

The above code simply creates a span and sets the left and right css attributes to the pageX and pageY. And of course I set the background color to the bkcolor global variable.

Now, just to add a little more spice, ill change the visual appearance of the color selection div's based upon the color the represent. Here's the code for it.

$(".colorChooser").each(function(){
 $this = $(this);
 var bkcolor=$this.html();
 $this.css({"background-color":bkcolor,"color":"white","opacity":"0.8"});
});

Ya, I know, I unnecessarily made it fancy, but believe, you got my point.

Time to see the entire javascript for this example in one huge chunk. So, here goes nothing : -

$(function(){
 var bkcolor="black";
 $("#canvas").bind('mousedown',function(event){
  $(this).bind('mousemove',function(event){
   var dot ="";
   $(this).append(dot);
  });
 });
    
 
 $("#canvas").bind('mouseup',function(){
  $(this).unbind('mousemove');
 });
 
 $(".colorChooser").each(function(){
  $this = $(this);
  var bkcolor=$this.html();
  $this.css({"background-color":bkcolor,"color":"white","opacity":"0.8"});
 });
 
 $(".palleteStyle").click(function(event){
  $target=$(event.target);
  bkcolor=$target.html();
 });
});

Thats pretty much it takes to make something as simple as a bare bones paint application.
Here is the screenshot of how it looks in Chrome on my pc.

Forgive me, my calligraphy with the mouse ain't so good. But its kinda fun, especially if it can be done in a browser! And of course, jQuery makes it unbelievably easy :)

Cheers!
Happy Programming :)
Signing Off
Ryan