How do I hide (not remove) the content of a Panel (or any Container) in Flex?

Question

I'm extending a Panel to build a custom component. Without knowing what this will contain later, how can I add a method to temporarily hide all contents and displaying an internal object (which is normally invisible) instead?

That is, is there a better way than

for each (var ui:DisplayObject in this.getChildren()) {
  ui.visible = false;
}

What I would love to do is swapping out the root content pane, but I don't know how to access it. Like this:

this._tempStore = this.removeChild(this.rootContentPaneObject);
this.rootContentPaneObject = this._myTemporaryReplacement;

Effectively, I'm trying to build a component which acts as a dropin replacement for a Panel but which behaves similar to a ViewStack.

Answer 1

You seem to be looking for Container.contentPane. Note that it is mx_internal, so we are diving into Flex internals here (at your own risk...).

import mx.core.mx_internal;
...
    this.mx_internal::contentPane.visible = false;

Next question is then how do you add children which are still visible (not in the contentPane). You might have to use Container.rawChildren for that.

Answer 2

maybe it might be easer to place a ViewStack within your Panel and use the stack to show / hide the appropriate content.