XML connector and Data binding tutorial.

Hello guys,
It’s been a while and I was very busy , could not get this data binding and XML connector tutorial posted. Excuse my delay.
So here is the long waited xml connector and data biniding tutorial at last!

Ok, let’s explain few things before we start.

XML connector is a class whose job is to make loading and parsing XML much easier.
Data binding provides an easy way to link various components to each other and to the XML connector (or data holder).

The following example explains how this works.
Let’s look at this simple XML file :
[xml]




















[/xml]

Let’s assume you want to build a cool mp3 player that plays songs provided by a playlist like the one this XML represents. If you’re going to do this the classical way, then prepare yourself for lots and lots of parsing and coding…
Using the XML connector together with data binding will make this task a joke!

So the first thing you need to do is to drag a media player and an XML connector component to the stage, give the former the instance name of mp and give the latter an instance name of “xmc”.

Place your xmc off stage, click on it and open up the component inspector, type the path to the playlist xml file, in our case it’s simply songs.xml as it resides with the swf in the same folder.

Now, click on the schema tab and then click on the “import a schema from a sample xml” button then browse to the songs.xml itself and click ok.

At this point, you’ll see the xml schema displayed, we’re particularly interested in the path to the mp3 file that the player has to read, so practically we need to grab the Path attribute (@Path).

Now comes the interesting part, click on the biniding tab in the component inspector then click on the “+” sign to add a binding, the same xml schema appears, click on the Path attribute then click Ok.

Now, in the grid below, choose out as direction from the drop down list, double click on the bound to field and from the dialog that appears choose the media player component and from the right hand side panel choose contentPath as the property of the mediaplayer to which the Path attribute will be bound to.

One last thing, put the following code on frame one of your timeline :

[as]xmc.trigger();[/as]

Without this, the xml connector will not function at all.

Now what we have is a mediaPlayer component that reads the first node in the xml, parses the path attribute and loads that as contentPath and start playing it!

Check the sample below.

That’s cool but what about other songs? How can we choose to play those?
Well, I will leave that to another tutorial…

mp3 player reading from XML and databinding
Here’s the page where you can see the XML connector and the mp3 player:

Click Here

Leave a Reply