Flash TextField <img> Part 2
I promised I’d show how to split html content into multiple textfields to get around the fact that Flash’s TextFields go nuts when you actually try to use the <img> tag. I do try to keep my promises. This post — QED.
var inlineHtml:String = "";
var nodes = myXML.description.children()
for each(var node in nodes)
{
var html:String = getHTMLContent(""+node.toXMLString()+" ")
if (html != "")
{
//Is this a block level tag: P, OL, etc...
if ( isBlockTag (html, ["P", "OL", "UL"]) )
{
if (inlineHtml != "")
{
addSubfield(inlineHtml, stylesAsset.style)
inlineHtml = ""
}
addSubfield(html, stylesAsset.style)
}
else
{
inlineHtml += html + " " //NOTE: is a final space a major problem even with collapseWhite?
}
}
}
//anything left over as non-block content?
if (inlineHtml != "")
{
addSubfield(inlineHtml, stylesAsset.style)
inlineHtml = ""
}
//
//
//
private function isBlockTag(html:String, blockTags:Array) :Boolean
{
//convert the html string to XML
var xml:XML = new XML(html)
var nodeName = xml.name()
if (nodeName != null)
{
for (var i in blockTags)
{
if (blockTags[i].toLowerCase() == nodeName.localName.toLowerCase())
{
return true
}
}
}
return false
}
The first block assumes we’ve got an XML snippet with a description node. We’re going to walk through all the children of that node, and if it’s a block-level element like <p> or <ul> we’ll pass it (along with a stylesheet) to a function called addSubfield which will create the TextField object, set the StyleSheet, and set the HTML (this, and performing the actual layout of stacking one field atop the other is left as an exercise for the reader).
I showed you the getHTMLContent function in a previous article. Wrapping the argument in <doc> tags ensures we get all the content regardless of whether the content is a single text node, multiple HTML nodes, or mixed-content. I’ve been doing this a lot in a few projects — works great — so far.
