Flex / Air / Flash Creation

Develop Android App using PhoneGap on Eclips

2011-01-19T05:28:00.000-08:00

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

<!DOCTYPE HTML>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h2>Hello World</h2>
<script type="text/javascript" charset="utf-8" src="phonegap-0.9.3.js"></script>
</body>
</html>

As we are using phoneGap, we will require some modification in main App.java 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.app.Activity;
import android.os.Bundle;
import com.phonegap.*;


public class App extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

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.

Calling and SMS through AIR application on Android Device

2010-12-05T23:03:00.000-08:00

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

2010-11-25T02:07:00.000-08:00

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

2010-11-01T04:26:00.000-07:00

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

2010-10-28T05:43:00.001-07:00

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

2010-08-31T01:26:00.001-07:00

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.

Adobe Flash Professional CS5
AIRforAndroid_FlashCS5_ yyyymmdd.zxp
Android SDK – Android Emulator
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.

Right-clicking on the My Computer icon and choose Properties from the menu.
Under the Advanced tab, click the Environment Variables button.
Select the Path entry in the System variables section of the Environment Variables dialog and click Edit.
add the following text at the end of the current value:
';C:\SDKs\AIR\bin;C:\SDKs\Android\tools'
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.

Adobe Air Launchpad

2010-08-27T05:08:00.001-07:00

Its good news for the Air Application developers. Days are gone now for configuring Air Specific features manually.

Adobe has launched Adobe Air Launchpad recently. It is beta version.
It is really nice Air Application. I was so excited to explore this tool. I had tried this and it worked well for me. Awesome tool, it will save your time.

Using Air Launchpad you can configure icons, window size, chrome type etc. there are many more. This app will generate the Air project for you with proper files. This will really help a developer to reduce the time for writing a code for the Air configuration in their application. I really love this app.

You can download the Adobe Air Launchpad from here.

Air: To Do Task Application V 2.0

2010-07-29T05:18:00.001-07:00

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.

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.

Adobe Flash Professional CS5
AIRforAndroid_FlashCS5_ yyyymmdd.zxp
Android SDK – Android Emulator
Runtime_Emulator_Froyo_yyyymmdd.apk

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

Download FLA from here.

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.

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

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

2010-07-22T02:57:00.001-07:00

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

2010-07-02T23:08:00.000-07:00

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

2010-06-03T22:03:00.000-07:00

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

2010-05-01T13:24:00.000-07:00

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.

Flex 3: RTE Bullet and Align button issue

2010-04-30T11:47:00.000-07:00

While working with Rich Text Editor component of Flex 3, I cam across with strange issue.

Try out following flow. On fresh launch change Font / Font Size / Font Color / Bold / Italic / Underline and then if you click on either alignment buttons or Bullet button. Ideally all formatting setting should retain and whatever you type should have these formatting. But it is failing. The formatting will revert back to the default values.

I tried to find out the actual issue, In the RichTextEditor.mxml, within the setTextStyles function. New text format instance is been created in Bullet and align button click condition. This new TextFormat object overwrites the previously set formatting.


else if (type == "align" || type == "bullet")
  {
   if (beginIndex == endIndex)
   {
    tf = new TextFormat();
   }

To overcome this issue I have written a fix in the mxml where RTE instance is been created. To fix this issue, I just had assigned the formatted values to the newly created TextFormat object, Doing this will retain the previously set formatting.
Following is the code snippet for the fix.


public function checkForFormating():void
   {
    var textField:IUITextField = textArea.getTextField();
    var beginIndex:int = textField.selectionBeginIndex;
    var endIndex:int = textField.selectionEndIndex;
    if (beginIndex == endIndex)
    {
     var tf:TextFormat;
     tf = textField.defaultTextFormat;

     tf['font'] = fontFamilyCombo.text;

     var fontSize:uint = uint(fontSizeCombo.text);
     if (fontSize > 0)
      tf['size'] = fontSize;

     tf['color'] = uint(colorPicker.selectedColor);

     tf['bold'] = boldButton.selected;
     tf['italic'] = italicButton.selected;
     tf['underline'] = undoButton.selected;

     if (alignButtons.selectedIndex == 0)
      tf.align = "left"
     else if (alignButtons.selectedIndex == 1)
      tf.align = "center"
     else if (alignButtons.selectedIndex == 2)
      tf.align = "right"
     else if (alignButtons.selectedIndex == 3)
      tf.align = "justify"

     tf['bullet'] = bulletButton.selected;

     if (lineSpaceButton.selectedIndex == 0)
      tf.leading = "2"
     else if (lineSpaceButton.selectedIndex == 1)
      tf.leading = "4"
     else if (lineSpaceButton.selectedIndex == 2)
      tf.leading = "8"

     textField.defaultTextFormat = tf;
    }
   }

In this function, basically i have reassign all the formatting based on the default formatting property. All you have to do is call this function on bullet / align button click. Add a Mouse Click listener and call this function on handler.

This will resolve the issue. I have tested this and it works fine, Let me know if you find any issue in this.

Flex 3: Cross Domain XML Loading

2010-04-28T10:59:00.001-07:00

Flash Player has security feature, This security is basically domain based. It will allow a swf from specific domain to load assets, data or it will allow communication between two swf files from that domain. When a particular swf file is loaded in flash player, Security sandbox is created for that particular domain. This mean swf file in that domain will have access to all assets, data of that sandbox.

If a swf file from any particular domain wants a access to data or assets of any other domain, we need to have cross-domain policy file available on remote server. This crossdomain.xml needs to be structure in predefined format, Which will be read by the swf player and depending upon the tags, it will allow access to that server.

Following is the sample code for crossdomain.xml.


<?xml version="1.0"?>
<cross-domain-policy>
 <!-- below tag will allow access from any domain. -->
 <allow-access-from domain="*"/>
 <!-- below tag will allow access to www.shaileshmak.000fees.net domain. -->
 <allow-access-from domain="www.shaileshmak.000fees.net"/>
 <!-- below tag will allow access to any sub domain of 000fees.net domain. -->
 <allow-access-from domain="*.000fees.net"/> 
 <!-- below tag will allow access to 105.216.0.40 ip. -->
 <allow-access-from domain="105.216.0.40"/>
</cross-domain-policy>

If a swf tries to access any data from other domain, swf player by default search for the crossdomain.xml file at root directory of the remote server. If the crossdomain.xml is placed other than the root directory, We can access that file using Security.loadPolicyFile(); function.

e.g.

Security.loadPolicyFile(http://www.shaileshmak.000fees.net/MyWork/crossdomain.xml);

Make sure you are loading this crossdomain.xml file, before loading the assets from the remote server.

I have created a Flex example for loading xml into the datagrid, In this example, the data xml file is located at remote server and the swf file from different server is accessing this xml and loading it into the datagrid.

Following is the sample code of the application.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical"
    creationComplete="init()">
    
 <mx:HTTPService id="service"
     showBusyCursor="true" 
     url="http://shailesh.ihemant.com/employee.xml" 
     resultFormat="object"
     result="serviceResultHandler(event)"
     fault="serviceFaultHandler(event)"/>
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   
   [Bindable]   
   private var employeeCollection:ArrayCollection;
   private function init():void
   {
    employeeCollection = new ArrayCollection();
   }   
      
   private function serviceResultHandler(event:ResultEvent):void
   {
    employeeCollection = event.result.Employee_Info.Employee as ArrayCollection;   
   }
   
   private function serviceFaultHandler(event:FaultEvent):void
   {
    Alert.show(event.toString());   
   }
   
   private function getEmployeeHandler():void
   {
    service.send();
   }
  ]]>
 </mx:Script>
 
 <mx:Button id="getEmployee" 
      label="Get Employee" 
      click="getEmployeeHandler();"/>
 
 <mx:DataGrid id="grid" 
           width="80%" 
           dataProvider="{employeeCollection}">
  <mx:columns>
   <mx:DataGridColumn dataField="Name" headerText="Name"/>
   <mx:DataGridColumn dataField="Designation" headerText="Designation"/>
   <mx:DataGridColumn dataField="Email" headerText="Email"/>
  </mx:columns>
 </mx:DataGrid>
