Populate a Flex Accordion with XML

Social Share Toolbar

I’ve been spending a lot of time lately learning Flex. So far I think it’s fantastic. I’m amazed at how easy it is to put together a nice looking dynamic application with so little code.

One stumbling block I had to get over was populating an accordion component with data from an XML document. I started off with a tab bar which was pretty easy, but I felt the accordion would be a better fit for my application so I started looking into the available samples.

Unfortunately, all of the samples I encountered either used static data or a data grid which I didn’t need. So I cracked my knuckles and set off to figure it out the old-fashioned way…without help from the web.

It was easy enough to populate the accordion sections with the XML, however, I was working with a list of videos and I wanted the video to begin playing when its title was clicked in the accordion. When I worked with the tab bar I just used separate states for each video type (commercials, demos, trailers) which allowed me to always use the same id name and data provider.

With the accordion I didn’t feel that states were necessary and I preferred to place it all in the same state if possible. I ended up assigning the appropriate node to each accordion and dynamically changing the video source when a different video type was selected. My accordion looks something like this (srv is an HTTPService reference to my video.xml file):



       
		
       
            
		
            
            
		
            


You can see that my dataProvider changes to a different node for each accordion section. I initially attempted to use the same id for each section but received an error stating that I couldn’t use the same id more than once. That meant that I had to come up with a way to dynamically change my video source based on the accordion section that was open.

I achieved the swap with a variable and a short function:


    
        

To complete the picture, my VideoDisplay looks like this:




As you can see I defined my VideoDisplay source as the value of my vidSource variable which gets updated by the chgVidSource function that is called when the accordion section changes. This is achieved by defining itemClick in each accordion section’s List tag to send the chgVidSource function the url of the selected video.

To further clarify the code, here is a sample of the xml format I used:



	


	


	

Hope that helps! If anyone has suggestions on how to do this differently please let me know. I’m pretty green with Flex and I’m always looking for a better way.

-rG