Referencing Accordion contents?

[evilmrsock]

Okay. First time cracking into Flex at all, playing with layout combinations and just taking things one step at a time.

I have several short lists of songs that are broken up by genre. There's mabe a maximum of 10 songs in each, and there's only 3-4 genres.

In order to save on screen retail space, and because I really dig the visual effect of it working, I have these lists in an acccordion - they're the only things in each canvas.

I only want one item of the accordion selected at a time. I understand accordions create and hide their child nodes as you swap panes - if you change panes, that list is gone to you for the time being, that's exactly how I want it to work.

The problem is, I don't know how to say "What is the data of the currently selected item of this accordion?" At the end of the day, there's only 1 slot on the database to hold the selected item in the accordion.

Accordion.selectedChild gives me access to the Canvas on that pane, but from there, I can't figure out how to access the List.

I'm looking for the ______ in

accordion.selectedChild.______.selectedItem.data

Any takers?


<mx:FormItem label="Level BGM">
<mx:Accordion id="level_bgm" resizeToContent="true" width = "160" height="150">
<mx:Canvas label="Character Themes" width="100%" height="100%">
<mx:List name="99" width="90%" color="blue"
dataProvider="{BGM_List.characterThemes.theme}"
change="this.selectedItem=List(event.target).selectedItem" />
</mx:Canvas>
<mx:Canvas label="Story Themes" width="100%" height="100%">
<mx:List width="90%" color="blue"
dataProvider="{BGM_List.storyThemes.theme}"
change="this.selectedItem=List(event.target).selectedItem"/>
</mx:Canvas>
<mx:Canvas label="Battle Themes" width="100%" height="100%">
<mx:List width="90%" color="blue"
dataProvider="{BGM_List.battleThemes.theme}"
change="this.selectedItem=List(event.target).selectedItem"/>
</mx:Canvas>
</mx:Accordion>
</mx:FormItem>

[drkstr]

Well it's not the cleanest approach, but you could try something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%"
verticalAlign="middle" horizontalAlign="center" >

<mx:Script>
<![CDATA[

[Bindable]
private var myText:String = "Accordion container panel 1";

private function onAccordianChange( event:Event ): void {
var index:int = Accordion(event.target).selectedIndex;

switch( index ) {
case 0:
myText = idLabel0.text;
break;
case 1:
myText = idLabel1.text;
break;
case 2:
myText = idLabel2.text;
break;
}
}

]]>
</mx:Script>

<mx:Panel title="Accordion Demo" width="80%" height="80%" verticalCenter="0" horizontalCenter="0" >

<mx:Accordion id="accordion" width="100%" height="100%" change="onAccordianChange(event)"
creationPolicy="all">

<mx:VBox label="Accordion Button for Panel 1">
<mx:Label id="idLabel0" text="Accordion container panel 1"/>
</mx:VBox>

<mx:VBox label="Accordion Button for Panel 2">
<mx:Label id="idLabel1" text="Accordion container panel 2"/>
</mx:VBox>

<mx:VBox label="Accordion Button for Panel 3">
<mx:Label id="idLabel2" text="Accordion container panel 3"/>
</mx:VBox>
</mx:Accordion>

<mx:Text text="{myText}" fontWeight="bold" />

</mx:Panel>

</mx:Application>

Although it would be better (in my opinion) to store your data centrally, then have the data provider update based on which panel was selected. Each panel would then pull from the same data provider which should contain the data relevant for the panel. I think this is more a matter of preference though. I just like that way better because it seems a little more dynamic to me, plus it eliminates the need for creationPolicy="all".

Hope this helps,
...aaron