Flex Code Behind 2

In my last post I talked about separating layout and code using a code behind method. There are some more tricks you can use, and some standards I follow to keep things consistent. To recap a little I refer to a code behind class as an ActionScript class that is extended by a MXML class.

MainForm

Because every flex application has to have one MXML class that extends Application, and not a class that inherits Application, it can't have a code behind. To get around this I create one MXML class with a code behind, call it MainForm, and put it in the Application. I use that MainForm.mxml to lay out the main components and it can have a MainFormClass.as code behind. The MainForm is the only thing in the Application.mxml and I never touch the Application.mxml again.

Example Application.mxml:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

 xmlns="view.*"

 layout="absolute">

 <MainForm height="100%" width="100%" />

</mx:Application>

Data bind everything

If you want to display a response in a label don't set the label's text property, instead create a bindable string in the code behind and bind the label's text to that. If later you want to switch to a Textarea you can just change the MXML and not the definition in the code behind.

Good Example (using binding):

mxml

<mx:Label text="{confirmation}" />

as

[Bindable] protected var confirmation:String;

...

confirmation = "Add to cart qty:"+qty;

Bad Example (not using binding:

mxml

<mx:Label id="confirmation" />

as

public var confirmation:Label;

...

confirmation.text = "Add to cart qty:"+qty;

Avoiding IDs in the code behind

Data binding everything helps, but in the event you want to get information from components you will need to use ids, but that doesn't mean you need them in the code behind class. In my last post I broke this rule to show that you can refer to components by id in a code behind class. In stead of grabbing the text from the component in the submit function, pass the text to the submit function from the MXML.

Good Example (no IDs in as file):

mxml

<mx:TextInput id="qty" enter="addToCart(qty.text)" width="33" />

as

protected function addToCart( qty:String ):void

{

 confirmation = "Add to cart qty:"+qty;

}

Bad Example (IDs in mxml and as file):

mxml

<mx:TextInput id="qty" enter="addToCart()" width="33" />

as

public var qty:TextInput;

...

protected function addToCart():void

{

 confirmation = "Add to cart qty:"+qty.text;

}