Editing TEI XML in Adobe Flex

Intro

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

Demo

Source

Previous TEI Post #2

Previous TEI Post #1

YouTube:

Discussion

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{

myChangeString=”title”;
output_txt.text=xData..teiHeader.fileDesc.titleStmt;

}

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):

myChangeString=”title”;

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{

//editPoemMode=false;

var titleStatement:String = output_txt.text;

switch(mySelect)
{
case “title”:

if(output_txt.text.length > 0) {
xData..teiHeader.fileDesc.titleStmt.setChildren(titleStatement);
}

break;
case “edition”:

if(output_txt.text.length > 0) {

xData..teiHeader.fileDesc.editionStmt.setChildren(titleStatement);

}

..

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:

Program Source

<?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 var myChangeString:String;

private function resultHandlerforForum(event:ResultEvent):void{

xData=event.result as XML;

}

//=======================XML Operations==============

private function makeXMLChange(mySelect:String):void{

//editPoemMode=false;

var titleStatement:String = output_txt.text;

switch(mySelect)
{
case “title”:

if(output_txt.text.length > 0) {
xData..teiHeader.fileDesc.titleStmt.setChildren(titleStatement);
}

break;
case “edition”:

if(output_txt.text.length > 0) {
xData..teiHeader.fileDesc.editionStmt.setChildren(titleStatement);
}

break;
case “publication”:

if(output_txt.text.length > 0) {
xData..teiHeader.fileDesc.publicationStmt.setChildren(titleStatement);
}

break;
case “series”:

if(output_txt.text.length > 0) {
xData..teiHeader.fileDesc.seriesStmt.setChildren(titleStatement);
}

break;

case “source”:

if(output_txt.text.length > 0) {
xData..teiHeader.fileDesc.sourceDesc.setChildren(titleStatement);
}

break;
case “encoding”:

if(output_txt.text.length > 0) {
xData..teiHeader.encodingDesc.setChildren(titleStatement);
}

break;

case “profile”:

if(output_txt.text.length > 0) {
xData..teiHeader.profileDesc.setChildren(titleStatement);
}

break;
case “revision”:

if(output_txt.text.length > 0) {
xData..teiHeader.revisionDesc.setChildren(titleStatement);
}

break;
case “bodypoem”:

if(output_txt.text.length > 0) {
xData..text.body.setChildren(titleStatement);
}

break;
case “justpoem”:

if(output_txt.text.length > 0) {
xData..text.body.div[1].lg.setChildren(titleStatement);
}

break;
case “titlepoem”:
if(output_txt.text.length > 0) {
xData..text.body.div[0].head.bibl.setChildren(titleStatement);
}

break;

default:
//Not in my arsenal
break;
}

}

//========================TEI Header=======================

//========================Title Statement==================

private function editTitleStatement():void{

myChangeString=”title”;
output_txt.text=xData..teiHeader.fileDesc.titleStmt;

}

//========================Edition Statement==================

private function editEditionStatement():void{

myChangeString=”edition”;
output_txt.text=xData..teiHeader.fileDesc.editionStmt;

}

//========================Publication Statement==================

private function editPublicationStatement():void{

myChangeString=”publication”;
output_txt.text=xData..teiHeader.fileDesc.publicationStmt;

}

//========================Series Statement==================

private function editSeriesStatement():void{

myChangeString=”series”;
output_txt.text=xData..teiHeader.fileDesc.seriesStmt;

}

//========================Source Statement==================

private function editSourceStatement():void{

myChangeString=”source”;
output_txt.text=xData..teiHeader.fileDesc.sourceDesc;

}

//========================Encoding Statement==================

private function editEncodingStatement():void{

myChangeString=”encoding”;
output_txt.text=xData..teiHeader.encodingDesc;

}

//========================Profile Statement==================

private function editProfileStatement():void{

myChangeString=”profile”;
output_txt.text=xData..teiHeader.profileDesc;

}

//========================Profile Statement==================

private function editRevisionStatement():void{

myChangeString=”revision”;
output_txt.text=xData..teiHeader.revisionDesc;

}

//========================TEI Poem=========================
//========================Display Poem=====================

private function editBodyPoem():void{

//editPoemMode=true;

myChangeString=”bodypoem”;
//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”;
output_txt.text=xData..text.body;

}

private function editJustPoem():void{

myChangeString=”justpoem”;
//editPoemMode=true;

//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”;
output_txt.text=xData..text.body.div[1].lg;

}

private function editJustTitle():void{

//editPoemMode=true;

myChangeString=”titlepoem”;
output_txt.text=xData..text.body.div[0].head.bibl;

}

private function addLine():void{

if(editPoemMode==true){

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

}

//==========View Poem=================================================

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”;

}

}

]]>
</mx:Script>

<mx:VBox x=”10″ y=”93″ height=”306″ width=”436″>

<mx:Label text=”Output” fontWeight=”bold”/>
<mx:TextArea id=”output_txt” width=”433″ height=”270″
/>
</mx:VBox>
<mx:Button x=”342″ y=”63″ label=”Add a Line” click=”addLine()”/>
<mx:Button x=”465″ y=”39″ label=”Title Statement” width=”155″ click=”editTitleStatement()”/>
<mx:Button x=”465″ y=”72″ label=”Edition Statement” width=”155″ click=”editEditionStatement()”/>
<mx:Button x=”465″ y=”102″ label=”Publication Statement” width=”155″ click=”editPublicationStatement()”/>
<mx:Button x=”465″ y=”132″ label=”Series Statement” width=”155″ click=”editSeriesStatement()”/>
<mx:Button x=”465″ y=”192″ label=”Encoding Description” width=”155″ click=”editEncodingStatement()”/>
<mx:Button x=”465″ y=”222″ label=”Profile Description” width=”155″ click=”editProfileStatement()”/>
<mx:Button x=”465″ y=”162″ label=”Source Description” width=”155″ click=”editSourceStatement()”/>
<mx:Button x=”465″ y=”252″ label=”Revision Description” width=”155″ click=”editRevisionStatement()”/>
<mx:HRule x=”467″ y=”282″ width=”155″/>
<mx:Button x=”467″ y=”318″ label=”Body of Poem” width=”155″ click=”editBodyPoem()”/>
<mx:Button x=”465″ y=”377″ label=”Just Poem” width=”155″ click=”editJustPoem()” />
<mx:Button x=”465″ y=”347″ label=”Just Title” width=”155″ click=”editJustTitle()”/>
<mx:Label x=”465″ y=”13″ text=”Edit TEI Header” fontWeight=”bold” color=”#000000″/>
<mx:Label x=”467″ y=”292″ text=”Edit TEI Poem” fontWeight=”bold” color=”#000000″/>
<mx:Button x=”10″ y=”11″ label=”Upload to the Web”/>
<mx:Button x=”10″ y=”54″ label=”Make XML Change Local” click=”makeXMLChange(myChangeString)”/>
</mx:Application>

Advertisements

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: