PhoneGap or Cordova? Don’t confuse and tell me the differences!

I am an App developer. And I confess that I am big advocate of Hybrid Apps paradigm. Long back I wrote a blog post

As a Developer why should I worry about Hybrid Application Development?

Simply to create an App, I used to follow below steps,

image

As you see PhoneGap was something very essential and my best friend to create Cross-Platform apps. But suddenly I found one day PhoneGap.js has been changed to something Coredova.js. What the heck is this?

Did my best friend change name? Or do I need to make friendship with someone new? I was confused and decided to get rid of this confusion.

I found a blog posts on Adobe site which clarifies many of my doubt PhoneGap, Cordova, and what’s in a name? So essentially in this blog post author’s view can be expressed in below steps,

image

PhoneGap and Cordova is a framework (They are same with different name). They provide you set of API to work with devices on different platforms. Using them you can access native device functions such as camera or contact using JavaScript functions.

PhoneGap build is a Build Service allows you to build and package you app in cloud. You do not need to install any SDK locally to build app.

image

PhoneGap get distributed using Apache Cordova. Now let us get it straight,

image

You can summarize that current open source code base (both known as PhoneGap or Cordova) will be free always and distributed by Apachae. In future Adobe may add more values to current codebase and will be branded as PhoneGap. One may have to pay for that. One of the example is PhoneGap Build Service.

PhoneGap Build is service provided by Adobe which allows you to build your app in the cloud. You do not need to install any SDK locally.

image

Apache Cordova is free open source. It allows you to create mobile apps native to platforms using web technologies.

PhoneGap mobile application development framework is same as Apache Cordova or rather two names of same framework.

image

However PhoneGap Services will be own by Adobe and may not be open source. But Apache cordova will be always opensource and free.

I hope now you have some clarification on PhoneGap and Cordova myth. Thanks for reading.

Capturing Photos in Cordova or PhoneGap

In this post we will take a look on capturing photos using PhoneGap or CorDova. To start with make sure to add reference of coredova .


<script src="cordova.js"></script>

I have put one button and an image control. On click of button camera will be launched and then we will bind (display) captured photo in image control.


<button onclick="takePhoto();">Take Photo</button> <br>
<img style="display:none;width:60px;height:60px;" id="img" src="" />

takePhoto() function will be called on click event of the button . You can capture photo as following

function takePhoto() {

navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
 quality: 50,
 destinationType: destinationType.DATA_URL
 }
 );

We are using navigation.camera.getPicture function to capture photo. There are many optional parameters can be passed to this function. Those parameters are as follows,

Quality of image: quality

This is a number in range of 0 to 100 to define quality of image

Destination type: destinationType

This chooses the format of the return value. It could return image as base64 encoded string or return image file URI.

image

Source Type: sourceType

It sets the source of the picture. Source type could be PhotoLibrary , Camera , SavedPhotoAlbum. You can choose either of them.

image

Other options are as follows,

  • targetWidth a number value
  • targetHeight a number value
  • EncodingType. This could be jpeg(0) or png(1)
  • allowEdit : Boolean value to allow edit before image selection

In above scenario we have set parameters like quality and destination type. After successful selection of image onPhotoDataSuccess function will be called. In this function we will bind selected image to image control.


function onPhotoDataSuccess(imageData) {
 var imgControl = document.getElementById('img');
 imgControl.style.display = 'block';
 imgControl.src = "data:image/jpeg;base64," + imageData;
 }

If there is error selecting photo then onFail() function will be called. We can simply display an error message in this function.


function onFail(message) {
 alert('Failed because: ' + message);
 }

In this way you can work with pictures in CorDova. I hope you find this post useful. Thanks for reading.

How to detect Device is connected to Internet using Cordova

 

Recently, I have been working on some of the Hybrid Application . I come across a requirement to detect that whether device is connected to Internet or not? Since I were developing Hybrid Application so I had an option to detect Internet using HTML5 . However this approach had a problem in the browsers do not support HTML5. Better approach to detect Internet connectivity of device is through Cordova (PhoneGap).

You can detect device is online or offline in if condition as following,

 

image

 

If device is connected to internet then you can check type of the connection in device using Cordova as well. You can do that as following

 

image

Make sure you have added the reference of cordova to work with this.

 

image

Best practice is to create a function to detect device connectivity status and call that function when the device is ready. I hope you find this post useful. Thanks for reading.

 

Build your application using PhoneGap:Build

