Gnanasuriyan

Node.JS - File operation examples

2018-09-08T13:06:00.000-07:00

File operations are very common requirements and I thought of providing some simple examples in Node.js. The Node.js provide a module called "fs" which is having all necessary functions for performing file operations. Let's start with very simple examples.
Audience
The examples are very basic and focused for beginners.
Reading and Writing Files
The file system module provide a synchronous and asynchronous functions for reading and writing a file.
Example for reading a file using synchronous function fs.readFileSync.

const fs = require('fs');
const information = fs.readFileSync('files/file1.txt', 'utf8');
console.log(information);

Example for reading a file using asynchronous function fs.readFile.

const fs = require('fs');
const information = fs.readFile('files/file1.txt', 'utf8', (err, information) => {
    if (err) {
        console.log('Error occured while reading a file');
        return;
    }
    console.log(information);
});

Example for creating a file using synchronous function fs.writeFileSync.

const fs = require('fs');

const content = `
The file is created for demonstrating file I/O operation using Node.js
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
`;

fs.writeFileSync('files/file-write-sync.txt', content, {
    encoding: 'utf8'
});

console.log('file was created successfully');

Example for creating a file using asynchronous function fs.writeFile.

const fs = require('fs');

const content = `
The file is created for demonstrating file I/O operation using Node.js
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
`;

fs.writeFile('files/file-write-async.txt', content, {
    encoding: 'utf8'
}, (err) => {
    if (err) {
        console.log('file was not created!!');
        return;
    }
    console.log('file was created successfully');
});

Now when do you use synchronous and asynchronous function?

The synchronous function will block event loop until finishing their operations, which means the other functions are will be in event loop for a while (waiting for long time) when do you perform complex operations in synchronous mode. The synchronous operation will slow down the application performance and asynchronous functions are mostly advisable in Node.js.

Example for renaming a file.

const fs = require('fs');

fs.rename('files/file1.txt', 'files/file1-rename.txt', (err) => {
    if (err) {
        console.log('file was not renamed successfully');
        return;
    }
    console.log('file was renamed successfully');
});

Example for deleting a file.

const fs = require('fs');

fs.unlink('files/file-write-async.txt', (err) => {
    if (err) {
        console.log('file was not deleted!!');
    }
    console.log('file was deleted!!');
});

Example for checking whether a file is exists.

const fs = require('fs');

if (fs.exists('files/file1.txt')) {
    console.log('File exists');
} else {
    console.log('File does not exists');
}

For some cases we may need to check whether a particular user has access for a directory or files. We can easily do it node and here is an example.

const fs = require('fs');

fs.access('files/file1.txt', fs.constants.R_OK | fs.constants.W_OK, (err) => {
    console.log(err ? 'no access' : 'can read and write');
});

fs.constants is an object which has constant values related to file operations.

fs.constants.R_OK // path can be read by calling process
fs.constants.W_OK // path can be write by calling process

Reading a file using stream

The file system module provide a function called fs.ReadStream for reading a file using streams. We need to open a stream and listen for events for reading a data and this is desired method for reading big size files. Here is an example.

const fs = require('fs');

const stream = fs.ReadStream('files/file1.txt');

stream.on('data', (chunk) => {
    console.log(`Received ${chunk.length} bytes of data.`);
});

stream.on('end', () => {
    console.log('No more data available for read');
});

stream.on('error', (err) => {
    console.log(`some error occured while reading a file ${err}`);
});

Writing a file using stream

The file system module provide a function called fs.WriteStream which is similar to read stream method. This allow us to open a stream and write a chunk of data. Here I am providing a simple example for copying a file using write stream method.

const fs = require('fs');

const source = fs.ReadStream('files/file1.txt');
const dest = fs.WriteStream('files/file2.txt');

source.on('data', (chunk) => {
    dest.write(chunk);
});

source.on('end', () => {
    console.log('File was copied successfully');
    dest.end();
});

Reading a file using ReadLine module

The ReadLine module is helpful for reading a data from readble stream one line at a time. Here is an example will read a content from file (line by line) and print it in console.

const fs = require('fs');
const readline = require('readline');

const rl = readline.createInterface({
    input: fs.createReadStream('files/file1.txt')
});

rl.on('line', (line) => {
    console.log(line);
});

rl.on('close', () => {
    console.log('done!!');
});

I have provided some simple examples of file operations using Node. Actually Node is having more capabilities for handling I/O and look at official documentation for more information.

Meteor tutorial - Part II - Building mobile applications

2015-06-23T13:00:00.000-07:00

In my previous blog post, I have explained basics of meteor. In this tutorial I am going to add mobile support to the existing meteor application.

Installing mobile SDKs

Before going to start we need to install IOS and android SDKs (Software development kit). Here I am installing SDKs for iOS. Please keep in mind this is one time process.

For installing iOS SDKs, we need to invoke “meteor install-sdk ios”.

The same way you can install android SKDs by invoking “meteor install-sdk android” command.

Adding mobile platform support

I am using already created application called “myapp” and going to add iOS platform support by invoking a command “meteor add-platform ios”.

We can add android platform by invoking a command “meteor add-platform android”.

Running application on mobile emulator

Once we add mobile platform then we can run our application by using real mobile device or emulator. I have added IOS platform to myapp already. Now I am going to run that application by using iPhone emulator by invoking command called “meteor run ios”.

Whenever we run above command that will add cordova support to the application and convert our web application into mobile hybrid application by using cordova. Cordova internally use webview for rendering web page. If everything is done, you can see iPhone simulator, that will display our web page.

Running application

By using same way we can launch android simulator by invoking “meteor run android” command.

Running application on real device

We can run our application on real device by invoking below commands.

For iOS - meteor run ios-device

For android - meteor run android-device

Obviously the mobile should be connected to the computer. For iOS, we need to install corresponding provisioning profile into the device before using it for testing.

Personally I like this approach because there is no real IDE like XCode, Eclipse involved in this process. This is really helpful for beginners because it is very simple and hides lot of internal mechanism involved in the process.

Configuring mobile app – metadata

In mobile application we need to configure lot of information in info.plist (for iOS) and android manifestfile.xml (for android). The meteor simplifies lot of stuffs, which involved in the configuration. For configuring, we simply need to create a JavaScript file called mobile-config.js and needs to include our configuration. Look into the below url for more information.

http://docs.meteor.com/#/full/mobileconfigjs

Conclusion

In this tutorial we got steps involved in,

1. Adding mobile support to meteor application.

2. Running application on emulators.

3. Running application on real devices

4. Configuring mobile application metadata by using mobile-config.js.

In my next tutorial, I am going to explain internal architecture of the meteor application.

Meteor tutorial - Part I

2015-06-23T08:54:00.001-07:00

What is Meteor?

Meteor is a complete open source platform for building web and mobile application by using JavaScript. It is a combination of NodeJs, MongoDB and client side JavaScript.

Installing meteor

Meteor supports windows, linux and Mac operating systems. Invoke below command in terminal for installing meteor in mac operating system.

Check below link for installing meteor on other operating systems.
http://docs.meteor.com/#/basic/quickstart

Creating an application

The command “meteor create <<app_name>>” is used for creating new meteor application. I have created an app called “myapp” and will see how we can run the application.

Running an application

“meteor run” command is used for running meteor application. Internally it start a node js server and by default that will listen 3000 port number. Just make sure you are in project directory (myapp) before invoking run command.

Other useful meteor commands

Meteor provides lot of useful commands for simplifying development process. This is very simple introduction about other meteor commands.

1. meteor help – This command is used for understanding purpose of other meteor commands. Example – I got the purpose of create command by using help command.

2. meteor debug – This is very useful command for debugging server side code. Just use JavaScript keyword “debugger” for creating break points. By default it will wait at first statement of server side code.

3. meteor deploy <<site>> - This command is really useful for deploying application. Meteor provide free hosting and you can deploy application in <<appname>>.meteor.com. If someone already used app name then you will have to use different application name for deploying. Let me deploy my application and it will take a while for deploying.

It is deployed successfully and for verification load the URL in browser, which we have used while deploying the application.

4. meteor update – This is used for updating meteor version used by an application. You will have to run this command from your application folder and make sure you are upgrading other packages for avoiding compatibility issues.

5. meteor add – This is used for adding new package into the application.

6. meteor remove – This is used for removing previously added package from the application.

7. meteor search – This command is used for searching available packages in meteor.

8. meteor mongo – This is used for opening MongoDB shell command for modifying mongo database collection. Meteor internally use mongo-db for saving data.

9. mongo reset – This is used for resetting current project to fresh state and it removes all local data.

Meteor File Structure

Meteor is very flexible for structuring application. It automatically loads all of our files, so we don’t need to use script and link tag for loading JavaScript and CSS files. It does the following while loading files.

1. All CSS files are sent to the browser and in production mode it is automatically concatenate and minify the source files.

2. JavaScript is loaded on the both client and server. We need to use Meteor.isClient and Meteor.isServer condition for stopping execution of certain part of the source code.

3. HTML templates are compiled and sent to the client.

Actually meteor provides some directory structure for securing and improving performance of the application.

/client – The files, which are in client directory, are only served to the client. This is a good place for keeping our client side source codes like CSS, HTML templates and client side JavaScript files.

/server – The files, which are in server directory are used and loaded while starting server. These files are never sent to the client. This is good place for keeping server side JavaScript files and by the way we can secure our application.

/public – The files in public folder are served to the client as-is. So this is good place for keeping our static contents like images, and fonts.

/private – The files in private are not sent to the client and also contents are loaded only when access through Assets - server side.

Conclusion

In this tutorial we have seen,

1. What is meteor?

2. Steps for Installing and Configuring meteor.

3. Meteor available commands and corresponding usage.

4. Directory structure of meteor application and deploying meteor application.

In my next tutorial, I am going to explain building mobile apps by using meteor.

GRUNT – Cleaning and Minifying JavaScript Files

2014-08-11T06:49:00.001-07:00

In this tutorial, we are going to create a NodeJS/Grunt project which has basically used for minifying many JavaScript files into one. The steps are,

Step 1.

Install NodeJS latest version and refer “http://nodejs.org/download/” link for more information.

Step 2.

If you are having any existing NodeJS instance then just update by using “npm update –g npm” command. I am having existing NodeJS instance and updated by invoking above command.

Step: 3.

Next, we need a Grunt command line interface (CLI) tools globally. It is a node.js module and needs to install by using a command called “npm install –g grunt-cli”.

Step 4.

We need another component called grunt-init globally. It is also a node.js module and we can install it globally by invoking a command “npm install –g grunt-init”.

Step 5.

Next, we need to create a new grunt project. I have created new folder called “Grunt-MinifyDemo” in “D“ directory and this is my project.

Step 6.

In windows command prompt, Just move to that particular directory and check the screen shot which help you to understand what I mean here.

Step 7.

Now we need to initiate a Node.js project by invoking a command called “npm init”. While invoking this command will ask you to enter application name, description, version, and other details. For more information please check my screen shot. The above command finally will create package.json file which basically used for defining our application specific dependencies and other details. We can edit this file at any point of time and if you define any new dependencies then will have to invoke “npm install” command for installing those new dependencies.

Step 8.

Now we need to edit the package.json file for defining our grunt dependencies. The modified package.json file contents are given below.

