Air: To Do Task Application V 2.0

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 this 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.

Air: PXRuler V 1.0

Have you ever get stuck to calculate the pixels of any of the on screen object? I did, In one of my project we have developed Geometry shapes in AS 3.0. Since It was a Geometric shapes, shape size was very critical, We couldn't effort to have any shape with wrong length in values. For e.g. the size of the equilateral triangle has to be of same size. As a developer, it was easy to calculate the size while coding / debugging. But when it goes to the tester for testing, Testers had a tough time to calculate the length of these figures.

And the search began to find the Pixel Ruler application. There are many free applications available.

I had a thought of doing this pixel ruler using AIR. As Air is very strong framework to create a desktop application. I decided to create using Flex.

It is very simple to develop the ruler in Flex/Flash. Just to draw the rectangle and draw the markers on it. That's it.

Tester had a tough time to calculate the pixels for the Slant line. That is why I decided to have feature of rotation of ruler. This is one of the features of the PXRuler V 1.0.

Application Screen Shot

Following are the features covered in PXRuler V 1.0

• Ruler scaling by dragging the Gripper button
  
• Ruler Rotation by dragging the Rotation button
  
• Ruler Color change by clicking the Color button
  
• Setting Ruler horizontally / vertically by double clicking on it.

Air: To Do Task Application

It has been busy month of June for me, I didn't got chance to blog much. Recently I got a time to develop Adobe AIR application. What a SDK for the Rich desktop Application, Air has very good features to play around with system functions, like docking on tray. I like inbuilt SQLLite very much. It will give you an opportunity to store user data very easily.

While working on busy schedule, It is obvious that you will forgot some import task. I have been to similar situation recently. That gave me a chance to develop some task reminder application. And then AIR come to my mind, Since i am working on flash / flex technologies from last 10 years. AIR is best option to develop this.

I have started working on the application with basic feature of writing Task, reminder for each task. It was looking very plain to me and then I decided to create custom skins for application. I am very happy that now it has very professional look. (this is what i feel) I hope even you will feel that too.

Following are the features of the To Do Task V 1.0

1. Adding task.
2. Color individual task.
3. Strikeout completed task.
4. Delete completed task.
5. Set reminder for each task.
6. Snooze your task reminder.
7. Docking on system tray.

I would like you all to use this application in your daily busy schedule and share your thought. Any suggestions are welcome. Share an issue to me if you come across any.

Install and explore To Do Task Version 1.0.

Application Screen Shot

Flex 3: Number Slider Puzzle Game Using Cairngorm Framework

It’s been long since I had written any post. After long rest, I had thought of creating Number Sliding Puzzle game using Cairngorm framework.

I believe every one of us had played this game in our childhood, some of us still playing these puzzle. It is really refreshing playing and solving these puzzles. I really love it. I hope you will also enjoy playing this puzzle.

You can get the source code by right clicking on the game page.

Flex 4: Adding States and changing properties,styles and events for states

Flash Builder 4 has improved a lot for developer and designer. It has ease out the syntax for working with states; now working with States is much easier and faster compare to Flex 3. In Flex 3, most of us used the design mode for working with states, I personally believed that writing code for states in Flex 3 was much more tedious and time consuming, and hence I had always used the Design mode.

Now with the new release for Flex, Many things has improved for developers and designer.

In this tutorial, I will walk you through the steps to use the code for working with states using Flash Builder 4. I will also explain how we can change the property and handle the events for two different states.

We will create the simple example which will have two states; each state will have common components, Label and Button. Both components will have different values depending upon the current state.

To start with first we will create the Flex project using Flash Builder 4. Once you are done open the application.mxml file.

In this tutorial, we will have Lable stating the current state string and one button to change the states. To add this add following code just after the Application tag.

<s:layout>
 <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>
</s:layout>
<s:Label text="We are at state 1" width="100%" textAlign="center"/>
<s:Button label="Go To State 2"/>

In above code snippet, we have set the VerticalLayout layout using <s:layout> tag. The syntax for setting Layout is also changed in Flex 4. Just after that, we have set the Label and Button spark component. Label has the value for current state information and button has label for moving to next state.

We are done with creating default state, Now As mention earlier we will create two different states in this application. To do this we need to add following code just after the Application starting tag.

<s:states>
 <s:State name="State1"/>
 <s:State name="State2"/>
</s:states> In the above code snippet, we have declared the two states using <s:states> tag. It is very simple, add as many child tag of <s:State> 

within States tag. Add the name property for each state. For this tutorial we have mentioned State1 and State2.

We are done with declaring two different states, but we need to change the properties and event handler for buttons for two different states. In Flex 4, we can change the properties of component for different states using (.) syntax followed by the state name attribute as shown here <B>style.stateName</B> The properties, styles and events are declared without (.) and state name, will be considered for default state. We have created Label and button earlier, in which we haven’t mention the (.) and state name, Hence that will be considered for the default state.

Now as we have initialize two different state, we have to change the values of Label and Button for different states. To change the values for State2, we will add the properties with (.) syntax followed by the state name. Update your <s:Label> and <s:Button> button tag as follow.

<s:Label text="We are at state 1" width="100%" textAlign="center" text.State2="We are at state 2"/>
<s:Button label="Go To State 2" label.State2="Go To State 1" click="currentState = 'State2'" click.State2="currentState = 'State1'"/>

You can see that we have change the text property of Label tag for State2 to <B>text.State2="We are at state 2"</B> Same way we have some event to navigate through the states. To do so, we have added an event for <s:Button>tag for both the states as <B>click="currentState = 'State2'" click.State2="currentState = 'State1'"</B>. If you see above the syntax for changing the state is <B>currentState = 'State Name'</B>.

Now we are done with our application. The final code for your application will look like this.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 
 <s:states>
  <s:State name="State1"/>
  <s:State name="State2"/>
 </s:states>
 
 <s:layout>
  <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>
 </s:layout>
 <s:Label text="We are at state 1" width="100%" textAlign="center" text.State2="We are at state 2"/>
 <s:Button label="Go To State 2" label.State2="Go To State 1" click="currentState = 'State2'" click.State2="currentState = 'State1'"/>
 
</s:Application>

You are done, Just run your application and find the output.

It is very simple and easy to work with states in Flex 4. I hope you like this tutorial.

I will write another tutorial for states, in which I will include how we can add / remove components for states.