Shortlink

jQuery Plugin – III

“fn” property in $ is used to attach new functions in jQuery. You can also develop plugins by using global functions. You can directly assign a new method to $ function as given below:
$.xxx = function(){


Say you want to capitalize a String you can write
$.capitalize = function(value){
 return value.toUpperCase();
}
You can use it by calling alert($.capitalize(“plugin”));
One useful method that I have always written,  is  while working with dates.
$.daysFromNow = function(days){
  var date = new Date();
  date.setDate(date.getDate()+days);
  return date;
}
You invoke it as $.daysFromNow(7) it will return the next week’s date. 
I found the “daysFromNow” example from Venkat Subramaniam‘s  Programming Groovy book. He has implemented a “daysFromNow” function in Groovy using it’s meta-programming capability.
You can also implement a lot of functionalities that involve arrays, in this fashion. 
So crack some code and have fun!!!
Shortlink

jQuery Plugin – II

In my previous post, I discussed creating a simple plugin in jQuery using the “fn” property. Let’s extend it further.
jQuery  provides a method chaining mechanism that makes coding easy. Say, you want to change the color of a text and change its’ value, you can write it as follows,
$(“#id”).text(“newValue”).css(“color”,”red”)
How do you get this facility for our changeColor plugin?
$.fn.changeColor = function(color){
    $(this).css(“color”,color);
    return $(this);
}
Returning the invoked object using $(this) gives the ability to pad up more methods.

If you call changeColor with more than one element like $(“#id1,#id2”).changeColor(“red”) then you can modify the code as below
$.fn.changeColor = function(color){
         return $(this).each(function(){
              $(this).css(“color”,color);
        });

changeColor returns an array of the ‘invoked’ objects.
So our plugin can be chained now as shown below.

$(“#id1,#id2”).changeColor(“red”).text(“Chained”); 

Shortlink

jQuery Plugin – I

jQuery is used in lot of projects these days, and one of the challenges is to write reusable, modularized code. jQuery Plugin is an approach to extending core jQuery API and creating reusable code. There a number of ways of creating a jQuery plugin. I want to discuss the easiest approach to developing a plugin in this post.

jQuery provides a property ‘fn’ in the core jQuery or $ class(!#$%). You can attach your own function to the “fn” property.

Let’s say you have a header with id as ‘info’ and you want to display the current date by writing
$(“#info”).date()
You can attach a date function in the core jQuery API like below:

$.fn.date = function(){
   $(this).text(new Date()+””);

Pretty simple!!! Isn’t? Let’s try another one.

Say, you want to change the text color of an element by having your own function changeColor.

$.fn.changeColor = function(color){
   $(this).css(“color”,color);

Huh!!!Even better.

Usually plugins are created in a JS file jquery-xxx.js. But to keep things simple, I have used the code inline. The complete code is given below.
<!DOCTYPE html>

<html>
<head>
<script src=”jquery-1.6.1.js”></script>
<script>
$.fn.changeColor = function(color){
$(this).css(“color”,color);
}
$.fn.date = function(){
$(this).text(new Date()+””);
}
$().ready(function(){
$(“#info”).date();
$(“#welcome”).changeColor(“red”);
});
</script>
</head>
<body>
<h2 id=”welcome”>jQuery Plugin</h2>
<h5 id=”info”></h5>
</body>
</html>


We will discuss few more points of plugin in the subsequent posts. Have fun!!!

Shortlink

$ in jQuery?

During the initial days of coding with Prototype and jQuery libraries what used to baffle me is the $ (dollar) syntax. I used to wonder what really this dollar sign meant in the following jQuery statements.

$().ready(function(){
     …
});
$(“#message”).html()

Let me explain what I think happens behind the screens. JavaScript is pretty interesting as a language. You can write a function or define a variable with $ as the name. i.e.,
You can define a variable
var $ = “Confused”;

You can write a function like below
var $ = function(name){
     alert(“Hi  ” + name);
}
and invoke it $(“Sam”) and the output is.



You can see what effectively $ means. So here is what I feel may be a pseudo implementation of $(“message”).html()
<!DOCTYPE html>
<html>
<head>
<script>
var $ = function(expression){
this.html = function(){
if(expression.indexOf(“#”) == 0)
return document.getElementById(expression.substring(1)).innerHTML;
return null;
}
return this;
}
function init(){
alert($(“#message”).html());
}
</script>
</head>
<body onload=”init();”>
<div id=”message“>This is very confusing!!!</div>
</body>
</html>

html() is a public function defined inside the $ function. And the output of this code is

Shortlink

Java, C#, Groovy, Ext JS4 and constructors

I have always found writing/generating constructors for a class a very boring task in Java. I wanted a much easier way to initialize member variables instead of writing overloaded constructors.

If you want to write a simple “Employee” class with name and salary variables I had to write this code in Java most of the time.

//Java
public class Employee{
private String name;
private double salary;
        //Hate to write this code     
        public Employee(){} //This is for the Java Beans
public Employee(String name,double salary){
this.name = name;
this.salary = salary;
}
}
Employee e1 = new Employee (“Sam”,20000);


C# 3.0 came up with the concept of object initializers which removed the need for having constructors.
//C#
  public class Employee {
     public String name {get;set;}
     public double salary {get;set;} 
 }
 Employee e1 = new Employee(name:”Sam”,salary:20000);

It was definitely better than Java, but you still had to write those silly {get;set;} block to designate name and salary as properties. Object initializers are available only for properties.

Groovy finally came to my rescue. It injected a lot of code and removed the need for writing code that I had always considered waste of effort and time.
//Groovy
class Employee{
     String name
     double salary
}
e1 = new Employee(name:”Sam”,salary:20000)

Happiness is always short lived. I have been writing classes in Ext JS4 like this off late.
//Ext JS4
Ext.define(“Com.durasoft.Employee”,{
   constructor : function(name,salary){
        this.name = name;
        this.salary = salary;  
}});
var e1 = new Com.durasoft.Employee(“Sam”,20000);

Though frameworks like Ext JS 4 have succeeded in making people take JavaScript as a serious OO language, it still has a long way to go in terms of providing concise syntax.

I hope the future releases of Ext JS4 come up with a groovier syntax.