Importing XML with Flash MX and Flash MX2004.
In this experiment I will attempt to demonstrate the ways of importing XML into
Flash with Flash MX (using actionscript parsing) and with Flash MX2004 (using
the XMLConnector component). I was following a tutorial on Macromedia on the
XMLConnector component end decided to try out each way and see how it would
compare. As always, I attempt to only show functionality in my experiments.
Looks and feel is just not part of that..
These are the two results.
Find below the XML we will be using. This is the same XML used in the Macromedia
tutorial, in case you wanted to follow that one as well.
XML file
<?xml version="1.0" encoding="UTF-8"?>
<trips>
<trip name="Napa Valley">
<description>
The incredible variety of Napa Valley includes both ...
</description>
<cost>1095</cost>
<tapes>2</tapes>
<image>images/napa.jpg</image>
</trip>
<trip name="Big Sur">
<description>
From beaches to mountains... Hike along the stream....
</description>
<cost>1395</cost>
<tapes>2</tapes>
<image>images/bigsur.jpg</image>
</trip>
<trip name="Grand Canyon">
<description>
Located entirely in northern Arizona, the park en...
</description>
<cost>1111</cost>
<tapes>1</tapes>
<image>images/grandcanyon.jpg</image>
</trip>
<trip name="Great Smoky Mtns">
<description>
Ridge upon ridge of endless forest straddling t...
</description>
<cost>1195</cost>
<tapes>3</tapes>
<image>images/greatsmokies.jpg</image>
</trip>
<trip name="Natchez Trace">
<description>
The 444-mile Natchez Trace Parkway commemorates ...
</description>
<cost>1195</cost>
<tapes>1</tapes>
<image>images/natchez.jpg</image>
</trip>
<trip name="Vermont Villages">
<description>
Experience the beauty of New England Foliage
</description>
<cost>695</cost>
<tapes>2</tapes>
<image>images/vermont.jpg</image>
</trip>
</trips>
Flash MX (actionscripted parsing) way
First, I will show the Flash MX
way, where we simply import the XML with an XML object and then parse the
content into an arry, so we can then bind that array to a combobox component.
There are basically 4 items on the canvas:
-
an empty movieClip (instancename: imageHolder)
-
a combobox component (instancename: mySelect)
-
single line dynamic textfield (instancename: myPrice)
-
multiple line dynamic textfield (instancename: myDescription)
And this sourcecode on thr first frame:
Flash MX (actionscripted parsing) way
myXML = new XML();
myXML.ignoreWhite=true;
myXML.onLoad = parseXml;
myXML.load("trips.xml");
function parseXml() {
if (myXML.firstChild.hasChildNodes()){
Arr_tripdetailHolder = new Array();
Arr_tripnamesHolder = new Array();
for(i=0;i< myXML.firstChild.childNodes.length; i++){
//store the names in one array
Arr_tripnamesHolder[i] = myXML.firstChild.childNodes[i].attributes.name;
Arr_temp_tripdetails = new Array();
for(j=0;j< myXML.firstChild.childNodes[i].childNodes.length;j++){
Arr_temp_tripdetails[j]=
myXML.firstChild.childNodes[i].childNodes[j].firstChild.nodeValue;
}
//store the details in other array
Arr_tripdetailHolder[i] = Arr_temp_tripdetails;
}
delete Arr_temp_tripdetails;
mySelect.setDataProvider(Arr_tripnamesHolder);
mySelect.setChangeHandler("changeDetails")
changeDetails();
}
delete myXML;
}
function changeDetails(){
myPrice.text = Arr_tripdetailHolder[mySelect.getSelectedIndex()][1];
myDescription.text = Arr_tripdetailHolder[mySelect.getSelectedIndex()][0];
imageHolder.loadMovie(Arr_tripdetailHolder[mySelect.getSelectedIndex()][3]);
}
The code creates an empty XML object that gets loaded with the external XML
(trips.xml). Now we have structured data inside our actionscript, but we need to
populate our combobox with the data. The index of the selected item in the combobox
will then populate the other fields. In this case (it really depends on a case
by case basis on how you do it), and for ease of demonstration, I create two
arrays: One named Arr_TripnamesHolder and one named Arr_tripdetailHolder. The
logic is that the content of slot number one in one array is directly related to
the content of slot number one in the other array. This way I can bind one array
to the combobox and fill the other fields by using the index that is currently
selected on the combobox to find the data in the Arr_tripdetailHolder array.
Once the two arrays are populated, I populate the combobox with the first array
(which contains only the tripnames) and then set a changehandler to the combobox,
pointing to the changeDetails() function. This fucntion then populates the rest
of the fields, with whatever index is selected on the combobox. That is it.
The previous way will still work in MX2004, but with the new databinding
components, there is really very little (if any at all) code to write.
There are basically 5 items on the canvas:
-
a Loader componet (instancename: imageHolder)
-
a combobox component (instancename: mySelect)
-
a textInput component (instancename: myPrice)
-
a textArea component (instancename: myDescription)
-
an XMLConnector component (instancename: myConnect)
And this sourcecode on the first frame:
Flash MX2004 (XMLConnector) way
this.myConnect.trigger();
All that is left to do is to properly setup the properties of the
components. The XMLConnector requires a source xml file (trips.xml)
and also a direction (in this case, receive only). Then in the component
inspector panel, you have to retrieve the schema from the xml file. Now
that you have the schema, you can go to the bindings tab and add a binding
to the trip Array node. Set the direction property to out and bind this
array to the combobox dataProvider:array. Since the trip array Node contains
the element name and attributes of an element and all content of any childNodes,
we need to add also a formatter of "rearrange fields" and
add "label=name" to the options. This will force to only display
the name attribute as the label in the combobox. (Otherwise you get all
content, separated by commas in your combobox).
Now we do the same thing for the other components, adding a binding to from
the XMLConnector to the field, but in addition we also set that the index is
bound to the index of the combobox. De-select "index is a constant
value" and set it to combobox Index: Integer.
That is it. I know this has been a lousy explanation, but you can find the
detailed
tutorial on the XMLConnector at DevNet on Macromedia.
Here are the sourcefiles: xmlconnect_mx.fla and
xmlconnect_mx2004.fla