</mx:Application>

Look at the demo application.

Flex 4: New components and containers

2010-04-25T14:22:00.000-07:00

With the introduction to new Flash Builder 4 (Flex 4 - code base Gumbao), There are changes in the component architecture. Flex 4 SDK introduce number of new components and container with new architecture. This will make developers life much easier, as the skinning, effects and other customization now will be much straight forward. In Flex 4 new component they have introduced Spark Components.

Following table list out the Flex 3 component and their Flex 4 Spark counter part.

Flex 3 MX Component	Flex 4 spark Component
mx.controls.Button	spark.components.Button
mx.controls.ButtonBar	spark.components.ButtonBar
mx.controls.CheckBox	spark.components.CheckBox
mx.controls.ComboBox	spark.components.DropDownList (w/o editability)
mx.controls.HorizontalList	spark.components.List (with a HorizontalLayout)
mx.controls.HRule	spark.primitives.Line
mx.controls.HScrollBar	spark.components.HScrollBar
mx.controls.HSlider	spark.components.HSlider
mx.controls.Image	spark.primitives.BitmapImage (w/o support for external images)
mx.controls.LinkBar	spark.components.ButtonBar (with a custom skin)
mx.controls.LinkButton	spark.components.Button (with a custom skin)
mx.controls.List	spark.components.List
mx.controls.NumericStepper	spark.components.NumericStepper
mx.controls.RadioButton	spark.components.RadioButton
mx.controls.RadioButtonGroup	spark.components.RadioButtonGroup
mx.controls.TextArea	spark.components.TextArea
mx.controls.TabBar	spark.components.TabBar
mx.controls.TextInput	spark.components.TextInput
mx.controls.TileList	spark.components.List (with a TileLayout)
mx.controls.ToggleButtonBar	spark.components.ButtonBar
mx.controls.VideoDisplay	spark.components.VideoPlayer
mx.controls.VRule	spark.primitives.Line
mx.controls.VScrollBar	spark.components.VScrollBar
mx.controls.VSlider	spark.components.VSlider
mx.core.Application	spark.components.Application
mx.core.Window	spark.components.Window
mx.core.WindowedApplication	spark.components.WindowedApplication
mx.containers.ApplicationControlBar	spark.components.Application (with the controlBarContent)
mx.containers.Canvas	spark.components.Group
mx.containers.ControlBar	spark.components.Panel (with the controlBarContent property)
mx.containers.HBox	spark.components.HGroup
mx.containers.Panel	spark.components.Panel
mx.containers.Tile	spark.components.Group (with a TileLayout)
mx.containers.VBox	spark.components.VGroup

These components/containers are developed based on the UIComponent. There are few components/containers who is not having Spark counterpart. Following table demonstrate the list of components/container without Spark counterpart.

Flex 3 classes with no direct Flex 4 counterpart

mx.controls.Alert
mx.controls.ColorPicker
mx.controls.DataGrid
mx.controls.DateChooser
mx.controls.DateField
mx.controls.Menu
mx.controls.MenuBar
mx.controls.PopUpButton
mx.controls.PopUpMenuButton
mx.controls.ProgressBar
mx.controls.RichTextEditor
mx.controls.Tree
mx.containers.Accordion
mx.containers.DividedBox
mx.containers.Form
mx.containers.Grid
mx.containers.TabNavigator
mx.containers.TitleWindow
mx.containers.ViewStack

I am very excited about new architecture in Flex 4. I know you all too.

I will come up with some tutorial very soon in Flex 4.

Flex 3: Dispatch custom event

2010-04-24T02:00:00.000-07:00

In this tutorial, I will walk through the Custom Even handling in Flex 3. Like Flex 3 inbuilt events, you can dispatch your custom event from the custom component. To do this we need to create an Custom Event class inherited from Flex based Event class. After this you can dispatch this custom event from your component or class using dispatch event function. Even you can add this event inline to your custom component tag in mxml file. To get the inline event property we need to set Metadata for the custom Event in component mxml.

In this tutorial, we will create an application which will have login form. And on login we will dispatch the custom LOGIN Event. To complete this application it will need to create following files.

LoginEvent.as

Main.mxml

To start with, we will create an flex application in Flex Builder. While creating the project give your main mxml application file name as Main.mxml

Next, we will create the Login component, which will have the simple login form. This form will have two elements as, User Id: and Password:. To create this mxml component first we will set the folder structure to allocate the respective files. We will keep Component within src.view.components folder, and custom events within src.event folder.

First create these folders in src folder as show in the below image.

Now we are ready with packages, Next we will create the MXML Component named Login.mxml within the src.view.components folder. This Login.mxml will be based on Panel with no default width and height.

Replace following code to complete the Login Form.

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" title="Login" width="302" height="152">
 <mx:Form width="100%">
         <mx:FormItem label="User ID">
            <mx:TextInput id="userid" />
         </mx:FormItem>
         <mx:FormItem label="Password">
            <mx:TextInput id="password" displayAsPassword="true" />
         </mx:FormItem>
         <mx:FormItem>
            <mx:Button id="btnLogin" label="Login"  click="loginHandler()"/>
         </mx:FormItem>
      </mx:Form>
</mx:Panel>

In above code snippet, we have created the simple login Form containing two input field, User Id and Password respectively and one Login button.

We need to dispatch custom Login Event on Login Button click, For this first we have to create LoginEvent class.
Create LoginEvent class within src.events package. Make sure you extend this class to flex inbuilt Event class. There are few things we need to follow to create custom event.

You are require to override the Event.clone() method. This method will return the clone reference of your custom event i.e. LoginEvent.
You can create your custom properties that are required by the custom event. In our example LoginEvent will need to have userId and passWord.

In LoginEvent class add following code snippet to complete the CustomEvent class.

package events
{
 import flash.events.Event;

 public class LoginEvent extends Event
 {
  public static const LOGIN:String = 'login';
  
  public var userId:String = '';
  public var password:String = '';
  
  public function LoginEvent(type:String, userId:String, password:String, bubbles:Boolean=false, cancelable:Boolean=false)
  {
   super(type, bubbles, cancelable);
   
   this.userId = userId;
   this.password = password;
  }
  
  override public function clone():Event {
            return new LoginEvent(type, userId, password);
        }  
 }
}

In the above code snippet, We have created the static const for event type, this we will use when we will dispatch or add event. Also we have created the two public properties userId and password, which we will send along with event when we dispatch this event.

Now we are ready with LoginEvent class, next we have to dispatch this event when user clicks on the Login button from the Login.mxml. Open Login.mxml file and add click handler function for Login button. In this function we will dispatch the LoginEvent along with userId and password property. Add this function in your Script tag within Login.mxml as shown below.

 <mx:Script>
  <![CDATA[
   import events.LoginEvent;
   private function loginHandler():void
   {
    this.dispatchEvent(new LoginEvent(LoginEvent.LOGIN),userid.text, password.text)
   }
  ]]>
 </mx:Script>

If you noticed in above code, we have dispatch the LoginEvent on loginHandler function. We are ready with custom login component which will dispatch the Login event. But to add this custom login Event inline to the Login tag we need to se the metadata in Login.mxml. To do this add following code just above the Script tag.

<mx:Metadata>
 [Event(name="login", type="events.LoginEvent")]
</mx:Metadata>

Remember you the name what we have mention in the name property above will be used in the Login tag as inline event property.

Now your complete Login.mxml will look like as below.

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" title="Login" width="302" height="152">
 <mx:Metadata>
  [Event(name="login", type="events.LoginEvent")]
 </mx:Metadata>
 <mx:Script>
  <![CDATA[
   import events.LoginEvent;
   private function loginHandler():void
   {
    this.dispatchEvent(new LoginEvent(LoginEvent.LOGIN),userid.text, password.text)
   }
  ]]>
 </mx:Script>
 <mx:Form width="100%">
         <mx:FormItem label="User ID">
            <mx:TextInput id="userid" />
         </mx:FormItem>
         <mx:FormItem label="Password">
            <mx:TextInput id="password" displayAsPassword="true" />
         </mx:FormItem>
         <mx:FormItem>
            <mx:Button id="btnLogin" label="Login"  click="loginHandler()"/>
         </mx:FormItem>
      </mx:Form>
</mx:Panel>

Now we will add this custom component in the Main.mxml file and we will check whether we are getting the LOGIN event from Login.mxml component. To do so add following code in your Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" 
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:components="view.components.*">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import events.LoginEvent;
   
   private function loginHandler(event:LoginEvent):void
   {
    Alert.show('Loign Event Handled Successfully for user id '+event.userId);
   }
  ]]>
 </mx:Script>
 <components:Login login="loginHandler(event)"/>
</mx:Application>

If you notice in above code, we have added custom Loign component. And if you see the namespace for Login tag is components. We have added metadata for login event in Login.mxml and that we have used inline to the <components:Login> tag.

This is how we can use the Custom component in Flex.

I hope this will help.

View Demo here.

Flex 3: Calling ActionScript Function from javaScript

2010-04-19T12:35:00.000-07:00

In my earlier tutorial, we have seen how we can call JavaScript function from Flex application.

Today I will explain reverse functionality of calling Action Script function from JavaScript. Using ExternalInterface class of Flex library we can invoke Action Script function from JavaScript. To do this first we have to map the function in Action Script using addCallback method. This is static method of class ExternalInterface.

For this tutorial we will create an input Field and button in the html. To do this, first create a Flex project in Flex builder. Open your index.template.html form {project}/html-template/ folder. In this html page add following code just before the </body> tag.


<div>First Name: <input type="text" id="firstName"></div>
<div>Last Name: <input type="text" id="lastName"></div>
<div>Country: <input type="text" id="country"></div>
<div><input type="button" value="Send to Flex" onclick="sendDataToFlex()"></div>

We have created three input fields for first name, last name and country, We have also added button. Clicking on this button, it will call the Action Script function.

To make the html page proper. replace all ${width} by 600 and ${height} with 400. So that we can have flex swf size fix to 600x400.

If you have notice, in above code snippet we are calling sendDataToFlex function on Send to Flex button click. For that we have to write a function. To do this add following code before <noscript>


<script language="JavaScript" type="text/JavaScript">

function sendDataToFlex()
{
}

</script>

Now in the blank function body, we will add code for calling Flex function. To do this first we need to have reference of flash object in html page. We can retrieve the flex swf object using following function. Add following code above function sendDataToFlex()


function getFlexApp()
{
if(navigator.appName.indexOf("microsoft")!=-1)
{
return window['${application}'];
}
else
{
returndocument['${application}'];
}
}

This function will return the flex swf object reference. Now using this function we will call the function in Flex application.

Now we need to write a function which will call the flex method. Add following code after getFlexApp function.


function sendDataToFlex()
{
getFlexApp().addPerson(document.getElementById('firstName').value, document.getElementById('lastName').value, document.getElementById('country').value);
}

In the above method we have taken Flex application reference using getFlexApp and we are calling addPerson method of flex application. For this method we require three parameters, Here we will pass the values of each text field we have created.

Now we are done with creating Html file. Once you build your project, This template will create the html page in your output folder of project, by default it is bin-debug with all modification we made in the template.

Next we have to move to MXML. Open your application mxml file. In this file we will create a data grid component in which all data comes from java script will populate. Following code will create the data grid in your application.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="init();">

<mx:DataGrid width="500"
height="250"
dataProvider="{persons}">
<mx:columns>
<mx:DataGridColumn headerText="First Name"
dataField="firstName"/>
<mx:DataGridColumn headerText="Last Name"
dataField="lastName"/>
<mx:DataGridColumn headerText="Country"
dataField="country"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

We are ready with display component, Next we have to map JavaScript function using ExternalInterface.addCallback method. In this method we have to set two parameters, First will be the name what we will use in the JavaScript and next will be the function reference. Also we will create the function which will be called from JavaScript. In this function we will receive three parameters, add these values in persons array collection. This variable is binded with the data Grid. Updating this variable will add the values in Data greed. Add following code in the script tag of MXML file.


import mx.collections.ArrayCollection;

[Bindable]
private var persons:ArrayCollection = new ArrayCollection();

public function addPerson(firstName:String, lastName:String, country:String):void
{
persons.addItem({'firstName': firstName, 'lastName': lastName, 'country': country});
}

private function init():void
{
ExternalInterface.addCallback('addPerson', addPerson);
}

Once it is set, we are all set to go. Build your project and check.

Check out the demo here

Flex 3: Calling JavaScript from Flex

2010-04-17T08:47:00.001-07:00

It is possible to communicate with the javascript functions reside in the html page from Flex. Flex library has an ExternalInterface class which allow us to communicate with Flex and javaScript and vice versa.

In this tutorial I will explain how you can communicate. You can call javaScript function which has no parameter, which has parameters and function which is returning values. I will cover function which will receive parameter in string format and returns the plain string.

To start with, First create a flex project in the Builder. First we will create a javaScript function in the html page and then we will call that from the Flex application. Open your index.template.html form {project}/html-template/ folder. In this html page add following code just before the <noscript> tag.


<script language="JavaScript" type="text/javascript">

function flexTojavaScript(fromFlex)
{
alert(value);
return 'Returning from JavaScript to Flex';
}

</script>

In the above code I have created the Script tag and within that I have created a function named 'flexTojavaScript' which will receive a parameter named 'fromFlex'. This function will return plain text.

That's it, we are done with the changes in html page.

Now we will move to the flex application mxml. In this mxml, I have created a button which will call the clickHandler on clicking on it. From the click handler I have called the javascript function using ExternalInterface class. The value returned from the javascript is stored in the returnFromJavaScript variable.


private function clickHandler():void
{
returnFromJavaScript='';
returnFromJavaScript = ExternalInterface.call("flexTojavaScript", "This is called from Flex");
}

