Editing TEI XML in Adobe Flex

March 4, 2009


We’ve moved to the next step of our work with the TEI XML document. We are now editing XML on the client side. Flex gives you database functionality on the client side. However, the big trick is to break relational database protocol. In upcoming posts, you’ll learn how to turn your Flex turtle into a supersonic jet

But for now, let’s look at changing XML on the client side. Click the image below to see the application.

Editing XML on the Client Side

Editing XML on the Client Side



Previous TEI Post #2

Previous TEI Post #1



In building a flat file database there are a number of choices in Flex. You can send data to a server page one piece at a time (like a journal-blog) or all at once (like a word document or taking a quiz). In the TEI case , we’ve decided to send everything up at once,as if it were a word document.

With a few PHP tricks you can get your flat-file to reflect the data back to you as if it’s a real time database, but more on that later…

Editing XML in Flex

Editing XML on the client side in Flex is pretty easy. There are a number of stock commands for editing XML in Flex, and with e4x you just use dot syntax to get to the nodes you want to edit. Here are the commands needed:

  • appendChild(child) – adds the specified child node at the end of the child nodes collection of the identified code.
  • copy () – makes a copy of an existing node
  • insertChildBefore(child1, child2) – inserts a new child node after the identified child node
  • insertChildBefore(child1, child2) – inserts a new child node before the specified child node
  • prependChild(value) – adds the specified child node at the beginning of the child nodes of the identified node
  • replace(propertyName, value) – replaces specified property, perhaps an element or attribute, with provided value
  • setChildren(value) – replaces children of an XML object with specified content

For this example you only need one of these: setChildren. You use setChildren to completely replace the node you are working on. Here are the steps:

Step 1: Create a button for each TEI category of interest: title, edition, publication, series, source, encoding, profile, revision, poem, …

Step 2: Use a dot syntax function to bring each area into an editing screen (including its tags). Below we show the case for title:

private function editTitleStatement():void{



And this is cool … the dot snytax allows you to refer directly to the node names to grab data from!

Step 3: Create a switch case button variable that indicates which button you are clicking on (title example is used below):


This very simple but useful variable keeps track of what you are editing.

Step 4 : Create a “Make XML Change Local” button which sends your switch case variable to a makeXMLChange function. This function selects the appropriate child to edit:

private function makeXMLChange(mySelect:String):void{


var titleStatement:String = output_txt.text;

case “title”:

if(output_txt.text.length > 0) {

case “edition”:

if(output_txt.text.length > 0) {




As can shown above, the setChildren method replaces your node with the xml content of your editing window (in this case named titleStatement).

It’s that easy

And that’s all there is to it. You are now editing XML on the Client side. In the next post, your learn how to send that edited XML to your server.

To see the entire code, download the source above or click the more button below:

Read the rest of this entry »