Dynamically Positioned Flex Components

Question

I have a requirement on my current project (a Flex app which will be run in Flash player) to display an arbitrary subset of the components on a form while hiding all the other components based on certain aspects of the application state. There are about a dozen different text boxes and drop downs, but some become irrelevant based on previously entered user data and we don't want to display those when we get to this particular form. Every time this form is displayed I could need to show any one of the many permutations of these components.

I'm trying to decide what the best way to approach this problem is. Should I create a Canvas (or other container) with all of the needed controls on it and then just set visible = false on the ones I don't need? The problem then becomes making sure the layout looks decent. I don't want there to be gaps where the hidden controls would have been.

The other option I've thought about is just having a mechanism that could dynamically instantiate the TextInput or CheckBox etc. component and then call container.addChild(control) in order to build up the components and not have to worry about the gap issue.

This seems like a problem that has an idiomatic solution in flex, but I don't know what it is. Neither of these ideas seem great so I'm wondering if anyone else has a better idea.

Answer 1

I don't know if this is a good solution or not, but when I was in exactly the same situation, I did basically your first method. Set visible = false and also set includeInLayout = false to prevent those "gaps" you were talking about. It's a very simple solution, very easy and quick to implement... perhaps someone else knows of something more idiomatic though.

Answer 2

The best practice way to do it is to use states. For example:

<mx:states>
    <mx:State name="State1">
        <mx:AddChild position="lastChild">
            <components.../>
        </mx:AddChild>
    </mx:State>
    <mx:State name="State2">
        <mx:AddChild position="lastChild">
            <mx:Canvas.../>
        </mx:AddChild>
        <mx:AddChild position="lastChild">
            <mx:VBox.../>
        </mx:AddChild>
    </mx:State>
</mx:states>

Then within your code, you call this.currentState = "State1" to enable the first state etc. Using states, you can selectively show and hide components.

I recommend googling for flex states tutorials and trying some out to get a proper idea of how states work.

Answer 3

If states won't do, check out articles that explain the components life cycle.

If you create a class that extends a flex component like Canvas, you will define all components in a function that override createChildren. You will revisit the layout in another function that override updateDisplayList

• Flex Component Life Cycle @flexcomps
• Component Class - Part Three @PeterEnt
• Flex component lifecyle @guavus
• Understanding Custom Flex Component Development @billWhite