E4x Faq

[wvxvw]

As E4X is short, I'll try to follow it's spirit. We need this thread, so, why won't we have one?

Semantics:

@ - attribute accessor.
Example:

var xml:XML = <node foo="bar"/>;
trace(xml.@foo);
trace(xml.@["foo"]);
trace(xml["@foo"]);

. (dot) - child accessor.
Example:

var xml:XML = <node><childNode/></node>;
trace(xml.childNode.toXMLString());

.. (double dot) - descendants accessor.
Example:

var xml:XML = 
<node>
    <node>
        <childNode/>
    </node>
    <childNode/>
</node>;
trace(xml..childNode.toXMLString());

:: (double colon) - namespace accessor.
Example:

var xml:XML = 
<foo:node xmlns:foo="bar">
    <childNode/>
</foo:node>;
var ns:Namespace = xml.namespace("foo");
trace(xml.childNode.toXMLString());
trace(xml.ns::childNode.toXMLString());

[] - (square brackets) - access dynamic property.
Example:

var xml:XML = <node><childNode/></node>;
trace(xml["childNode"].toXMLString());
trace(xml.*[0].toXMLString());

() (parentheses) - perform operation on every XMLList item.
Example:

var xml:XML = 
<node>
    <nodeA/>
    <nodeB/>
</node>;
xml.*.(trace(toXMLString()));

{} (braces) - generate XML element.
Example:

var xml:XML = <{"no" + "de"}/>;
trace(xml.toXMLString());

* (asterisk) - substitute for XML element.
Example:

var xml:XML = <node foo="bar" bar="foo"/>;
xml.@*.(trace(toXMLString()));

Common Use Cases

Q: Why some nodes appear in trace() as empty strings, while I'm sure they are there?
A: Unless the node you trace() is a root node the following condition applies:
the trace() will use myXML.toString() method to output the child nodes of the XML passed as an argument. If XML passed for the argument has no children, the empty string will appear in the output. NOTICE: the text value of the node is also a child.
If you want to trace() the structure of the node and it's children you need to use myXML.toXMLString().
Example

var xml:XML =
<node>
    <childNode>foo</childNode>
</node>;
trace(xml.childNode);
trace(xml.childNode.toString());
trace(xml.childNode.toXMLString());

Q: Why my switch-case using XML attribute as a condition doesn't work?
A: You need to use explicit casting to convert attribute value to String. The type of the attribute value is XMLList.
Example

var xml:XML = <node foo="bar"/>;
switch (xml.@foo)
{
    case "bar":
        trace("YES");
        break;
    default:
        trace("NO"); // NO
        break;
}
switch (String(xml.@foo))
{
    case "bar":
        trace("YES"); // YES
        break;
    default:
        trace("NO");
        break;
}
trace(typeof xml.@foo);
trace(xml.@foo is XMLList);
trace(describeType(xml.@foo).toXMLString());

Q: Why parsing with E4X is slow?
A: The most common mistakes when parsing:
You put the E4X expression inside the for / for-each for-in loop. E4X is a set of loops itself, thus, if you execute it in a loop it will multiply the execution time in geometric progression.
You used descendant accessor where you could avoid it.
Example

var xml:XML =
<node>
    <childNode foo="bar"/>
    <childNode bar="foo"/>
</node>;
// NO:
for (var i:int; i < xml.*.length(); i++)
{
    trace(xml.*[i].@*.toXMLString());
}
// YES:
var list:XMLList = xml.*;
var l:int = list.length();
for (var j:int; j < l; j++)
{
    trace(list[j].@*.toXMLString());
}
// YES:
xml.*.(trace(@*.toXMLString()));

Q: How do I convert XML to Array?
A: There're only two reason I've found so far to do so:
1. When you need to sort / change order of the nodes based on complex condition.
Example

var listValues:XMLList =
<item>1</item> +
<item>2</item> +
<item>3</item> +
<item>4</item> +
<item>5</item> +
<item>6</item>;
trace(listValues.toXMLString());
var sortingArray:Array = [];
var resultList:XMLList;
listValues.(sortingArray.push(valueOf()));
trace(sortingArray);
sortingArray.sort(sortingFunction);
trace(sortingArray);
sortingArray.forEach(generateList);
trace(resultList.toXMLString());

function sortingFunction(aXML:XML, bXML:XML):int
{
    if (Number(aXML) < Number(bXML)) return 1;
    if (Number(aXML) == Number(bXML)) return 0;
    return -1;
}

function generateList(val:XML, index:int, all:Array):void
{
    if (!resultList) resultList = XMLList(val);
    else resultList += val;
}

2. You need it to fit the input parameters of the functions you cannot change.

var array:Array = [1, 2, 3];
var list:XMLList = <a>4</a> + <a>5</a>;
var result:Array = [];
list.(result.push(int(text())));
array = array.concat(result);
trace(array);

Q: How do I parse XML, that has names containing ":" (colons)?
A: Colon divides the qualified XML name into 2 parts, first is the namespace prefix, last is the local name.
Example

namespace foo = "bar";
var ns:Namespace = new Namespace("not-bar");
var xml:XML = 
<abc:def xmlns:abc="bar" 
        xmlns:ghi="not-bar" 
        ghi:someAttribute="attribute value">
        <abc:foo ghi:someAttribute="value of attribute"/>
</abc:def>;
trace(xml.ns::["@someAttribute"]);
trace(xml.foo::*.ns::["@someAttribute"]);

Q: How do I strip all namespaces from the XML?
A: Regretfully there's no way to do this using either AS XML API or E4X. Here's some string processing that accomplishes the same task. If you have a better suggestion on how to do this - please correct me:
Example

var xml:XML = 
<foo:node xmlns="bar" xmlns:foo="foo">
    <childNode foo:bar="foo:bar"/>
    <a>foo:bar</a>
    <foo:childNode bar="foo foo:bar"/>
</foo:node>;
var xmlSource:String = xml.toXMLString();
xmlSource = xmlSource.replace(/<[^!?]?[^>]+?>/g, removeNamspaces);
xml = XML(xmlSource);
function removeNamspaces(...rest):String
{
    rest[0] = rest[0].replace(/xmlns[^"]+\"[^"]+\"/g, "");
    var attrs:Array = rest[0].match(/\"[^"]*\"/g);
    rest[0] = rest[0].replace(/\"[^"]*\"/g, "%attribute value%");
    rest[0] = rest[0].replace(/(<\/?|\s)\w+\:/g, "$1");
    while (rest[0].indexOf("%attribute value%") > 0)
    {
        rest[0] = rest[0].replace("%attribute value%", attrs.shift());
    }
    return rest[0];
}
trace(xml.toXMLString()); 

Q: How do I parse XML, that has names containing symbols that break E4X statements?
(Eg. XAML, hyphenated node names etc).
Example

var xml:XML = 
<node>
    <XAML.Style.Node>
        <this-is-also-valid-xml>
            foo
        </this-is-also-valid-xml>
    </XAML.Style.Node>
</node>;
xml["XAML.Style.Node"]["this-is-also-valid-xml"].(trace(text()));

Q: How do I loop through all the nodes recursively?
Example

var xml:XML =
<node>
    <node>
        <node>
            <node>
                <node/>
            </node>
        </node>
    </node>
    <node>
        <node/>
        <node/>
    </node>
</node>;

function lookupRecursive(node:XML, level:int = 0):void
{
    node.@nestingLevel = level++;
    node.*.(lookupRecursive(valueOf(), level));
}

Q: How do I map all nodes using unique ID for every node?
Example

var xml:XML =
<node>
    <node>
        <node>
            <node>
                <node/>
            </node>
        </node>
    </node>
    <node>
        <node/>
        <node/>
    </node>
</node>;
var mapIndex:int;

function mapXML(xml:XML):void
{
    xml.@mapIndex = ++mapIndex;
}

Q: How do I generate XML dynamically?
Example

var xml:XML = <node/>;
xml.addSingleNode = <foo/>;
xml.addTextNode = "bar";
xml.appednList = (<firstListNode/> + <secondListNode/>);
xml.appendDynamicNode = <node>{Math.random()}</node>;
xml.appendChild(<childNode/>);
xml.prependChild(<firstChild/>);
xml.cdata = <![CDATA[ CData content ]]>;
xml.firstChild.setChildren("some text");
xml.replace(xml.*.length(), "some more text");

trace(xml.toXMLString());

Continued:

[Cota]

You should turn this into an article as well.

[CyanBlue]

Totally agreed... Very nice, wvxvw...

[Mazoonist]

Cool!
I have a question, and not to clutter up your spiffy new thread, but...

How useful is inline XML? I mean, I can see the advantage of loading an external XML file: You can always edit the XML and never again touch the flash application. And I know the inline XML is a new feature of AS3, but what could possibly be the advantage of keeping the XML inline and in the flash file(s)? Thanks.

I agree you should do an article on this. Also one on regular expressions, which I have noticed you are good at.

[fx.barrett]

Originally Posted by Mazoonist

How useful is inline XML?

Honestly, I never use inline XML in my projects because I don't see any point in doing so... The only time I write inline XML is when I want to help someone out with something and I'm too lazy to write an XML file and load it dynamically... Other than that, I really see no point in ever using inline XML.

Check out this link: http://www.senocular.com/flash/tutor...ashcs3/?page=4

[Cota]

I think the inline XML for this is for example purposes.

[Mazoonist]

Hey, Cota. Right. I knew that, it just served to remind me.

[wvxvw]

As for the inline XML, I use it sometimes for layouting purposes. Say, you have a static layout which uses components with dataproviders. Imagine typical HTML survey, that uses lots of comboboxes with predefined values which aren't likely to change ever, eg. the list of countries / languages / hours of the day etc.
The advantage of doing so:
faster initialization
less traffic (SWF will zip the XML inside it, while loaded XML is likely to be 50% bigger than zipped, also you don't need to send another request to the server).

Also, sometimes I need to have a default XML in place where there may be the loaded later XML. I.e. imagine this: you're trying to fetch user info from the Facebook account. But user didn't fill in all the entries. So, I'd rather take the XML with the default values and replace only the entries that are filled. Thus I won't need to rebuild all the XML anew. I.e. say, there's the username and avatar nodes. User may not supply the avatar picture, but, I need the default avatar picture anyway. So, I process the default XML, build the UI with the default values, then after I load the XML from Facebook, I loop through it to see if the avatar node isn't empty, if so - replace the node in my schema and reload the picture, if not - leave it with the default value.

Sorry, it's taking somewhat more time then I originally though, but I'll try to post the continuation today in the evening

[wvxvw]

Q: How do I generate UI elements depending on the values from XML?
A: There're lots of ways you can do it. This example shows how to load number of images dynamically based on their URL defined in XML:
For creating symbols from the library rather than loading them see manual on flash.utils.getDefinitionByName()
Example

var images:XML =
<images>
    <image src="http://www.actionscript.org/forums/images/smilies/tongue.gif">
        <hover>
            <![CDATA[Hovering over <b>Toungue</b> smiley]]>
        </hover>
        <click>
            <![CDATA[<b>Toungue</b> smiley selected]]>
        </click>
    </image>
    <image src="http://www.actionscript.org/forums/images/smilies/wink.gif">
        <hover>
            <![CDATA[Hovering over <b>Wink</b> smiley]]>
        </hover>
        <click>
            <![CDATA[<b>Wink</b> smiley selected]]>
        </click>
    </image>
    <image src="http://www.actionscript.org/forums/images/smilies/mad.gif">
        <hover>
            <![CDATA[Hovering over <b>Mad</b> smiley]]>
        </hover>
        <click>
            <![CDATA[<b>Mad</b> smiley selected]]>
        </click>
    </image>
    <image src="http://www.actionscript.org/forums/images/smilies/redface.gif">
        <hover>
            <![CDATA[Hovering over <b>Red face</b> smiley]]>
        </hover>
        <click>
            <![CDATA[<b>Red face</b> smiley selected]]>
        </click>
    </image>
    <image src="http://www.actionscript.org/forums/images/smilies/frown.gif">
        <hover>
            <![CDATA[Hovering over <b>Frown</b> smiley]]>
        </hover>
        <click>
            <![CDATA[<b>Frown</b> smiley selected]]>
        </click>
    </image>
</images>;

var loaders:Array = [];
var isUserSelection:Boolean;
var field:TextField = new TextField();
field.width = 180;
field.height = 20;
field.border = true;
field.addEventListener(MouseEvent.CLICK, textClickHandler);
addChild(field);

function loadNextSmiley(event:Event = null):void
{
    var loader:Loader;
    var sprite:Sprite;
    if (event)
    {
        loader = (event.target as LoaderInfo).loader;
        loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loadNextSmiley);
        sprite = new Sprite();
        sprite.x = (loaders.length - 1) * 40;
        sprite.y = 30;
        sprite.buttonMode = true;
        sprite.addChild(loader);
        addChild(sprite);
    }
    if (loaders.length < images.image.length())
    {
        loader = new Loader();
        loaders.push(loader);
        loader.addEventListener(MouseEvent.CLICK, clickHandler);
        loader.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
        loader.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadNextSmiley);
        loader.load(new URLRequest(images.image.@src[loaders.length - 1].toString()));
    }
}