ExternalInterface class has static method named 'call'. using this function we can call the javaScript function. In this function you will find two parameter, first parameter is the name of the javaScript function as a string. You can also send the parameters. In the above code we are sending plain string to javaScript. As mention above the function is javaScript is returning string. Which we are storing in the application local variable. In this application I have crated the text which will show up the return value of javaScript function.

That's it We are done with the changes. Just build your project and click on the button. You will find that javaScript alert will appear. Which will have the parameter text what we have sent from the Flex. On Clicking OK button of the alert prompt. You will find that the value which is returned from the javaScript will populate below the button.

This is very simple method using which we can call the javaScript function from the Flex.

I hope this will help you.

In my next tutorial I will explain the revers of this, i.e. Calling Flex function from javaScript.

Flex 3: setting data using FlashVars

2010-04-17T06:07:00.001-07:00

If you want to set any variables from html page to your Flex application. You can do it by setting FlashVars in the html page. This data can be read in Flex at runtime by accessing Application.application.parameter property.

Following example will demonstrate the steps to access the data in flex using FlashVars.

First create an Flex project in the flex builder. Now you have to set the required data in your html file in which the Flex application is reside. To do this you have to add the FlashVars property in your html.

Open your index.template.html form {project}/html-template/ folder. Why this file? Modifying this file will compile your actual html page with the latest changes you have made to this template file. Doing this you will have all your modification in the final compiled html file.

Next you have to set the FlashVars property. This you have to do it at two places. First within the <object> tag you will find <embed> tag.In this tag there are few properties set for the application swf file like.src, quality, bgcolor etc. you need to add one more property here i.e.FlashVars. Now identify the data which you want to pass to Flex application. And add that in above tag property(<object><embed>) as follow.

FlashVars="Name=Shailesh Makwana&Age=32&Qualification=B'Com&Experience=10 years"

Now your final code will look like this.


