Question

My Flex/AS3 web application accesses a database and retrieves text containing \n for newline character. Otherwise the text looks like normal text.

Is there a way to convert the \n into paragraph tags that I can insert into an spark TextFlow?

For example, my only experience with TLF is in writing mxml code such as follows:

<s:RichEditableText width="100%" height="100%"
                    textAlign="left" paddingTop="0"
                    paragraphSpaceAfter="0.3"
                    editable="false">
<s:textFlow>
  <s:TextFlow>
    <s:p fontWeight="bold" fontSize="15">My Title Text</s:p>
    <s:p fontSize="2"/>
    <s:p>{paragraph1_text}</s:p>
    <s:p>{paragraph2_text}</s:p>
    <s:p>{paragraph3_text}</s:p>
    <s:p fontSize="2"/>
  </s:TextFlow>
</s:textFlow>
</s:RichEditableText>

Suppose I retrieve a string from the database such as:

paragraph1_text = "This is some text.\nThis is some more text.\nThis is even more text."

Even though inserting this into the code above will recognize the new line character, it won’t recognize the paragraphSpaceAfter="0.3". My goal is to have the effect of:

<s:RichEditableText width="100%" height="100%"
                    textAlign="left" paddingTop="0"
                    paragraphSpaceAfter="0.3"
                    editable="false">
<s:textFlow>
  <s:TextFlow>
    <s:p fontWeight="bold" fontSize="15">My Title Text</s:p>
    <s:p fontSize="2"/>
    <s:p>This is some text.</s:p>
    <s:p>This is some more text.</s:p>
    <s:p>This is even more text.</s:p>
    <s:p>{paragraph2_text}</s:p>
    <s:p>{paragraph3_text}</s:p>
  <s:p fontSize="2"/>
</s:TextFlow>

Is there any way to achieve something like this programmatically (the database text could be anything)?

I tried changing paragraph1_text to:

paragraph1_text="<s:p>This is some text.</s:p><s:p>This is some more text.</s:p><s:p>This is even more text.</s:p>"

and then using this in the first code block above, but it simply printed out all of the <s:p> and </s:p> tags.

Any advice appreciated.

Answer 1

You can achieve this by using ActionScript. Let’s say you name your TextFlow like

<s:TextFlow id="myFlow">

Your ActionScript code block could look like:

import flashx.textLayout.elements.*;

public function insertParagraph( textFlow:TextFlow, text:String, locationIndex:uint ):void
{
    var paragraphs:Vector.<ParagraphElement> = getParagraphElements( text );
    for ( var i:uint = 0; i < paragraphs.length; i++ )
    {
        textFlow.addChildAt( paragraphs[i], locationIndex + i );
    }
}

public function getParagraphElements( text:String ):Vector.<ParagraphElement>
{
    var textParagraphs:Array = text.split("\n");
    var result:Vector.<ParagraphElement> = new Vector.<ParagraphElement>();
    for ( var i:uint = 0; i < textParagraphs.length; i++ )
    {
        var p:ParagraphElement = new ParagraphElement();
        var span:SpanElement = new SpanElement();
        span.text = textParagraphs[i];
        p.addChild(span);
        result.push(p);
    }

    return result;
}

In your case, since you want to add the paragraphs starting as the 3rd element, once the text is retrieved, you can call insertParagaph( myFlow, text, 2 );