function clickHandler(event:MouseEvent):void
{
    field.htmlText = images.image.click[loaders.indexOf(event.target)];
    isUserSelection = true;
}

function rollOverHandler(event:MouseEvent):void
{
    field.htmlText = images.image.hover[loaders.indexOf(event.target)];
}

function rollOutHandler(event:MouseEvent):void
{
    if (isUserSelection) return;
    field.htmlText = "";
}

function textClickHandler(event:MouseEvent):void
{
    isUserSelection = false;
    field.htmlText = "";
}

loadNextSmiley();

Q: How do I convert values from XML to data types other then XML or String?
This is only an example, you may extend it at will.
Example

var xml:XML =
<xml>
    <Number>-1.2345</Number>
    <int base="16">0xABCDEF</int>
    <Boolean>0</Boolean>
    <Array separator=",">0,1,2,3</Array>
    <Date><![CDATA[Mon Feb 2 23:11:19 GMT+0200 2009]]></Date>
    <RegExp><![CDATA[/\d{1,3}/ig]]></RegExp>
    <Class>flash.display.MovieClip</Class>
</xml>;

function constructObject(objXML:XML):Object
{
    switch (String(objXML.name()))
    {
        case "Number":
            return parseFloat(objXML);
            break;
        case "int":
            return parseInt(objXML, int(objXML.@base));
            break;
        case "Boolean":
            return Boolean(int(objXML));
            break;
        case "Array":
            return String(objXML).split(objXML.@separator);
            break;
        case "Date":
            return new Date(String(objXML));
            break;
        case "RegExp":
            var source:String = String(objXML).slice(0, String(objXML).lastIndexOf("/"));
            var options:String = String(objXML).substr(String(objXML).lastIndexOf("/") + 1);
            return new RegExp(source, options);
            break;
        case "Class":
            return getDefinitionByName(objXML);
            break;
    }
    return null;
}

xml.*.(trace(getQualifiedClassName(constructObject(valueOf())),
                                        "\n-------------------\n",
                                        constructObject(valueOf()),
                                        "\n-------------------"));

Q: How do I sort XML nodes on dynamically defined criteria?
Also keep in mind that usually you'd like to have a more complex condition for sorting. And passing arguments via defining them on the function you use for sorting will not be usually what you want to do.
Example

var xml:XML = 
<node>
    <node id="6"/>
    <node id="3"/>
    <node id="1"/>
    <node id="4"/>
    <node id="2"/>
    <node id="5"/>
    <node id="1"/>
</node>;

function sortList(list:XMLList, attribute:String):XMLList
{
    var temp:Array = [];
    list.(temp.push(valueOf()));
    Object(sortOnID).property = attribute;
    temp.sort(sortOnID);
    list = XMLList(temp.shift());
    while (temp.length) list += temp.shift();
    return list;
}

var sortOnID:Function = function(aXML:XML, bXML:XML):int
{
    var prop:String = arguments.callee.property;
    var aint:int = parseInt(aXML.@[prop], 10);
    var bint:int = parseInt(bXML.@[prop], 10);
    if (aint > bint) return 1;
    if (aint == bint) return 0;
    return -1;
}
trace(sortList(xml.*, "id"));

