Populate a Flex Accordion with XML

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

9 thoughts on “Populate a Flex Accordion with XML

  1. Nice post… any chance you can post or send me an MXML example of populating your accordian lables with an xml file? If you have the time that is. Thanks either way.

    Rob

  2. Hi Rob,

    Thanks for stopping by. I have to admit I’m a little confused. This post is an MXML example of populating accordion labels with an XML file. Everything you need is in the code windows above. Is there something specific that’s giving you trouble?

    -rG

  3. From the code it looks like you are dinamically creating the lists in each Label in the Accordion. But you are using Demos, Commericials and Trailers as your CONSTANT labels. What Rob is getting at (and I’m also looking for) is how to dinamically create your labels as well as the lists inside of them…

  4. Hello I’m new to flex and using accordion for research study . I’m trying to use your example for practice and I could not fix some errors stated below.

    1. It shows error for srv– as undefined property.
    2. I hv some flv’s in images folder as in src/images/video1.flv,video2.flv… and running on my local server where vidSource = “http://localhost/flex_accordian/src/images/”+newSource; .. it doe not loads any data through xml.

    Thanx

    Sabs

  5. @sabsin and anyone else who views this,

    Create another folder under your main #src folder. Name the folder flv and move your .flv’s into it. Your root folder is your #src folder, so to access the flv folder just add flv/ as the videoSource like this:


    videoSource = "flv/" + newSource;

    If your using a webserver, remember flex has some odd way of using the root, it is
    /../”foldername”. And lastly, sabsin, learn to be organized. There should be no reason to put .flv’s inside a folder named images as it doesn’t make any sense whatsoever. Images go in an image folder, flv’s in an flv folder. Take care!

Comments are closed.