Friday, March 11, 2011

ADDED vs. ADDED_TO_STAGE

ADDED and ADDED_TO_STAGE are two events that are dispatched on object when this is added as child to displayed parent. But there is a reason why they both exist. Here is small study on differences.

Case #1 - adding object to stage.
in this case we're adding class (named A) to main class which is stage. both listeners are added as in presented code:

public class A extends Sprite
{
    public function A()
    {
        trace('A A()');
        super();

        addEventListener(Event.ADDED, _handleAdded);
        addEventListener(Event.ADDED_TO_STAGE, _handleAddedtoStage);
    }

    private function _handleAdded(event:Event):void
    {
        trace('A added');
    }

    private function _handleAddedtoStage(event:Event):void
    {
        trace('A AddedtoStage');
    }
}


And here is main class code:

public function Blog()
{
    trace('Blog Blog()');
    var a:A = new A();

    trace('adding A to stage');
    addChild(a);
}


Here is result of experiment:

Blog Blog()
A A()
adding A to stage
A added
A AddedtoStage


Conclusion: both events works works similar. What is more, everytime ADDED is before ADDED_TO_STAGE. Flash is not working parallely so there must be some reason of this constant order. If You switch adding listeners result is the same. This shows that ADDED is always dispatched before ADDED_TO_STAGE.

Case #2 - cascade adding objects to stage
Now we add one more object, so structure will look like this:

Stage(Blog) -> A -> B

Main class of Blog stays same as in previous example. Class A is modified to create instance and load into itself object of type B. Here is code of class A:

public class A extends Sprite
{
    public function A()
    {
        trace('A A()');
        super();

        addEventListener(Event.ADDED_TO_STAGE, _handleAddedtoStage);
        addEventListener(Event.ADDED, _handleAdded);

        var b:B = new B();
        addChild(b);
    }

    private function _handleAdded(event:Event):void
    {
        trace('A added');
    }

    private function _handleAddedtoStage(event:Event):void
    {
        trace('A AddedtoStage');
    }
}


And here we have source of class B. It looks like class A in previous case:

public class B extends Sprite
{
    public function B()
    {
        trace('B B()');
        super();

        addEventListener(Event.ADDED_TO_STAGE, _handleAddedtoStage);
        addEventListener(Event.ADDED, _handleAdded);
    }

    private function _handleAdded(event:Event):void
    {
        trace('B added');
    }

    private function _handleAddedtoStage(event:Event):void
    {
        trace('B AddedtoStage');
    }
}


And let's see what now happens:

Blog Blog()
A A()
B B()
B added
A added
adding A to stage
A added
A AddedtoStage
B AddedtoStage


Conclusion: First thing is that an event ADDED is captured in class A twice. Once when object is added to this class as child and once when the object itself is added to parent. Second and most important part delay between capturing those event. This shows that event ADDED is dispatched each time when method addChild (or AddChildAt) are called. And this event is dispatched first. ADDED_TO_STAGE is dispatched when object or it's parent or a structure of objects of many levels are added to displayed class on stage. And this event goes as second. Last thing - ADDED_TO_STAGE event is propagated from stage to it's children and to further levels of descendants


No comments:

Post a Comment