Intro to E4X

http://www.actionscript.org/resources/articles/222/1/Intro-to-E4X/Page1.html

Up until now working with XML data in Flash hasn't been very intuitive. That was mainly due to the semantics of the ActionScript Language. But, with the birth of AS3 we have new hope in E4X. For those that don't know E4X stands for ECMAScript for XML and this specification introduces some new functionality that makes working with XML a lot simpler. New to AS3 are the XML, XMLList,QSpace and Namespace E4X classes. E4X not only makes life simpler but provides greater code consistency and familiarity (we can use dot syntax more similiar to ActionScript).

We'll start off by dealing with XML literals or inline XML then we'll look at external XML since most of the time you'll be loading XML from an external source. Here's how easy things have gotten for us:

//create a new XML object
var company:XML =
<employees>
<employee id="1"><name>John</name><dept>IT</dept></employee>
<employee id="2"><name>Susan</name><dept>Marketing</dept></employee>
</employees>;

Simple enough right? Next, let's create a function for some reusable code to help illustrate:

//create a printer function since we'll be reusing this routine
function echo(){
//print the data to the output panel
for each(var e in company.employee){
trace("Employee: "+e.name+" works in the "+e.dept+" Dept.");
}
}

//print the results
echo();

We're just using a for..each loop to iterate through our XML and give us the info we want. How about adding a new employee?

//to add a new employee
company.employee += <employee id="3"><name>Carl</name><dept>Research</dept></employee>;

//print the results
echo();

Now, say you wanted to search the XML for a specific employee and change their department. Here's one way that could work:

//assign Carl to a department
company.employee.(|>@id==3).dept = "IT";

//print the results
echo();

That would move Carl to the IT department. The (@id=3) is called a filter predicate (a/k/a - the condition to match) and it's just like the WHERE clause in a SQL statement...SELECT employee FROM company WHERE id = 3. So, we're grabbing the employee element(node) from the company XML tree where the employee attribute, id (@id) is equal to 3.

You might be saying "that's cool but, what about external XML?". Well, that's no problem. It's only slightly different than it was in AS2. To do it, we'll need to use
(2) new AS3 classes: URLLoader and URLRequest. URLRequest replaces getURL() and you can think of URLLoader like MovieClipLoader which allows us to monitor loading and do stuff in response to it. Ok, so with that in mind:

var company:XML;
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest("company.xml");

loader.load(request);
loader.addEventListener(Event.COMPLETE, onComplete);

function onComplete(event:Event):void{
var loader:URLLoader = URLLoader(event.target);
company = new XML(loader.data);
trace(company.toXMLString());
}

Now we're cooking. But, how can we traverse our XML tree when we don't know the root node?

//to get to the array of child nodes
var nodes = company.children();

That effectively replaces XML.firstChild.childNodes and is totally more intuitive and easier to understand the relevancy.

Of course, in no means did we cover every aspect of E4X but I hope this introduction has sparked some ideas that you can expound upon and use to enhance your next application. Until next time...