Intro e4x Class Outline (Building a Data Driven Website)

Intro

Here’s the outline to the Intro e4x Class Outline (Building a Data Driven Website) held at NKU.

e4x means you can use dot syntax to grab data, or create (delete) tags and insert (remove) data. The beauty of using dot syntax is that you can refer to tags by their names-isn’t that cool, no more complex XML language.

1. Look at Applications

• Example data
• MD2 Viewer
• Basic TEI
• Saving TEI to the Web

2. What’s XML
3. Example 1
4. E4X Examples
5. Dot Syntax
6. Example 2
7. Importing XML into Flex
8. Example 3
9. Uploading your application to the Web
10. Example 4
11. Grabbing & Changing XML
12. What’s PHP
Resource Files
A. Chapter 4 & 8
B. Quake 2 Application
C. XML/PHP applications

Parsing a TEI File – reading/editing a poem

Intro

In this post we demonstrate how to work with e4x and Flex to parse a TEI file, read its poem, and build an interface for editing that poem.

You’re probably wondering, what the heck does parsing a TEI file have anything to do with Papervision or 3D?

Everything … in a data driven world…

At NKU our primary goal has been to build a 3D learning management system. And learning management, in any dimension, means distributing and collecting data. TEI is a very good “first example” of a non-trivial XML file. In future posts, we’ll use it to illustrate how to create a usable flatfile database for 3D systems. Click the image below to see a demo:

TEI Parsed and Ready to Edit

Source

Demo

Discussion

I really enjoy parsing files, it’s one of those monotonous tasks that any idiot can do which makes you look like a genius.

Let’s go through the steps of bringing this file into Flex, using e4x to grab its data, display the poem in an html text box, and prepare the editing mechanism.

Bringing this TEI file into Flex

Use Http Service to bring the poem into Flex, and make sure resultFormat=”e4x”.

<mx:HTTPService id=”xmlService” url=”assets/barberexp1755EL2.xml”
resultFormat=”e4x” result=”resultHandlerforForum(event)” />

Declare a xData variable typed as XML, and load your results into that variable. Now you’re ready to parse.

private function resultHandlerforForum(event:ResultEvent):void{
xData=event.result as XML;
}

Using e4x to grab its data

It’s all really a counting game now. Use e4x to grab the data by XML tag name. For example to grab the poem data use the “..” syntax. For example,

xData..text

takes you from the root node to the text node without listing all the nodes in between – pretty cool!

Now just “dot”, or used dot syntax, to go wherever you want to go. And if you want an attribute ,use the “@” symbol to go there.

Displaying the poem in an html text box

The poem is displayed in a htmlText area box by iterating over its “l” nodes. The attribute “rend” is grabbed by using .@rend and used to determine the space in front of each line using a switch case …
for(var i:int = 0; i < myLength; i++){
var intrSwitch:String= xData..text.body.div[1].lg.l[i].@rend;
switch(intrSwitch){
case “indent1″:
output_txt.htmlText+=” “;
break;
case “indent2″:
output_txt.htmlText+=” “;
break;
default:
//Not in my arsenal
break;}
output_txt.htmlText+=xData..text.body.div[1].lg.l[i]+”\n”;
}}

Now that you can read your poem, let’s set up the mechanism for editing it, which we will do on the next TEI post.

Preparing the editing mechanism

The big problem with most TEI editors is that you have to enter the poem in one line at a time from an input box, or with code hinting. Our solution solves this by parsing your input in between “l” tags. The addline button automatically adds the tags for your when editing.

private function editPoem():void{
editPoemMode=true;
output_txt.text=xData..text.body.div[0].head.bibl.title+”\n”+”\n”;
var myLength:int=xData..text.body.div[1].lg.l.length();

for(var i:int = 0; i < myLength; i++)
{var intrSwitch:String= xData..text.body.div[1].lg.l[i].@rend;
output_txt.text+=”<l rend=”+”\”"+xData..text.body.div[1].lg.l[i].@rend+”\”"+”>”+xData..text.body.div[1].lg.l[i]+”</l>”+”\n”;
}}

But you don’t want to add lines when your just viewing your poem – so now you need a state engine.

Using a State Engine

Finally, you’ll need a simple state engine to keep track of what you’re doing. To do this, just declare a variable “editPoemMode” which keeps track of whether you’re editing or displaying a poem. If editing, allow “add a line”.

private function addLine():void{
if(editPoemMode==true){
output_txt.text+=”<l rend=\”"+”indent1″+”\”>Enter Text Here</l>”+”\n”;
}}

This isn’t much code for what we have accomplished, but that’s the power of e4x, and Flex…

To see the entire code click the button below: