Dynamically allocated Flex components

Question

I have a requirement for my current project (the Flex application that will run in Flash Player) to display an arbitrary subset of the components in the form, hiding all other components based on certain aspects of the state of the application. There are about a dozen different text fields and drop-down lists, but some become irrelevant based on previously entered user data, and we do not want to display them when we get into this particular form. Each time this form is displayed, I may need to show any of the many permutations of these components.

I am trying to decide how best to approach this problem. Should I create a canvas (or another container) with all the necessary controls on it, and then just set visible = false on the ones I don't need? Then there is the problem that the layout looks decent. I don't want there to be spaces where hidden controls would be.

Another option that I was thinking about is simply a mechanism that could dynamically create an instance of a TextInput or CheckBox component and then call container.addChild (control) to create the components and not worry about the problem.

This seems like a problem that has an idiomatic solution in flex, but I don't know what it is. None of these ideas seem great, so I wonder 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 the same situation, I basically did your first method. Install visible = falseas well as install includeInLayout = falseto prevent these “gaps” you were talking about. This is a very simple solution, very simple and quick implementation ... maybe someone else knows something more idiomatic though.

Answer 2

The best way to do this is to use states. For instance:

<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 in your code, you call this.currentState = "State1" to enable the first state, etc. Using states, you can selectively display and hide components.

I recommend googling for flexible state guides and try to figure out how the states work.

Answer 3

, , .

If you create a class that extends a flexible component, such as Canvas, you define all the components in a function that overrides createChildren. You will return to the layout in another function that overrides updateDisplayList

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