{
  "name": "grunt-minify-demo",
  "version": "0.0.1",
  "description": "Simple demo application for minifying javascript files using GRUNT tool",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Gnanasuriyan A",
  "license": "MIT",
  "devDependencies": {
   "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

I have included grunt specific dependencies and changed main value as “Gruntfile.js”. This is an entry point of the application.

Step 9.

Now just invoke a command called “npm install” for downloading those specified dependencies as we discussed in step number 7.

The above command will download all the dependencies and for verification just check node_modules folder present in out application folder “D:\Grunt-MinifyDemo”.

Step 10.

Currently we have developed only node.js project and downloaded all GRUNT dependencies. Now we need to define our grunt task for combining and converting JavaScript source files into single minified file. For that we need a help from one more grunt module called “grunt-contrib-uglify”. We have already included in dependency list and that module is already available in node_modules folder.

Step 11.

For defining our grunt task, we need to create a JavaScript file called “Gruntfile.js” and this name is based on "main" key value in package.json file. Note: the above file should be created in root folder of the application and here the root folder is “D:\Grunt-MinifyDemo”.

Step 12.

Before writing a grunt task, I am going to create some test JavaScript source files for minification. Nothing fancy in the JavaScript files and I have just included some test functions with console messages.

Step 13.

Now I am going to write a grunt task for combining/minifying my File1.js and File2.js file present in src folder. The source code which I have written in Gruntfile.js for minification is given below.

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options : {
          compress : {
            drop_console : false
          },
          beautify : true
      },
      dev: {
        files: {
          'build/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false
        }
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify:dev']);
};

Step 14.

The grunt.initConfig({}) function is basically used for defining our grunt configuration. For understanding more about grunt configuration, please refer "https://github.com/gruntjs/grunt-contrib-uglify". Here I have created only one environment called dev which contains my output file path “build/dev/output.js” and array of JavaScript source file names.

Step 15.

The line grunt.loadNpmTasks function is basically used for loading grunt modules and grunt.registertask is basically used for registering grunt tasks. In single project we can register more then one grunt tasks. For more information about registering grunt tasks, please refer "http://gruntjs.com/creating-tasks".

Step 16.

Now If you run a “grunt” command that will trigger the default task i.e. uglify:dev and will create a new combined JavaScript file called “output.js” in "build/dev" folder. The grunt will run default task always when we don't specify any registered task name.

Instead of you can run the above task by triggering a command “grunt uglify:dev”.

Step 17.

This is my output.js file content. Here I am not minifying my JavaScript code and instead just combining all my different JS files into single one.

function moduleOne() {
    console.log("Module one");
}

function moduleTwo() {
    console.log("Module two");
}

Step 18.

Now I am going to define one task called “prod” which will combine and minify the JavaScript file. The modified Gruntfile.js source code is given below.

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      dev: {
        files: {
          'build/dev/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false,
          compress : {
            drop_console : false
          },
          beautify : true
        }
      },
      prod: {
        files: {
          'build/prod/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: true,
          compress : {
            drop_console : false
          },
          beautify : false
        }
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify:dev']);
  grunt.registerTask('prod', ['uglify:prod']);
};

Step 19.

Now just invoke a command “grunt prod” for creating production build which will combine and minify all specified JavaScript files.

Step 20.

In some situation we need to run some more tasks before running actual minification. For example normally we will have to clean the existing result before taking a new build. The grunt actually provide a way for defining more than one tasks which will run sequentially. Just check my production task which I have registered in Gruntfile.js. I am just cleaning all existing builds before taking a new production build.

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      dev: {
        files: {
          'build/dev/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false,
          compress : {
            drop_console : false
          },
          beautify : true
        }
      },
      prod: {
        files: {
          'build/prod/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: 'all',
          compress : {
            drop_console : false
          },
          beautify : false
        }
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify:dev']);
  grunt.registerTask('prod', ['clean', 'uglify:prod']);
};

Step 21.

Now just invoke same “grunt prod” command and see the result.

We are getting some warning because not loading grunt clean module properly. Just load that grunt clean module properly and test it. For loading clean module, we need to update package.json file and need to invoke “npm install” command. This is my modified package.json file.

{
  "name": "grunt-minify-demo",
  "version": "0.0.1",
  "description": "Simple demo application for minifying javascript files using GRUNT tool",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Gnanasuriyan A",
  "license": "MIT",
  "devDependencies": {
   "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-clean": "~0.4.0"
  }
}

Step 22.

Now we need to load a “grunt-contrib-clean” module by using “grunt.loadNpmTasks“ function and my modified Gruntfile.js source code is given below.

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      dev: {
        files: {
          'build/dev/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false,
          compress : {
            drop_console : false
          },
          beautify : true
        }
      },
      prod: {
        files: {
          'build/prod/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: 'all',
          compress : {
            drop_console : false
          },
          beautify : false
        }
      }
    },
    clean: {
      js: ['build/dev/output.js', 'build/prod/output.js']
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  //Loading grunt clean module
  grunt.loadNpmTasks('grunt-contrib-clean');

  // Default task(s).
  grunt.registerTask('default', ['uglify:dev']);
  grunt.registerTask('prod', ['clean', 'uglify:prod']);
};

Step 23.

In my above code just check my clean configuration. I am just removing production and development JavaScript files from build folder. Now just take a production build by invoking “grunt prod” command.

Conclusion

1. We have created new Node.js application for running grunt tasks.

2. We have included grunt minification tasks for minifying JavaScript files by using grunt uglify module.

3. We have included clean task for removing existing build from file system by using grunt clean module.

The entire project is available in my github repository (https://github.com/gnanasuriyan/grunt-minification ).

iOS - Simple to-do application development

2014-02-07T09:16:00.000-08:00

After a long time, I had some good time to study native iOS development and developed simple to-do application by following a tutorial present in iOS developer library. The source code is available in githup repository and don't worry about modifying the source code.

Currently this application doesn't store our to-do items permanently. Probably my next change should be storing our to-do list in database. Now if you kill the application the data will be lost :)

JavaScript - An Example for Inheritance

2013-10-19T12:12:00.003-07:00

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 prototype chain.
3. Adding methods to child class.

Let's create child class and extending Animal class by following above steps.

/**
 * Bird - Constructor and child class of Animal.
 * @param {Object} aType - Type of the animal
 * @param {Object} aName - Name of the animal 
 */

function Bird(aType, aName, bType) {
 //Calling super class constructor
 Animal.call(this, aType, aName);
 this.birdType = bType;
}
//Setup the protype chain
Bird.prototype = new Animal();
//Set the constructor attribute to Bird
Bird.prototype.constructor = Bird;

//Add methods to Bird class.
Bird.prototype.fly = function() {
 console.log('I am flying');
};

Let's create an object for Bird and try to access methods and properties of the parent class.

bird = new Bird('Ducks', 'Tundra Swan', 'Ducks');
bird.eat(); //Calling super class method
bird.fly(); //Calling child class method

Final result of the application is given below.

All modern library like jQuery and Ext JS has provided simple utility function for extending other class something like that.

var Pointer = Pointer || {};
/**
 * Simple utility function for extend.
 */
Pointer.extend = function(subClass, superClass) {
 var F = function() {};
 F.prototype = superClass.prototype;
 subClass.prototype = new F(); 
 subClass.prototype.constructor = subClass;
 
 subClass.superclass = superClass.prototype;
 /**
  * The below condition is important for handling
  * extend(Person, Object); //Person - Sample class extending JavaScript Object class.
  */
 if(superClass.prototype.constructor === Object.prototype.constructor) {
  superClass.prototype.constructor = superClass;
 }
};

Simple another example using above extend function.

/**
 * This is parent class constructor
 * @param {Object} name
 */
var Person = function(name) {
 Person.superclass.constructor.call(this, name);
 this.name = name;
};

Pointer.extend(Person, Object); //Person is extending Object class.

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

/**
 * This is child class of the Person.
 * 
 * @param {Object} name
 * @param {Object} profession
 */
var Author = function(name, profession) {
 //Person.call(this, name);
 Author.superclass.constructor.call(this, name);
 this.profession = profession;
};

Pointer.extend(Author, Person);

Author.prototype.getProfession = function() {
 return this.profession;
};

For testing, let's create some objects.

person1 = new Author('Suriya', 'Solution Developer');
person2 = new Person('Hilar');

The result of the above example is should be something like this.

JavaScript - An example for Singleton pattern

2013-10-19T09:25:00.000-07:00

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, otherwise it will create a new instance and return that instance (Lazy initialization). Sample usage is given below.

Static members in JavaScript

2013-10-19T08:32:00.002-07:00

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's try to access static members of Person class by using class name.

//Accessing static variable.
console.log('Accessing static variable by using class name : ' + Person.objectCounts);
//Accessing static method.
console.log('Calling static method by using class name : ' + Person.getObjectInformation());

JavaScript allows to modify value of the static variable and method behavior at run time. The changes in static members are immediately reflect to other objects. For an example, here I have modified getObjectInformation behavior and it's reflect to other object immediately.

//modifying static method
Person.getObjectInformation = function() {
 return "Bahaviour has modified : " + Person.objectCounts;
};
console.log(Person.getObjectInformation());

The final result of the above example is given below.

Object Oriented JavaScript - Part I

2013-09-01T21:09:00.000-07:00

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 "class" for defining classes. In JavaScript all functions are considered as a class. So we can define a class by using function in JavaScript and this is called as first-class functions. The equivalent Person class in JavaScript is written by something like this.

function Person() {
  this.firstName;
  this.lastName;
}

Object oriented programming has lot of features like Encapsulation, Polymorphism, and Inheritance. It is possible in JavaScript for achieving all the OOP features and for becoming a better JavaScript programmer, we should know that.

Public, Privileged and Private members in JavaScript.

The public members are always visible to public means any functions can read, modify and delete members, or add new members of the object. There are two ways for putting members in a new object.

By using constructor - This way commonly used for initializing public member variables. For an example,

function Person(fname, lname) {
  this.firstName = fname;
  this.lastName = lname;
}

By using prototype - This way commonly used for adding public member to an object. For an example,

Person.prototype.getFirstName = function() {
  return this.firstName;
}
Person.prototype.getLastName = function() {
  return this.lastName;
}
Person.prototype.setFirstName = function(fname) {
  this.firstName = fname;
}
Person.prototype.setLastName = function(lname) {
  this.lastName = lname;
}

Lets see how to create an object and invoke member function.

var person1 = new Person('Suriya', 'A');
person1.getFirstName(); //Result = Suriya
person1.setFirstName('Gnana');
person1.getFirstName(); //Result = Gnana

We have created public members in javaScript. Lets discuss a way for creating private members in JavaScript and this is a way for encapsulating data from outside.

function Person(fname, lname) {
 var firstName = fname; //Private variable 1

 var lastName = lname; //Private variable 2

        var fullName = function() { //Private function 1
  return firstName + ', ' + lastName;
 }

 this.setFirstName = function(fname) { //Privileged method 1
  firstName = fname;
 }

 this.setLastName = function(lname) { //Privileged method 2
  lastName = lname;
 }

 this.getFirstName = function() {//Privileged method 3 
  return firstName;
 }

 this.getLastName = function() { //Privileged method 4 
  return lastName;
 }

 this.getFullName = function() { //Privileged method 5
  return fullName();
 }
}

Privileged methods can have access for private variables and methods. It is possible to delete or replace a privileged method but we can't alter this method or we can't force this method for displaying internal information of an object. Lets test the Person class by creating new object and invoking its methods.

var person1 = new Person('Suriya', 'A');
person1.getFullName(); // Result - Suriya , A

The private members are defined by without using "this" and they are declared like a normal variable declaration in JavaScript. Here the variables firstName and lastName are private variables and that are not accessible from outside of an object. For an example, we can't access the firstName and lastName property directly by executing below code.

person1.firstName; // Result - undefined

We know JavaScript is a dynamic language that allows to modify the object at run time. What I am going to do is, after creating an object for a Person class, going to override some of the privileged member functions of an object and trying to get access of the private variables. The pure object oriented programming won't allow to access private variables, but it is a time to test JavaScript.

var person1 = new Person('Suriya', 'A');
person1.getFullName(); // Result - Suriya , A
person1.setFirstName = function(fname) { //
  firstName = fname;
}
person1.setFirstName('Gnana');
person1.getFirstName() //Result should be 'Suriya' not 'Gnana'.

Check the below screen.

So in JavaScript we can't access private members from outside world without getting help from privileged or public methods.

Now we have created Public, Private and Privileged variables and methods in JavaScript. In my next part will explain about Inheritance and other object oriented implementations in JavaScript.

Developing First Grails Application

2013-05-29T12:02:00.001-07:00

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 path.

Creating a new Grails application

The command "grails create-app app-name" is used for creating new Grails application. Once you execute this command, the grails automatically creates necessary files and folder structure for you. It will be more easy, If you are using any IDE like GGTS, STS, Eclipse, and IntelliJ.

The general folder structure of the application is given below. Here I have given application name as "Grails-HelloWorld".

Creating a controller

The command “grails create-controller controller-name” is used for creating a new controller in Grails application. Let us create a controller called "User" by executing a command called "grails create-controller com.pointerunits.User".

Now we can see one new controller class in controllers directory and initial source code of the controller is given below.

package com.pointerunits

class UserController {
    def index() { }
}

During controller creation, the grails automatically creates a new folder in views directory. The name of the folder is same as controller name. By default, Grails include the "index" action in every controller and by convention it is a default action for all controllers. So if you access a controller without any action, the controller automatically executes the index action.

The Grails automatically creates the unit test class for all controllers, services and domain classes. So we can find a new unit test class for user controller in test/unit directory.

Now let us render some static html message to the browser.

package com.pointerunits

class UserController {

    def index() { 
		render '
Welcome to Grails application development
'
	}
}

Now just run the application by executing a command "grails run-app". If you want to change the port number of the server just include a -Dserver.port attribute like "grails -Dserver.port=8090 run-app".

Now you can access your application by using a url "http://localhost:8080/Grails-HelloWorld". Here "8080" indicate my server port number and "Grails-HelloWorld" indicate my application name.

The above one is default home page of the grails application. We can modify this one according our needs. Now we can access our controller by using a URL "http://localhost:8080/Grails-HelloWorld/user/index". In this URL, the user indicate the controller name and index indicate the action name of the controller that you want to execute. Here index action is not required, because by convention the default action for controller is index.

Creating a view

Instead of rendering some static html from controller, let us rendering some GSP (Groovy Server Page) view. In grails, you have to create a GSP page based on action name. As of now we have only one action called "Index", but now I am going to create one more action called "create". This is my modified user controller.

package com.pointerunits

class UserController {

    def index() { 
		render '
Welcome to Grails application development
'
	}
	
	def create() {
		
	}
}

Now just use the URL "http://localhost:8080/Grails-HelloWorld/user/create" for accessing create action of the user controller.

By default, the above URL is trying to load a "create.gsp" page from "views/user" directory, but as of now we don't create any page like that. Here the name of the GSP page should be the name of the controller action. Let us create a "create.gsp" under "views/user" folder.

Now just access the same URL, you can see the result like this.

Creating a domain class

The command "grails create-domain-class class-name" is used for creating a new domain class in grails application. Let us create a "Person" domain class by executing a command "grails create-domain-class com.pointerunits.Person".

package com.pointerunits

class Person {
	String firstName
	String lastName
	String email
	String phoneNumber
	Integer age
	
    static constraints = {
    }
}

By default, Grails comes with HSQLDB and when new application created, by default three databases(devDb, testDB, prodDb) are configured in Datasource.groovy for three different environments (development, testing and production). In above domain class, we have included only some basic variables. Now the Grails automatically maps this domain class into Person table and every variables are mapped into corresponding column of the table. No more XML file needed like Hibernate. No worry, the Grails gives full freedom for customizing those behaviours.

Scaffolding

We know, scffolding is a feature that will create a basic CURD interface for your domain class automatically. Let us see how to do that.

First of all we need to create one more controller for Person domain class and need to include one line of code like "def scaffold = Person". The Grails will takes care other works for you. This is my source code of my Person controller.

package com.pointerunits

class PersonController {
	
	def scaffold = Person
	
    def index() { }
}

Now just load the URL "http://localhost:8080/Grails-HelloWorld/person/list", you will see basic CURD interface for your Person table.

1. List action - Displays the all person details as a table.

2. Create action - All us to create a new Person. Example "http://localhost:8080/Grails-HelloWorld/create".

3. Show action - Allow us view the information of particular record. Here we need to give index of the record as input through query string. Example "http://localhost:8080/Grails-HelloWorld/show/1". Here 1 indicates index of the record.

4. Delete action - Allow us to delete a particular record from database. It also require an index value of the record. Example "http://localhost:8080/Grails-HelloWorld/delete/1".

Conclusion

In this tutorial, we have created new grails application and created controllers, views, and domain classes. The scaffolding feature of grails is also demonstrated.

Ext JS 4 - Ajax Proxy

2013-02-12T20:18:00.001-08:00

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('MyApp.store.User',{
 extend : 'Ext.data.Store',
 storeId : 'users',
 //autoLoad : true,
 model : 'MyApp.model.User',
 proxy : {
  type : 'ajax',
  url : 'data/users.json',
  reader : {
   type : 'json',
   root : 'users',
   successProperty : 'success'
  }
 }
});

Here, the important thing is proxy configuration. I have set the proxy type as 'ajax' and specified the server URL for loading and updating data. We can use different URL for performing read and update operation.

The reader is another configuration is used for decoding server response and it updates the store based on the decoded information. Here I have used JSON reader, apart form JSON reader Ext JS provide some more readers like Array and XML. The reader is very handy if you are loading nested data from server.

For performing read operation, ajax proxy send a GET request and for performing create, delete and update operations it send a POST request to server.

We can't use ajax for reading information from other domains because it's violating DOM security principles . For talking to other domains, we need to use JSONP proxy.

In real application, we have to send some extra parameters to server. In this situation we need to use ajax proxy extraParams configuration. Check the Ext JS sencha documentation for getting more information about AJAX proxy.

UserList.js - View

Ext.define('MyApp.view.UserList',{
 extend : 'Ext.panel.Panel',
 alias : 'widget.userlist',
 title : 'Users Information',
 width : 400,
 height : 300,
 items : [{
  xtype : 'gridpanel',
  store : 'User',
  columns : [{
   text : 'User Identity', dataIndex : 'id', flex : 1
  }, {
   text : 'User Name', dataIndex : 'userName' , flex : 1
  }, {
   text : 'Email', dataIndex : 'email', flex : 1
  }]
 }]
});

Here, I have used the grid component for displaying store data.

UserList.js - Controller

Ext.define('MyApp.controller.UserList',{
 extend : 'Ext.app.Controller',
 models : ['User'],
 stores : ['User'],
 views : ['UserList'],
 
 init : function() {
  this.getStore('User').load();
  this.callParent();
 }
});

In controller init function, I have taken the User store handle and called the load function. In this situation, the ajax request is send to server for loading data.

app.js

Ext.Loader.setConfig({
 enabled : true
});

Ext.application({
 name : 'MyApp',
 appFolder : 'app',
 controllers : ['UserList'],
 launch : function() {
  Ext.create('MyApp.view.UserList',{
   renderTo : Ext.getBody()
  });
 }
});

Result

The application source code is available in github repository.

Ext JS 4 - Form Panel With Menubar

2013-01-30T20:20:00.001-08:00

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'
  }]
 }, '->', {
  text : 'Top-Right Menu',
  menu : [{
   text : 'User',
   menuKey : 'top-right-create-user'
  }, {
   text : 'Document',
   menuKey : 'top-right-create-document'
  }, {
   text : 'Profile',
   menuKey : 'top-right-create-profile'
  }]
 }],
 bbar : [{
  text : 'Bottom-Left Menu',
  menu : [{
   text : 'User',
   menuKey : 'bottom-left-create-user'
  }, {
   text : 'Document',
   menuKey : 'bottom-left-create-document'
  }, {
   text : 'Profile',
   menuKey : 'bottom-left-create-profile'
  }]
 }, '->', {
  text : 'Bottom-Right Menu',
  menu : [{
   text : 'User',
   menuKey : 'bottom-right-create-user'
  }, {
   text : 'Document',
   menuKey : 'bottom-right-create-document'
  }, {
   text : 'Profile',
   menuKey : 'bottom-right-create-profile'
  }]
 }],
 items : [{
  xtype : 'textfield',
  fieldLabel : 'First Name',
  name : 'firstName',
  allowBlank : false
 }, {
  xtype : 'textfield',
  fieldLabel : 'Last Name',
  name : 'lastName',
  allowBlank : false
 }],
 renderTo : Ext.getBody()
});

