MVC Architechture & OOPs in JavaScript using PhoneGap

Introduction:
In this post, we’ll look into the creation of MVC architechture in Javascript. Using MVC in PhoneGap applications makes them modularize, which is much helpful during big projects and most of all, makes them easy & simple to handle and review during maintenance. Use of Oops concept, helps us making multiple instances of Model/Controller that can be used with multiple views, each having it’s own scope.

Description:
First of all, let’s have a look into the MVC architecture. As we know Model creates the bridge between the database and the Controller, whereas View manages the UI in associate with the Controller. So, the vital part is the Controller, which builds the passage between the Model and View, passing the data
to & fro. The Controller contains all the logical codes that need to be done, and rest Model & View just contains the code required to manipulate the data.
Let’s go with a small application for better understanding. So here is the basic requirement, we will be having some students info stored on the local sqlite database and our job is to retrive those students and list them on the list view.

Let’s move on with the UI first, So for better manipulation of the UI, let’s have a javascript file that manages the UI, which we will basically refer as View.
Below is the basic HTML we need for showing the list view.

<body>
  <h1>Student List</h1>
  <div id="wrapper">
    <div id="scroller">
       <ul id="container"></ul>
    </div>
  </div>
</body>

Now we need to create the MVC Architechture, so we will be having the following files,
StudentModel.js – It will manage all the database queries.
StudentView.js – It will make the UI changes to show the Student List.
StudentController.js – It will manage the data flow between View and Model.
So let’s go through the Model,

StudentModel.js

 var StudentModel = function() {
 // Open the database
 try {
 this.db = window.sqlitePlugin.openDatabase({name: "student"}); }
 catch(iException) {
 this.db = false;
 }
 // Get the student list
 this.retriveStudentList = function(iCallback) {
 if(this.db) {
 this.db.transaction(function(iTx) {
 iTx.executeSql("SELECT * FROM STUDENTS", [],
 function(iTx, iResults) {
 if(iResults.rows.length > 0)
 iCallback({success: true, data: iResults.rows});
 else
 iCallback({success: false, message: 'No student available.'});
 },
 function() {
 iCallback({success: false, message: 'Failed to retrieve students.'});
 }
 );
 });
 }
 else {
 iCallback({success: false,
 message: 'Failed to connect to database.'}); }
 };
 };

Now it’s the time to code for Controller, let’s see how.

StudentController.js

var StudentController = function() {
 // Get the model object
 this.model = new StudentModel();
 // Get the student list
 this.getStudentList = function(iCallback) { this.model.retriveStudentList(function(iResults) {
 // Just pass on the result object as we don't // need any manupulation right now
 iCallback(iResults);
 });
 };
 };

And finally, we will go for creating the View,
StudentView.js

 var StudentView = function() {
 // Get the controller object
 this.controller = new StudentController();
 // Get the student list
 this.controller.getStudentList(function(iResults) {
 if(iResults.success) {
 var records = iResults.data;
 for(var counter=0; counter<records.length; counter++) {
 $('#container').append('<li id="'+records.item(counter).ID+'">' + records.item(counter).NAME+'</li>');
 }
 }
 else {
 $('#container').html(''+iResults.message+'');
 }
 });
 };

That’s all. We can now have the list of Student listed on the UI.

Summary:

Using MVC makes the flow go simple and concrete, all together making it quite easy during maintenance.

Written By: Ashis Kumar, Software Developer, Mindfire Solutions

Advertisements

One thought on “MVC Architechture & OOPs in JavaScript using PhoneGap

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s