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.

Continue reading

Show Countdown Before Starting of your Game with Corona

Background:

Few months ago I was just making a prototype of a gaming app. After few days when it reaches a position where a user can check it, I have shown it to one of my friend. After looking to its every corner we found some flaws and also listed some points that I need to implement to make it more presentable. He asked me why I don’t add a countdown before jumping to the game directly. Then I realized, it’s not a bad idea. After that I have implemented that without wasting any time in second thought. I manage to display countdown like 3, 2, 1 and then the game begins. So today we will see how we can make our own custom countdown.

Description:

So let’s say we have a gaming board page where we will play the game but before starting we will add countdown like 3, 2, 1 and after that user can play the game. So for that lets make a translucent background where we will show our countdown number.

Continue reading

Page Transition using storyboard with Corona in Cross Platform Mobile App

Introduction:

An application with multiple pages will definitely require transition while moving from one page to another. Different frameworks use different ways to do the page transition. Corona SDK is also providing ease ways to do the same stuff. One of them is using director class and another one is use of storyboard. So today we will how story board can be used to do the page transition in our cross-platform mobile application.

Description:

Before starting let’s make a scenario. We will have two pages named home and menu and we will apply transition on these two pages. Home and menu page will contain a message labels, on click of them we will apply the effect. And also we will have the main.lua file which is the landing page for corona SDK. So here is the code for main.lua file which is the starting page of our application.

Continue reading

Smooth Page Transition on Mobile Devices within Single HTML Page

While exploring the CSS3 transitions and animations, I found them much helpful for the smooth page transitions for mobile devices. Let’s see how can we achieve this.

Basic HTML: This is the basic html that will hold the divs that will act like a page. So all the pages are finally rendered into this container.

<body>
<div id=”mainContainer”></div>
</body>

Templates Used: These templates are loaded when you click on the links to navigate between pages.

Continue reading