I was astonished to see how many people are having problems with connecting some sort of server-sided data into flash. Especially when you are using Flash MX 2004.

With a little bit of help of Macromedia’s components and classes, i’ll show you a way how i used to import server-sided xml data into a DataGrid component.

If you ever hamered the walls because you coudn’t get the most easy xml to work…. here we go

Introduction
What you will create when following this tutorial is a Flash movie with no further external files on compile-time. The xml file you will be loading into memory is attached in the tutorial files. You will create the interface for loading an external xml file into a datagrid component.

What you need
Before you can start with this tutorial, there are a couple of things of which you should make sure you have them before we can start.
1) A fresh copy of Macromedia Flash MX 2004 Professional
2) A copy of the tutorial files for reference

That’s it :)

Preperation
In practice, normally you would start your preperations by creating a new project for your upcoming work, thinking about a suitable directory and script structure, etc. Since this tutorial is really small, I won’t bother you with those actions (yet).

The only thing we need for now is one tutorial.fla file, created in flash. The flash file will have only 2 layers:
1. AS : I always keep an extra layer which only contains ActionScript. That way it is easy for others to look it up and alter it if they have to.
2. GRID: This layer is where the components we will use are going to recide.

Allrighty, got this? Then we’re ready to break some legs. Let’s look at the components we need.

Place the components
We need to place the two components we are going to need to show the data, on the Stage. The ones we need are the DataGrid and the Button Component.

Place these two components anywhere on the stage in the ‘GRID’ layer. It doesn’t matter where you place the components, but putting them in the viewable field helps when debugging… you can actually see them then.

After you put the DataGrid and Button components on the Stage, you’ll need to name the DataGrid component. The name you give the component here, will be used when you want to reference or ‘point to’ this datagrid through ActionScript. (Which is what we will be doing).

Alrighty, Stage and components are ready to go. Let’s go to the fun part…. the Scripting! ……ey….come back… no worries ;)

The Actionscript
For the people who are getting anxious by now, we’ll first put up the script needed to load the data.xml file into the DataGrid component, and review it later.

You’ll need to copy paste the following code into the first frame of the ‘AS’ layer in your movie.

parseXML = function() {
  //  we check if this xml has children just to be sure  if (myXML.hasChildNodes)   {
    // define the root of the xml file for easy navigation    var xmlRootNode = myXML.firstChild.childNodes;
    // now loop through xml to fill our dataArray (objects)    for (var i = 0; i < xmlRootNode.length; i++)     {      var thisNode = xmlRootNode[i];      if (thisNode != null)      {        var strDep = thisNode.childNodes[0].firstChild.nodeValue;        var strSales = thisNode.childNodes[1].firstChild.nodeValue;        var strEmpl= thisNode.childNodes[2].firstChild.nodeValue;
        // here we go, creating an object and adding it to our container        arrDataGrid.push ({Dep:strDep, Sales:strSales,Employees:strEmpl});      }    }  }  // this is where the magic is, link   // the filled array to the datagrid..... that's it!  // you'll have full control over what comes in to your
  // grid! Great ain't it ;)  myDataGrid.dataProvider = arrDataGrid;}

loadXML = function() {
  // will contain the data for the grid  arrDataGrid = new Array();  // loads the xml in memory
  myXML = new XML();   // ignore enters and whitespace in xml file
  myXML.ignoreWhite = true;   // reference to the function above
  myXML.onLoad = parseXML;   // the actual command which will load the xml file
  myXML.load("data.xml");}

This actionscript block will do roughly said 2 things. In the first place, the function “loadXML()”, gives you the abillity to load in an XML file (in our case, the data.xml file). The second function is called parseXML and does the actual magic. It creates an Array of objects which we then instantly can put in our dataGrid.

There are a few more steps to do, before we can say we finished the whole thing. Since i’m a bit weary of typing this article, i’ll let you try and figure out the rest for yourself. A quick hint… try to look at what I did with the button component…. shouldn’t be that hard. If you have any specific question…. just type a comment….