Dynamic custom DOM Events - Mouse Event

As always every post has a reason.
Today I needed a solution where i need to invoke a event (rowclick) on a Ext GridPanel's object which is handled by a delegate function.
This invoking is suppose to be from an non DOM event. So the requirement is to MouseClick Event without clicking the mouse.

To clarify more.

Scenario:
I have a Ext.grid.GridPanel and is populated with some records.
Each 'rowclick' event is handled using a delegate function.


Problem Statement:
On an ajax request error event,
Need to add a row on the top and fire 'rowclick' on the same grid.

Solution:
Add a new row to the Grid.
Create a custom click event object.
Find the row HTML element.
Fire the custom click event object  on the row HTML elemnt.

Code:
1.var message = { Message: 'Communication error, server returned unexpected data', Description: message,    
                          Date: new Date() };
2.var rec = new this.store.recordType(message, ++this.counter);
3.this.store.insert(0, rec);


4.var evObj = document.createEvent('MouseEvents');
5.evObj.initEvent('click', true, true);
6. gridObj.getView().getRow(0).dispatchEvent(evObj);

Explanation:
Add a new row to the Grid.

1.var message = { Message: 'Communication error, server returned unexpected data', Description: message,    
                          Date: new Date() };
2.var rec = new this.store.recordType(message, ++this.counter);
3.this.store.insert(0, rec);

Create a custom click event object.

4.var evObj = document.createEvent('MouseEvents');
5.evObj.initEvent('click', true, true);



Find the row HTML element.
6.gridObj.getView().getRow(0).

Fire the custom click event object  on the row HTML elemnt.

6. gridObj.getView().getRow(0).dispatchEvent(evObj);

Thats iT!!!! Bingo.

Reference:  http://www.howtocreate.co.uk/tutorials/javascript/domevents

Lazy Evaluation

var boolV = true || false || true || false || true;
 console.log(boolV); //output is true

Question is did all the operations (logical) got executed ?
Ans is NO.

If several logical operations one after the other, but the result becomes clear at some point before the end of entire operation, then the remaining operations are not performed.

Lets consider the above statement.

var boolV = true || false || true || false || true;

It is before the first local operation it is clear that boolV is  suppose to have value true irrespective of any logical or operation. hence the other logical operations are not executed. in the above statement.

To verify this, we will the following code.

var a =10;
console.log(a); //output 10
console.log(!!++a); //output true
console.log(a);        //output 11
var boolV = true || false || true || false || true || !!++a;
console.log(boolV);  //output true
console.log(a);         //output 11 (which imples the !!++a didn't got executed)
boolV =  !!++a || true || false || true || false || true ;
console.log(boolV); //output true
console.log(a);        //output 12 (which imples the !!++a  got executed)


Ain't that interesting !!!

HTML5 & Detection Techniques

New Logo of  HTML5

HTML5 is the new specification of HTML 5 with lots of new feature and it is still being drafted the latest specification can be found at http://dev.w3.org/html5/spec/Overview.html .

Some of the new features are

• Numerous new tags like (article, aside, bdo, command, datalist, details, embed, footer, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, wbr). 
• Custom tag for audio and video
• Custom tags for images and its captions (figure, figcation)
• Custom tag for Custom Graphics (canvas)
• New controls for webforms like (dates, times, email, url, search, number, range, tel, color).
• Geolocation Support.
• Web Sockets: Socket programming for client browser.
• New logo to identify  HTML5.

The are lots of more features in it, I am yet to go through all of them and the draft is still being updated.

Canvas element allows dynamic and scriptable rendering of 2D shapes and bitmap images. [Read More...]

SVG (scalable vector graphics is supported using canvas element). Various representation of reports are presented using graphs, pie charts, etc. canvas element with the help of SVG allows to create nice images and graphics. Javascript is required to program the SVG in canvas element.

How can I detect if the browser is supporting HTML5?

Here we have to depend on javascript. A javascript library named Modernizr available under Open Source for HTML5 and CSS3.

