Theory - 54:- concept of Phone Gap

 

PhoneGap is an open source framework for quickly building cross‐platform mobile apps using HTML5, JavaScript and CSS. Wrap your app with PhoneGap Deploy to mobile platforms! Build your app with web technology Wrap your app with PhoneGap Deploy to mobile platforms!

PhoneGap is an open source framework for quickly building cross‐platform mobile apps using HTML5, JavaScript and CSS.

PhoneGap Development is a free and open source framework, the exact and efficient way for cross‐platform mobile app development, and the developer accomplishes this by writing the user interface portion of their application with Web technologies such as HTML, CSS and JavaScript.

The advantage of PhoneGap Development is there won’t be any need to hire native app development experts or iPhone, Android Mobile app specialists either; a normal web app can first be written and then dropped into native app wrappers for various platforms.

PhoneGap is free and open source software (FOSS) which is used for developing cross‐platform apps for iPhone, iTouch, Blackberry, Android, iPad, Android, Symbian and Plam. It is the only mobile platform known for supporting 7 platforms. The coding languages used includes HTML and JavaScript and this cross‐platform mobile app development platform can access hardware features like GPS, accelerometer, camera, sound and many more. The various features PhoneGap Cross‐platform mobile app development are:

• HTML5 and JavaScript
• Accessing the native apps
• Multi‐platform deployment of the apps
• Benefiting from the PhoneGap built
• Implementing PhoneGap plug‐in

 

PhoneGap: a framework filling the gap

While waiting on real standardized specifications, we don’t have the choice: we need to create some bridges between JavaScript and the native code of the targeted platform to have access to its capabilities. The idea is then the following one: taking the native languages of each platform (C#, Objective‐C and Java) and creating a framework with these languages that will expose interfaces to the JavaScript developer.

This is exactly what PhoneGap is doing. Let’s take the Windows Phone case which is the main topic of this article. A

Windows Phone’s PhoneGap project is simply a Silver light application hosting the Web Browser control (and thus

IE9) as well as a Silver light Assembly written in C# which does the job to access to the accelerometer, GPS, contacts, camera and so on. In this way, as a JavaScript developer, you will use a DLL named WP7GapClassLib.dll (the PhoneGap core runtime) without even knowing it via the usage of the code embedded in the phonegap‐1.3.0.js file.

This DLL contains some C# code which does calls to the Silver light runtime available on the phone. As the runtime

has access to all the capabilities of the phone, the JavaScript will do also. The JavaScript library will then act as a

gateway between both worlds. Moreover, the good point of using this library is that your code will most of the time works as‐is on the PhoneGap versions of Android or iOS. PhoneGap offers then an interesting form of portability. Please note by the way that the PhoneGap support for Windows Phone is now totally complete since the recent 1.3.0 version:

At last, PhoneGap offers also another interesting service. It embeds your .js, .css, .html, .png resources inside its projects to package it as a classical application. In summary, you can use PhoneGap to package your HTML5 application for the various applications' stores. This is for instance the case of the SujiQ Windows Phone application built using this approach.

 

Let’s create our first PhoneGap project Prerequisites

Here are the very first steps you need to follow:

1. Download the Windows Phone SDK: Windows Phone SDK

2. Download the last version of Phone (1.3.0 today) on their site: http://phonegap.com/

3. Unzip the downloaded file

4.Copy the PhoneGapStarter.zip and PhoneGapCustom.zip files into \ Documents\       Visual Studio 2010\Templates\Project Templates File‐>New project

Once the previous steps are done, you will be able to create your first PhoneGap project. Start Visual Studio 2010, select the “Visual C#” templates and filter them via the “Gap” keyword. You should then see a new type of project named PhoneGapStarter

Name your project “MyFirstPhoneGapProject”. Once done, you will find the files I was talking about before in the Solution Explorer::

You just now have to insert your HTML5 application into the “www” directory.

Here are several tips I’d like to share with you about this default project template:

never ever touch thephonegap‐1.3.0.js file if you’d like to keep a portable code on other versions of PhoneGap

all files you will add inside the “www” directory must be set as “Content” in the properties window

instead of the WP7GapClassLib.dll binary file, you can add a reference to the WP7GapClassLib.csproj C# project available in the “Windows Phone\framework” directory of the downloaded PhoneGap archive. It will help you debugging or discovering the native code of the PhoneGap library if needed.

Ok, let’s now start by doing something normally impossible by default with IE9 Mango: accessing to the accelerometer’s values from JavaScript.

 

Getting the accelerometer’s values from JavaScript

• We’re going to see here how to get the values sent back by the accelerometer (of the emulator or the real device) in a very simple way.
• Open the “index.html” page and change its default body by this one:
• We will simply use 3 <div> tags to display the current X, Y & Z values of the accelerometer.
• Next step is to change the last default <script> block by this one:

Well the code is relatively self‐explicit I think. The very first thing to note is that you need to wait for the “device ready” event raised by PhoneGap to be sure to be in a stable state. You then need to subscribe to this event.

In our case, we will be call‐backed into the OnDeviceReady() function. This function is getting the references to the 3 <div> tags and then asks to be notified by any changes done inside the accelerometer every 500ms with the startWatch() function. The notifications will be sent to the onSuccess() function that will have access to the acceleration object containing the x, y & z values. You’ll find the complete documentation on the PhoneGap site: