Gnanasuriyan

Everyone of us know, Inheritance is a way to acquire properties and methods of another object. In other words it is a way to establish is-a relationship between two objects. The static languages by default provide some easier ways to achieve this. For an example, we have "extend" keyword in Java for extending other object. JavaScript is protypal inheritance language (class-free) means that objects can inherit properties from other objects. Let's see an example. Let's create a parent class for Animal /** * Animal - Constructor and parent class for all animals. * @param {Object} aType - Type of the animal * @param {Object} aName - Name of the animal */ function Animal(aType, aName) { this.type = aType; this.name = aName; } Animal.prototype.eat = function() { console.log('All animal will eat'); }; We have to do following steps for extending animal class. 1. Calling super class constructor from child class constructor. 2. Setting up prot...

The singleton pattern is a design pattern that restricts instantiation of the class to one object. This pattern is very handy when one object is enough for doing some operation across the entire system. Let's see an example. /** * Single global namespace for an entire application with lazy loading. * @Singleton pattern */ var PUS = PUS || {}; PUS = (function(){ //Private variables and methods var appVersion = 0.1, instance = null; function constructor() { console.log('Object has created'); return { getAppVersion : function() { return appVersion; } }; }; return { getInstance : function() { if(!instance) { instance = constructor(); } return instance; } }; })(); Here PUS object contains one public method called "getInstance". If we call PUS. getInstance() method, that will first check whether an object is already created or not. The object is already exists then will return the reference of an existing object, ot...

JavaScript static variables and methods are associated with the class, rather than with any object(similar to Java). Every instance of the same class has access to static members and rights to modify the values and method behavior at run-time. Let's see an example. var Person = function(fName, lName) { this.firstName = fName; this.lastName = lName; Person.objectCounts++; }; //Static variable. Person.objectCounts = 0; //Static method. Person.getObjectInformation = function() { return Person.objectCounts; }; Here the variable objectCounts is a static variable and getObjectInformation is a static method. If we create any object for Person class, the static variable "objectCounts" value is incremented by one. The method getObjectInformation is used for getting "objectCounts" value. var person1 = new Person('Suriya', 'A'); var person2 = new Person('John', 'H'); Here there are two objects created for Person class. Let...

What is JavaScript? JavaScript is a prototype based scripting language with dynamic typing and has first-class functions. Previously it is mostly used in web and mobile browser application development. These days it is used for performing server side operation. The best example is Node JS. What is static and dynamic languages? In static languages, the process of verifying & enforcing constraints of type and identifying the behaviour of the code can happens at compile time itself. Some of the static languages are Java, C#, etc., In dynamic languages the above process is can happens only at run time. This feature will helps to include new code, modifying type systems, and extending objects at run time. What is first-class functions? In many languages like Java and C# have some options for defining class. For an example, this is my Person class in Java. class Person { String firstName; String lastName; } In JavaScript we don't have any keyword like...

Grails - Introduction Grails is a modern web development framework that mixes the features of some important frameworks like Spring (IoC, MVC, AOP) and Hibernate. The Grails uses a Groovy as a programming language that runs on JVM and seamlessly integrates with Java language. The goal of Grails is simplifying Java enterprise web application development. The important feature of Grails is convention over configuration (Rails developers knows very well), means that your application auto-wires itself based on some common-sense naming schemes, instead of using XML configuration files.  The scaffolding is an another important feature of Grails, that will automatically creates a basic CURD interface for your domain class. Grails - Architecture Installing and configuring Grails 1. Here you can download the binary distribution of the Grails. After downloading just unzip it. 2. Create the GRAILS_HOME environment variable. 3. Add $GRAILS_HOME/bin to the pat...

Ajax proxy in Ext JS is most widely used one for reading and writing information from/to web server. The configuration of ajax proxy is applied either in store or model class and it is based on the following criteria.   1. We need to define our proxy configuration in model class whenever we need to reuse the same model in various stores with same proxy configuration.   2. We need to define our proxy configuration in store class whenever we need to reuse the same model class in various stores with various proxy configuration. Let's see an example for Ajax proxy. Here I am getting JSON data from web server and displaying those data by using grid component. User.js - Model Ext.define('MyApp.model.User',{ extend : 'Ext.data.Model', fields : [{ name : 'id', type : 'int' }, { name : 'userName', type : 'String' }, { name : 'email', type : 'String' }] }); User.js - Store Ext.define(...

The form panel ( Ext.form.Panel ) class in Ext JS is used for creating form. The default layout of the form panel is anchor. It has lot options for customization, in that one of the feature is menu bar. The following properties are used for including menu into form panel.    1. tbar - Top Bar   2. bbar - Bottom Bar   3. lbar - Left Bar   4. rbar - Right Bar Let's see an example for creating form panel with menu bar. Ext.define('MyApp.view.PanelWithMenuBar', { extend : 'Ext.form.Panel', alias : 'widget.panelwithtoolbar', layout : 'anchor', height : 400, width : 400, title : 'Form Panel with Menubar', url : '/saveform', tbar : [{ text : 'Top-Left Menu', menu : [{ text : 'User', menuKey : 'top-left-create-user' }, { text : 'Document', menuKey : 'top-left-create-document' }, { text : 'Profile', menuKey : 'top-left-create-profile' ...