• We Code
  • We Design
  • We Develope
  • We Write
  • We Share



Thursday, February 13, 2014

Show loading screen in Phonegap app over inAppBrowser

The trick is very simple for showing the loading screen in phonegap application.You Just need to call activityStart function of the notification.

For hiding the loading screen in phonegap just call activityStop function.

The loading screen is very helpful while making Ajax call or while using the inappbrowser.It is really useful when loading the external link in inappbrowser.It is useful because you can not create a loading screen through your HTML in client side if you are loading the external link.Because inappbrowser overlay on the application.You can show the loading screen when loadstart events fire in Inappbrowser hide it when loadstop events fire.
Here is an example of loading screen with inappbrowser.

This phonegap loading screen only works with the android .And if you will touch the screen The loading screen will get hide.
Read more ►

Monday, January 27, 2014

FaceBook Login Logout using cordova 3.3.0 cli.


In recent past i faced a lot problem in setting up the cordova facebook plugin with cli 3.3.0.After a lot of search i found it is typo from cordova.I am here sharing the easiest steps to setting up cordova facenook plugin using cordova cli 3.3.0 .

How to set up the Facebook plugin With cordova 3.3.0 cli for android ?
before Setting Facebook plugin with cordova 3.3.0 you have to setup these
Prerequisite :
  1. JdK
  2. Apache Ant
  3. Node.js and NPM
  4. Git
  5. Cordova 3.3.0 CLI

Once you installed all the above properly.Open your command prompt and go to your project directory and run this command

you will see the  screen like above after running the command . You have created a cordova project.Change your directory to facebookTutorial 

Now you are inside cordova project which you just created .Run the below command.


Now you installed facebook plugin in your cordova project. But if you will run the command  cordova plateform add android it will get failed and ask you to putt appid and appname.
For removing this error locate the folder \plugins\com.phonegap.plugins.facebookconnect inside your projectfolder.
Open The plugin.xml file from \plugins\com.phonegap.plugins.facebookconnect folder and find the lines

Modify it to

Where value is your app id and your app name.
 Run the command cordova platform add android . The screen similar to below will appear.
 Now you have installed facebook plugin and created android project.
Now we will see how to get login to facebook through cordova facebook plugin ?
 Now open the index.html file from your projectfolder/www in your favorite editor. And delete everything from this .
 You have a Blank index.html file.Write some dom elements inside your body Tag 

Your Dom structure is ready . Now Make reference of cordova.js ,cdv-plugin-fb-connect.js and facebook-js-sdk.js

Now come to your <script></script> portion and check the cordova facebook and cdv agent are included properly inside your project

Write  event handler function for login logout and status change.

Its time to initialize FB sdk now. Here i am initializing it with device ready event

Once the fb is initialize we can  make login to facebook through our application.Here the function for log in

For the Logging out

For getting the login status here is the code snipet

Once all this done run the command 

Your Application will be launch in your emulator.Here are few screenshots of emulator.

Hope you enjoyed reading this.If any doubt i am open to answer .Feel free to ask and do't forget to share with your friends
Read more ►

Tuesday, January 21, 2014

Offline App Capability In HTML5

HTML5 Offline Apps
Html5 Offline Apps
Offline app capability in HTML5 bought all the power to store data offline .When we talks about offline people ask offline means without internet ? First take the term ONLINE first . online and Web are kind of synonyms.
So why the term Offline is getting use for web technology . The offline here means run the webpage from file:// uri. But hang on it does not mean the web page will never get connected to server.The term offline will make more sense if we will take it like the web page could survive at the server downtime.There are various apps who connects the cloud server and survives at downtime. Gmail Mobile app and gmail offline are examples
In the Older time devs used the technique like cookies,Plugin Based Storage for storage. But the era of HTML5 bought more power to the client side for storage.
 . You can check the application for online/offline using navigator.onLine(). And it works everywhere in latest browser even in IE also.
You can also listen the events for it using.

