Flex and Actionscript code snippets, examples and tutorials.

There are two ways to restrict the TextInput in Flex … one by restricting a special character like a comma itself or by setting an allowed list.

For an ampersand it is done as follows:

In MXML:

restrict="^," />

For an ampersand it is done as follows:

In MXML:

restrict="^&" />

In ActionScript:

private var textInput:TextInput;
private function init():void {
textInput = new TextInput();
textInput.restrict = “^&”;
addChild(textInput);
}

The second way to restrict is by setting an allowed list of values:
This allows alphanumeric entries.

restrict="0-9a-z" />

A numeric stepper is a input/display control which let’s the user select a number from an ordered list.

Some of the important and most frequently used properties of a numeric stepper are:

1> maxChars (int) – This specifies the maximum number of characters that can be entered into the Numeric Stepper. An important point to be noted here is that the default for this is 0 which means that there is no limit on the character length.
2> maximum (Number) – This specifies the maximum value that can be entered in a Numeric Stepper.
3> minimum (Number) – This specifies the minimum value that can be entered in a Numeric Stepper.
4> stepSize (Number) – This specifies the number which is added/subtracted on step up and step down respectively. The default value for this is 1.

A simple example is given below:

<mx:NumericStepper id="numerics"
                    minimum="2" maximum="20"
                    stepSize="0.2"
                    value="4" />

I’m not sure if this issue is specifically when I encountered it, which was while converting XML String to an XML object but I have found that in some cases, while debugging, when you hover your mouse over a variable, it usually prints the value of that variable at that point in the code. Sometimes, that goes missing. If that is the case add an expression in the Variables section of the Flash Player Debugging perspective (related image below). This should show the value of the variable. I’m not sure why Flash Player does this but I found this to be pretty annoying when it happened.

I have had this issue in a specific case when I was trying to convert an XML String to XML.

var str:String = ““;
var xml:XML = new XML(str);

Sample code for sorting an ArrayCollection in Flex. The field which is of type SortField defines the field name from the ArrayCollection which is to be sorted. Once the sort field is defined, if the sorted list has to be bound to a Flex component like a DataGrid, a refresh has to be done for the changes to take effect. It has to also be noted that the source Array of the ArrayCollection will not be altered in this process and will still have the complete original list. If you ever need to revert back, you can assign the genericCollection.sort to null and do a refresh again and that will revert the ArrayCollection list back to the original list.

var genericCollection:ArrayCollection = new ArrayCollection();
genericCollection.sort = new Sort();
var field:SortField = new SortField("fieldName");
genericCollection.sort.fields = [field];
genericCollection.refresh();

Making the background of a Flex datagrid is possible by setting the backgroundAlpha property depending on how much transparency is desired with 0.0 being fully transparent and 1.0 being completely opaque. Here is some sample code from the example which will be posted very soon.

<mx:DataGrid id="dataGrid"
	 backgroundAlpha="0.0"
	 alternatingItemColors="{[]}"
	 dataProvider="{arr}">
	<mx:columns>
		<mx:DataGridColumn dataField="label" />
		<mx:DataGridColumn dataField="data" />
	</mx:columns>
</mx:DataGrid>

So it seems like you can’t run both Flash Builder Burrito and Flash Builder 4.5 together. The trial period for FB Burrito has expired and you won’t be able to run it anyways so if you plan to install Flash Builder 4.5 then go ahead and uninstall Burrito. If you don’t and try to install Flash Builder 4.5 then it won’t let you and will complain that a beta or pre release version needs to be uninstalled first.

A common problem with a Flex datagrid is that very often you cannot select the items in a particular row/column to Copy either using the mouse or using Ctrl+C. There is a very simple solution to this problem. All you need to do is, add a Label itemrenderer to the Datagrid Column and set the selectable property of this Label to true. There you have it, a Flex Datagrid now with selectable fields!

Working code to example to follow very soon!

There will be some cases where you will need to round the edges or corners of some Flex components to make it look slightly different and sometimes better than the plain vanilla components that the Flex SDK provides. A simple trick to achieve this is to set the cornerRadius. Setting the cornerRadius to say 15 will give you about a decent curve on the edges. You can play around with this property more to get the rounding you desire!

<mx:Canvas width="140" height="140"
        borderThickness="0"
        cornerRadius="15"
        borderStyle="solid">
        <mx:Label text="Canvas" horizontalCenter="0" verticalCenter="0"/>
    </mx:Canvas>

Live example with View Source will be up here very soon.

One of the most important things you should know about and have installed or bookmarked is an application called Tour de Flex. For people new to Adobe Flex, it helps you to get started and see what is possible with Flex. For developers, it provides a great reference tool along with working examples and source code and makes life very easy. Here is the web link:
http://www.adobe.com/devnet/flex/tourdeflex.html

This blog is meant to be a spin off of the AIR4Android blog and will contain all the Flex/Actionscript related posts while leaving the AIR for Android blog for content specific to developing AIR applications for the Android (and also iOS, RIM) platform. Hope you find the stuff here useful!