Using XML to Create Better, More Responsive Web Pages

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

XML is short for Extensible Markup Language. It is a highly structured markup language that is designed to be both human and machine-readable. But XML is not a language in the way that HTML is a language. XML has no tags like <p>.

Instead, XML allows the coder to create any tags at all. And, more important, it allows those tags to be related to each other. So XML allows you to store data in a powerful way. But it doesn’t provide any information on what ought to be done with that data. That’s where XML based languages come in — things like: XHTML, RSS, and SOAP. It is also a common way that programs like word processors and spreadsheets can save data in an application independent way.

Using XML

A Brief History of Markup Languages

Markup languages started as a way to combine the best elements of text files (readability of data) and binary files (precise description of data). So in the late 1980s, the Standard Generalized Markup Language (SGML) was created. It was a text-based language that allowed data and its display to be precisely described. HTML was a very simple system that was based on SGML.

But when HTML became hugely popular as the basis of the world wide web, it became apparent that something better was needed. HTML was limited and not well formatted so that browsers had to parse all kinds of code. For example, closing tags were often omitted and tag attributes were not placed inside quotation marks. Remember code like this?


<ul type=square>
<li>Bugs Bunny
<li>Daffy Duck
<li>Foghorn Leghorn
</ul>

Enter XML

Poorly structured HTML couldn’t be replaced with SGML, because it is ridiculously complicated. It would have been something like replacing HTML with PostScript. So in the mid-1990s, work began on XML. It is a subset of SGML that allows coders to describe data and its relationships. And with the use of style sheets, it can be used to format and transmit data in almost any way imaginable. But unlike SGML, writing parsing programs for it is fairly simple. And in early 1998, the W3C released the first XML standard.

Why Use XML?

This may all sounds kind of abstract. After all, regardless of how powerful XML is at storing data, how does a web browser display anything but a list of data? But that’s the point. The big problem with HTML in the early days was that data and layout information was scattered throughout a document. Remember when any kind of page layout had to be done with tables, making HTML code almost unreadable? Today, we use style sheets to separate the layout code from the information presented. Thus, once the layout is completed, it is a simple matter to maintain and add data.

But XML is not a replacement for HTML. In the most general system, XML is a kind of human readable database. But it can be turned into an HTML webpage (And a whole lot more!) by using another took, the Extensible Stylesheet Language Transformations (or XSLT). It converts XML documents into other XML documents — for example: XHTML documents. But even more interestingly, XML is used for things like RSS and SOAP.

A Basic Example

Let’s start with a very basic example of how data is entered into an XML file.


<?xml version="1.0" ?>
<cartoon_characters>
  <character>
    <name>Bullwinkle</name>
    <intelligence>2</intelligence>
    <luck>10</luck>
  </character>
  <character>
    <name>Boris Badenov</name>
    <intelligence>4</intelligence>
    <luck>0</luck>
  </character>
</cartoon_characters>

Notice that none of these tags are defined by XML. They are defined by the coder. What XML does know (and this is critical) is that character is a kind of cartoon_characters and that each character has characteristics name, intelligence, and luck. Other characteristics (like species) as well as more characters (like Wrongway Peachfuzz) could be added and it wouldn’t affect any XML parser.

We can take this a step further by creating an XSL transformation file that will create an XHTML file that displays the characters names in an unordered list. First, we would have to add an extra line of code to the previous XML code, right after the first line that defines the file as XML. It would look like this:


<?xml version="1.0" ?>
<?xml-stylesheet type="text/xsl" href="bullwinkle.xsl"?>
<cartoon_characters>
.
.
.

Next, create an XSL file with the name “bullwinkle.xsl”:


<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" indent="yes" encoding="UTF-8"/>
<xsl:template match="/">
  <html>
    <head> <title>Rocky and Bullwinkle Show</title> </head>
    <body>
      <h1>Cartoon Characters</h1>
      <ul>
	<xsl:for-each select="cartoon_characters/character">
	  <li><xsl:value-of select="name"/></li>
        </xsl:for-each>
      </ul>
    </body>
  </html>
</xsl:template>
</xsl:stylesheet>

Then load the original XML file, and it will display just like an XHTML file.

