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.