In this walkthrough I will show you the way to build your application in PhoneGap build. Very first create your application using any of the technology choices like jQuery mobile or KendoUI Mobile. PhoneGap allows you to create hybrid application.

Navigate to Phonegap Build and register yourself by clicking on the Register button

image

You can either login using Adobe account or Github account.

image

I am login using Github. You will be prompted to authorize the Application. Click on the Allow button to authorize the application

image

Check both the check box and click on Complete My Registration.

image

After completing registeration you need to upload the application to complie. There are three option you can submit your application

  1. Create new Repisotry in GIT for your application
  2. Pull application from GIT. In this case you are already having your application in GIT repository.
  3. Uplaod the application as zip file

image

I am pulling application from GIT repository here. After that you need to click on the Create button to create the build for the application. On next screen you can see that build for the entire platform is available for download.

image

Point worth saying here is that for build for ios you need to register your application and need a signing key for the same. In this way you can build your application for different platform. I hope you find this post useful. Thanks for reading

 

Kendo UI ListView Control and OData in Windows Phone Application

In this post we will see the way to work with Kendo UI Mobile ListView control and OData. Before you go ahead with this post, I recommend you to read Creating First Windows Phone Application using Kendo UI mobile and PhoneGap or Cordova

Using ListView

We can use a ListView control as following. You need to explicitly set data-role for Ul HTML element as listview

image

Resultant listview would be rendered as following in Windows Phone emulator

image

We can create Grouped ListView as following. We need to specify data-type as group.

image

Resultant listview would be rendered as following in Windows Phone emulator

image

If we want to make ListView items as link we can do that as following .

image

Resultant listview would be rendered as following in Windows Phone emulator

image

Working with OData

We are going to fetch movies details form OData feed of Netflix. OData feed if Netflix is available at

http://odata.netflix.com/Catalog/Titles

Very first we need to create datasource from OData feed. Datasource from OData feed can be created as following

image

While creating datasource , we are specifying URL of OData feed , type and pagesize need to be fetched from Netflix server. After datasource being created we need to set template and datasource of ListView as following.


$("#lst").kendoMobileListView(
{
template: "<strong>${data.Name}<br/><a href= ${data.Url}></a></strong><br/><img src=${data.BoxArt.MediumUrl} alt=a />",
dataSource: data
});
});

In above code snippet we are setting datasource and template. Template can have HTML elements. Any variable data can be fetched as $datasourcename.fieldname

Complete code is as following. We are having two ListViews on the view to display. First ListView is fetching data from OData feed and second ListView is having hard coded data.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<!-- <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.mobile.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {

var data = new kendo.data.DataSource({
type:"odata", // specifies data protocol
pageSize:10,  // limits result set
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
});
$("#lst").kendoMobileListView(
{
template: "<strong>${data.Name}<br/><a href= ${data.Url}></a></strong><br/><img src=${data.BoxArt.MediumUrl} alt=a />",
dataSource: data
});
});
</script>
</head>
<body>
<div id="firstview" data-role="view" data-transition="slide">
<div data-role="header">First View Header</div>
Hello World First View <br />
<ul id="lst" data-role="listview" > </ul>
<ul data-role="listview" data-type="group">
<li> Bloggers
<ul>
<li><a href="#debugmode">debugmode</a></li>
<li><a href="#sqlauthrity">SqlAuthority</a></li>
</ul>
</li>
<li> MVP
<ul>
<li><a href="https://twitter.com">Jacob</a></li>
<li><a href="https://twitter.com">Mahesh</a></li>
</ul>
</li>
</ul>
<div data-role="footer">First View Footer</div>
</div>
<script type="text/javascript">
var app = new new kendo.mobile.Application();
</script>
</body>
</html>

In Windows Phone emulator we should be getting output as following

image

In this way we can work with Kendo UI ListView control. I hope this post is useful. Thanks for reading.

Creating First Windows Phone Application using Kendo UI mobile and PhoneGap or Cordova

In this post we will discuss the way we can harness power of Kendo UI in creating Windows Phone application. Before you go ahead along with this blog post please read “Hello World “Windows Phone Application using PhoneGap or Cordova to setup environment for develop Windows Phone application using Cordova. Once you are done with steps of “Hello World “Windows Phone Application using PhoneGap or Cordova , You need to download Kendo UI mobile from here. After downloading you need to put JS, Styles files in the WWW folder.

image

After copying Kendo UI files open index.html and modify CSS reference and include below JS file. Make sure you have commented default CSS reference of Cordova.

image

Now we are all set to go ahead and modify the body of the index.html to work with Kendo UI . Let us make a view

image

After making view, let us put header and footer in the view.

image

Before running you need to put script before closing body tag

image

Complete code for Hello World will look like following,

Index.html


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<!-- <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.mobile.min.js"></script>
<script type="text/javascript">

document.addEventListener("deviceready",onDeviceReady,false);

// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
//document.getElementById("welcomeMsg").innerHTML +=
"This is my first cordova/PhoneGap Application"
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
</head>
<body>
<div data-role="view">
<div data-role="header">Header</div>
Hello World
<div data-role="footer">Footer</div>
</div>
<script type="text/javascript">
var app = new new kendo.mobile.Application();
</script>
</body>
</html>

When you run you should be getting following output on Windows Phone emulator.

image

Mobile applications are having one HTML pages and multiple views on the same. We can navigate between the views. Let us say there are two views are following,


<div id="firstview" data-role="view" data-transition="slide">
<div data-role="header">First View Header</div>
Hello World First View <br />
<a href="#secondview" data-role="button" style="background-color: green">Go to Second View</a>
<div data-role="footer">First View Footer</div>
</div>

Points need explanation in above DIV is as following,

Any div can be turned as VIEW id data-role is set to view. Data-transition is set to slide. There are many other values of data-slide as well.

image

A view can contain header, footer and body. Header can be set as below

image

And a View Footer can be set as below,

image

On body of the view we set a button. On click event of the button we will go to Second View. We can convert anchor tag to mobile button by setting data-role to button. We can set background color of the button also. In href , we need to provide mobile view name appended with hash to navigate. On click event of button we will be navigated to mobile view with id secondview.

image

Complete code for two views and navigation between views is as following,

Index.html


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<!-- <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.mobile.min.js"></script>
<script type="text/javascript">

document.addEventListener("deviceready",onDeviceReady,false);

// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
//document.getElementById("welcomeMsg").innerHTML +=
"This is my first cordova/PhoneGap Application"
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
</head>
<body>
<div id="firstview" data-role="view" data-transition="slide">
<div data-role="header">First View Header</div>
Hello World First View <br />
<a href="#secondview" data-role="button"
style="background-color: green">
Go to Second  View
</a>
<div data-role="footer">First View Footer</div>
</div>
<div id="secondview" data-role="view" data-transition="slide">
<div data-role="header">Second View Header</div>
Hello World Second View <br />
<a href="#firstview" data-role="button" style="background-color:red">Go to First View</a>
<div data-role="footer">Second View Footer</div>
</div>
<script type="text/javascript">
var app = new new kendo.mobile.Application();
</script>
</body>
</html>

On running the application in Windows Phone emulator you should have the following output

image

In this way you can get started with Kendo UI and Cordova to create apps targetting multiple platforms. We will get into details of different Kendo UI mobile widgets in further post . Thanks for reading !

“Hello World “Windows Phone Application using PhoneGap or Cordova

In this post, we will setup environment for development of Windows Phone Application using PhoneGap .

Start with Downloading PhoneGap from github . After downloading of file extract its content and open lib folder

image

In the Lib folder open Window folder

image

From Windows Folder copy zipped file CoroDovaStarter and copy to folder

C:\Users\username\Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#\Silverlight for Windows Phone

Note: If you do not have Silverlight for Windows Phone folder creates it inside Visual C# folder.

Now open visual studio and create new project, you should be having a new project template named CordovaStarter

image

If you want to create Windows Phone Application using PhoneGap and other web technologies then you need to select CorodovaStarter template. Let us start with selecting this template and creating a Hello World Application. After creation of project examine solution explorer, you will find a folder created named www

image

www folder contains HTML,CSS, and JavaScript file. Index.html file is the startup file gets rendered. Index.html is normal HTML file with a div tag, h1 tag , and references to javascript and css file. We need to write required HTML for our application in this file. Let us modify HTML here

image

All the scripts on the page get executed when device is ready. Readiness of device can be

image

All the scripts should be written in deviceready function.

image

If you run the application after making above changes, you should be getting below output.

image

Eventually index.html should be having codes as below,


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript">

document.addEventListener("deviceready",onDeviceReady,false);

// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
document.getElementById("welcomeMsg").innerHTML +=
"This is my first cordova/PhoneGap Application"
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
</head>
<body>
<h2>DebugMode</h2>
<div id="welcomeMsg">
</div>
</body>
</html>

As of now we have set the environment to develop Windows Phone application using PhoneGap or Cordova. In further post we will explore other capabilities and features of PhoneGap or Cordova.