What is the correct way to to update Accordion children in Flex?

Question

Hi,

Right now I have an Accordion component in Flex that has two children, I want to give the children a reference to my application model when they have completed their instantiation (after the accordion changes index).

The following notation fails for me because the children are instantiated after the event is triggered (accordionChange method):

<mx:Accordion change="accordionChange(event)" > ...

So what I have currently done is add a creationComplete to each Accordion child which will then assign the model reference:

<?xml version="1.0" encoding="utf-8"?>
<pod:InspectorClass xmlns:pod="pod.*" xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Accordion id="accordion" color="0x323232" width="100%" height="100%">
    <mx:VBox label="Card Front" creationComplete="setChildModel()" >
        <pod:FaceInspector id="frontFaceInspector"/>
    </mx:VBox>
    <mx:VBox label="Card Back" creationComplete="setChildModel()" >
        <pod:FaceInspector id="backFaceInspector"/>
...

My "Code behind" class InspectorClass contains a method that looks like this:

    public function setChildModel():void
    {
        if ( accordion.selectedIndex == 0 )
        {
            frontFaceInspector.setModel(model);
        }
        else if ( accordion.selectedIndex == 1 )
        {
            backFaceInspector.setModel(model);
        }
    }

This feels clumsy to me, like I am missing the point of some key part of Flex. I would appreciate any advice as to how I should be doing this, this seems to be a reoccurring pattern for me.

Thanks,

Answer 1

You can make use of createpolicy as all. in accordion component.

Answer 2

Actually I always saw using event listeners and getting objects to do their own work as one of the key concepts of Flex and AS. I think what you're doing is fine, but Like Durai said you can add

creationPolicy="all"

To your accordion and then you can fire your onchange event.
ex:

<mx:Accordion id="accordion" color="0x323232" width="100%" height="100%" creationPolicy="all" change="accordionChange(event)">

And BTW, probably the only reason that feels clumsy to you is because it's not the way you originally set out to do it. I know I always feel like a hack when I have to work around something, even when that workaround is superior to my original intention.

Answer 3

You can just bind the model in each of your FaceInspector instances as you declare them in MXML.

In you FaceInspector Class (AS3/code-behind), make sure your model property is public and bindable.

[Bindable]
public var model:Model;

Then in your Main MXML (or wherever you declare the FaceInspector instances), just bind the model property to the model.

<pod:FaceInspector id="frontFaceInspector" model="{model}" />

I hope this is what you are after.

Also, if your FaceInspector instances only need access to specific properties of your model, then I would suggest making those properties bindable in the Model Class, and bind them directly. E.g.

<pod:FaceInspector id="frontFaceInspector" currentIndex="{model.sceneIndex}" imageURL="{model.image_url}" />