document.body.addEventListener("online", function () {console.log("Now you are online !!!")}
document.body.addEventListener("offline", function () {console.log("Now you are offline !!!!")}

HTML5 bought many features to make application offline .Few Technique to make app offline
1.Application Cache : CACHE MANIFEST file make you able to store the resourse files locally for offline usage.Make a reference of manifest file inside <html> tag.
<html manifest="MyManifest.appcache">.

The mime type of the manifest must be text/cache-manifest.Manifest file is a simple text file . It looks like this


2.Web Storage : Web storage have two sub category. One is persistent called local storage . In local storage we can set a value to a key using localstorage.key="value"
And we can retrieve it later . The other category of web storage is session storage we use it similar but the data gets lost once the browser gets closed .
We can just match the strings using the web storage.Simplicity is for calling the API is good part of this and bad performance is bad part of it.

3.Web SQL Database : Web sql database is a relational database .It has all the power of storing the complex relational database. it is well supported in all mobile browser the performance is really good .It has robustness. And the best part it is really easy to maintain.One have good command over sql can play with it with lot of ease.

4.Indexed database : Indexed Database is a collection of  stores of objects . Where you can keep the objects for future use.In indexed Db you don't need to define a schema before like  web sql database . In Index db you can have multiple databases and in each database you can have multiple stores.Indexed Database have good search performance and have robustness

Read more ►

Thursday, December 26, 2013

How to Make a user friendly Interface for Mobile Platforms?

We all web Ninja knows the value of USER EXPERIENCE. In mobile platform it requires a different approach to make a better user experience. I am listing few points one must remember while making mobile Interface.
  • 1 .Responsive Web design
  • 2 .The event handing must be touch friendly
  • 3. The Forms must be design in a mobile friendly way .
  • 4. Use appropriate screen pixel densities of images

1. We all know responsive Design is one which adapts the layout on the basis of the screen size. It means the user will have the same  EXPERIENCE on mobile as on Desktop while browsing the site.few well known technique for making website responsive are these.
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" type="text/css" href="main.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="fallback.css" media="screen  and (min-width: 40.5em)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="fallback.css" />
It means non mobile version and The IE version 9 or less than 9 will use fallback.css. We all knows IE 9 and lower does not support media queries. Not only IE some mobile browser like Symbian Browser (Doesn’t exist though) and BlackBerry older browser also not support the media queries. So Conclusion of this Part is make web design responsive.If you don’t know learn it.
Use Appcache to make website offline available. Believe me it increase user experiences

2. Now let’s  jump on the second point event handling. Now days mobile are touch friendly. Apple   bought “touch events AP” from ios 2.0 .Android is also catching up with touch events. W3C also making draft on touch event https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html. There are single touch and Multi touch Devices in market. Let’s not focus on multi and single touch devices (It’s another big debate).
So currently there are three basic touch events currently

  1. touchstart: When a DOM element is touched.
  2. touchmove: when a touch is dragged over the  DOM element.
  3. touchend: when the touch removed from DOM element.

3. The Forms  So one need to handle these events for making website touch friendly .Few things one must remember while approaching for touch friendly devices
1 .Disable the zooming : Preventing the user from zooming will prevent user to scale website.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

2.Prevent the scrolling: Few devices  like IOS jumps the viewport when the scroll exceed the limits.    
document.body.addEventListener('touchmove', function(event) {
}, false);

Now let’s come to Third point make form user friendly. Mobile have on-screen keyboard and its really frustrating to fill the form with this. But thanks to HTML5 which came with new semantic input types and validation. For making form filling mobile friendly on need to follow these two things .
1 .Input Type. There are number of new input type introduced in HTML which invokes relative on-screen keyboard.
The full list of all input types :
url ,tel ,Email , search, Number ,Color , Range , Datetime , datetime-local  ,Date,  Time , Week ,month
For Example I write < input type=”number” />, the browser will show a numeric onscreen keyboard. Or I write < input type=”Email” /> the on screen keyboard will show alpha numeric keyboard with @ and .com button . So the user will feel it more easy to fill the form
2.Form Validation : Validation of form is very important .It keeps the data clean and improve the  user experience . There are two approach one can use for form validation
 I . Pattern . Pattern is nothing but a regular expression to validate
 <form action="Myform.asp">
  Country code: <input type="text" name="Your country_code" pattern="[A-Za-z]{3}" title=" only Three letter country code">
  <input type="submit">
The above example will validate the input field and will allow only 3 character
II. Require : If input field have require attribute the user must fill the field before submitting the form

<input type="text" required  name="Your country_code" pattern="[A-Za-z]{3}" title=" only Three letter country code">
III min, max and step: For numeric value specify the minimum maximum value and for the value will increment in slider
<input type="number" id="myNumber" min="10" max="50" step="10" />
IV  maxlength : The maxlength attribute for Input type  will specify the maximum allowed length of input character

4.Now days there is very wide range of screen pixel densities. Some devices have really very very high resolution display. So first and best suggestion for the optimizing different screen pixels  is avoid images as much as you can. Now days there are SVG CSS3 for getting nice interface. And these works fine across the web
But if it is compulsory to use image you can  go for these two approach
1.       Optimize  Single image  for multiple platform. You can use one image and optimize it for different devices. But this will affect the performance badly. As user will download the Hidpi image in all browser ,the old browser will render it badly .
2.       Multiple Image approach . Use multiple images and decide on the browser capacity which to load .We can use following technique to make the dicision
  • 1 . Javascript
  • 2 .server side Delivery
  • 3. CSS Media Queries   

Read more ►

Thursday, August 22, 2013

Getting Started with Angular -My first angular program

getting started with angular.js

Before we start developing in Angular you need to download Angular.js from its official page .It's available in both minfied and normal version .
Structure :
First we will look at the structure of the Angular.
<!doctype html>
<html ng-app>
    <script src="angular.js">

The first line <!doctype html> is for the browser to make him aware about the page is HTML5 based .
The next tag is <html ng-app> the ng-app means your app will auto bootstrap or auto initialize .You can initialize the app manuallly also .
If you wanna get support on IE 7 or below also write it like this <html ng-app id="ng-app">.
One important thing we wrote the script tag at end of the body tag . The purpose of this is to let dom structure get ready . It is best practis

Now lets develope some thing . 

<!doctype html>
<html ng-app>
  <title>My angular first program</title>
      <input type="text" ng-model="myMess" placeholder="Type any message here">
       <h1>it is your message {{myMess}}!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
Explanation : <input type="text" ng-model="myMess" placeholder="Type any message here">
Here we are declaring an input text type field . 
"ng-model" is Angular API which is responsible for two way data binding (binding view to the model).
It alow you the form validation like you normally does in HTML require ,url,number,email.We will review it in brief in future for now you just understand it is something related to the form

<h1>it is your message {{myMess}}!</h1> : this "{{ }}" is how we write expression in angular.{{myMess}} means  the value of [ ng-model="myMess" ] will be get displayed here . This is called two way data binding .
Read more ►

Tuesday, August 20, 2013

MVC in JavaScript Angular Vs Backbone vs Other


One technology which did remarkably well in recent year is JavaScript (EcmaScript). From the concept of Oops JavaScript has moved to MVC. JavaScript had libraries like J query  which is all about  on  Dom manipulation . I spend last few months on MVC framework in JavaScript. Before discussing  the MVC frameworks of JavaScript lets first understand  what  MVC actually is in practical.   

What Is MVC , Or MV* means actually ?

Various frameworks make able developers to create   a flexible way to organizing their code by using the variations of a pattern called MVC (Model-View-Controller). This is what book speaks about MVC.
If you will dig deep  MVC. It is divided into three parts
MVC in JavaScript

Models represent the domain-specific knowledge and data in an application. Think of this as being a ‘type’ of data you can model — like a User, Photo or Note. Models should notify anyone observing them about their current state (e.g Views).
Views think of this as  User-interface  (e.g your markup and templates). Views must be aware about the structure of model but they need not to interact with model directly
Controllers takes the all input from user in the application and update the model. The  controller don’t directly communicate the view .
This is how the Model - View – Controller relation is .

Various MVC Frameworks
There are many JavaScript MVC frameworks available like Backbone.js, Knockout.js, Ember.js, Spine.js, Angular.js, Ext.js etc. The Framework which are on too much demand are Backbone.js and angular.js .Both have own positives and negatives. Let’s start reviewing the various MVC in JavaScript.
Backbone.Js  - If you are in the down town  of JavaScript you must heard its name a lot . This is the one of the most widely used MVC Framework, Backbone is flexible framework. It provide the flexibility to choose the feature which you want to implement and which you don’t .underscore .js is tightly integrated with this  . It plays very well with other frameworks .The first and main disadvantage I personally felt with Backbone is the bad documentation even though they improved it a lot but still it is not good enough for beginners. The functional drawback of backbone is it’s  don’t provide UI binding. It is a event driven framework.

Angular.js  - this is my personal  favorite framework .What is best about Angular.js  is it is not dependent on any other framework like angular  underscore  jquerry etc. If its Angular its pure Angular. Angular is a complete solution . In Backbone there you have to implement all the event listeners you need not to write for events listener or event trigger its automatically happens in angular. The both way data binding make it awesome. Angular is   heavy .It means you have to type less. 

We will discuss more MVC frameworks and angular in detail in future. Stay in touch.
Read more ►

Tuesday, August 6, 2013

how to write hello world programe in android using phonegap

In The last blogpost we discused how to set the workspace for the android app developement in phonegap aka cordova.
In this post will write the "Hello world" programe for android using cordova .
So here are the steps for creating your first app in phonegap.
Step 1 : Set your work space as i wrote in last blogpost

Step 2 : Create a www & libs folder inside the Asset folder .

Step 3 : Create a js and css folder inside the www folder .

step 4 : create a index.html file inside the www folder .

Step 5 : Copy the cordova-2.7.0.jar file from downloaded phonegap folder to your projects asset/libs folder.

Step 6 : Right click on the cordova-2.7.0.jar file which you copied into asset/libs folder .A select menu will appear choose the "Buid Path" .And then select "Add To Build Path" .

Step 7 : Now copy the cordova-2.7.0.js file from downloaded phonegap folder to your projects asset/www/js folder.

Step 8 : Now open your index.html file from www folder . I assume you are familiar with web developement . make a reference of cordova-2.7.0.js in your index.html page. 

<script src="js/cordova-2.7.0.js" type="text/javascript"></script>

step 9 : Create a main.js file inside js folder . and refrence it in index .html page 

<script src="main.js" type="text/javascript"></script> 

Step 10: Write inside the body tag of index.html 
    <p>Hello World </p>

Step 11: Now Save all www folder files and Open the MainActivity.java file which you will found under the src folder.

Step 12: Keep the first line which start with "package" and  Remove the all other lines of that file .

Step 13: Copy the following lines in in the file .

  import android.os.Bundle;
import org.apache.cordova.*;
public class MainActivity extends DroidGap {
    public void onCreate(Bundle savedInstanceState) {

Step 14:Now save the file . Clean the project . Build the project. Run the application . And you application is done .

Feel free to ask your doubts through comments  

Read more ►