However, as per Mark Pilgrim('s book HTML5 Up and Running), we can employ the following simple techniques to quickly identify HTML5 compatible browser.

1. Checking the presence of certain property on the global object(such as navigator or window object).
• Example. checking the presence of Geolocation support.
• function supports_geolocation() {
        return !!navigator.geolocation;
  }
2. After creating an element dynamically, then testing the presence of a certain property to that element.
• Example. checking the canvas support.
• function supports_canvas() {
        return !!document.createElement('canvas').getContext;
  }
3. After creating an element dynamically, then testing the presence of a certain method to that element. Then call the method if present  and check the value returned.
• Example. checking the video support.
• 
  function supports_h264_baseline_video() {
        // checks the video support
        if (!!!document.createElement('video').canPlayType;) { return false; }
        var v = document.createElement("video"); //create element
        return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  }
4. After creating an element dynamically, set value to a property and then to test if it has retained the value.
• Example: Create a element 'input' dynamically (which is of type 'text' as default). Then setting the property 'type' to other value and retesting the value of the property 'type' 
• function supports_PropertyPersistance() {
     var i = document.createElement("input"); //default element is text
      i.setAttribute("type", "color");
      return i.type !== "text";
  }

Read More on detection technique...

Reference: http://en.wikipedia.org/wiki/HTML5
Specification - Working Draft: http://dev.w3.org/html5/spec/Overview.html
Specification - Released Working Draft: http://www.w3.org/TR/html5/

Rule of Thumb : Declaring variables

"var" is the keyword used for declaring a variable. It lets you define an number, string , datetime value or an object or function.


Example(s):

var a1;
var a2 = 10;
var a3 = 1.23;
var a4 = "hello world";
var a5 = true;
var a6 = {prop1:'some values', prop2: 'some other values', prop3 : true} ;


var a7 = new Object();
var fn1 = function() { return "hello world"};

what happens if we use in the following way

 ax=10;

Well well, the above line adds a variable name "ax" in the global scope. At a glance it can pretend to be an trivial mistake, but that is not the case, rather it is of very high importance, since such statement can make the global scope dirty and making the code fault prone and fragile.

Lets take another example for more clarity:

function sayHello(username){
  strn = "Hello " + username;
  return strn;
};


console.log( sayHello( 'kris' ) );
console.log( strn ); //=> "hello kris"

*console is a class available in almost all browsers but not in all browser for development/debugging purpose.

The above javascript function "sayHello" adds a variable "strn" to the global scope.

The following change of declaring the variable with "var" will make sure that the variable "strn" is applicable to local scope only.

Examples: 

function sayHello(username){

  var strn = "Hello " + username;

  return strn;

};

console.log( sayHello( 'kris' ) );

console.log( strn ); //=> undefined

Hence the scope of  local variable is managed correctly.

So we conclude this post with the memoirs of golden rule of variable declaration in javascript.

Beginning Javascript

The blog of mine is making a focus shift from blogging to javascript preaching.

JavaScript was earlier called "LiveScript".
you will get a good information on javascript history here wikipedia:javascript

My inception of javascript was like simple validations for web pages in 2005. Beginning 2007, I understood that javascript has some more potential. Errie, whats the potential. Well well, you can use javascript as a full blown applications. During june-2008 I wrote my first javascript class. Yessss my first javascript class.

well here it goes.

Code:

var A= function(){
  this.sayHello = function(){
    alert('hello world');
  };
};
var o = new A();
o.sayHello();

Yes it is as simple as written here.

More is on way to you.

Using EXT JS

In recent time Client Side scripting has become very popular. Particularly if you observe maps.google.com or gmail, etc... every website/application is using client side scripting extensively. So did i encountered in my recent project. Before this project i have used core javascript , classes, objects, JSON, etc. This project required those aspects as basics, and a rich client side UI framework. We discovered ExtJs serving the purpose providing a stable, scalable,extendible framework with numerous widgets as the building controls.

One of the control is Window. How does it sound to simulate a window inside you webpage. To me it was something WOW!!! The following is the example for the same.

Chapter 01
A simple window with predefined text

Code Sample:

var initializeFn = function(){
var windowObj = new Ext.Window({title:'First ExtJs Window',html:'Sample predefined text',height:300,width:400});
windowObj.show();
};
Ext.onReady ( initializeFn );

This code uses ExtJs Base framework (http://www.extjs.com/).
You can refer the examples at http://extjs.com/deploy/dev/examples/samples.html.