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.

  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx"
  title="Dial or SMS">
 
     horizontalAlign="center" 
   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));

   }

  ]]>
 

 
  
 
 
      width="100%" 
     restrict="0-9"/>
   width="100%" 
  gap="5" 
  paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
  verticalAlign="middle"  horizontalAlign="right">  
        label="Call" 
      click="callBtn_clickHandler(event)"/>
        label="SMS" 
      click="smsBtn_clickHandler(event)"/> 
  

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.

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.

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.

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.

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.controls.ZoomControl; 
import com.google.maps.overlays.*;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.InfoWindowOptions;

//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.
this.addChild(map);

//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
 map.addOverlay(marker); 
 //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,
   //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 http://maps.google.com
Step 2: Search for your desire place.
Step 3: Paste below code in your browser adress bar.

javascript:void(prompt('',gApplication.getMap().getCenter()));

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.

Create AIR App for Android Mobile

The demand for smart phones has been increased rapidly. IPhone is one of my favorite smart phones. I really love it. Unfortunately I can't afford right now.

While surfing for the smart phones on internet, I come across an open source OS developed by Google named Android. Recent version of Android (FROYO) has support for the AIR apps also. After doing some research and surfing, my preference for the IPhone has shifted to Android based phones. The support for the AIR has made me more curious to try out Android OS. Luckily Google has emulator for this. No need to spend lots of money in beginning.

After doing decent research, I had decided to give a try to develop AIR App for Android. I would like to share my experience through this tutorial, which will take you through the creation of Digital Watch AIR application for Android using Adobe Flash professional CS5 and testing it on the Emulator. For this tutorial I will use the Flash professional CS5

Adobe and Google are working together to make this happen for android OS. Hope we don't have memory issue for the Android based mobiles.

To execute this tutorial you will require following things.

1. Adobe Flash Professional CS5
   
2. AIRforAndroid_FlashCS5_ yyyymmdd.zxp
   
3. Android SDK – Android Emulator
   
4. Runtime_Emulator_Froyo_yyyymmdd.apk
   

To get the AIRforAndroid_FlashCS5_20100826.zxp, you need to register for the Adobe Prerelease site. After registration, download the AIRforAndroid_FlashCS5_20100826.zxp. To install this .zxp you will require Adobe Extension Manager.

After installing the Air for Android extension, when you open the Flash CS5 you will get the option for creating Flash file for android.

After opening the fla file, Save the fla file with DigitalWatch.fla name.
I have created simple Digital Watch Application using Date and Timer class. For this application, I didn't create any classes. I have coded within the FLA. I know it is not good, But just for this tutorial, I have used my earlier code.

Download FLA from here.

Once you are set with the fla running successfully, without any error. You are ready to deploy that for the Android. Before doing this you need to make some configuration within the AIR Android Settings. To do so, Open File > Air Android Settings… This will open up a window to configure the Application for the Android.

As shown in the above image, the default details for the Application appear as per the fla name. DigitalWatch.apk is the actual package file for the Android. This will be installed in the Android Device / Emulator. I have just made few changes, first for the App name: to Digital Watch and checked the Auto Orientation check boxes. If you notice, within the Include Files there are two files added DigitalWatch.swf and DigitalWatch-app.xml. These are the default files which require packaging the AIR app for android. You can add other files whichever are required for executing your application simply by clicking on the button above that.

In the second Deployment tab you will find some more form items, Similar to AIR package, we have to provide the certificate for the Android package also. If you have any certification already created, Navigate to that file and provide the password. I will create a new certification just to explain. Click on the create button to create a new Certification file for the Air package. This will open another window, just fill all required details and save the file at your desired location. See below image for the details.

After creating the certificate file, you need to add the password for that file in password field of the Development Tab. You need to do some more settings within this tab, Just click on the Release Radio button to create the release build. Also uncheck the two check boxes within the After Publishing area, this can be used when we have actual device connected with USB.

In the Third Icons tab, you have to provide icons of different sizes. Here for this tutorial I am not adding any icon, If you don't add any icons then it will take default android icons for your Air application.

Click on publish button to publish the apk file for your AIR Application, Which will be installed on your Android Device or Emulator. We have completed first step of creating AIR app for Android, Now we need to deploy on the Android Device or Emulator. I am using Emulator for this tutorial, since I am not having any Android Device with 2.2 OS.

Next step is to download the Android SDK and configure your emulator for the testing of your Air app. You can download that from the Adobe prerelease page. Download the android-sdk_r06-windows.zip and Runtime_Emulator_Froyo_20100802.apk for setting emulator. Unzip the android sdk to your system at your desired location. I always prefer to unzip that on c:\sdks\android\ location. Next you have to set the path environment variable for the android sdks like we do for the java. Following are the steps to set the path environment variable on windows.

1. Right-clicking on the My Computer icon and choose Properties from the menu.
   
2. Under the Advanced tab, click the Environment Variables button.
   
3. Select the Path entry in the System variables section of the Environment Variables dialog and click Edit.
   
4. add the following text at the end of the current value:
   ';C:\SDKs\AIR\bin;C:\SDKs\Android\tools'
   
5. Click OK.
   

Now you have set the environment variable for the Android SDK. You are all set to deploy your application on the android emulator. Next step is to open the emulator and creating the AVD (Android Virtual Device).
Now navigate to the tools folder in the android SDK folder, for my case C:\sdks\android\tools. Once you are on this folder click on the android.bat file to start the AVD manager (Refer Below Image). Once the AVD manager open, you need to install all require packages. To install this, click on the Install Package and click on update all, this will update all required packages for the emulator. For Air application, we will require only 2.2 Froyo platforms.

After updating all packages, Next step is to create the AVD for your emulator. To do so, navigate to the virtual device tab and click on the new button. This will open up a window to set up the virtual device (Refer Below Image). Fill all required details as mentioned in the below image. Make sure you choose the Target as Android 2.2 – API Level 8. You can also set the hardware's as per your requirement, for this tutorial we don't required any specific hardware's, Hence we are keeping it as default. After filling all details click on CreateAVD button to create the new virtual device.

Now you are ready to upload your Air App on your virtual device and test. Select the myAVD from the list and click on the Start button to start the virtual device. This will open up a Launch Option window, Simple click launch to open the virtual device. This will open up the virtual device.

Now you are all set to install your Air application. To install your application on emulator, you need to use command line functions of the android sdk. Open a command window and check whether your android sdk is set properly or not. To test this just type android on your command window, this will open up the AVD manager. If it is set properly, it will open the AVD manager if not, Set the android path environment variable as mention above. Once it is set and running properly, Check whether the device you have created are available to sdk or not, to test this type 'adb devices' this will give you list of devices running.

Now your devices are ready and running, next you have to install Air runtime in the emulator. To install this simply navigate to your folder in command window, where you have store your Air runtime apk file (Runtime_Emulator_.apk) As we are running our App on emulator we have to install Emulator apk. Execute adb -e install -r Runtime_Emulator_Froyo_yyyymmdd.apk command. This will give you success message. That means the Air runtime is installed successfully on your virtual device.

Remember in the above command –e stands for the emulator, when you are installing apk on emulator you have to use –e and when you are installing your apk on actual device you have to ue –d. Also the apk for the device is different than the emulator apk. To install in the apk on your device use Runtime_Device_Froyo_20100802.apk file. The command for installing apk on your device is adb -d install -r Runtime_Device_Froyo_yyyymmdd.apk

Next you can install your application using command line function. Simply navigate to your folder in command window, where you have store your apk file for AIR application. Execute following command adb -e install -r DigitalWatch.apk this will give you a success status as shown in below image. You have installed your Air app in the emulator.

Go to AVD window and check in the menu screen, you will find the digitalwatch icon (Refer below image).

Simple click on the icon, it will run your Digital Watch Air app on the emulator. It runs little slow on the emulator, but I am hoping that on actual device it will run faster.

I hope, this tutorial will help you to try out Air on Android. Your suggestion and queries are welcome; Keep commenting to encourage me to write more blogs.

Download the source and apk from here.