So after playing with AS3 I thought I'd turn my attention to creating, or attempting to create, an AS3 / Flex component. So without further ado I unveil my SimpleButtonComponent (and it is just that LOL).
This is the Flex MXML.
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx :Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns:fgComp="com.flashgen.examples.components.*">
-
<fgcomp :SimpleButtonComponent />
-
</mx>
The following code sets my custom namespace. This is the classpath to my AS3 components and it allows me to define a custom namespace called fgComp that is associated with it.
-
xmlns:fgComp="com.flashgen.examples.components.*"
Next you will see that I have instantiated an instance of my SimpleButtonComponent here:
-
<fgcomp :SimpleButtonComponent />
Finally here is the AS3 class SimpleButtonComponent.as that is used to actually make the button referenced in the above MXML:
-
package com.flashgen.examples.components
-
{
-
import mx.controls.Button;
-
-
public class SimpleButtonComponent extends Button
-
{
-
private var _label:String = "SimpleButtonComponent";
-
-
public function SimpleButtonComponent () {
-
-
className = "SimpleButtonComponent";
-
this.label = _label;
-
}
-
}
-
}
As you can see from the AS3 class it doesn't do anything spectacular, in fact all I have done is set the default label value to "My SimpleButtonComponent". However as a starting point for AS3 based component creation if you are used to creating AS2 components you'll notice a couple of slight changes.
1) There is no requirement for the symbolName properties for the class definition
2) The className property now forms part of the constructor as opposed to being stored as a static variable.
3) While it is detailed that you should call super() inside the constructor - I haven't here and there appear to be no ill efects :P (we shall see though).
As a final note for all those still a bit confused with what packages are accessible to what language base. In Flex component creation we are back to the 'old' mx.* packages. Whereas in a pure AS3 development we would use the flash.* packages as the mx.* are not compatible anymore.
[UPDATE]
Actually you can use the Flex mx.* components in AS3 as detailed in the Adobe labs wiki. However it will be interesting to see what happens once 'Blaze' is out and how its components marry up to Flex 2's...
License
This work is published under a CC-GNU LGPL.
[…] In addition to that there is another basic tutorial on Flex2/AS3 components here […]
Does anyone know how to add a UIComponent to an AS3 class.
The following does not seem to work:
package {
import flash.display.Sprite;
import mx.controls.Button;
class myApp extends Sprite {
function myApp() {
var b:Button = new Button();
addChild(b);
}
}
}
Your AS3 class has to extend UIComponent in order to add another UIComponent