Wednesday, January 19, 2011

Develop Android App using PhoneGap on Eclips

Developing cross platform application is on pick in today's world. PhoneGap plays major role in providing cross device development using html and javascript. Using PhoneGap you can develop applications for Android, iPhone, Blackberry and many more mobile OS. Good part is it packages the application in the native formate of the OS.

Today I will walk you through the tutorial which will demonstrate the steps to develop the Android Hello World application.

To Run this tutorial you need Android SDK and Android Emulator. Make sure you have created at least one Android virtual device (AVD). You will also need PhoneGap API. Download the latest copy of PhoneGap. For this tutorial we are only look in the Android development.

Now we have all the required material available to develop First application for Android using PhoneGap First you need to set the Android SDK in Eclips, To do so click on Preferences > Android. Set the Android sdk as shown below.

Next we will create the new project. Click on File > New > Android Project

Now give all required details as shown in the below image to create the project and click finish.

We will require following two files, which was downloaded earlier
1. Android/phonegap-0.9.3.jar
2. Android/phonegap-0.9.3.js

Create libs folder in the project and Place phonegap-0.9.3.jar in it. Also create the www folder within the assets folder and place the phonegap-0.9.3.js in it. (Refer below image)

Next we have to add phonegap-0.9.3.jar in library to access it in the application.
Righ Click on project > properties > java Build Path. In the window click on Add Jars… button to add the phonegap-0.9.3.jar file. Navigate to the location of the jar file and click Ok. This will add your jar file in the library.

Now, create index.html in your www folder and add following code

<title>Hello World</title>
<h2>Hello World</h2>
<script type="text/javascript" charset="utf-8" src="phonegap-0.9.3.js"></script>

As we are using phoneGap, we will require some modification in main file. Open the file and do following changes..
1. Change the class's extend from Activity to DroidGap
2. Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");
3. Add import com.phonegap.*;
Now your class should look like as follow.

package com.shailesh;

import android.os.Bundle;
import com.phonegap.*;