<noscript>
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="${application}" width="${width}" height="${height}"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash`.cab">
   <param name="movie" value="${swf}.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="${bgcolor}" />
   <param name="allowScriptAccess" value="sameDomain" />
   <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
    width="${width}" height="${height}" name="${application}" align="middle"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer"
    FlashVars="Name=Shailesh Makwana&Age=32&Qualification=B'Com&Experience=10 years">
   </embed>
 </object>
</noscript>

Second place where you have to add the flash var is at javascript block. If you look above you will find javascript block with if an else if condition. in the else if condition block you will find some property is been set. Here you have to add flashVars.

Add following line of code as last parameter of AC_FL_RunContent function within else if block.
"FlashVars", "Name=Shailesh Makwana&Age=32&Qualification=B'Com&Experience=10 years"

You must have noticed that the snippet of FlashVars here is little different than the first step. Also make sure you add the comma after last parameter before adding this FlashVars. This is the common mistake everyone does.

Now your code will look like this.

AC_FL_RunContent(
   "src", "${swf}",
   "width", "${width}",
   "height", "${height}",
   "align", "middle",
   "id", "${application}",
   "quality", "high",
   "bgcolor", "${bgcolor}",
   "name", "${application}",
   "allowScriptAccess","sameDomain",
   "type", "application/x-shockwave-flash",
   "pluginspage", "http://www.adobe.com/go/getflashplayer",
   "FlashVars", "Name=Shailesh Makwana&Age=32&Qualification=B'Com&Experience=10 years"
 );

Now you are done with the html editing. When you will run the application from the builder. The output html file will have above changes.

Now, next we have to access these variables in the Flex. Open your main application MXML file. here you can access these flashVars using Application.application.parameters;. This parameter is of type object. Use these variable in your application wherever you need. I have accessed these variable in creationComplete event. And assigned the respective variable value to the text component as follow.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init();">
<mx:Script>
 <![CDATA[

  private function init():void
  {
   var flashVar:Object = Application.application.parameters;
   
   nameT.htmlText = "<b>Name :</b>" +flashVar.Name;
   ageT.htmlText = "<b>Age :</b>" +flashVar.Age;
   qualificationT.htmlText = "<b>Qualification :</b>" +flashVar.Qualification;
   experienceT.htmlText = "<b>Experience :</b>" +flashVar.Experience;
  }
 ]]>
</mx:Script>
 <mx:VBox width="300" height="100%">
  <mx:Text id="nameT" width="100%" />
  <mx:Text id="ageT" width="100%" /> 
  <mx:Text id="qualificationT" width="100%" />
  <mx:Text id="experienceT" width="100%" />  
 </mx:VBox> 
</mx:Application>

After compiling this project, you will see that all variable what we have set in the html is now displayed in the Flex application. I hope this will help you.

SingleTon design pattern in AS3

2010-04-16T08:05:00.000-07:00

Singleton patter is very useful pattern when you need to have only one object of any class in application. You can enforce this by creating a singleton class.

We cannot directly restrict the user to create multiple object of any class in AS3, Since AS3 doesn't support private or protected constructor. AS3 constructor can always be public. So how we can restrict user for creating an object from outside. There is a work around to this. We can achieve this by creating an enforcer class in the same class file. And we will pass the reference of this enforcer class in the constructor of Singleton class. Since the enforce class can be access by same class only. No one can create the singleton class object outside that class.

Following example explain how we can achieve using AS3.


package 
{
 public class Singleton
 {
  private static var _instance:Singleton;

  public function Singleton (enforcer:Enforcer)
  {
   if(!enforcer)
    throw(new Error("The Class cannot be instantiated."));
  }

  public static function getInstance():ModelLocator
  {
   if(!_instance)
    _instance = new ModelLocator(new Enforcer())

   return _instance;
  }
 }
}

class Enforcer
{

}

Create a class which will receive a parameter as enforcer class. And create the enforcer class within the same class below the package block. This enforcer class can only be access by the Singleton class only.

As Singleton class object require Enforcer object reference as a paramer, it cannot be created from outside from the Singleton class. We are checking in Singleton constructor body that if enforcer is null, it will throw an error.

This class can be access only by calling getInstance Static method.

To access this class reference use following code snipped.

var singleton: Singleton = Singleton.getInstance();

I hope this will help you in your development.

Singleton patter is very useful pattern when you need to have only one object of any class in application. You can enforce this by creating a singleton class.

We cannot directly restrict the user to create multiple object of any class in AS3, Since AS3 doesn't support private or protected constructor. AS3 constructor can always be public. So how we can restrict user by creating an object from outside. There is a work around to this. We can achieve this by creating an enforcer class in the same class file. and we will pass the reference of this enforcer class in the constructor of Singleton class. Since the enforce class can be access by same class only. No one can create the singleton class object outside that class.

AS Doc Creation from Flex Builder 3.

2010-04-16T01:47:00.001-07:00

Flex builder has capability of generating ASDoc using an exe, which will generate the ASDoc for your codes. But how? I didn't find any documention in the help of flex builder. So I am writting this for all, who are looking for.

It is very simple. Following steps demonstrate how we can set the ASDoc compliar in Flex builder 3.

Step 1. Set up the external tool in builder by clicking Run > External Tools > Open External Tool Dialog. Or you can get it from tool bar. Click on the following icon in tool bar.

This will pop up External Tools dialog box.

Step 2. Click on the new launch configration button from the top left

Step 3. Give it name whatever you fill approricate.
In the location field click on browse button and search for the asdoc exe in the SDK folder. by default it reside at C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\bin\asdoc.exe in windows.

Step 4. Point your project folder. In the working directory field type ${project_loc} – this will point to your current project.

Step 5 : Set up the arguments. Inn the arguments field add following arguments.
-source-path src
-doc-sources src
This assumes that you set up your projects with the default source folder called src. It’ll look into your project folder’s src for generating ASDoc.

Thats it, you have setup your ASDoc generation tool. Now just click on the Run button to Generate the Doc. This will create athe ASDoc in asdoc-output folder within your current folder structure.

I hope this will help you.

Flex 3: PureMVC tutorial

2010-04-10T23:47:00.001-07:00

PureMVC is free framework which you can use to develop the MVC structured project. As name suggest pureMVC is a framework which is based on the Model, View and Controller. Where you can isolate your business logic with your view elements.

Today I got an opportunity to write a tutorial on Flex development using pureMVC framework. In this tutorial I will walk through the development process using pureMVC framework. The project which I will explain here will have simple data population on datagrid from the XML using HTTPService.

Before we get going, you’ll need the following

Flex SDK 3. Its free!

Flex Builder 3

PureMVC

framework library.

Before I start this tutorial, I assume that you have knowledge about AS3 and Flex. Also you have knowledge of using Flex Builder 3.

Now we are ready with all required tools. we can start with actual project development. First we will setup the project in Flex Build. Then we will set the packages and folders.

Create flex project in Flex Builder 3 and name it SimplePureMVCExample
add the pureMVC framework library in the lib folder ( add PureMVC_AS3_2_0_4.swc in lib folder of the project). (Refer below image).
Within src folder of the project, create following packages for Model, View and Controller. (Refer below image.)

com.sm.pureMVC.model.
com.sm.pureMVC.view.
com.sm.pureMVC.controller.

Now we have all folder ready. I will explain what each folder will have.

Controller – will have all command classes. Which will use to communicate between Model(Proxy) and view(Mediator)

Model – will have all business logic classes. Which will process business logic and send the notification.

View – will have all mediator classes which will listen to all visual elements.

Application developed using pureMVC framework needs to have an entry point which will startup the pureMVC framework. For this we need to create an ApplicationFacade class. Which will be a heart of the application.

First we will create an application mxml file which will send a startup notification. which will start the pureMVC.

Following is the code of main application class.

If you noticed I have called the startup method on creationComplete event. In this method i have passed the reference of application. The startup method is been called by accessing single tone class ApplicationFacade.


private function init():void
{
    ApplicationFacade.getInstance().startup(this);
}

This Application mxml has the reference of two visual elements. i.e. Button and Custom component Employee Detail. Which is just an data grid, which will hold the details about the employee. This we will used later with Mediators.

Now we will move to the next class. i.e. ApplicationFacade. This is a single tone class. This class will extend the Facade class of pureMVC frame work and implement IFacade. This is mandatory that Application Facade class should extend the Facade class of framework and implement the IFacade interface.

Following is the code sample of Application Facade class.


package com.sm.pureMVC {
 import com.sm.pureMVC.controller.LoadCommand;
 import com.sm.pureMVC.controller.StartupCommand;

 import org.puremvc.as3.interfaces.IFacade;
 import org.puremvc.as3.patterns.facade.Facade;
 import org.puremvc.as3.patterns.observer.Notification;

 /**
  * @author SM
  */
 public class ApplicationFacade extends Facade implements IFacade {

  public static const NAME : String = 'ApplicationFacade';
  public static const STARTUP : String = NAME + 'Startup';
  public static const LOAD : String = NAME + 'Load';
  public static const DATA_LOADED : String = NAME + 'dataLoaded';

  public static function getInstance() : ApplicationFacade {
   if(instance == null)instance = new ApplicationFacade();
   return instance as ApplicationFacade;
  }

  override protected function initializeController() : void {
   super.initializeController();
   registerCommand(STARTUP, StartupCommand);
   registerCommand(LOAD, LoadCommand);
  }

  public function startup(application : PureMVCExample) : void
  {
   sendNotification(STARTUP, application);
  }

  override public function sendNotification(notificationName : String, body : Object = null, type : String = null) : void {
   notifyObservers(new Notification(notificationName, body, type));
  }
 }
}

In this class you have noticed that, there are few const declared in the beginning. These are the names of the commands. Which will be access during sending notification.


  public static const NAME : String = 'ApplicationFacade';
  public static const STARTUP : String = NAME + 'Startup';
  public static const LOAD : String = NAME + 'Load';
  public static const DATA_LOADED : String = NAME + 'dataLoaded';

The initialize Controller method will used to register all controllers(Commands).This is an overridden method of Facade class. and this will call the super method and then it will register all controllers. To register the command we will use the registerCommand method and we will pass two parameters. First is Name of the command and second is the command class.


  override protected function initializeController() : void {
   super.initializeController();
   registerCommand(STARTUP, StartupCommand);
   registerCommand(LOAD, LoadCommand);
  }

The startup public method will be called from the main application mxml file. and this will send a notification of STARTUP command. and it will also send the reference to the main application. This notification will execute the Startup command.


  public function startup(application : PureMVCExample) : void
  {
   sendNotification(STARTUP, application);
  }

Now we have send the STARTUP notification. We will need to create an StartupCommand class within com.sm.pureMVC.controller package. This class will extend the SImpleCommand of pureMVC framework and implements the ICommand. This is the entry command which will initiate the Proxy and Mediator. Whenever the startup notification is send it will trigger the execute method of Startup Command

Following is the code sample of StartupCommand class.


package com.sm.pureMVC.controller {

 import com.sm.pureMVC.model.EmployeeServiceProxy;
 import com.sm.pureMVC.view.ApplicationMediator;

 import org.puremvc.as3.interfaces.INotification;
 import org.puremvc.as3.patterns.command.SimpleCommand;

 /**
  * @author SM
  */
 public class StartupCommand extends SimpleCommand {

  /**
   * Initialize the model and views
   */
  override public function execute(notification:INotification):void
  {
   facade.registerProxy(new EmployeeServiceProxy());
   facade.registerMediator(new ApplicationMediator(notification.getBody() as PureMVCExample));
  }
 }
}

The execute overridden method will have the code for initializing the EmployeeServiceProxy proxy and ApplicationMediator mediator. The application reference passed along with startUp Notification can be accessed by notification parameter of execute method. i.e by notification.getBody(); and this will be passed to the Mediator as a parameter.


  override public function execute(notification:INotification):void
  {
   facade.registerProxy(new EmployeeServiceProxy());
   facade.registerMediator(new ApplicationMediator(notification.getBody() as PureMVCExample));
  }

Now we are ready with startup command class. Lets move to create EmployeeServiceProxy class. We will create this proxy class in com.sm.pureMVC.model package.This class will hold the logic of loading XML using http Service. In this class we will create the service which will load the employee.xml on call of onLoad method from outside. On http Service result we will send the notification of DATA_LOADED along with an array collection. This will be listen by EmployeeDetailMediator class employee datagrid component.

Following is the code sample of EmployeeServiceProxy class.


   package com.sm.pureMVC.model
{


 import com.sm.pureMVC.ApplicationFacade;

 import mx.collections.ArrayCollection;
 import mx.controls.Alert;
 import mx.rpc.events.FaultEvent;
 import mx.rpc.events.ResultEvent;
 import mx.rpc.http.mxml.HTTPService;

 import org.puremvc.as3.interfaces.IProxy;
 import org.puremvc.as3.patterns.proxy.Proxy;

 public class EmployeeServiceProxy extends Proxy implements IProxy
 {
  public static const NAME:String = 'EmployeeProxy';

  private var serv:HTTPService;

  public function EmployeeServiceProxy(data:Object = null)
  {
   super(NAME, data);
   setService()
  }

  private function setService():void
  {
   serv = new HTTPService();
   serv.url="assets/data/employee.xml"
            serv.resultFormat="object"
            serv.addEventListener(ResultEvent.RESULT,servResultHandler);
            serv.addEventListener(FaultEvent.FAULT,servFaultHandler);
  }

  private function servResultHandler(event:ResultEvent):void
  {
   sendNotification(ApplicationFacade.DATA_LOADED, event.result.Employee_Info.Employee as ArrayCollection); 
  }

  private function servFaultHandler(event:FaultEvent):void
  {
   Alert.show(event.toString()); 
  }

  public function loadData():void
  {
   serv.send();
  }

  override public function getProxyName():String
  {
   return EmployeeServiceProxy.NAME;
  }
 }
}

Declare the proxy name const in the beginning. This cont can be used, when we have to access the proxy class using retriveProxy method of Facade class.


   public static const NAME:String = 'EmployeeProxy';

The setService method will be called from the constructor and it will initialize the http service and set the required properties and listeners.


  private function setService():void
  {
   serv = new HTTPService();
   serv.url="assets/data/employee.xml"
   serv.resultFormat="object"
   serv.addEventListener(ResultEvent.RESULT,servResultHandler);
   serv.addEventListener(FaultEvent.FAULT,servFaultHandler);
  }

The loadData method will be called from the outside. This method will send the http service request. The result/fault of the request will be handle in the respective handler methods.


   public function loadData():void
  {
   serv.send();
  }

The servResultHandler will triggered on result of service. This function will send the notification for data loaded along with the data object. This notification will be listen by the interested mediators(in this project EmployeeDetailMediator).


  private function servResultHandler(event:ResultEvent):void
  {
   sendNotification(ApplicationFacade.DATA_LOADED, event.result.Employee_Info.Employee as ArrayCollection); 
  }

Now we have set the proxy class. we will move to create the application mediator class in the com.sm.pureMVC.view package.

This class will extend the Proxy Class and implement the IProxy interface. This class will register the EmployeeDetailMediator and set the listener of button to load the xml.

Following is the code sample of EmployeeServiceProxy class.


 package com.sm.pureMVC.view
{
 import com.sm.pureMVC.ApplicationFacade;

 import flash.events.MouseEvent;

 import org.puremvc.as3.interfaces.IMediator;
 import org.puremvc.as3.interfaces.INotification;
 import org.puremvc.as3.patterns.mediator.Mediator;

 public class ApplicationMediator extends Mediator implements IMediator
 {
  public static const NAME:String = 'ApplicationMediator';

  public function ApplicationMediator(viewComponent:Object=null)
  {
   super(ApplicationMediator.NAME, viewComponent);
   facade.registerMediator(new EmployeeDetailMediator(application.employeeList));
   application.getEmployee.addEventListener(MouseEvent.CLICK, getEmployeeClickHandler);
  }

  override public function getMediatorName():String
  {
   return ApplicationMediator.NAME;;
  }

  private function get application():PureMVCExample
  {
   return viewComponent as PureMVCExample;
  }

  private function getEmployeeClickHandler(event:MouseEvent):void
  {
   sendNotification(ApplicationFacade.LOAD);
  }

 }
}

Declare the Mediator name const in the beginning. This cont can be used, when we have to access the mediator class using retriveMediator method of Facade class.


public static const NAME:String = 'ApplicationMediator';

The application reference passed with ApplicationMediator will be stored in the viewComponent property of the class. In the constructor we will register another mediator i.e. EmployeeDetailMediator and we will pass the reference of the employee detail component to this mediator as a parameter. This will map the employee detail component with EmployeeDetailMediator.

Also we will add the listener to the getEmployee button which is present in the application mxml.


  public function ApplicationMediator(viewComponent:Object=null)
  {
   super(ApplicationMediator.NAME, viewComponent);
   facade.registerMediator(new EmployeeDetailMediator(application.employeeList));
   application.getEmployee.addEventListener(MouseEvent.CLICK, getEmployeeClickHandler);
  }

On getEmployee button click handler we will send the notification of Load command. This will be listen by the LoadCommand.


  private function getEmployeeClickHandler(event:MouseEvent):void
  {
   sendNotification(ApplicationFacade.LOAD);
  }

Now we will create the LoadCommand class in com.sm.pureMVC.controller package. Like Startup command this command class will also extend the SimpleCommand and implements the ICommand. This class will execute when Load notification is sent. In this application the load notification is been sent from the getEmployee click handler.

Following is the code sample of EmployeeServiceProxy class.


package com.sm.pureMVC.controller
{
 import com.sm.pureMVC.model.EmployeeServiceProxy;

 import org.puremvc.as3.interfaces.ICommand;
 import org.puremvc.as3.interfaces.INotification;
 import org.puremvc.as3.patterns.command.SimpleCommand;

 public class LoadCommand extends SimpleCommand implements ICommand
 {
  public function LoadCommand()
  {
   super();
  }

  override public function execute(notification:INotification):void
  {
   var employeeProxy:EmployeeServiceProxy = facade.retrieveProxy(EmployeeServiceProxy.NAME) as EmployeeServiceProxy;
   employeeProxy.loadData();
  }

 }
}

The execute overridden method will have the code for calling loadData method of EmployeeServiceProxy class. If you have noticed here we hate retrieve the reference of EmployeeServiceProxy class using retrieveProxy method of facade class. To retrieve the reference we have passed the EmployeeServiceProxy name const. This will intimate facade that the request is for EmployeeServiceProxy class.


    override public function execute(notification:INotification):void
  {
   var employeeProxy:EmployeeServiceProxy = facade.retrieveProxy(EmployeeServiceProxy.NAME) as EmployeeServiceProxy;
   employeeProxy.loadData();
  }

Now we are ready with Load command class, next we will create the EmployeeDetailMediator class. This class will extend the Mediator and implement the IMediator interface. Remember we have register this mediator in the ApplicationMediator class constructor and we have passed the reference of employee detail component to this.

In this class we have to listen to DATA_LOADED notification, which was sent from the EmployeeServiceProxy class result handler method. and set the employee data to the data grid which was passed along with DATA_LOADED notification.

Following is the code sample of EmployeeServiceProxy class.


package com.sm.pureMVC.view
{
 import com.sm.pureMVC.ApplicationFacade;
 import com.sm.pureMVC.view.components.EmployeeDetail;

 import mx.collections.ArrayCollection;

 import org.puremvc.as3.interfaces.IMediator;
 import org.puremvc.as3.interfaces.INotification;
 import org.puremvc.as3.patterns.mediator.Mediator;

 public class EmployeeDetailMediator extends Mediator implements IMediator
 {
  public static const NAME:String = 'EmployeeDetailMediator';

  public function EmployeeDetailMediator(viewComponent:Object=null)
  {
   super(EmployeeDetailMediator.NAME, viewComponent);
  }

  override public function getMediatorName():String
  {
   return EmployeeDetailMediator.NAME;
  }

  private function get employeeDetail():EmployeeDetail
  {
   return viewComponent as EmployeeDetail;
  }

  override public function listNotificationInterests():Array
  {
   return [ ApplicationFacade.DATA_LOADED];
  }

  override public function handleNotification(notification:INotification):void
  {
   switch (notification.getName()) {
    case ApplicationFacade.DATA_LOADED:
     employeeDetail.employee.dataProvider = notification.getBody() as ArrayCollection;
     break;
   }
  }

 }
}

To listen to the notification in mediator we have to follow few steps. First we have to add the notification which are interested by this mediator using listNotificationInterests method. In this overridden method we will return the array of notification names which will be interested by this mediator class.


  override public function listNotificationInterests():Array
  {
   return [ ApplicationFacade.DATA_LOADED];
  }

Now, after adding the interested notification. we will create the function which will execute respective functionality for interested notification. The handleNotification overridden method will have the code for executing specific functionality for each notification. If the mediator is interested in multiple notification. that can be listen using switch case loop.

In this function, within DATA_LOADED case we will set the employee data grid data provider. Remember we have sent the data object reference along with the DATA_LOADED notification. We will access this data object by getBody method of notification.


  override public function handleNotification(notification:INotification):void
  {
   switch (notification.getName()) {
    case ApplicationFacade.DATA_LOADED:
     employeeDetail.employee.dataProvider = notification.getBody() as ArrayCollection;
     break;
   }
  }

That’s it. we have complete the simple flex application using pureMVC framework. I hope this tutorial will help you to understand the flow of developing the flex application using pureMVC. If you have any question, Kindly let me know I will try to answer you question.

Summary of development.

Call startup method of ApplicationFacade class from the application mxml file.

Send the startup notification from the ApplicationFacade class.

Initialize the ApplicationMediator and EmployeeServiceProxy in the Startup command.

Add the get employee button listener in the ApplicationMediator class.

Send notification of LOAD command from the ApplicationMediator class

Initialize the EmployeeDetailMediator mediator in the ApplicationMediator class.

Add logic of xml loading using httpService in the EmployeeServiceProxy class.

Send notification of DATA_LOADED from the EmployeeServiceProxy class.

Handle DATA_LOADED notification in EmployeeDetailMediator class.

Download the complete source zip file

Flex 3: Pie Chart interactive Label

2010-04-09T10:01:00.001-07:00

I have started exploring Flex 3 pie chart component few days back and i realize that the labels for pie chart is not interactive. There is no inbuilt events for pie chart label.

To make the label interactive of pie chart component i have extend the pie chart component. But It was really strange that there was no direct reference available to individual labels. Instead there is a reference to the labelContainer who hold all the labels. To achieve the label reference i have added the listener to the label container and check the current target is label field or not. and Then i have dispatched the custom label event.

Following snippet is for the custom pie chart component which i have extend from Pie chart.

File Name ClickableLabelPieChart.mxml




 
  [Event(name="labelClick", type="events.ChartLabelEvent")]
  [Event(name="labelDoubleClick", type="events.ChartLabelEvent")]
  [Event(name="labelMouseDown", type="events.ChartLabelEvent")]
  [Event(name="labelMouseUp", type="events.ChartLabelEvent")]
  [Event(name="labelRollOver", type="events.ChartLabelEvent")]
  [Event(name="labelRollOut", type="events.ChartLabelEvent")]
  [Event(name="labelMouseMove", type="events.ChartLabelEvent")]
 
 
 
     import mx.core.UITextField;
   import mx.charts.series.PieSeries;
   import events.ChartLabelEvent;
   
   [Bindable]
   private var pieSeries:PieSeries;
   
   private function addLabelEvents():void
   {
    pieSeries = this.series[0];
    if (pieSeries)
    {
     pieSeries.labelContainer.addEventListener(MouseEvent.CLICK, dispatchLabelEventHandler);
     pieSeries.labelContainer.addEventListener(MouseEvent.DOUBLE_CLICK, dispatchLabelEventHandler);
     pieSeries.labelContainer.addEventListener(MouseEvent.MOUSE_DOWN, dispatchLabelEventHandler);
     pieSeries.labelContainer.addEventListener(MouseEvent.MOUSE_MOVE, dispatchLabelEventHandler);
     pieSeries.labelContainer.addEventListener(MouseEvent.MOUSE_OUT, dispatchLabelEventHandler);
     pieSeries.labelContainer.addEventListener(MouseEvent.MOUSE_OVER, dispatchLabelEventHandler);
     pieSeries.labelContainer.addEventListener(MouseEvent.MOUSE_UP, dispatchLabelEventHandler);
     pieSeries.labelContainer.addEventListener(MouseEvent.ROLL_OUT, dispatchLabelEventHandler);
     pieSeries.labelContainer.addEventListener(MouseEvent.ROLL_OVER, dispatchLabelEventHandler);
    }
   }
   
   

   private function dispatchLabelEventHandler(event:MouseEvent):void
   {
    
    if(event.target is UITextField == false)
     return;
     
    var currentLabel:UITextField = event.target as UITextField
    var chartEventType:String = '';
    switch(event.type)
    {
     case MouseEvent.CLICK:
      chartEventType = ChartLabelEvent.LABEL_CLICK;
      break;
     case MouseEvent.DOUBLE_CLICK:
      chartEventType = ChartLabelEvent.LABEL_DOUBLE_CLICK;
      break;
     case MouseEvent.MOUSE_DOWN:
      chartEventType = ChartLabelEvent.LABEL_MOUSE_DOWN;
      break;
     case MouseEvent.MOUSE_MOVE:
      chartEventType = ChartLabelEvent.LABEL_MOUSE_MOVE;
      break;
     case MouseEvent.MOUSE_OUT:
      chartEventType = ChartLabelEvent.LABEL_MOUSE_OUT;
      break;
     case MouseEvent.MOUSE_OVER:
      chartEventType = ChartLabelEvent.LABEL_MOUSE_OVER;
      break;
     case MouseEvent.MOUSE_UP:
      chartEventType = ChartLabelEvent.LABEL_MOUSE_UP;
      break;
     case MouseEvent.ROLL_OUT:
      chartEventType = ChartLabelEvent.LABEL_ROLL_OUT;
      break;
     case MouseEvent.ROLL_OVER:
      chartEventType = ChartLabelEvent.LABEL_ROLL_OVER;
      break;
    }
    
    
    this.dispatchEvent(new ChartLabelEvent(chartEventType, currentLabel));   
   }
  ]]>

I have used the custom event for label. For that i have created an Custom Event class based on MouseEvent

File Name ChartLabelEvent.as



package events
{
 import flash.display.InteractiveObject;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.geom.Point;
 
 import mx.core.UITextField;

 public class ChartLabelEvent extends MouseEvent
 {
  public static const LABEL_CLICK:String = "labelClick";

  public static const LABEL_DOUBLE_CLICK:String = "labelDoubleClick";

  public static const LABEL_MOUSE_DOWN:String = "labelMouseDown";

  public static const LABEL_MOUSE_MOVE:String = "labelMouseMove";
  
  public static const LABEL_MOUSE_OUT:String = "labelMouseOut";
  
  public static const LABEL_MOUSE_OVER:String = "labelMouseOver";

  public static const LABEL_ROLL_OUT:String = "labelRollOut";

  public static const LABEL_ROLL_OVER:String = "labelRollOver";

  public static const LABEL_MOUSE_UP:String = "labelMouseUp";

  private var _labelField:UITextField;

  public function ChartLabelEvent(type:String, labelField:UITextField = null, triggerEvent:MouseEvent=null)
  {
   var relPt:Point;
   if (triggerEvent && triggerEvent.target)
   {
    relPt = target.globalToLocal(triggerEvent.target.localToGlobal(
     new Point(triggerEvent.localX, triggerEvent.localY)));
   }
   else
   {
       if(target)
     relPt = new Point(target.mouseX,target.mouseY);
    else
     relPt = new Point(0,0);
   }
   
   var bubbles:Boolean = true;
   var cancelable:Boolean = false;
   var relatedObject:InteractiveObject = null;
   var ctrlKey:Boolean = false;
   var shiftKey:Boolean = false;
   var altKey:Boolean = false;
   var buttonDown:Boolean = false;
   var delta:int = 0;
    
   if(triggerEvent)
   {
          bubbles = triggerEvent.bubbles;
    cancelable = triggerEvent.cancelable;
    relatedObject = triggerEvent.relatedObject;
    ctrlKey = triggerEvent.ctrlKey;
    altKey = triggerEvent.altKey;
    shiftKey = triggerEvent.shiftKey;
    buttonDown = triggerEvent.buttonDown;
    delta = triggerEvent.delta;
   }
   super(type, bubbles, cancelable, relPt.x, relPt.y, relatedObject, ctrlKey, altKey, shiftKey, buttonDown, delta);
     
   this.labelField = labelField;
  }

  public override function clone():Event
  {
   return new ChartLabelEvent(type, labelField, this);
  }


  public function get labelField():UITextField
  {
   return _labelField;
  }

  public function set labelField(value:UITextField):void
  {
   _labelField = value;
  }
 }
}

Finally the application mxml. In this file i have added the custom Pie chart component and added all label mouse events on creation complete. On the mouse handler function, I have changed the Label color on roll over and roll out with background. On click the color of lable changes to green.

PieChartLabelEvent.mxml


 
 
  
       import mx.graphics.SolidColor;
    import mx.collections.ArrayCollection;
    import events.ChartLabelEvent;
    private function init():void
    {
     labelPieChart.addEventListener(ChartLabelEvent.LABEL_CLICK, chartLabelMouseHandler);
     labelPieChart.addEventListener(ChartLabelEvent.LABEL_DOUBLE_CLICK, chartLabelMouseHandler);
     labelPieChart.addEventListener(ChartLabelEvent.LABEL_MOUSE_DOWN, chartLabelMouseHandler);
     //labelPieChart.addEventListener(ChartLabelEvent.LABEL_MOUSE_MOVE, chartLabelMouseHandler);
     labelPieChart.addEventListener(ChartLabelEvent.LABEL_MOUSE_OUT, chartLabelMouseHandler);
     labelPieChart.addEventListener(ChartLabelEvent.LABEL_MOUSE_OVER, chartLabelMouseHandler);
     labelPieChart.addEventListener(ChartLabelEvent.LABEL_MOUSE_OVER, chartLabelMouseHandler);
     labelPieChart.addEventListener(ChartLabelEvent.LABEL_MOUSE_UP, chartLabelMouseHandler);
     labelPieChart.addEventListener(ChartLabelEvent.LABEL_ROLL_OUT, chartLabelMouseHandler);
     labelPieChart.addEventListener(ChartLabelEvent.LABEL_ROLL_OVER, chartLabelMouseHandler);
    }
    private function chartLabelMouseHandler(event:ChartLabelEvent):void
    {
     trace(event.labelField);
     if(event.type == ChartLabelEvent.LABEL_MOUSE_OVER)
     {
      event.labelField.background = true;
      event.labelField.backgroundColor = 0xFF0000;
      event.labelField.textColor = 0xffff00;
     }else if(event.type == ChartLabelEvent.LABEL_MOUSE_OUT)
     {
      event.labelField.background = false;
      event.labelField.textColor = 0x000000;
     }else if(event.type == ChartLabelEvent.LABEL_CLICK)
     {
      var color:uint = event.labelField.textColor != 0x00ff00 ? 0x00ff00 : 0x000000;
      event.labelField.textColor = color;
     }
    }
 
  [Bindable]
    private var fragments:ArrayCollection = new ArrayCollection([
      { Country: "USA", Gold: 35},
               { Country: "China", Gold: 32},
               { Country: "India", Gold: 5},
               { Country: "Brazil", Gold: 15},
               { Country: "Russia", Gold: 27}
      ]);
      
    [Bindable]
    private var _fillList:Array = [
            new SolidColor(0xFF5B5B,0.9),
            new SolidColor(0xA9FE5C,0.9),
            new SolidColor(0xFEBD5C,0.9),
            new SolidColor(0xFF8040,0.9),
            new SolidColor(0x5BFFCA,0.9),
            ];
      
     private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
              var temp:String= (" " + percentValue).substr(0,6);
              return data.Country + ": " + "Total Gold: " + Math.round(data.Gold);
          }
   ]]>
  
         weight = "2"
       color = "0x999999"
       alpha = ".8"
       caps = "square"/>
  
         weight = "1"
       color = "0xFFFFCC"
       alpha = ".5"/>
 
  
         color = "0x000000"
       weight = "2"
       alpha = ".5"/> 
                  dataProvider = "{fragments}"
                showDataTips = "true"
                selectionMode = "single"
                height = "100%"
                width = "100%">
      
                   nameField = "Country"
            labelPosition = "callout"
            selectable = "true"
            labelFunction = "displayGold"
            calloutStroke = "{callouts}"
            radialStroke = "{radial}"
            stroke = "{pieborder}"
            fills = "{_fillList}"/>

You can use these mouse event to make the label draggable. I will explain this in my next post where i will create an application which will have a functionality of changing the label by dragging from the list.

Draggable Wedges in Pie chart

2010-04-09T07:50:00.000-07:00

Its been too long since I had wrote a blog.
Today I got a chance and I am writing this for Flex pie chart draggable wedge.

Flex has very good library of components. This is one of that and I have extended the pie chart component to make the wedges interactive and draggable. Flex pie chart component doesn't have this feature. So I tried to make one.

For developing this I have created draggable points at the end of each wedge. And on dragging, it will change the value of that wedge and its related wedge.

Comments are welcome

Typing exercise game using Pure MVC

2009-07-11T08:39:00.000-07:00

I really like the pureMVC framework, I hope you will also like this.

It is really amazing framework, Easy to use and nicely developed.

I tried developing one game using this framework. It took little while initially but once I got hands to this it was really easy.

I have developed a typing exercise game, in which random character will dropped from the top; user has to type the right character to earn the score. Currently this game is covering only characters which are not case sensitive. I am upgrading this game to make this case sensitive; also I am planning to add numbers and special characters.

This game has few features like, score display, target hit display, user life display etc. Once the character reaches to certain point color will turn to red, which indicates the risk of loosing that character.

This game has four levels, after each level the speed for characters increase. Score 5 can be earned by hitting each characters

Suggestion are welcome.