ECMAscript for XML

The educational technology and digital learning wiki
Jump to navigation Jump to search

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

Draft

ECMAscript for XML (ak E4X) is an extension to ECMAscript.

It is available in

Using E4X is considerably simpler than using the DOM. Maybe some day we will be back to the elegance of languages like LISP instead of fighting against obscure C/Java syntax. But for now there are two problems with E4X: (1) It can't read the DOM, in otherwords you only can manipulate XML as (external) data. (2) There seem to be some inconsistencies that developers complain about.


Usage patterns

Creating an E4X XML object

(1) Using the XML literal syntax

The easiest way is to create a new variable and just create the XML structure like this. In ECMAScript 4 (e.g. ActionScript 3) you should define the type of the variable.

var instructions:XML  = <stepbystep>
  <doctitle></doctitle>
  <steps>
    <title></title>
  </steps>
 </stepbystep>;

Don't forget the ";" at the end since this instruction extends over several lines.

(1b) In JavaScript 1.6 (ECMAScript 3) you can't define types and you simply use:

 var instructions  = <stepbystep> ....

This the same principle as creating an array or an object like this:

 var arr = [item1,item2,item3];
 var obj = {a:"item 1",b:"item 2",c:"item 3"}
Using the XML constructor

(2) You also can create an XML E4X object from a string with the new XML() constructor.

var instruction_string = "<stepbystep>

 <doctitle></doctitle>
 <steps>
   <title></title>
 </steps>
</stepbystep>";

var instruction2:XML = new XML(instruction_string);

(3) Dynamic values Using the XML literal syntax is very practical when you want to create markup dynamically.

Variables and expressions can be used to create XML contents by simply wrapping them with braces ({}). Note: To create attribute values, omit the quotation marks (as in the example below)!

var URL = "http://edutechwiki.unige.ch/en/ECMAscript_for_XML";
var URL_text = "ECMAscript for XML";
var A   = <a href={URL}>{URL_text}</a>;

The value of A is:

 <a href="http://edutechwiki.unige.ch/en/ECMAscript_for_XML">ECMAscript for XML</a>

XML lists

XML lists are the other important datastructure in E4X. Lists are needed for example to hold results of queries (like NodeLists in the DOM model).

Here is a little example of an XML list:

    <step>
      <title>step 1</title>
    </step>
    <step>
      <title>step 2</title>
    </step>
    <step>
      <title>step 3</title>
    </step>


Accessing elements and attributes

Example XML code

We will use this XML fragment in the examples below.

var instructions:XML =
 <stepbystep>   
  <doctitle>Sample document</doctitle>
  <info>
    <para>See <a href="http://edutechwiki.unige.ch/en/ECMAscript_for_XML">ECMAscript for XML</a></para>
  </info>
  <steps>
    <title>List of steps</title>
    <step>
      <title>step 1</title>
    </step>
    <step>
      <title>step 2</title>
    </step>
    <step>
      <title>step 3</title>
      <para>That was easy !</para>
    </step>
  </steps>
 </stepbystep>;


Again, there is a similarity between E4X objects, arrays, and traditional Object.

(1) Getting en element with the "." operator

To access an element you simply can use an expression like a.b.c to walk down the tree. The result is either an XML fragment or an XMLList depending on whether there is only one child or several children.

  • Extracting a list of elements:
 var step_list = instructions.steps.step;
Result, i.e. step_list is now:
 <step> <title>step 1</title> </step>
 <step> <title>step 2</title></step>
 <step> <title>step 3</title>  <para>That was easy !</para></step>
(2) Extracting precise elements with the [] operator
  • Extracting element 0 of element 2
 var para = instructions.steps.step[2].para[0];
Result, i.e. para is:
 <para>That was easy !</para>
(3) Extracting descendants with the ".." operator
  • To extract descendants use the
 var grandchild = instructions..para;
Result, grandchild is:
 <para> See <a href="http://edutechwiki.unige.ch/en/ECMAscript_for_XML">ECMAscript for XML</a>
 </para><para>That was easy !</para>
(4) Getting en attribute with the "@" operator
 var attr = instructions..a.@href;
Result, attr is:
 http://edutechwiki.unige.ch/en/ECMAscript_for_XML

About namespaces

E4X can handle namespaces: E.g. to extract an xlink:href attribute in the following kind of fragment: xml = <STORY>

       <INFOS>
   	<a xmlns:xlink="http://www.w3.org/1999/xlink"

xlink:href="http://edutechwiki.unige.ch/en/ECMAscript_for_XML">ECMAscript for XML</a> </INFOS>

   </STORY>;

You will have to define a Namespace object

 var NS = new Namespace("http://www.w3.org/1999/xlink");

and then use the variable as prefix

 @NS::href;
function show_URL() {
      var NS = new Namespace("http://www.w3.org/1999/xlink");
      var URL = xml..a;
      var link = URL.@NS::href;
      alert ("URL (content of the 'a' tag)=" + URL + "\n" + "NameSpace=" + NS + "\nxlink:href=" + link);
      }

List of methods

XML Objects

addNamespace(namespace)
name()
appendChild(child)
namespace([prefix])
attribute(attributeName)
namespaceDeclarations()
attributes()
nodeKind()
child(propertyName)
normalize()
childIndex()
parent()
children()
processingInstructions([name])
comments()
prependChild(value)
contains(value)
removeNamespace(namespace)
copy()
replace(propertyName, value)
descendants([name])
setChildren(value)
elements([name])
setLocalName(name)
hasComplexContent()
setName(name)
hasSimpleContent()
setNamespace(ns)
inScopeNamespaces()
text()
insertChildAfter(child1, child2)
toString()
insertChildBefore(child1, child2)
toXMLString()
length()
valueOf()
localName()

XML List objects

attribute(attributeName)
attributes()
child(propertyName)
normalize()
parent()
children()
processingInstructions([name])
comments()
contains(value)
copy()
descendants([name])
elements([name])
hasComplexContent()
hasSimpleContent()
text()
toString()
toXMLString()
length()
valueOf()


Examples used

  • Story (look at the source of this file)

Links

Overviews

Introductions and tutorials

JavaScript
  • E4X by Mark. Useful as short manual !
Flash/ActionScript/Flex
  • E4X (Adobe, Flex, Getting Started)
Php
Namespaces
Ajax
  • Fremantle, Paul and Anthony Elder (1005). AJAX and scripting Web services with E4X, Part 1, IBM Works, HTML

Standard and Manuals