Welcome!

Adobe Flex Authors: Yakov Fain, Keith Swenson, Jacques Durand, Pat Romanski, Liz McMillan

Related Topics: Adobe Flex

Adobe Flex: Article

MXML vs ActionScript 3

Building custom AS3 components

I've been building a bunch of custom AS3 components for clients lately, and have run across the need to use view states within an AS3 component.

Working with states in MXML is pretty trivial, using the AddChild, RemoveChild and SetProperty tags, you can do virtually anything you need, but when working in an AS3 only environment, it becomes a bit trickier, since there are no tags. Of course, anyone who has worked with Flex for any length of time knows that MXML tags are interpreted into AS classes before the application is compiled into a SWF, so anything you can do in a tag, you can also do with pure AS.

I was looking to do the AS3 equivalent of this:

<mx:states>

    <mx:State name="minimized">

       <mx:SetProperty target="{this}" property="height" value="{this.getStyle('headerHeight')+15)}"/>

       <mx:SetProperty target="{this}" property="width" value="{this.minWidth}"/>

       <mx:SetProperty target="{this}" property="vScrollPolicy" value="off"/>

       <mx:SetProperty target="{this}" property="hScrollPolicy" value="off"/>

    </mx:State>

</mx:states>

Here is my AS3 to do the same thing:

private function buildStates():void{
    var overrides:Array = new Array();
    var newState:State = new State();
    overrides.push(makeSetProp(this,"height",this.getStyle("headerHeight")+5));
    overrides.push(makeSetProp(this,"width",this.minWidth));
    overrides.push(makeSetProp(this,"vScrollPolicy","off"));
    overrides.push(makeSetProp(this,"hScrollPolicy","off"));
    newState.name="minimized";
    newState.overrides = overrides;
    this.states = new Array(newState);
}
private function makeSetProp(target:UIComponent, property:String, value:*):SetProperty{
    var sp:SetProperty = new SetProperty();
    sp.target = target;
    sp.property = property;
    sp.value = value;
    return sp;
}

Essentially what we have is that each UIComponent has a property called states, which holds an array mx.states.State instances. Each State has an array of things to override, called "overrides." In this case, each of the overrides is a SetProperty, although, it could just as easily be AddChild or RemoveChild.

More Stories By Jeff Tapper

Jeff Tapper, co-founder of Tapper, Nimer and Associates, is an Editorial Board member of Web Developer's & Designer's Journal. He has been developing Internet-based applications since 1995, for a myriad of clients including Toys R Us, IBM, Allaire, Dow Jones, American Express, M&T Bank, Verizon, Allied Office Supplies, and many others. As an Instructor, he is certified to teach all of Adobe's courses on Flex, ColdFusion and Flash development. He has worked as author and technical editor for several books on technologies including Flex, Flash and ColdFusion, such as "Object Oriented Programming with ActionScript 2.0", and "Flex 2 Training from the Source."

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
e2easy 04/17/09 02:36:00 AM EDT

Why are you even thinking about MXML ViewStates?!!! - when you're writing Pure ActionScript???? No wonder the solution is over complex. Forget MXML, and take the direct route.