Flex3: How to “Re-load” A Component

Question

How do I, in effect, "reset" a component in order to have it look the the way it did when it first loaded. For example, I've got 3 buttons in an HBox. They start as red, visible, and have a label. I then programmatically make different changes to them-- change the color of some of them, change the visibility of some of them, etc.

I then need to "reload" this HBox, have it revert back to the way it looked at the start. Is there an easy way to do this? (I have a lot of components that need to be changed).

<mx:HBox>
    <mx:Button id="button1"
        label="button1" 
        fillColors="[red, red]" 
        toggle="true" click="myClickHandler"/>

    <mx:Button id="button2" 
        label="button1" 
        fillColors="[red, red]" 
        toggle="true" click="myClickHandler"/>

    <mx:Button id="button3" 
        label="button1" 
        fillColors="[red, red]"  
        toggle="true" click="myClickHandler"/>
</mx:HBox>

If you have a suggestion, please let me know. Thank you.

-Laxmidi

Answer 1

You are already problematically changing this code at runtime. Just write a method to change it back to it's default state. That is probably what I'd do.

Alternately, if this is an encapsulated component, you could always remove it with removeChild, create another instance, and put that new one in the same place.

---

Per comments, here is some psuedo code for looping over children of a component and changing properties:

for (var i : int =0; i<hBox.numChildren; i++){
  var child : UIComponent = hBox.getChildAt(i);
  child.setStyle('style','defaultValue');
  child.property = 'default value'
}

Answer 2

<mx:Application>
    <mx:Script>
        private function onColorChange():void
                {
                    can.removeAllChildren();

                    var loader:Loader = new Loader();
                    loader.load(new URLRequest('assets/images/logo/1.png'));
                    loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);

                    /* image= new Image();
                    image.source = "assets/images/logo/1.jpg";
                    image.setStyle('horizontalCenter','0');
                    image.setStyle('verticalCenter','0'); */

                    //can.addChild(image);

                    txt= new Text();
                    txt.text = "Ankur sharma";
                    txt.styleName = "font";
                    txt.setStyle('fontFamily','Anime Ace');
                    txt.rotation = -10;

                    can.addChild(txt);

                    can.mask = txt;
                    //applyFilter(CC.uint2rgb(cp.selectedColor));
                }

                private function onComplete(event:Event):void
                {
                    rect = new Rectangle();
                    rect = txt.getBounds(can);  

                    can.graphics.clear();   
                    can.graphics.beginBitmapFill(event.currentTarget.content.bitmapData);
                    can.graphics.drawRect(rect.x,rect.y,rect.width,rect.height);
                    can.graphics.endFill();

                }
    </mx:Script>

    <mx:ColorPicker id="cp" change="onColorChange()"/>
        <mx:Canvas id="can" height="100%" horizontalCenter="0" verticalCenter="0" borderStyle="solid" borderColor="#CCCCCC" borderThickness="5">
            <mx:Image source="assets/images/logo/1.png" horizontalCenter="0" verticalCenter="0"/>
            <mx:Text text="Ankur Sharma" styleName="font" rotation="-10"/>
        </mx:Canvas>
        <mx:Style source="style.css"/>
    </mx:Application>

in this example, wht im doin is im removing all children in ma canvas(id=can) amd then then makeing ne changes, to exizting components and then adding thm back to the canvas,

this program is of masking ne ways, my canvas has two children, and im putting ma text as a mask over the canvas, and i am filling the canva with bitmap image, thats it

i hop it hepls