MVC Architecture & Oops in JavaScript using PhoneGap

Introduction:

In this post, we'll look into the creation of MVC architecture in JavaScript. Using MVC in PhoneGap applications makes them modularize, which is much helpfull 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, lets have a look into the MVC Architecture. As we know Model creates the bridge between the database and the Controller, where as 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.

Below is the basic HTML we need for showing the list view.

        <div id="wrapper">
            <div id="scroller">
                <ul id="container"></ul>
            </div>
        </div>

Now we need to create the MVC Architecture, so we will be having the following files,

    RecipeModel.js - It will manage all the database queries.
    RecipeView.js - It will make the UI changes to show the Recipe List.
    RecipeController.js - It will manage the data flow between View and Model.
   
So let's have go through the Model,

    RecipeModel.js
    ------------------
   

    var RecipeModel = function() {

       

     // Code to open database and retrieve records
     // from it.
       

  };

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

    RecipeController.js
    ------------------
   
    var RecipeController = function() {
       
    // Get the model object
    this.model = new RecipeModel();
       
    // Code to get the list of recipes from model
       
  };

   
And finally, we will go for creating the View,

    RecipeModel.js
    ------------------
   
    var RecipeView = function() {
       
     // Get the controller object
     this.controller = new RecipeController();
       
     // Code to loop through the array and print the
     // recipes to the html
       
  };

   
That's all, we can now have the list of recipes listed on the UI. For a detailed code and reference follow my post here

Summary:

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

Smooth Page Transition on Mobile Devices within Single Html Page

For the smooth page transitions for mobile devices, the basic concept is to make a div element of full width and height, and animate the inner div elements that should act like page.

Now let's discuss the required styling for the sections. The div element acting as page should be position absolute with full page display, and keep in mind to translate them to initial positions using the css3 translate3d property.

The first page will be animated form its original position to either left/right side with translate value of 100%. So we need four classes, one with the animations effects and other three with the translated values.

         /* Transitions Effects Styling */
         .page.left {
               -webkit-transform: translate3d(-100%, 0, 0);
               transform: translate3d(-100%, 0, 0);
         }
         .page.center {
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
         }
         .page.right {
               -webkit-transform: translate3d(100%, 0, 0);
               transform: translate3d(100%, 0, 0);
         }

So now on the javascript code we just need to add these classes to the respective pages while animating, and yes, before going for this, we need to bind a function with the "webkitTransitionEnd"
event that will revert back the changes by removing the classes.

Finally, the navigation. This can be done by keeping track of the hash change and animating the required pages accordingly with loading the page templates onto the main div.  
     
      // Bind the hash change event
      $(window).on('hashchange', Route);


So here basically we need to write a function called "Route", that will manage the hash change event and detect the current hash and load the respective page.

That's all, just load the page and go through the transitions.

For a detailed view of this post please follow this link.