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

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:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
layout=”absolute” creationComplete=”xmlService.send()”>
<mx:HTTPService id=”xmlService” url=”assets/barberexp1755EL2.xml”
resultFormat=”e4x” result=”resultHandlerforForum(event)” />

<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable] private var xData:XML;

private var editPoemMode:Boolean=false;

private function resultHandlerforForum(event:ResultEvent):void{

xData=event.result as XML;

}
private function getPoem():void{

editPoemMode=false;

output_txt.htmlText=”<b>”+xData..text.body.div[0].head.bibl.title+”</b>”+”\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;

switch(intrSwitch)
{
case “indent1″:

output_txt.htmlText+=” “;

break;
case “indent2″:

output_txt.htmlText+=” “;

break;
case “indent3″:

output_txt.htmlText+=” “;

break;
case “indent4″:

output_txt.htmlText+=” “;

break;

case “indent5″:

output_txt.htmlText+=” “;

break;
case “indent6″:

output_txt.htmlText+=” “;

break;

default:
//Not in my arsenal
break;
}

//Number(i+1)+”. ”
output_txt.htmlText+=xData..text.body.div[1].lg.l[i]+”\n”;

}

}

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;

//Number(i+1)+”. ”
output_txt.text+=”<l rend=”+”\””+xData..text.body.div[1].lg.l[i].@rend+”\””+”>”+xData..text.body.div[1].lg.l[i]+”</l>”+”\n”;

}

}

private function addLine():void{

if(editPoemMode==true){

output_txt.text+=”<l rend=\””+”indent1″+”\”>Enter Text Here</l>”+”\n”;
}

}

]]>
</mx:Script>

<mx:VBox x=”20″ y=”70″ height=”254″ width=”436″>

<mx:Label text=”Output” fontWeight=”bold”/>
<mx:TextArea id=”output_txt” width=”433″ height=”218″
/>
</mx:VBox>

<mx:Button x=”137″ y=”40″ label=”Edit Poem” click=”editPoem()”/>
<mx:Button x=”328″ y=”40″ label=”Add a Line” click=”addLine()”/>
<mx:Button x=”20″ y=”40″ label=”Get Poem” click=”getPoem()” />
</mx:Application>


Advertisements

4 Responses to Parsing a TEI File – reading/editing a poem

  1. Mike says:

    Just passing by.Btw, your website have great content!

    _________________________________
    Making Money $150 An Hour

  2. Mazen says:

    Dear Mike first one i want to say thanks alot for your tutorial about Texturing, 3ds Max, and You – Extended Edition .Idont know how can i say thanks i ts not enough for you because my dream is Verification
    when i wathed your tutorial i m studay from 3 years ago and i didnt find any body to help me about 3dmax
    but now i feel i am beter than befor .Your graet man and Ideal for Generations .
    i am sory about my language but iwant to thanks alot
    Mazen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: