Actionscript/Flex: Number Formatting (prefix a leading zero)

I was looking for a simple way to prefix a single digit number with a zero. I thought NumberFormatter would be able to do it, but turns out it can't. There is a project hosted on google for a bunch of tools that aren't included in Flex or Actionscript 3.

http://code.google.com/p/as3corelib/

One of these tools allows you to prefix a number with a zero. It's in com.adobe.utils.NumberFormatter. The method is addLeadingZero(). It's kind of confusing having two NumberFormatter classes, but I didn't write it so there you go.

There's a lot of good stuff in the project, so if you're looking for something Flex doesn't do it might be in there.

I also wrote my own string padding function that can be used in Flex, AS2 or 3. Please see this post for more details.

Flex: Using the Tasks window

I've been using Zend Studio for awhile and became very used to the TODO area that lets you track notes you've placed in code. I've wanted something similar for FLEX but there wasn't anything built in.

Turns out there is a plugin for this very thing! You can read more about it here.

Flex: Working with LinkBar viewstates

I've started experimenting with the LinkBar component for some navigation elements. I didn't want to use ViewStates because I'm loading and unloading items in a main window. I wanted to use it to capture navigation changes.

You can capture clicks on each part of a LinkBar and then do what you want from there. This is the code I used.

<![CDATA[
import mx.events.ItemClickEvent;
import mx.collections.ArrayCollection;

private var links:Array = [{label:'Browse', id:'browseLink'},{label:'Search', id:'searchLink'}];

[Bindable]
public var linkBarDataProvider:ArrayCollection = new ArrayCollection(links);

private function init() : void {
linkBar.addEventListener(ItemClickEvent.ITEM_CLICK, handleLinkBar);
}

private function handleLinkBar(event:ItemClickEvent) : void {
trace('item clicked: ' + event.item.id);
}
]]>

I created an Array with each navigation item I wanted and gave it a identifier. An event listener was set on the LinkBar to watch when items inside are clicked. The triggered event is ItemClickEvent.ITEM_CLICK. The event is passed to a function that will then look at the property called item. item is a reference to the element from the Array it used to create the navigation element. After I know which link was clicked I can load or unload the next item in the display.

The example was based on the post I found here.

Flex: using mxml files as classes

Another thing I learned while working with Flex is that each MXML file can be treated like a class. You can import them and call the functions defined within like a method. This can be very useful when loading element into the stage.

It's also important to note that methods and properties are available once you've created the object. If you have defined something to run on creationComplete it won't run until the object is added to the stage with addChild.

main.mxml

 
        import util.Example;
   private function init() : void {
    var example:Example = new Example;
    
    //run function from external MXML file
    example.example_function();
    
    //add the mxml file to the stage
    addChild(example);
   }
  ]]>
 

util/Example.mxml

 
     public function example_function() : void {
    trace('running function example');
   }
   
   private function init() : void {
    trace('now all the elements inside are available');
   }
  ]]>
 

Flex: setTimeout and setInterval replacement

One of the things I learned while moving from AS2 to AS3 is that setTimeout no longer exists. It's been replaced with a Timer class. It can be used like setTimeout or setInterval.

This is how you would use Timer as a setTimeout. The variable tTimer is set to launch 500 ms after start() is run. It will run once and then stop.

import flash.events.TimerEvent;
import flash.utils.Timer;

private function Timer_example()
{
 var tTimer:Timer = new Timer(500, 1);
 tTimer.addEventListener(TimerEvent.TIMER, onTimer);
 tTimer.start();
}
private function onTimer(event:TimerEvent)
{
 trace('callback event has run');
}

Timer can also function like setInterval. The second parameter tells timer how many times it should run. So if you want something to run 100 times then set timer will look like this.

var tTimer:Timer = new Timer(500, 100);

If you want it to run forever then set the interval to 0. If you do this make sure the timer is a global variable so you can run .stop() when it no longer needs to run.

Flex: Passing a reference from a mxml component to a method or function

I ran into a situation where I needed to pass a reference from a mxml component to a function. It's easy if you have an ID assigned to the component, but if it's in an itemRenderer that makes it tougher because you don't want duplicate ID's.

You can pass a reference from a component to a function using the createComplete event.

You can also see another example at this blog post.

Flex: Event Listeners and Array Collections

While working with some code I ran into a situation where I needed to know when an ArrayCollection was updated. Normally an event is triggered when using addItem, but I needed to know when it was set to another ArrayCollection. It's not very obvious, but it is possible.

ArrayCollection is really a wrapper for an Array. You can access the "real" array in an ArrayCollection by using ".source". When you set the source property an event called "listChanged" is triggered. You can watch for this event and then do whatever you need.

So this

var newAC1:ArrayCollection = new ArrayCollection;
var newAC2:ArrayCollection = new ArrayCollection;
newAC1 = newAC2;

Is the same as this, but with an event trigger.

var newAC1:ArrayCollection = new ArrayCollection;
var newAC2:ArrayCollection = new ArrayCollection;

newAC1.addEventListener('listChanged', function(event:Event){trace('changed');});

newAC1.source = newAC2.source;