Archive for October, 2008

Binding Mxml & ActionScript

Binding is one of the very useful feature in Flex. Though most intermediate programmers know how to bind a variable in mxml… most are clueless how to achieve this in AS. I’ll discuss both these aspects here.

Binding in MXML

Lets look at the following code…

<mx:TextInput id=”ti1″/>
<mx:Label id=”label1″ text=”{ti1.text}”/>

Here you are binding the text property of the TextInput to the label. So whatever you type in the textInput automatically reflects in the label. That’s the power of Binding…

Binding in AS

This is not as simple as binding in mxml. But it is simple enough…

The key to this is a class called BindingUtils in the mx.binding.utils package. You can use this class as below…

You have your components say in mxml as follows

<mx:TextInput id=”ti1″/>
<mx:Label id=”label2″/>

Now you impost the Binding utils class in the script tag

import mx.binding.utils.BindingUtils;

Then you use the bindProperty method to do the binding in AS as follows…

BindingUtils.bindProperty(label2,”text”,ti1,”text”);

This binds the ti1.text to label2.text. And you are set with your binding…

Binding is specially useful in data related components like List, DataGrid, Charts…etc. You can bind the dataProviders of these components to ArrayCollections or results of HTTPService objects, so that any change in data, immediately reflects in on the component.

Type Casting VS “as” Operator

Just write a Flex app and try the following in a function

var btn:Button = new Button();

var lst:List = new List();

lst = List (btn);

In short, we are trying to cast a button into a list… What do you expect?? Yes… an RTE (Run Time Error)

It reads

TypeError: Error #1034: Type Coercion failed: cannot convert mx.controls::Button@16ab0479 to mx.controls.List.

There are times in your app development cycle, when you are not sure, if a particular casting is allowed or not. You definitely don’t want to throw an RTE (Run Time Error) to the user either. What you end up doing invariably is using a try…catch block to handle the RTE. A better and cleaner alternative to this is using the as operator

Using the as operator has the following advantages

  • It does the exact same thing as casting does, if you are casting between compatible types
  • It returns a null if the object cannot be casted to a particular type
  • No RTEs

Once you use the as operator, you can just do a null check to see if the casting is allowed… as below

var btn:Button = new Button;

var lst:List;

lst = btn as List;

if (! lst) {mx.controls.Alert.show(”Sorry you cant cast it this way”); }

But a word of caution. You cannot use the as operator to cast between types in the Top Level classes (to view them , go to the flex language reference). Which means… Say you want to cast a String to a Number, you cannot do,

num = str as Number;

This gives the following error

Implicit coercion of a value of type Number to an unrelated type String

You’ll have to do the age-old way of casting

num = Number(str);

Hope this is useful… at least to beginners