Creating XML data - E4X in ActionScript 3

Actionscript Course

XML (Extensible Markup Language) is a special format for structuring and storing data.
It is similar to HTML in that it uses tags to mark up content. XML tags are used to organize data in a predictable hierarchy. But XML tags (also called elements) are not predefined. You must define your own tags.

Here's a simple syntax of a code in the XML format:

<?xml version="1.0"?>
<base>
  <tag attribute="value">
    <tag_in attribute="value">Data stored</tag_in>
  </tag>
</base>

- If you don't know what the XML documents are, study the tutorial from the page XML Documents.

The XML format is used in general to store data, such as URLs of images and web pages, adresses and names of audio /video files and other.
The XML content can be used/ modified in ActionScript with functions specific E4X, which belongs to the XML and XMLList classes.
Data in the XML format can be used in ActionScript by loading them from an external file or created directly in the script.

Creating XML data with E4X

The name E4X is a nickname used in ActionScript for XML in the ECMAScript standard. It's the same XML access standard that's used in JavaScript 2.0.
To create XML data in ActionScript code via E4X, we have two general options:
    1. Write our XML data in literal form, just like a string, in a XML instance.
    2. Create a new XML instance, and then add each element programmatically, by using the dot (.) operator, or with XML, XMLList methods.

• As a general rule, the XML structure must be added in an instance of the XML class.
    - An XML object represents a portion of simple XML data such as an element, text node, attribute, comments.
    - An XMLList is a numbered set, very much like an array, of XML objects..

1) Let's take a simple example. We create a XML fragment with an XML literal.

// The XML instance with the complete XML data
var pics:XML = <imglist>
    <image id="1">
      <url>dir/img1.jpg</url>
      <title>Title img1</title>
    </image>
  </imglist>;

trace(pics);        // Displays in Output the XML structure

- This code creates a XML data structure, in the "pics" variable, which stores the adress and title of an image. "trace(pics)" displays in Output this structure.
The line breaks and quotation marks in the XML literal are perfectly normal. ActionScript knows they are part of the XML data, and interprets them as such.

• Data within an XML literal can also be added through variables, so that element names, attribute names, text content, etc., can be generated dynamically and easier to modify. These variables must be enclosed between curly braces {}.
See the following example, which creates the same XML data as the example above.

// Variables with data that must be added in XML
var img_id:int = 1;
var img_url:String = 'dir/img1.jpg';
var img_title:String = 'Title img1';

// XML instance with complete XML data
var pics:XML = <imglist>
    <image id={img_id}>
      <url>{img_url}</url>
      <title>{img_title}</title>
    </image>
  </imglist>;

trace(pics);        // Displays in Output the XML structure

2) The following code creates the same XML format, but dynamically specifies each element (with the dot (.) operator):

// The XML instance with the root tag
var pics:XML = <imglist/>;        // you can also use:  XML(<imglist/>);
pics.image.@id = 1;         // Creates the tag <image>, includes an "id" attribute with the value of 1
pics.image.url = 'dir/img1.jpg';     // Add in the <image> element a tag <url>
pics.image.title = 'Title img1';     // Add in the <image> element a tag <title>

trace(pics);

- This code creates and returns in Output the same XML structure as the one from the first example.
Notice the way to create each element, the logic is pretty simple:
    - The base tag (named root) is created when the XML instance is declared, with the form: var var_name:XML = <tagName/>
    - The other elements are created by adding them in the XML instance, in an hierarchical form, separated by the dot (.) operator.
    - The attribute is added after the tag in which it must be included, but with a character "@" before it (to be recognized that it is an atribute element).

• Another way to add elements in the XML structure is by using the following methods of the XML, XMLList classes:

• appendChild(childObj) - Appends the "childObj" to the end of the XML object's properties.
• insertChildAfter(child1, child2) - Inserts the "child2" after the "child1" in an XML object and returns the resulting object.
• insertChildBefore(child1, child2) - Inserts the "child2" before the "child1" in an XML object and returns the resulting object
• prependChild(childObj) - add "childObj" to the beginning of an XML object, before any existing elements for that object

- These methods are efficient when you want to add data before or after other existing data.

Here's the same XML format from the examples above, this time created with XML methods.

// XML instance with the root tag
var pics:XML = <imglist/>;

// Add each element
// First the tag <image>, then within it: <url> and <title>
pics.appendChild(<image id="1"></image>);
pics.image.prependChild(<url>dir/img1.jpg</url>);
pics.image.insertChildAfter(pics.image.url, <title>Title img1</title>);

trace(pics);

To download the FLA file with the examples in this lesson, click: Creating XML data with E4X.

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net