AS3: Who should I layout first the parent or the children?

Question

I am building large application in Starling and one of my main problems is who should I layout first: the parent or the children?

What is the default behavior in starling and also in flash:

By default Sprite will get his size based on his children after they have been added to stage.

What if I want to layout the children based on the parent? For example: What if I want to set one of the children to be at position of 20 pixels from the bottom, like bottom menu?

In this case I should:

1. Add the children
2. Determine their sizes. If you are building your application cross platform, you need to support many screens, and many times you come to have complicate logic for calculating the scale percentage of your components, which is their size.
3. Determine your size and layout yourself.
4. now the bottom menu could be layout at 20 pixels from the bottom. Also it doesn't matter if you place this logic inside the bottom menu or it's parent.

But this not always the case, sometimes you want to layout the parent based on his children. A common example if one of the children is the parent background. In this case you should:

1. Add the background.
2. Determinate background size and layout it.
3. Now you can layout the parent.

But what if I got both of the cases? If one of parent children is background and the other is bottom menu? What if the bottom menu got his own background and other children that need to be layouted base on the parent?

What solution can be used so I will not get lost inside all of this, and can Gazman SDK help here?

Answer 1

What you need is to create layout dependencies between all the components. Each Sprite should have an event that tells us when its layouting is complete.

Now if you have some layouting logic inside the parent that cannot start until its background child is complete layouting, you should create a dependency between the background and the parent. The parent should listen to LayoutComplete event from the background and then he can layout himself, and when he complete layouting he can dispatch LayoutComplete event, and now its child bottom menu can layout himself.

You can implement it yourself or use Gazman-SDK that do exactly that. If you choose Gazman-SDK your code will look like this:

public class ParentClass extends Group
{
    private var background:Background = new Background();
    private var bottomMenu:BottomMenu = new BottomMenu();

    override protected function initialize():void
    {
        // check if not already added to stage
        if(!background.parent){ 
            addChild(background);
            addChild(bottomMenu);
        }

        // Create dependency for background. If background have not 
        // been initialized yet the subscription will succeed
        // And this.initialize() will be called again once 
        // background initialize is complete
        if (subscribeForInitilize(background)){ 
            return;
        }

        // do layouting logic here
    }

}

---

public class BottomMenu extends Group
{
    override protected function initialize():void
    {
        // Create dependency for parent. If parent have not 
        // been initialized yet the subscription will succeed
        // And this.initialize() will be called again once 
        // parent initialize is complete
        if (subscribeForInitilize(parent as Group)){ 
            return;
        }

        // do layouting logic here
    }

}