Q: How do I work with HTML formatted text in XML (HTML entities)?
Example

var xml:XML = <node/>;
// NOTE: Flash will not produce valid XML if 
// you try to assign XML-formatted string to attribute
// eg: xml.@attr = <html><br/></html>.toXMLString();
// will result in:
// attr="&lt;html>&#xA;  &lt;br/>&#xA;&lt;/html>"
xml.@attr = encodeURI(<html><br/></html>);
trace(xml.toXMLString());
trace("----- xml.@attr -----");
trace(unescape(xml.@attr));
// This is the way to get the node text
// encoded using HTML entities such as &lt; and &gt;
// otherwise, if you try setting the content of anode
// to the XML-formatted string it'll be converted to XML
xml.foo = <html><br/></html>.toXMLString();
xml.replace("foo", xml.foo.text());
// Another, more common way is to append this
// sort of texts using CDATA
xml.appendChild(<![CDATA[<html><br/></html>]]>);
trace("----- xml.toXMLString() -----");
trace(xml.toXMLString());

Q: How do I combine nodes that share common values?
Example

var xml:XML =
<videos>
    <video>
        <title>video1</title>
        <thumb>file1.jpg</thumb>
        <group>group1</group>
    </video>
    <video>
        <title>video2</title>
        <thumb>file2.jpg</thumb>
        <group>group2</group>
    </video>
    <video>
        <title>video3</title>
        <thumb>file3.jpg</thumb>
        <group>group2</group>
    </video>
    <video>
        <title>video4</title>
        <thumb>file4.jpg</thumb>
        <group>group1</group>
    </video>
</videos>;

var result:XML = <videos/>;
xml.video.(checkDuplicate(copy()));

function checkDuplicate(node:XML):void
{
    if (new RegExp(node.group, 
            "g").exec(result.video.group.text()))
    {
        result.video.(group.text() == 
            node.group).replace(0, node.*.(name() != "group"));
    }
    else
    {
        result.appendChild(node);
    }
}
trace(result.toXMLString());

Q: How do I remove repetitive nodes?
Example

var xml:XML =
<node>
    <not-unique-node/>
    <unique-node/>
    <not-unique-node/>
    <not-unique-node>foo</not-unique-node>
</node>;

// Remove every node with not unique name
xml.*.(parent()[name()].length() > 1 ? parent().replace(childIndex(), "") : "");
xml.normalize();
trace(xml.toXMLString());

// Remove only completely identical nodes
xml =
<node>
    <not-unique-node/>
    <unique-node/>
    <not-unique-node/>
    <not-unique-node>foo</not-unique-node>
</node>;
var array:Array = [];
xml.*.(array.push(toXMLString()));
array.map(findDuplicate);
function findDuplicate(node:String, index:int, all:Array):void
{
    if (all.indexOf(node) != all.lastIndexOf(node))
    {
        all.splice(index, 1);
    }
}
xml.setChildren(XMLList(array.join("")));
trace(xml.toXMLString());

Example #2

var xml:XML =
<data>
    <node id="foo"/>
    <node id="bar"/>
    <node id="foo"/>
    <node id="foo"/>
    <node id="foo"/>
    <node id="blah"/>
    <node id="foo"/>
</data>;
var hash:Object = {};
var list:XMLList = xml.*.(hash[toXMLString()] == 
                    undefined ? hash[toXMLString()] = 
                    valueOf() : false);
trace(list.toXMLString());

Q: How do I extract a shallow copy of the node (without child nodes)?
Example

var xml:XML = 
<node>
    <foo bar="foo">
        <bar/>
    </foo>
</node>;

var theCopy:XML = shallowCopy(xml.foo[0]);
function shallowCopy(childXML:XML):XML
{
    var copy:XML = childXML.copy();
    copy.setChildren("");
    // or
    // copy.replace("*", "");
    return copy.normalize();
}
trace(theCopy.toXMLString());

[EndlessLine]

Thumbs up, I love using E4X....I just have to look up information exactly like this because I can never remember the syntax. Thanks a ton!