Learning: Flex and XML as easy as 1…2…3

ActionScript 3.0 made working with XML much easier than prior versions. In ActionScript 3.0 XML is treated as a native data type. In this article I’ll show you just how easy it is to work with XML and Flex.

Go ahead and create a new Flex Builder project and call it “FlexAndXML”.

As you type in the code below you should see the intellisense pick up and display XML as a native data type.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			private var myXML:XML =
				<xml>
					<games>
						<game rating="9.8">
							<name>Call of Duty 4</name>
						</game>
						<game rating="9.6">
							<name>Halo 3</name>
						</game>
						<game rating="9.3">
							<name>Halo Wars</name>
						</game>
					</games>
				</xml>;
		]]>
	</mx:Script>
</mx:Application>

I could also use the XML tag in MXML instead of the variable:

<mx:XML id="myXML" xmlns="">
	<xml>
		<games>
			<game rating="9.8">
				<name>Call of Duty 4</name>
			</game>
			<game rating="9.6">
				<name>Halo 3</name>
			</game>
			<game rating="9.3">
				<name>Halo Wars</name>
			</game>
		</games>
	</xml>;
</mx:XML>

For now though I’m going to use the variable.

Ok we have some XML, now we need to consume it from our project. One of the easiest ways to do this is with data binding. Lets try the following example.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			[Bindable]
			private var myXML:XML =
				<xml>
					<games>
						<game rating="9.8">
							<name>Call of Duty 4</name>
						</game>
						<game rating="9.6">
							<name>Halo 3</name>
						</game>
						<game rating="9.3">
							<name>Halo Wars</name>
						</game>
					</games>
				</xml>;
		]]>
	</mx:Script>
	<mx:DataGrid x="345.5" y="213" id="myDatagrid" dataProvider="{myXML.games.game}">
		<mx:columns>
			<mx:DataGridColumn headerText="Name" dataField="name"/>
			<mx:DataGridColumn headerText="Rating" dataField="@rating"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

I’ve used the original XML and then used data binding to attach it to the datagrid control. The key here is that I first set the dataProvider:

dataProvider="{myXML.games.game}"

Once that is done I can set the DataGridColumns to the correct node or attribute I want to bind to:

<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Rating" dataField="@rating"/>

You can also see in order to access and attribute you need to use the “@” symbol. Keep in mind any variables you want to use via data binding need to have the bindable metadata tag above them like so:

[Bindable]
private var myXML:XML = "<xml> ... insert xml here ... </xml>";

Lets render out some text to the Flex Builder Console. Try this code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="runMe();" layout="absolute">
<mx:Script>
<![CDATA[
	[Bindable]
	private var myXML:XML =
		<xml>
			<games>
				<game rating="9.8">
					<name>Call of Duty 4</name>
				</game>
				<game rating="9.6">
					<name>Halo 3</name>
				</game>
				<game rating="9.3">
					<name>Halo Wars</name>
				</game>
			</games>
		</xml>;

	private function runMe():void
	{
		trace("----------------------------------");

		// myXML.games.game[0].name gives us the first node
		// myXML.games.game[1].name would give us the second node
		trace("The first game on the list is: " + myXML.games.game[0].name);
		trace(myXML.games.game[0].name + " is rated as: " + myXML.games.game[0].@rating);


		// Print the XML (pretty)
		trace("\nHere is the XML:\n" + myXML.toXMLString() + "\n\n");

		// Here are two ways to loop through the ratings

		for each(var rating:XML in myXML..@rating)
		{
        	trace("Rating: " + rating);
    	}

    	trace("\n");

		for each(var rating2:XML in myXML.games.game.@rating)
		{
        	trace("Rating: " + rating2);
    	}

    	// Find the game with a 9.3 rating
    	trace("\n" + myXML.games.game.(@rating == '9.3').toXMLString());

		trace("----------------------------------");
	}
]]>
</mx:Script>
</mx:Application>

The result should be:

----------------------------------
The first game on the list is: Call of Duty 4
Call of Duty 4 is rated as: 9.8

Here is the XML:
<xml>
  <games>
    <game rating="9.8">
      <name>Call of Duty 4</name>
    </game>
    <game rating="9.6">
      <name>Halo 3</name>
    </game>
    <game rating="9.3">
      <name>Halo Wars</name>
    </game>
  </games>
</xml>


Rating: 9.8
Rating: 9.6
Rating: 9.3


Rating: 9.8
Rating: 9.6
Rating: 9.3

<game rating="9.3">
  <name>Halo Wars</name>
</game>
----------------------------------

Going through the comments in the above code you can see what each bit of code does and how easy ActionScript 3.0 makes working with XML. You can just copy and paste the code above into your Flex Builder project and run it.