public class App extends DroidGap {
/** Called when the activity is first created. */
public void onCreate(Bundle savedInstanceState) {

Finally, lets add some permissions to the AndroidManifest.xml file to allow phonegap to run properly.
Open up your manifest and paste the following information after the versionName but before the application tag:

Now your xml should look like this.

Now you can run you project as an Android Application. Right click the project and go to Run As and click Android Application. Eclipse might ask you to select an appropriate AVD. If there isn't one, then you'll need to create it before you can continue.

There you go, you have done your first phoneGap application. It will load on the emulator.


Sunday, December 5, 2010

Calling and SMS through AIR application on Android Device

Adobe AIR 2.5 has support for two additional URI. Earlier we had mailto URI to navigate to system default email client. Similarly if you want to use system (Mobile) calling client you can do that using tel: URI or if you want to use system(Mobile) SMS client you can do that using sms: URI.

In this article, I will walk you through how we can access the mobile default calling / SMS client. To understand this article one should have knowledge of AS3 and deploying AIR application on mobile. If you are new to this technology (Air on Android). You can refer to my previous post to understand the deployment procedures.

Adobe has launched preview released of Flash Builder Burrito with Hero Flex SDK. We will use Hero Flex SDK to create this simple application.

See code snipped for the application below.

title="Dial or SMS">

paddingTop="10" paddingLeft="10" paddingBottom="10" paddingRight="10"/>

protected function callBtn_clickHandler(event:MouseEvent):void
navigateToURL(new URLRequest("tel:"+telNumber.text));

protected function smsBtn_clickHandler(event:MouseEvent):void
navigateToURL(new URLRequest("sms:"+telNumber.text));



paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
verticalAlign="middle" horizontalAlign="right">

If you notice in the script tag, There is a navigateToURL method executed on Clicking of Call / SMS button.

Following code will trigger the default system calling client.

navigateToURL(new URLRequest("tel:"+telNumber.text));
This method will open up the dial panel of the mobile phone. See below image.

Following code will trigger the default system calling client.

navigateToURL(new URLRequest("sms:"+telNumber.text));
This method will open up the SMS panel of the mobile phone. See below image.

Note: Body and subject attributes is not supported in sms: URI like we do for the mailto: URI due to the limited support from the android API.

I hope this will help you.


Thursday, November 25, 2010

Meter Down Application for Android: Developed using Flex Hero

Finally I got a chance to explore Adobe Flash Builder Burrito (Flex Hero SDK). It has support for developing Cross-platform Air application. Currently it is supporting Android only. Hope we will see all other Mobile, Tablets also covered in final version of Hero SDK.

To do experiment, I had decided to develop an application. I want to develop an application which can be useful to the user. After thinking for enough hours, I have decided to develop an application which will help user to get the Mumbai Auto and Taxi Fare for the meter reading. I heard from my relatives, freinds that they had been cheated by Auto and Taxi driver for fares.

Here it is Meter Down application for Android Mobile OS. In this current version, I have covered only Mumbai city. May be I will add more cities in future. I will really appreciate if you can share the meter card for Auto or Taxi from your city.

The current application is having feature of getting Regular as well as Night Fare for Auto and Taxi. The night fare will be calculated based on the mobile time. If it is between 12.00 AM to 5.00 AM, it will show night fare.

You can download APK of this application from here.

You can download Air Runtime APK (Runtime_Device_Froyo_20100826.apk) from here.

Note: Change the file extention of downloaded file to .apk before installing on your device.

I hope this will help you while you travel in MUMBAI by Auto / Taxi.


Monday, November 1, 2010

Adobe Air 2.5 now Available

Good news for the Air developers. Adobe has announced Adobe Air 2.5 availability at the Adobe MAX 2010. It has been announced that Air 2.5 will have multiple platform supports like Desktop, Mobiles, Tablets and TV.

Adobe has also mention that Blackberry Tablet will also has Flash Player 10.1 and will also support Air applications. Some of the major manufacturers of electronics devices like HTC, Samsung, RIM, Motorola, Acer will have pre-installed Air runtime in their devices in early 2011.

By mean of this, Developer can use their skills to develop multiple platform application, Which can be run on Desktops, Smart Phones, Tablets and also on TV. This sounds really cool to me. It would be fun to see your application running on multiple platform without doing much of changes.

I am so excited about this, I have already started developing applications for the android.


Thursday, October 28, 2010

Google Maps in Flash

Google has very good map feature, Using that you can search for the places, you can get the directions, you can find interested places in the area, you can share your photos on the maps etc. All these you must have seen in the browser page. This might be developed using html and JavaScript.

Now it is possible to have all above features in the flash using Google Maps API for Flash. Thanks to Google for providing free API to deal with maps. Believe me; it is very fast and so accurate. I really love it. Apart from the performance feature, using Google Maps API for Flash is so easy. You will learn that in this tutorial.

I will not explain any flash related features in this tutorial, to execute this tutorial one need to have Flash Action Script 3.0 (AS3.0) knowledge.

This tutorial is basically divided into two parts, first part will explain about setting up the Google Maps API in Flash CS3. (I am not using Flash CS5 for this tutorial, as my trial period is expired). Second part will explain about the integrating the Google Map API.
In second part we will cover following features of the Google Maps API.

Set the Map to particular location.
Zoom feature.
Setting Markers.

To use the Google Maps in the flash you will require API. That you can download from Google web site. In this page you will find the SDK link on the right side.
Download the SDK and extract it. You will find two folders, docs and libs. Look inside the libs folder you will find the SWC file for the Flash(map_1_20.swc) as well as for the Flex(map_flex_1_20.swc).

For this tutorial we are using Flash, Hence we will use the map_1_20.swc file. You need to copy map_1_20.swc file to specific folder at following location to get it listed in the component window in Flash IDE.
C:\Program Files\Adobe\Adobe Flash CS3\{language}\Configuration\Components\Google\
Note: I have created Google Folder so that all Google API will can be placed at same location.
Now if you run your Flash CS3. And check the components windows (Windows > Components). You will find the GoogleMpasLibrary component in Google tag(Refer below image). You have set the Google API in your Flash IDE.

Next you will require to have Google Maps API Key. To sign up for the key, click here and follow the instruction in the website. Once you have the generated key, Store it in the Locker (Just Kidding). Make sure you copy that so that you can use it for different applications.

You are all set to develop a flash application using Google Map API.

Open Flash CS3 IDE to start developing your Google Map Application. Now first thing, Open new Flash AS3 document. As a good practice, I always save that to my desire location. So first save the document and Name it as you like. I am naming it with GoogleMapExample.fla. Now next step is to utilize the Google Map API. To use the Google Map API open Components window and drop GoogleMapsLibrary to your stage. You will find only blue bounding box. Don’t worry, API will not show that bounding box it will handle it properly.

Now as we have set the API for our application, It’s time to write some code. I have written following code to complete this application. Don’t worry I have added comments for each statement in the code.


//Map instance
var map:Map = new Map();
//Setting Google Map API key
map.key = "ENTER your GOOGLE MAP KEY";
//Setting Sensor value, Set this true when you are using for GPS.
map.sensor = "false";
//Setting the size of the Map
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
//Adding Listener on Map Raeady.
map.addEventListener(MapEvent.MAP_READY, onMapReady);
//Adding map to the stage.

//Marker instance
var marker:Marker;

//MapEvent.MAP_READY Handler, Fires when Map is ready
function onMapReady(event:Event):void {
//Seting the center of the Map using Latitude and longitude Object, Second parameter is for zoom level
map.setCenter(new LatLng(19.17127500109175, 72.87111282348633), 10);
//Adding Zoom Control to the map
map.addControl(new ZoomControl());

//Setting marker to the center of the Map. using Latitude and longitude Object, Second options is for the Marker option, Here we are getting MarkerOption object by calling custom function.
marker = new Marker(new LatLng(19.17127500109175, 72.87111282348633), createMarkerOption('A'));
//Setting Marker on the Map
//Setting Click hander on the marker to show the information.
marker.addEventListener(MapMouseEvent.CLICK, showInfoWindow)

//MapMouseEvent.CLICK Handler, Fires when user click on the Marker
function showInfoWindow(e:MapMouseEvent):void
//Opening the Infomation Window,
marker.openInfoWindow(new InfoWindowOptions({contentHTML:"Mumbai , Maharashtra, INDIA "}));

//Function to create the Marker Option. Label Paramer.
function createMarkerOption(label:String):MarkerOptions
var options:MarkerOptions = new MarkerOptions({
//Stroke style
strokeStyle: {
color: 0x987654
//Fill color
fillStyle: {
color: 0x009933,
alpha: 0.8

label: label,
//Label Text Format
labelFormat: {
bold: true
//Marker Radius
radius: 11,
//Marker Shadow boolean
hasShadow: true,
//Marker Clickable booleam
clickable: true,
//Marker Draggable Boolean
draggable: false

return options;

In this tutorial I have used Mumbai as a location, You can get your desire location Latitude and longitude by doing following steps.

Step 1: Go to
Step 2: Search for your desire place.
Step 3: Paste below code in your browser adress bar.

Step 4: This will prompt you with the Latitude and longitude values.

The output will look like this. Click on the image to view the sample application.