Here the symbol '→' is used for moving our menu from left to right side.

Here I have included menuKey attribute, this is custom attribute included for taking handle of the menu actions in controller side. Let's see, how to take a control of form panel and corresponding form menu actions in controller. This is very tricky part when you are in beginning stage and this is my controller code for above view.

Ext.define('MyApp.controller.PanelWithMenuBar', {
 extend : 'Ext.app.Controller',
 init : function() {
  this.control({
   'menuitem[menuKey]' : {
    click : function(menuItem, e, eOpts) {
     switch(menuItem.menuKey) {
      case 'top-left-create-user' :
       console.log('Event related to top-left-create-user');
       break;
      case 'top-left-create-document' :
       console.log('Event related to top-left-create-document');
       break;
      case 'top-left-create-profile' :
       console.log('Event related to top-left-create-profile');
       break;
      case 'bottom-right-create-user' :
       console.log('Event related to bottom-right-create-user');
       break;
      case 'bottom-right-create-document' :
       console.log('Event related to bottom-right-create-document');
       break;
      case 'bottom-right-create-profile' :
       console.log('Event related to bottom-right-create-profile');
       break;
      //Other menukey actions will goes here.....
     }
    }
   }
  });
  this.callParent(arguments);
 }
});

During rendering of an application, the Ext JS will create an object of 'Ext.menu.Item' for tbar, lbar, bbar, and rbar based on its configuration. So I can take a control of all menu items by using xtype and menuKey.

menuitem[menuKey] - Here menuitem refer the xtype of 'Ext.menu.Item' and menuKey is our custom attribute.

The result of above example is given below.

Ext JS 4 - Client Proxies

2013-01-17T12:07:00.002-08:00

The web storage concepts in HTML5 are really cool and used for store/read data to/from browser memory. There are two types of web storage concepts available in HTML5.

1. Session storage - The data only availble for particular session.

2. Local storage - Long term storage and data is shared by various browser and tabs

The Ext JS gives lot of flexibility for using web storage concepts and it do lot of operations internally and reduced the developer works. The most well known issues is, the HTML5 web storage concepts only allow to store a value like string, int, float and boolean and it don't allow to store a complex objects like JSON. But Ext JS directly allows to store/read JSON data to/from web storage. Internally it performs serialize and deserialize operation for store/read JSON data to/from web storage.

The proxies in Ext JS are used for performing above operation. There are three kind of client side proxies available in Ext JS.

1. Session storage proxy

2. Local storage proxy

3. Memory proxy

These proxies are directly used by either in models or stores. Let's see an example for above proxies.

1. Session storage proxy.

The session storage data is only available for particular session. Once the browser has closed, the data will be lost. I am going to store/read some basic information of the user like user name and display name by using session storage.

Let's create a simple model for user and we can reuse this model in various stores.

Ext.define('MyApp.model.User',{
 extend : 'Ext.data.Model',
 fields : [
  {name : 'userId',type : 'int'},
  {name : 'userName', type : 'string'},
  {name : 'displayName', type : 'string'}
 ]
});

Let's create a session storage store. Here the proxy type "sessionstorage" indicates, the data is storing into session storage. The id property is a key for storing/reading values to/from session storage.

Ext.define('MyApp.store.SessionStorageUser',{
 extend : 'Ext.data.Store',
 model : 'MyApp.model.User',
 proxy : {
  type : 'sessionstorage',
  id : 'userPreferences'
 }
})

Let's create a session storage controller and will see how to store a value and read a value by using session storage.

Ext.define('MyApp.controller.SessionStorageController',{
 extend : 'Ext.app.Controller',
 models : ['User'],
 stores : ['SessionStorageUser'],
 init : function() {
  //Storing information to session storage
  var sessionStore = this.getStore('SessionStorageUser');
  sessionStore.load();
  sessionStore.add({userId:1,userName : 'suriyan',displayName : 'Suriya'});
  sessionStore.sync();
  
  //Reading information from session storage
  sessionStore.load(function(records,operation,success) {
   //Here records is a array type. For testing purpose, I took first record.
   console.log('User name : ' + records[0].get('userName') + ', display name : ' + records[0].get('displayName'));
  });
  
  console.log('Session storage operation has completed');
 }
});

The result of the above code is as shown below.

2. Local storage proxy.

The local storage data is available for long time (until removing data from local storage memory) and we can share the data between various browser/tabs.

Let's create a local storage store. Note : the proxy type of the store.

Ext.define('MyApp.store.LocalStorageUser',{
 extend : 'Ext.data.Store',
 model : 'MyApp.model.User',
 proxy : {
  type : 'localstorage',
  id : 'userPreferences'
 }
})

Let's create a local storage controller for testing above store.

Ext.define('MyApp.controller.LocalStorageController',{
 extend : 'Ext.app.Controller',
 model : ['User'],
 stores : ['LocalStorageUser'],
 init : function() {
  //Getting handle of local storage store.
  var localStore = this.getStore('LocalStorageUser');
  
  //Adding information to local storage
  localStore.add({userId:1,userName : 'suriyan',displayName : 'suriya'});
  localStore.sync();
  
  //Reading information from local storage
  localStore.load(function(records,operation,success){
   console.log('User name : ' + records[0].get('userName') + ', display name : ' + records[0].get('displayName'));
  });
  console.log('Local storage operation has completed');
 }
})

The result of the above code is as shown below.

3. Memory proxy.

Memory proxy is very useful whenever you want to store the data temporally. The data will be lost on every page refresh. For an example, in my application I need to display list of countries to users for selection purpose. In this situation we can use our memory proxy concept for displaying country list. In future we want to add some more countries than, there is no need for modifying our existing code.

Le's create a model for country.

Ext.define('MyApp.model.Country',{
 extend : 'Ext.data.Model',
 fields : [
  {name : 'id', type : 'int'},
  {name : 'country', type : 'string'}
 ]
});

Let's create a store for country model, here check the proxy type.

Ext.define('MyApp.store.CountryStore',{
 extend : 'Ext.data.Store',
 model : 'MyApp.model.Country',
 data : countryData,
 proxy : {
  type : 'memory',
  reader : {
   type : 'json',
   root : 'countryList'
  }
 }
});

Let's create a combobox for testing above store. Note: I am following MVC pattern and this is my country view.

Ext.define('MyApp.view.Country',{
 extend : 'Ext.panel.Panel',
 alias : 'widget.country',
 title : 'Memory proxy testing',
 layout : {
  type : 'vbox'
 },
 height : 400,
 width : 400,
 items : [
  {
   xtype : 'combobox',
   store : 'CountryStore',
   fieldLabel : 'Select a country',
   displayField : 'country',
   valueField : 'country',
   queryMode : 'local',
   typeAhed : false
  }
 ]
});

Let's create a controller for memory proxy and in controller init function, render our view into HTML body.

Ext.define('MyApp.controller.MemoryController',{
 extend : 'Ext.app.Controller',
 models : ['Country'],
 stores : ['CountryStore'],
 views : ['Country'],
 init : function() {
  Ext.create("MyApp.view.Country",{
   renderTo : Ext.getBody()
  })
 }
});

Finally, this is my app.js code.

Ext.Loader.setConfig({
 enabled : true
});

var countryData = {
 countryList : [
  {id : 1, country : 'India'},
  {id : 2, country : 'Canada'},
  {id : 3, country : 'Germany'},
  {id : 4, country : 'US'},
  {id : 5, country : 'UK'}
 ]
};

Ext.application({
 name : 'MyApp',
 appFolder : 'app',
 //controllers : ['SessionStorageController'],
 //controllers : ['LocalStorageController'],
 controllers : ['MemoryController'],
 launch : function() {
  console.log('Application launch function...!');
 }
});

The result of the above code is as shown in figure.

The application source code is uploaded into my github repository.

Hope this help.....!

Ext JS 4 – Creating web page using Ext.container.Viewport class and region propery

2013-01-09T09:02:00.000-08:00

The Ext.container.Viewport is used for creating general web page and region property is used for splitting web page into different parts.

Ext.container.Viewport is a specialized container represents the viewable area of the application (the browser area).

It render itself to the document body, there is no need for providing renderTo property and it automatically sizes itself to size of the browser viewport. The viewport also re-size the child elements based on view area(based on browser width and height).

The default layout of the viewport is border layout and we can customize this property according to our requirements.

The viewport does not provide any scrolling. If necessary, the child elements(generally panels) within viewport needs to provide a scroll feature by using autoScroll property.

See the below example for better understanding. This is Home.js file placed into app/view folder.

Ext.define('MyApp.view.Home', {
 extend : 'Ext.container.Viewport',
 layout : 'border',
 items : [{
  region : 'north',
  xtype : 'panel',
  html : '
North Region - Application Header
',
  border : false,
  height : 50,
  margins : '0 0 5 0'
 }, {
  region : 'west',
  xtype : 'panel',
  collapsible : true,
  title : 'West Region',
  html : 'Navigation Links',
  width : 150
 }, {
  region : 'south',
  xtype : 'panel',
  title : 'South Region',
  collapsible : true,
  html : 'Footer contents',
  split : true,
  height : 100,
  minHeight : 100
 }, {
  region : 'east',
  xtype : 'panel',
  title : 'East Region',
  collapsible : true,
  split : true,
  width : 150
 }, {
  region : 'center',
  xtype : 'panel',
  title : 'Center Region',
  html : 'Application contents'
 }]
});

I have followed MVC pattern, above code is my view and in application launch function I have created the object for Home.js. This is my app.js code for your understanding.

Ext.Loader.setConfig({
 enabled : true
});


Ext.application({
 name : 'MyApp',
 appFolder : 'app',
 launch : function() {
  Ext.create('MyApp.view.Home',{
   
  })
 }
});

The result of the above application is given below. The application source code is uploaded into my github repository for your reference.

Sencha Touch - Flow Of Application Launch Function

2012-12-04T09:42:00.001-08:00

In Sencha Touch, we can include our application start up logic into following places, this is depending on our application situation.

1. Application default launch function. This launch function is triggered when all the dependencies are loaded successfully.

2. Controller init function.

3. Controller launch function.

4. Profile launch function.

Now I am going to include some code into all the places. Let's see what will happen.

I have created simple controller called "TestController" as shown in figure and I simply printed different message in both init and launch function.

I have created the simple profile called "TestProfile" and I simply printed message in launch function. By default this profile is active.

Now I am going to include my controller and profile into app.js and I am going to simply print different message in application launch function. This is my app.js code.

Ok let's create an index.html file and run our application. This is my index.html code.

The final result of the application is very interesting. This is my application final result.

Ok.. This is the flow of application launch function.

1. Controller init is triggered first.

2. Profile launch function is triggered next.

2. Application launch function is triggered next

3. Finally controller launch function is triggered.

The application source code is uploaded into my GitHub repository.

Simple Login Application Using Spring MVC and Hibernate – Part 2

2012-11-12T21:15:00.002-08:00

I hope you have visited my part1 of my tutorial. Let’s see the steps for integrating hibernate framework into Spring MVC. Here I have used MySQL database. I have created one database called “springmvc” and created one table called “user” with userid, username, password fields.

I have inserted some records into table like this.

Step 1: Creating User POJO class.

We need to create a User POJO class for mapping user table. Ok let’s create it.

Step 2: Creating hibernate mapping xml file for user class.

In hibernate we need to create hibernate mapping xml file for all domain class for mapping into corresponding database table. Instead of creating xml file you can use annotation for mapping domain class into database table. This is my mapping xml document created for mapping our user domain class into user database table.

Step 3: Creating authenticate service class.

The method “verifyUserNameAndPassword” present in “AuthenticateService” class is used for verifying the user name and password details against database table. It simply returns the boolean value.

Very important one is, I am injecting object for “HibernateTemplate” via setter method. So It’s time for defining data source bean, hibernate properties bean, session factory bean , hibernate template bean and our service beans into applicationContext.xml file.

Step 4: Modifying applicationContext.xml.

Here I have configured the beans that are related to hibernate as well as for our service class. Now we need to inject our service class into our controller and we need to call the “verifyUserNameAndPassword” method for verifying user credentials. So let’s see the steps for injecting our authenticate service class into login controller.

Step 5: Modifying Login Controller.

Here @Autowird annotation is used for injecting our service class into our controller.

That’s all. We have completed our development. Let’s do testing. I have deployed this application into apache server. The result of the application is,

The part2 of the application is hosted into my github repository.

Simple Login Application Using Spring MVC and Hibernate – Part 1

2012-11-12T00:06:00.003-08:00

I hope developers working in web application development might hear about MVC architecture. Almost all technologies provide support for MVC based web application development, but the success is based on many factors like reusable of the code, maintenance of the code, future adaption of the code, etc..,

The success of the Spring MVC is “Open for extension and closed for modification” principle. Using Spring MVC the developers can easily develop MVC based web application. We don’t need any steep learning curve at the same time we need to know the basics of spring framework and MVC architecture. The Spring MVC consists of following important components.

1. Dispatcher servlet
2. Controller
3. View Resolver
4. Model

Spring MVC - Overview

The overall architecture of Spring MVC is shown here.

1. When “Dispatcher Servlet” gets any request from client, it finds the corresponding mapped controller for the request and just dispatches the request to the corresponding controller. The requests and corresponding controller information are loaded into the context when application starts based on xml configuration or Meta data. We have many way for loading this information, we will discuss at this one at later point of time.

2. We know, the controllers are used for connecting business and service layer. The controller get inputs from request, process the inputs, finally it returns the view and model information.

3. The view resolver gets those information, find the corresponding view, it updates the view with model data and finally it send the response back to the “Dispatcher Servlet”.

4. Finally the “Dispatcher Servlet” sends this response back to the client.

Ok, let’s start developing our application. I have created the dynamic web project using STS and included all necessary jar files into class path of the application.

Step 1: Defining Dispatcher Servlet into web.xml file.

Here “DispatcherServlet” class is configured with name as “dispatcher” and the url pattern as “*.spring”.

Step 2: Creating login.html page.

Here I have created the html form with action as “Login.spring”. If user submits the page, the request is send to Login controller. Let’s create a login controller for handling the request.

Step 3: Creating Login Controller.

@Controller annotation is very important because when context loads, the spring will find all controller class using this annotation and it's maps to the corresponding view (URL).

@RequestMapping annotation is used for specifying action of the request.

So now the dispatcher servlet gets any request from “Login.spring” that automatically redirects the request to “LoginController”.

@RequestParam annotation is used for getting value from request parameters. It’s equivalent to request.getParameter() method in servlet.

In my login controller, the processCredentials method just gets the username, password details from parameters and check whether both are equal. If it’s equal, it just returns the object of “ModelAndView” class with next redirecting page as a parameter.

Hey In my login form, I have given action as “Login.spring” only. How that action automatically trigger my processCredentials method?

Red indicated “results” is indicates redirecting page, this is resolved by “View resolver”, and another one is request attribute key and value pair. Now we need to configure our view resolver.

Step 4: Configuring view resolver.

For configuring view resolver, we need to create one more xml file into inside the WEB-INF folder. The name of the xml file is very important, it’s is based on our dispatcher servlet name configured in web.xml file. The name should be “dispatcher servlet name-servlet.xml”. In our case, the “dispatcher” is our servlet name, so the name of the file is “dispatcher-servlet.xml”.

Spring have lot of view resolver classes, for example ResourceBundleViewResolver, InternalResourceViewResolver, XsltViewResaolver, etc.., but by default spring use InternalResourceViewResolver class.

In this XML file I have configured InternalResoureViewResolver class properties. Here I have given prefix value as “/” and suffix value as “.jsp”. In this situation, the view resolver get the view name from ModelAndView object (“results”) and append the prefix and suffix value (/results.jsp). So in our login controller we have verified user name, password values and redirected our request to results.jsp page. So we need to create results.jsp page.

Before going to create results.jsp, I have to explain about the purpose of context:component-scan tag. This tag automatically scans all the controller class presents in base-package and registered into context. In other words, it’s just looks what are all the classes have @Controller annotation and map the controller into corresponding view. This information is maintained in context of the application.

Ok let’s create a results.jsp page.

Step 5: Creating result.jsp file.

This is my result.jsp page; here I have just get the message value from request attributes and displayed the message.

Step 5: Creating applicationContext.xml file.

Spring MVC application needs applicationContext.xml file. Using this file we can configure our web related beans. As of now we don’t use any beans, so this file don’t have any bean definition.

Ok. Let’s deploy our application into web server and will check the result.

As of now, we didn’t integrate hibernate. In my next part, I will explain the stpes for integrating Hibernate ORM framework into our application. The part1 application source code is uploaded into my GitHub repository for your reference.

For integrating into hibernate, refer the below link.

http://www.pointerunits.com/2012/11/simple-login-application-using-spring_12.html

JSF2 - h:dataTable Demo using HashMap

2012-10-11T11:53:00.002-07:00

The data table component in JSF2 is used for displaying database table, array list, hash map, etc.., into tabular format. In JSP, if you want to display a table record in tabular format, we need to create a html table template after that we need to iterate the result set object. Here that is not necessary, because the h:dataTable automatically create a table template based on your inputs as well it have lot of useful attributes for specifying style class for HTML tags like table, th, tr and td.

This is very simple use case of h:dataTable. Here I am using HashMap, Inside the hash map I have all country name as key and corresponding capital name as value. Now I am going to display that hash map into tabular format using h:dataTable component.

The rowClasses, columnClasses, header and footer classes are very useful attributes used for define your own css classes into table attributes. Download my entire application from github and see my managed bean, xhtml and css code. The result of application is like this.

JSF2 - Number Converter Demo

2012-10-10T23:45:00.004-07:00

The number converter in JSF2 is used to convert a component data into java.lang.Number format. Additionally it have lot of attributes for customizing number format. The sample usage is given here.

The important one is, the numberConverter binding component managed bean property should be a primitive type or has a type of java.lang.Number only. Here the "number" type is java.lang.Number. This is another usage of number converter.

THe result of the above code is something like $22.50. The sample application is available in Github.

JSF2 - Date Time Converter Demo

2012-10-09T10:30:00.000-07:00

The date time converter in JSF2 is used to convert a text value into java.util.Date value. The date time converter has several attributes, that is used to specify the format and type of data. The most used formats are locale, timeStyle, for, timeZone etc.., The example usage is given here.


  
Please enter a date in dd/mm/yyyy format

The sample application is available in Github.

JSF2-Integer Converter Demo

2012-10-01T10:37:00.001-07:00

The Integer converter in JSF2 is used to convert a text value into integer value. This is my managed bean, here I have declared one Integer variable and I have created accessor method for that variable.

package com.pointerunits;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped

public class Converter {
 private Integer intNumber;
 public Converter() {
  
 }
 public Integer getIntNumber() {
  return intNumber;
 }
 public void setIntNumber(Integer intNumber) {
  this.intNumber = intNumber;
 } 
}

This is my xhtml page, Here I have created one input text filed and converted that field value into integer using integer converter. If converter can't able to convert then it't will display the error message.

You can download an entire application from github.

Converters in JSF 2

2012-09-29T09:47:00.004-07:00

Converters in JSF2 are used to easily convert a value from one data type to other. The following inbuilt converters are available in JSF2.

Converter Name	Converter Class
Byte Converter	javax.faces.convert.ByteConverter
Short Converter	javax.faces.convert.ShortConverter
Character Converter	javax.faces.convert.CharacterConverter
Boolean Converter	javax.faces.convert.BooleanConverter
Integer Converter	javax.faces.convert.IntegerConverter
Float Converter	javax.faces.convert.FloatConverter
Double Converter	javax.faces.convert.DoubleConverter
Long Converter	javax.faces.convert.LongConverter
Big Integer Converter	javax.faces.convert.BigIntegerConverter
Big Decimal Converter	javax.faces.convert.BigDecimalConverter
Date Time Converter	javax.faces.convert.DateTimeConverter
Number Converter	javax.faces.convert.NumberConverter
Enum Converter	javax.faces.convert.EnumConverter

The JSF2 also allow developers to create a custom converter for their own purpose. The following rules are very important because almost all the developers are makes lot of mistake here.
1. Before going to use any converter, we need to register that converter into faces-config.xml file (If you are going to create custom converter, this is important). Se the below example, Here I have registered Integer converter into facex-config.xml file.


  Integer
  javax.faces.convert.IntegerConverter

2. By default all converter have error message. If converter can't able to convert the value, then it will display error message. So we need to register error message component for corresponding converter component.
3. We need to bind a value of the component to managed bean property as the same type as the converter.
4. We have two ways for registering converter component. The first one is using converter attribute directly on the component tag and another one is, we can nest a converter tag within the component tag and use converter tag's converterId attribute or binding attribute to reference the converter. Examples are here.

In my upcoming post, I am going to give a small example for above converters.

Guessing Game Implementation using JSF

2012-08-31T12:42:00.001-07:00

In a typical Java Server Faces application each page connect to a managed bean, that have properties and methods that are associated with the components. This Guessing Game application consists of one managed bean and two views. All views are using same bean.

The following are requirements for this application.

1. User must enter a number from 0 to 10.
2. Maximum number of attempt is 5.
3. If user guess a correct number with in 5 attempts, the success message is displayed to the user otherwise the failure message is displayed.

Ok let's create a managed bean for implementing above requirements.

package com.pointerunits;

import java.io.IOException;
import java.util.Random;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped

public class GuessingGame {
 private int randomNumber;
 private int userNumber;
 private int minimum;
 private int maximum;
 private int allowableAttempts;
 private int userAttempts;
 private String message;
 public GuessingGame() {
  this.minimum = 0;
  this.maximum =10;
  this.allowableAttempts = 5; 
  this.initializeGame();
 }
 private void initializeGame() {
  Random randomGR = new Random();
  this.randomNumber = new Integer(randomGR.nextInt(this.maximum));
  System.out.println("Random number : " + this.randomNumber);
  this.userAttempts = 0;
  this.userNumber = 0;
  this.message = "";
 }
 public int getRandomNumber() {
  return randomNumber;
 }
 public void setRandomNumber(int randomNumber) {
  this.randomNumber = randomNumber;
 }
 public int getUserNumber() {
  return userNumber;
 }
 public void setUserNumber(int userNumber) {
  this.userNumber = userNumber;
 }
 public int getMinimum() {
  return minimum;
 }
 public void setMinimum(int minimum) {
  this.minimum = minimum;
 }
 public int getMaximum() {
  return maximum;
 }
 public void setMaximum(int maximum) {
  this.maximum = maximum;
 }
 public int getAllowableAttempts() {
  return allowableAttempts;
 }
 public void setAllowableAttempts(int allowableAttempts) {
  this.allowableAttempts = allowableAttempts;
 }
 public int getUserAttempts() {
  return userAttempts;
 }
 public void setUserAttempts(int userAttempts) {
  this.userAttempts = userAttempts;
 }
 public String getMessage() {
  return message;
 }
 public void setMessage(String message) {
  this.message = message;
 }
 public void playGame() throws IOException {
  this.userAttempts++;
  boolean isRedirect = false;
  if(this.userNumber == this.randomNumber) {
   this.message = "Hey..you got it. Total attempt is " + this.userAttempts ;
   isRedirect = true;
  }
  else if(this.userNumber > this.randomNumber){
   this.message = "Hey I am lesser than your guess";
  }
  else if(this.userNumber < this.randomNumber) {
   this.message = "Hey I am greater than your guess";
  }
  if(this.userAttempts == this.allowableAttempts) {
   this.message = "Hey..you have failed to guess.";
   isRedirect = true;
  }
  if(isRedirect) {
   FacesContext.getCurrentInstance().getExternalContext().redirect("guessingGameResponse.xhtml");
  }
 }
 
 public void resetGame() throws IOException {
  initializeGame();
  FacesContext.getCurrentInstance().getExternalContext().redirect("guessingGame.xhtml");
 }
}

Here the redirect() method is used for redirecting to result page. Instead of you can use JSF navigation rule for redirection. The following facelet page is used for getting user input.


 Guessing Game


 
  
Hi, I am thinking of a number from #{guessingGame.minimum} to #{guessingGame.maximum}. Can you guess it?

The following facelet page is used for displaying result.


 Guessing Game


 
  
  

  
Do you want to play a game once again?

You can download an entire application from GitHub.

Getting current geo location details of the mobile device using PhoneGap (Cordova)

2012-07-24T00:02:00.000-07:00

The PhoneGap library provide lot of useful functionalities for accessing native mobile features like Camera, Geo location, Voice recorder etc., In this tutorial I am going to collect current Geo location details of the mobile device using Geolocation methods available in PhoneGap (Cordova).

PhoneGap (Cordova) provides two different methods for getting geo location details. Those are,

1. geolocation.getCurrentPosition - Returns the current position as Position object.

2. geolocation.watchPosition - It continuously watch changes of device 's current position.

The example for above methods are shown here.

navigator.geolocation.getCurrentPosition(geoLocationSuccess,geoLocationError,{timeout:30000});
(or)
navigator.geolocation.watchPosition(geoLocationSuccess,geoLocationError,{timeout : 30000});

function geoLocationSuccess(position) {
 var str = 'Latitude: '          + position.coords.latitude          + '\n' +
           'Longitude: '         + position.coords.longitude         + '\n' +
           'Altitude: '          + position.coords.altitude          + '\n' +
           'Accuracy: '          + position.coords.accuracy          + '\n' +
           'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
           'Heading: '           + position.coords.heading           + '\n' +
           'Speed: '             + position.coords.speed             + '\n' +
           'Timestamp: '         + position.timestamp                + '\n' ;
 alert(str);

}

function geoLocationError(error) {
 alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
}

Here the first parameter indicates your success callback function, second parameter indicates your failure callback and final parameter indicates various options that are provided by PhoneGap (Cordova), those are,

  1. maximumAge - Accept a cached position whose age is no longer than given timeout (in milliseconds)
   2. timeout
   3. enableHighAccuracy - Either true or false.

There is one more method available for stopping watch position function. The example is show here.

var watchId = navigator.geolocation.watchPosition(geoLocationSuccess,geoLocationError,{ timeout: 30000 });
navigator.geolocation.clearWatch(watchId);

You can find more example from PhoneGap (Cordova) documentation.
Hope this help..!

"_NSURLIsExcludedFromBackupKey", referenced from: [CDVFile setMetadata:withDict:] in Cordova, ld: symbol(s) not found for architecture i386

2012-07-14T11:16:00.001-07:00

Hi, Last week I have updated my PhoneGap (Cordova) version from 1.3 to 1.9, for both IPhone as well as Android. In XCode I have installed the newer version of Cordova and I have created new project using Cordovo 1.9. When I was running my application I got the following error and also the compilation was failed. The error is,

Undefined symbols for architecture i386:

"_NSURLIsExcludedFromBackupKey", referenced from: [CDVFile setMetadata:withDict:] in Cordova,

ld: symbol(s) not found for architecture i386

For fixing this issue, I have updated my AppDelegate.h file with following code.

#import <UIKit/UIKit.h>

#ifdef CORDOVA_FRAMEWORK
#import <Cordova/CDVViewController.h>
#else
#import "CDVViewController.h"
#endif

NSString * const NSURLIsExcludedFromBackupKey = @"NSURLIsExcludedFromBackupKey";
@interface AppDelegate : NSObject < UIApplicationDelegate > {
}