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;

Flex and dataProviders

Most seasoned Flex coders probably know this, but as always I'm still learning. When creating a dataProvider for a List or TileList it's best to use a ArrayCollection instead of an Array.

Arrays will work if you set them as a dataProvider, but sometimes they can act weird. I just spent the last hour trying to get a TileList to update that had a Array dataProvider. Once I changed it to an ArrayCollection it worked without a problem.

So learn from my mistake. Don't use Arrays for dataProviders.

PHP: Error logging

Work with other languages has exposed me to new ways of logging errors and/or debugging code on web pages. I'm not sure how most php developers log errors or debug code so I can only guess it was similar to the way I would do it. By that I mean using echo in the middle of some HTML. It gets the job done, but it's kinda ugly.

I've since started using a cleaner method of logging errors. It's not as robust as a class, but it's better than throwing code out on a page. I've started using the error_log function wrapped in another function to control when it should output the error to a log.

function debug($allow_debug, $msg)
{
  if($allow_debug)
  {
    error_log($msg."\n", 3, '/path/to/phperror.log');
  }
}

When the function is used I pass a boolean that states wither I want the error passed out to the log. Typically I would set a variable at the top of the script and pass it into each instance of debug.

error_log takes three parameters. The first is the message that I want to pass out to the log. The important part on this input is the line return. That way each error starts on a new line. The second is the type of message I'm logging. The third is the location of the log file. Make sure it has the correct permissions so PHP can write to it.

You can view more information on error_log here.

Flex: Multiple Application MXML files

At a point in a project I'm currently working on we had to intergrate with another application. That means creating a new Application MXML file and degrading the current Application MXML file. Creating the new Applicaion was simple, but Flex was confused as to which file it should use to launch the project. This can be updated in the project properties.

1) Right-click the project and goto Properties

2) Goto the "Flex Applications". There you will see all the files that are marked as Applications.

3) Select the new Applicaion file and click "Set as Default". When you click "Run" or "Debug" it will use this file to launch your project.

4) Click on the old Applicaion file and click "Remove". This won't delete the file.

Hope this makes transitioning to a new project easier.

Also remember to remove any styleName properties from your old Application tag.