Creating X-HTML using Flash MX Text box.

Further extending my strippTags code I came up with transformTags code to modify the tags in an xml object which is very useful for many different purposes. One of which I’m demonstrating here.

basic syntax is
XMLNode.transformTags(formatObject, AllowTagsByDefault)
formatObject – generic Object which contains the info on how to modify the tags.
AllowTagsByDefault – boolean value which specifies whether to allow unspecified tags or not

This demo is using the code below to transform the tags generated by an input text box so that it can be rendered in any HTML 4.0 compatible browser. We can utilize the rich text editing capabilities of flash to create a forum/comment system which will produce HTML which is compatible to the browser by modifying the .htmlText which is basically a modified version of HTML 1.0

//create an object to specify the format
var fObj = {};
//remove all  tags
fObj.textformat=false;
//change all <b> tags to <strong>
fObj.b="strong";
/*
convert
<font face="_sans" SIZE="12" COLOR="#000000">
to
<span style="font-family:Arial, Helvetica, sans-serif;font-size:12pt;color:#000000;">
*/
//change <font> tags to <span> tags
fObj.font ={__replace__:"span"}
// change size attribute to style attribute
fObj.font.size={__replace__:"style"}
fObj.font.size.__value__ = function(size) {
        return ("font-size:"+size+"pt;");
};
// change color attribute to style attribute
fObj.font.color={__replace__:"style"}
fObj.font.color.__value__ = function(color) {
        return ("color:"+color+";");
};
// change face attribute to style attribute
fObj.font.face={__replace__:"style"}
fObj.font.face.__value__ = function(face) {
        switch (face) {
         case "_sans" :
                face = "Arial, Helvetica, sans-serif";
                break;
         case "_serif" :
                face = "Times New Roman, Times, serif";
                break;
         case "_typewriter" :
                face = "Courier New, Courier, mono";
                break;
        }
        return ("font-family:"+face+";");
};
//transformTags when Main text changes
main_txt.onChanged = function() {
        flash_txt.text = this.htmlText;
        //create a XML object
        my_xml = new XML(this.htmlText);
        //transform the tags in the XML with the format object which we created
        htm_txt.text = my_xml.transformTags(fObj, true);
};

To see transformTags in action type something and format the text in the input textbox below

I will optimize and release the XMLNode.transformTags() source soon! 🙂