You can experiment with these files to get a better idea of what’s going on. But what’s most important is that you can leave the XSL file alone, while you add more and more data to the XML file.

There’s More

XML is a huge subject. We’ve just dipped a toe into some very deep waters. Wikipedia lists roughly 200 XML languages. These include things like XHTML, of course. But they also include closely related XML tools like XML Encryption (for data encryption) and XML Signature (for digital signatures). But more than that, there are various important aspects to the language:

  • Namespaces: a way to allow different datasets to exist in a single XML file without naming conflicts.
  • Document Type Definitions: the dreaded DTD that website coders normally just copy and paste into their documents without understanding.
  • Schema: a way of structuring an XML document to limit how it is used.
  • Database: a non-SQL approach to database storage. There are a number different ones available.

Online Resources

There is an amazing amount of XML related material online. In fact, there is so much that it is overwhelming. As a result, we’ve tried to stick to just the core XML topics. But you will find links here that will answer just about any question you will ever have in your XML coding career.

Tutorials

Video Tutorials

  • XML Tutorial for Beginners: Portnov Computer School’s introduction to XLM.
  • XML with Java: a free online course consisting of 13 video lectures by David J Malan.
  • Computer Science E-75 Lecture 3: from the Harvard extension course “Building Dynamic Websites.” This lecture focuses on XML. In less than two hours, it provides everything you need to know to create your own XML based webpages. Note: it assumes knowledge of PHP.

Data Sources

Advanced Topics

Books

Given what a large subject XML is, it can be really helpful to have a book or two: to learn and for reference.

Learning XML

XML Reference

  • XML in a Nutshell by Harold and Means: a classic, but out of print and generally expensive. But you might be able to find a copy at a yard sale.
  • XML Pocket Reference by St Laurent and Fitzgerald: just what it says — a booklet you can keep in your shirt pocket for reference.
  • XML: The Complete Reference by Heather Williamson: an old thousand page reference; good to have around.

XML Coding Tools

  • Altova XMLSpy: a complete XML integrated development environment for Microsoft Windows. It’s fairly expensive, but for the professional developer, a good investment.
  • <oXygen/> XML Editor: more than an editor, it provides debugging, profiling, and other tools. It is Java-based and so will run on any platform. It is also expensive, although it has reasonably priced academic and personal licenses available.
  • Stylus Studio: a Microsoft Windows based XML development suite including editor and XSLT visual mapping tool. It is fairly expensive, but offers a reasonably priced home edition.
  • EditiX XML Edit: a reasonably priced editor, debugger, and so on. It also offers a free EditiX Lite Version.
  • Wikipedia’s List of XML Editors: there are lots of editors available from open source to proprietary to web based.

XML Validators

XML is a great tool in part because it is highly standardized. This means that it is picky. So it is critical that you make sure that your code is valid XML. Many of the tools that we’ve highlighted here contain their own XML validators. But there are plenty of free XML validators to help you with your coding projects.

  1. The W3C Markup Validation Service: a general tool that allows you to validate by URI, file upload, and direct input.
  2. W3 Schools XML Validator: an easy to use, online validator.
  3. XML Validation: a simple online validator that allows direct input or file upload.
  4. Code Beautify XML Validator: a simple validator that also formats your code so that it is easy to read.
  5. XML Check: a standalone Windows XML validator.
  6. XML Schema Validator: a validator for your XML and schema definition.

XML and the Document Object Model

Because of XML’s powerful uses by HTML, understanding how XML relates to the Document Object Model (DOM) is critical.

XML and HTML

The first time you heard of XML, you might have thought of XML as an alternative to Hypertext Markup Language (HTML). While we know XML can be used in that way, that’s pretty unusual. It’s greatest use is pulling data into an HTML document.

Let’s look at a conceptual example.


<!DOCTYPE html>
<html>
<div id="data"></div>
<script>
  function getXMLData() {
    /* insert JavaScript function to get data from an XML file */
  }
  document.getElementById("data").innerHTML = getXMLData();
</script>
</html>

