Actionscript 3.0 Component Development

Over the past week or so I’ve been posting snippets on creating MXML based components, and will continue to do so. That said I thought I’d post some articles on creating components in Actionscript 3.0 so you can see where the crossover exists and provide information that will, hopefully, provide a rounded view on which method of development suits each individual.

As with my first post on component development with MXML I thought I’d take the same code but re-engineer it in to AS 3.0 code so we can see the difference.

So first of all let’s briefly review the MXML code of our extended ComboBox:

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:dataProvider>
		<mx:String>Miss</mx:String>
		<mx:String>Mrs</mx:String>
		<mx:String>Mr</mx:String>
		<mx:String>Dr</mx:String>
	</mx:dataProvider>
</mx:ComboBox>

As you can see it ha all the elements you’d expect but how would we reproduce it in AS 3.0? Well first of all it would make sense to include the package path as this will have more relevance as we move on. So for the component above it is called FGComboBox.mxml and it is located in com.flashgen.components.flex.controls. When we just create the initial Actionscript 3.0 class you’ll see why this matter.

// Remember the package name is now external to the class identifier.
package com.flashgen.components.flash.controls {
	// Import our classes we need to create our component
	import mx.controls.ComboBox;
 
	// Declare our class and provide the inheritance and interfaces 
	public class FGComboBox extends ComboBox
	{	
		private var _data	:Array = ["Miss", "Mrs", "Mr", "Dr"];	
 
		// Define the constructor
		public function FGComboBox()
		{
			// Call our parent
			super();
			applyData(_data);
		}
 
		protected function applyData(elements:Array):void
		{
			// Set the dataProvider for the component
			this.dataProvider = elements;
		}
	}
}

If you want to try it out here is the MXML application file:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:fgx="com.flashgen.components.flex.controls.*" xmlns:fgc="com.flashgen.components.flash.controls.*" viewSourceURL="srcview/index.html">
	<fgx:FGComboBox id="fgxCombo" x="0" y="0" />
	<fgc:FGComboBox id="fgcCombo" x="100" y="0" />
</mx:Application>

Now this is purely an example piece of code so it is unlikely you would really implement a component in this manner.

It will run and it has the same default values as the MXML version above it. The interesting thing to note is that once compiled you cannot tell the difference between the two versions. I know it is a very obvious thing to say but I thought I would be explicit.

Hopefully this has given a basis of comparison between the MXML and Actionscript 3.0 component development – albeit on the simple side.

Blatant Plug
Catch my talk on Flex 2 and Actionscript 3.0 component development at Flash on the Beach
December 4th-6th 2006, Brighton, UK