Alright, so that code doesn’t actually do anything, but we can use it to explain how HTML and XML can be used to work together. In the code above, the HTML defines an empty div which will serve as a container for data in an XML file. Then, a JavaScript function is defined. The function is empty, but in practical application, this function would identify an XML file, pull data out of the file, and add HTML tags to the data so that it is rendered properly by the browser.

With a properly written function in place, when this bit of HTML was loaded the data div would not be empty but instead would contain the contents defined by the JavaScript function.

Are you starting to see the power of XML? With this arrangement, the data displayed on a webpage can be updated dynamically by updating the referenced XML file, much in the same way a database can be used to update the contents of a webpage.

What is the Document Object Model?

The Document Object Model (DOM) is the programming interface used to manipulate HTML and XML documents. When you use JavaScript, or another scripting language, to manipulate an element on a webpage what you’re actually doing is manipulating the DOM, not the HTML document itself.

The DOM is the virtual layer between the source documents used to build a web page and the scripting that modifies that webpage. Think of the DOM as the version of a webpage rendered by a browser and stored in the browser’s memory. The DOM is a dynamic representation of a web page that exists within a web browser and can be accessed and modified by scripting — most commonly JavaScript.

Conceptualizing the XML DOM

The contents of the XML DOM can be manipulated with scripting. However, we have to understand the relationships between XML DOM elements, called nodes, before we can do anything with them.

Let’s look at a simplified version of our earlier XML example code:


<?xml version="1.0" encoding="UTF-8"?>
<pets>
  <pet>
    <name>Max</name>
    <type>Dog</type>
    <birthday>July 7, 2014</birthday>
  </pet>
</pets>

The XML DOM is built of nodes. Every part of the XML DOM is a node.

  • Document node: The entire contents of the XML document represent the document node.
  • Root node: The first element in an XML document is called the root node. In this case, the root node is <pets>.
  • Parent and child nodes: The terms parent and child are used to describe the relationship between DOM elements and the elements nested within them. In our sample code, The <pets> element node is the parent of the <pet> node, and the <pet>node has three children: name, type, and birthday. Every node in an XML document, except for the root node, has exactly one parent node and may have any number of children nodes.
  • Sibling nodes: When two nodes are both the children of the same parent they are referred to as sibling nodes. In our example, name, type, and birthday are sibling nodes.
  • Text node: The text contained within a element is defined as a text node within the XML DOM. This is an important distinction. If we want to get at the text in a text node, we need to refer to it as the value of the text node, not the value of the child node. In other words, the path to the text “Max” looks like this: pets > pet > name > text node > value:”Max”

Manipulating the XML DOM

In general, you JavaScript is used to manipulate the XML DOM. JavaScript can be used to retrieve a variety of properties from the nodes in the XML DOM. Commonly accessed XML DOM properties include:

  • nodeValue: Gets the value contained within the node.
  • parentNode: References the parent node. If were were to apply this property to the name node in our sample XML, we would be referring to the pet node.
  • childNodes: References a node’s children. If applied to the pet node in our code above, this property would return the name, type, and birthday nodes.

JavaScript can be used to do more than just reference the properties of XML DOM nodes. Here are some of the most common JavaScript methods used to actively manipulate the XML DOM.

  • getElementsByTagName: You might recognize this method if you’ve ever used JavaScript to manipulate HTML elements. Drop in the name of any XML DOM element, such as “pet” or “name” from our example XML code, to access those elements.
  • appendChild: This method is used to add child nodes to a node.
  • removeChild: Remove a node from a parent node. Keep in mind that the data will remain in the original XML file, it’s just removed from the DOM built by the browser.

There are many additional XML DOM methods and properties. However, you really need to have a strong grasp of JavaScript, XML, and know how you plan to use XML data to get much further with this topic.

Resources

There seems to be an endless number of online tutorials, and some are much better than others. After looking at dozens of XML DOM tutorials, we think the following tutorials will get you up-to-speed the fastest.

If you prefer a learning format that offers a bit more structure than a tutorial, you might be interested in one of the following online courses that cover XML and the XML DOM.

XML has been around for a long time. As a result, many XML texts have been written over the years. Below are some modern XML titles that cover the XML DOM and are highly-rated by readers:

Serious HTML Coders Should Know XML

XML is a powerful and simple language for transporting data in a format that can be used in many different ways. The XML DOM is the model built by the browser to interact with and manipulate XML data. Once you understand how to work with the XML DOM you’ll be able to get, change, and style XML data for use in webpages and applications.

MSXML: Microsoft’s XML

Microsoft XML Core services (MSXML) is a set of Microsoft tools and services for the creation of XML-based applications using Microsoft development tools.

MSXML is actually a set of World Wide Web Consortium (W3C) compliant application programming interfaces (APIs), widely used by countless software developers.

Brief MSXML History

Over the years, MSXML has gone through numerous updates and releases, usually being released alongside other Microsoft products like Internet Explorer or Microsoft Office.

  • MSXML 1.0 was released in 1997 and shipped with Internet Explorer 4.0.
  • MSXML 2.0a was released in 1999 and shipped with Internet Explorer 5.0.
  • MSXML 2.5 was released in 2000 and shipped with Windows 2000, Internet Explorer 5.01, and MDAC 2.5.
  • MSXML 2.6 was released in 2000 and shipped with Microsoft SQL Server 2000 and MDAC 2.6.
  • MSXML 3.0 was released in 2001 and shipped with Windows XP, Internet Explorer 6.0, and MDAC 2.7.
  • MSXML 4.0 was released in 2001 as an independent software development kit (SDK).
  • MSXML 5.0 was released in 2003 and shipped with Microsoft Office 2003 and Office 2007.
  • MSXML 6.0 was released in 2005 and shipped with Microsoft SQL Server 2005, Visual Studio 2005, .NET Framework 3.0, Windows Vista, Windows 7, and Windows XP Service Pack 3.

MSXML versions 1.0, 2.0a, 2.5, 2.6, and 4.0 are obsolete and deprecated, while versions 3.0, 5.0 and 6.0 continue to be supported by Microsoft.

MSXML Features

MSXML is the native Windows API for XML-based applications, conforming to the XML 1.0 standard.

Some of the services provided by MSXML include the Document Object Model (DOM) — a library for accessing XML documents; the Simple API for XML (SAX) — a programmatic alternative to DOM processing; XMLHttpRequest and Server XMLHTTPRequest for implementing AJAX and RESTful applications; use of XPath 1.0 queries over DOM documents; XML transformations using XSLT 1.0; and support for the XSD 1.0 specification with the XmlSchemaCache.

All new applications should be written to comply with MSXML 6.0, the latest version of MSXML, or XmlLite, a lightweight XML parser for native code projects.

Using MSXML

MSXML services are programmatically exposed as Object Linking and Embedding (OLE) automation components, and can be used by developers using C, C++ native programming languages, or Jscript and VBScript active scripting languages.

Use of MSXML Component Object Model (COM) components is not recommended or supported if you are writing managed code targeting .NET Framework in C#, Visual Basic, managed C++ or any other managed programming language. MSXML uses specific threading modes and garbage collection routines that are not compatible with the .NET Framework. XML functionality should be implemented in .NET applications using classes from the System.Xml namespace or the LINQ to XML, both native to the .NET framework. Using MSXML in .NET applications through COM interoperability can result in unexpected problems that are difficult to debug.

MSXML is often used in processing XML in web applications, or as a standalone process using the Document Object Model (DOM). DOM and Simple API to XML (SAX2) can be utilized in any programming language that is capable of using ActiveX or COM objects.

Should I Use and Learn MSXML?

If your programming work revolves around applications using the .NET Framework, you do not need to worry about MSXML, since using it in .NET projects is not recommended.

On the other hand, if you work on native code or scripting programming language projects that interact with XML, you will probably be using MSXML or its lightweight alternative, XmlLite.

Many open-source alternatives to MSXML exist, for example NativeXML, but you must choose an alternative that will support your programming language.

MSXML Resources

If you work on programs that interact with XML, and those programs do not rely on the .NET Framework, you should take a look at the following resources on MSXML:

MSXML Books

Books that cover MSXML specifically are quite rare, in part due to the fact that there are ample MSXML resources available online. Also, many books about scripting language programming have chapters on MSXML. In some cases, these chapters are quite comprehensive and in-depth, while others merely offer a basic overview of MSXML.

Should You Invest Time in Learning MSXML?

While MSXML has not been deprecated, and is still in widespread use, its long-term relevance is up for debate. Development has slowed down to a crawl and MSXML’s time has obviously come and gone.

However, MSXML is still used in many projects, although the range of its potential applications is dwindling. For starters, it should not be used with .NET Framework. It’s not the only way of ensuring XML interaction, either. Various open-source alternatives are available, but dealing with each one of them was beyond the scope of this article.

In case you still want to master MSXML, or merely brush up your old skills, you might have a hard time finding fresh resources. A lot of MSXML resources, especially books and other print resources, are woefully outdated and cover deprecated versions of MSXML. This does not render them useless, but it does limit their usefulness and forces you to double-check much of what you read, just to make sure it applies to MSXML 6.0.

MSXML 6.0 was released more than a decade ago, and while Microsoft still supports it (technically), it’s obvious that the end of the road for MSXML is near.

Document Type Definition

A Document Type Definition (DTD) provides a way of defining the structure of SGML kinds of languages — most specifically XML.

XML

So you want to use XML to markup an email? You might use <email>, <message>, and <to>. Or, if you have are using XML to store details about a record collection, you might have tags like <album>, <artist>, <releasedate> and so forth.

But there’s a problem. How do you define a set of tags so that everyone uses (for example) <album> instead of <record>, or <to> instead of <toAddress>?

Document Type Definition

The solution is a DTD — a Document Type Definition.

A DTD is a document which specifies what elements an XML document may have. It includes information about which elements can be nested inside another, which elements are mandatory or optional, and what attributes can be included in an element.

The DTD language (itself a derivative of SGML) provides a way to specify this structure of element names and attributes. The resulting definition can be used to validate an XML document to make sure it conforms to the definition.

Why validate?

HTML documents are (usually) intended to be read by humans. The markup is primarily for semantic and presentational purposes, and is used by a web browser to render the document — but the final-user of HTML is almost always a person looking at a web page.

So, while validation of HTML is important and helpful, it is not strictly necessary. Browsers tend to be forgiving, and humans can figure out meaning even if the markup is a little off.

But XML is used to transmit data, not web pages. XML is usually consumed by another piece of software, not a human.

There usually isn’t room for ambiguity or mistakes. Additionally, it is possible for attackers to embed malicious code into XML, so applications that accept XML input can’t trust all the input they receive.

HTML is most often validated by its author, as a sort of “proof-reading” step in the publishing process. XML, on the other hand, is most often validated by the receiver. This is done to ensure security and avoid errors before an application actually does something with the XML data.

DTD vs. XSD

DTD was the first document definition format invented for XML. It has certain limitations, not the least of which being that a DTD itself is not XML. DTD grammar is somewhat difficult to parse, requiring a different toolset than XML parsing.

XSD — XML Schema Definition — is a later standard that improved on DTD in several ways. An XSD document is, itself, valid XML. XSD can specify data types for each element; for example, whether an element should contain a date and time, a number, a string, or another type of data.

For these reasons, XSD has become more popular for validating transactional XML — that is, XML that is generated, sent, and received as part of an API. XSDs, for example, are used in SOAP.

Since DTD is easier to create and read (by humans, that is), it remained popular in contexts where XML was used for publishing information.

However, this way of using XML has largely been outmoded with the rise of HTML5 and the increasing divergence of HTML and XML. Today, API developers looking for a lightweight alternative to XML+XSD are more likely to simply use JSON than they are to use XML and DTDs.

But, there are still plenty of DTDs in use. If you work on legacy web technology, especially data systems built in the late 90s, you will likely find yourself working with DTDs at some point. To help you find your way, we’ve put together the best DTD tutorials, resources, and tools we could find.

DTD Tutorials

  • Constructing a Document Type Definition (DTD) for XML is a well-presented overview of DTDs from New Mexico Institute of Mining and Technology.
  • DTD Tutorial from W3Schools provides a methodical introduction to the topic, and is a good place to start if you are just coming to this topic.
  • XML and DTDs (PDF) provides an explanation of the anatomy of an XML file, and then shows how DTDs define a specific XML document type. This is a good tutorial if you need to brush up on XML basics while learning about DTDs.
  • XML DTD — An Introduction to XML Document Type Definitions is a 7-part tutorial that walks readers through the creation of a DTD and validating XML documents against it.
  • The 10 Minute Guide to Reading an XML DTD is a brief overview on how to read and interpret an XML Document Type Definition, making no assumptions about how much you already know about XML or DTDs.
  • DTD Tutorial is a community-written resource from the EduTech Wiki.

Other DTD Learning Resources

DTD Tools

  • Online XML Validator lets you quickly validate an XML file against a DTD mentioned in the file itself.
  • Xmllint is a command-line tool for parsing and linting XML files. It can be used to quickly validate against a DTD.
  • DTDGenerator is a tool that produces a DTD document based on a given XML document.
  • DTD2Schema converts DTD files to XSD.
  • XML Tools by Platform is a comprehensive listing of XML tools for various languages and platforms. Most of these can be used to construct DTD files or to validate XML documents against DTDs.

DTD Conclusion

It may seem like DTDs aren’t used much anymore. In the world of XML, they’ve been superseded by XSD. And XML itself has largely been replaced with newer technology.

But many legacy and large enterprise systems continue to use XML and DTD. If you work with large enterprise systems, or develop using enterprise web tools like .NET, you should probably be familiar with DTD and related standards.

ECMAScript for XML

ECMAScript for XML, which is usually referred to as E4X, was designed to make XML data easier to work with.

While you may not be very familiar with ECMAScript you’ve certainly heard of it’s most popular implementation: JavaScript.

In effect, E4X is a bolt-on extension for JavaScript that adds native support for XML data much in the same way that JavaScript includes native support for JSON format data.

While E4X never enjoyed broad adoption and has been removed from all modern browsers, it is still used in some Flash other Adobe products.

What is E4X?

Right now you may be thinking to yourself: “But, JavaScript can be used to access XML data!” And if you had that thought, congratulations, you’re right! However, there’s a big difference between the way XML data is accessed with JavaScript and the way XML data is accessed with E4X.

Modern JavaScript can be used to traverse the XML DOM. This means that the XML data exists as a separate entity and JavaScript can be used to interact with that data.

However, the data itself always remains a separate entity — a resource used by a script — rather than becoming part of the script itself.

E4X, on the other hand, makes it possible to import or create XML data in JavaScript and treat it as a primitive data type. This means that the XML data is actually part of the script itself and can be manipulated much in the same way that other data types such as arrays, strings, and objects, can be manipulated.

In short, E4X makes working with XML data a much more flexible process and speeds up the parsing of data since it exists as a primitive data type rather than an external resource.

E4X sounds pretty great, right? If you use XML on a regular basis you might be wondering why E4X isn’t supported natively by every browser. To figure out what happened to E4X, let’s go to the tape.

History of E4X

E4X was originally developed at BEA Systems by Terry Lucas and John Schneider, and implemented for the first time in BEA WebLogic Platform 7.0 in 2002.

This actually predated the formal completion of the E4X specification, which was released more than two years later in 2004. Shortly thereafter, E4X was implemented by Firefox and support was also added to Adobe’s ActionScript 3.

Despite this early adoption, E4X implementation was uneven and inconsistent. Brendan Eich, creator of JavaScript and founder of Mozilla, has been quoted as saying that “E4X is crazyland”.

In addition, Mark S Miller, a research scientist at Google, observed that the Firefox implementation of E4X deviated “from the (official E4X) spec in ways that are not written down anywhere.”

Another factor that may have contributed to the lukewarm acceptance of E4X was the concurrent development of JSON.

JSON solved many of the same problems that E4X attempted to solve with XML, but JSON solved them without requiring a bolt-on ECMAScript extension and without the consistency issues that plagued E4X.

In other words, while E4X enjoyed early adoption by Firefox and Adobe, it was never consistently implemented and lost out to rivals such as JSON. As a result, browser support never expanded beyond Firefox.

Since E4X support was added to ActionScript 3, support for E4X had to be built into every Adobe application that implements ActionScript 3. As a result, E4X does live on in Adobe products.

Browser Support for E4X

While E4X was at one time supported by Firefox, support was deprecated in Firefox version 16 in October of 2012 and subsequently removed from Firefox in version 18 in January of 2013.

Today, E4X isn’t supported by any of the JavaScript engines behind leading browsers such as Safari (Nitro engine), Chrome (V8 engine), or Microsoft browsers Internet Explorer and Edge (both use Chakra).

However, as we mentioned, E4X is integrated into ActionScript 3, which is the Adobe Flash flavor of ECMAScript. As a result, JavaScript engines associated with Flash, such as Rhino and Tamarin, do support E4X.

However, neither of these engines is used by popular consumer web browsers. In other words, you might be able to use E4X is you’re writing a Flash application, but for general-purpose web programming, stick to standard JavaScript to traverse the XML DOM and skip the E4X extension.

Modern E4X Application

If you need to learn more about E4X, there’s a good chance it’s because you’re going to be using it for an Adobe Flash application. E4X’s most visible modern use occurs within the Adobe Flash ecosystem.

E4X is implemented in ActionScript 3 and supported by several modern Adobe products including Flash CS3, Adobe AIR, Adobe Flex, Adobe Acrobat, and Adobe Reader. However, non-Adobe implementation of E4X is virtually nonexistent.

E4X Resources

If you already know ActionScript or JavaScipt, learning how to manipulate XLM data with E4X won’t be hard. E4X is just a bolt-on component for the ECMAScript rendering engine. As a result, all you’ll need to do is learn the XML-specific functions and you’ll be ready to roll.

Most E4X resources are fairly dated. However, since development of E4X is not ongoing, these dated resources are still accurate and useful. We’ve tracked down some of the best E4X resources so that you can learn what you need to know to manipulate XML data with E4X and ActionScript.

E4X Conclusion

E4X was a good idea that was inconsistently implemented and beat out by competing technologies. However, it lives on in products that support ActionScript 3 and is supremely useful for creating and manipulating XML data with ECMAScript.

XUL

XUL or XML User Interface Language consists of tags that can be used to create rich GUIs for web or stand-alone applications. It is primarily used to develop extensions for the Mozilla web browser and does not require an internet connection to run.

XUL allows the user to specify and display multiple GUI elements including text boxes and images as well as handle various browser events. Initially, the library was developed by the Mozilla foundation to fill in “the gaps of the HTML language to build large web applications.” However, it will soon be replaced as the makers of Firefox have decided to focus their efforts in other areas.

Even still, XUL provides a great introduction on creating GUI elements using and XML type language. Check out the resources outlined for more information.

XUL Tutorials

The following tutorials are a great way to learn XUL. Use the examples presented and customize them for your own projects.

  • XUL Tutorial from the Mozilla Developer Network presents a comprehensive set of links that outline several language features. Developers visiting the site will see several topics covered including how to add buttons, create menus, and handle events.
  • XUL Tutorial with Examples covers various elements of the library with easy to understand examples. It is also possible to download a comprehensive set of source code files that can be readily used for your own web applications.
  • XUL: The Future of User-interfaces on the Web features an abstract and link to a presentation slides for an XUL tutorial given at the O’Reilly OpenSource Convention in 2005.
  • Introducing XUL features an overview of XUL and how it ties in with other web languages including CSS, JavaScript, and XML. The author also features a PHP script that incorporates XUL.
  • XULRunner Tutorial shows how to setup the XULRunner program which is used to run XUL applications. The page walks through XULRunner configuration followed by instructions on creating and running XUL code.
  • XUL Manager has a download link to the firefox extension which allows developers to “white-list” local and remote addresses in order for XUL applications to display and run properly.

XUL Video Tutorials

Developers should have the opportunity to visualize what they are learning. Here are some video tutorials on XUL that go through basic setup and some examples.

XUL Books

Besides reading and watching online tutorials, developers can read books written about XUL.

  • Programming Firefox: Building Rich Internet Applications with XUL (2007), by Kenneth Feldt, provides an introduction to XUL and includes many different code examples. Developers can use this book to learn how to create UI elements, handle events, and build graphical applications. The book also covers running XUL on additional platforms including Chrome.
  • ZK Developer’s Guide (2008), by Staeuble and Schumacher, demonstrates the ZK framework library and how it can be used in combination with XUL and AJAX to build web applications.
  • Essential XUL Programming (2001), by Bullard, Smith, and Daconta, presents an in depth resource on XUL. Developers reading this book will not only learn the basics, they will also learn how to use other languages such as JavaScript, CSS, and RDF in conjunction with XUL. The authors give step-by-step instructions on creating XUL applications and real world examples of XUL.
  • Introductory XUL (2015), by John Richardson, is another, more recent eBook that provides a resource for developers to quickly get started developing XUL applications. The book covers building stand-alone applications in conjunction with XULRunner, XPCOM, JavaScript, HTML, and CSS.

Alternative XUL Resources

Besides XUL, other libaries including XAML for WPF (Windows Presentation Foundation) and FXML for JavaFX offer similar functionality. It may be worthwhile to take a look at the following resources for a quick introduction to these libraries.

  • XAML Tutorial from TutorialsPoint presents the basic structure of XAML as well as various components that can be used to build responsive application GUIs including controls, layouts, and event handling. The tutorial also goes through environment setup and walks through the Visual Studio setup process complete with screenshots.
  • WPF Tutorial presents a series of tutorials on how to use the WPF library in conjunction with XAML to create custom controls and specify behavior. WPF is part of the .NET framework and allows developers to write applications using C# or VB.NET while specifying GUI elements through XAML.
  • FXML Tutorial from Oracle teaches developers how to use FXML to specify GUI elements including text boxes, buttons, and layouts. Developers will use the lessons learned in this tutorial to create a simple login screen.
  • JavaFX Tutorial covers many aspects of the JavaFX library that can help developers get an overview of features including specifying GUI elements and handling events.

Should I Learn XUL?

XUL provides developers the ability to specify GUI elements of web applications and browser extensions for the Firefox browser. It is often combined with JavaScript, CSS, and HTML code to create custom layouts and event-driven applications.

Though Mozilla has decided to focus on other areas, learning XUL is worth the effort. Many applications including for Windows and mobile phone apps use XML to specify GUI elements. Familiarizing yourself with XUL will make learning other libraries such as XAML much easier and faster.

Learning XUL will also help developers get used to the MVC (model view controller) method of building applications which separates the logic of the application from the layout or view. Instead of including GUI and logic elements in single-file, learning XUL will instill the discipline needed to help develop more robust applications.

Conclusion

XML itself is pretty straightforward. For an experienced XHTML coder, it can seem almost trivial. But there are so many related technologies and so much that can be done with it that you could spend the rest of your life doing nothing else. We’ve just scratched the surface here.

Other Interesting Stuff

We have more guides, tutorials, and infographics related to coding and development:

  • Microsoft Visual Basic / Visual Studio: this is our basic primer on Visual Studio with a focus on Visual Basic.
  • HTML for Beginners: this article will take you from the very star. But given it is book-length, there’s lots that experienced coders can learn.
  • C# Resources: as one of the most popular languages in the .NET firmament, C# is very helpful to know.

What Code Should You Learn?

Confused about what programming language you should learn to code in? Check out our infographic, What Code Should You Learn? It not only discusses different aspects of the languages, it answers important questions such as, “How much money will I make programming Java for a living?”

What Code Should You Learn?
What Code Should You Learn?

Text written by Frank Moraes with additional content by Jon Penland, Nermin Hajdarbegovic, Adam Michael Wood, and Brian Wu. Compiled and edited by Frank Moraes.

Frank Moraes

About Frank Moraes

Frank has worked in the tech industry since the early 1990s — as a writer, programmer, and manager. He’s an insatiable blogger and “Don Quixote” fanatic. In his spare time, Frank writes experimental plays — usually involving puppets like Grumpy Squirrel in his image.
Table of Contents＋－

Most Popular Blog Posts

Need Web Hosting?

If you’re in the market for a new web hosting provider, be sure to check out our user reviews, our A-Z hosting guide and our top three popular hosting picks:-

Comments

Thanks for your comment. It will show here once it has been approved.

Your email address will not be published. Required fields are marked *