flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Scott Matheson <smathe...@intralinks.com>
Subject RE: <BR> in TextArea
Date Fri, 04 Apr 2014 15:17:27 GMT
Joseph
            So your approach is to fine out were you are within a block of text, i could also
do this, see example




in my case is "build" the text from single sentences, each sentence has an associated sound
clip, i play this clips by added and event handle to each sentence




then i reconstruct the passage from the sentence, this is an good example http://www.java2s.com/Code/Flex/Components/Addparagraphtoflowelements.htm








I have 2 challenges, why can i not add more that 1 span to a paragraph




 or why can i not build a textFlow as a process




                                for each (var sentence:XML in data.sentence)
                                {
                                        addSentence(sentence);
                                        progress.push(false);
                                }




should add to the over all text




i.e.  you can not do    ta.textFlow = ta.textFlow +  textFlow;




this is example, of my code




                protected function buildParagraphView(event:FlexEvent):void
                        {
                                //reset array
                                progress.length = 0;
                                for each (var sentence:XML in data.sentence)
                                {
                                        addSentence(sentence);
                                        progress.push(false);
                                }

                        }








                        private function addSentence(model:XML):void
                        {

                                paraCount++;
                                var linkWrapper:LinkElement = new LinkElement();
                                linkWrapper.addEventListener(FlowElementMouseEvent.MOUSE_UP,
clickActionHandle(model.clip));

                                span1.id = "span1";
                                paragraph1.id = "paragraph" + paraCount;  // create a unique
name
                                span1.text = model.text;

                                linkWrapper.addChild(span1)
                                paragraph1.addChild(linkWrapper);
                                textFlow.addChild(paragraph1);

                                ta.textFlow =  textFlow;


                        }












my problem not is how do i dynamical add more Textflows to the screen








example of mouse over text if this helps anyone




<?xml version="1.0"?>
<!-- sparktextcontrols/SparkSelectionExample.mxml -->
<s:Application
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark">

        <s:layout>
                <s:VerticalLayout/>
        </s:layout>

        <fx:Script>
                <![CDATA[
                        import flashx.textLayout.elements.TextRange;
                        import flashx.textLayout.elements.*;

                        private function selectSomeText(e:Event):void {
                                /* Get the location of the cursor. This is the character position
of the
                                cursor in the RichEditableText control after the user clicks
on it. */
                                var activePos:int = richTxt1.selectionActivePosition;

                                /* Get the first SpanElement in the TextFlow. */
                                var leaf:SpanElement = new SpanElement();
                                leaf = SpanElement(richTxt1.textFlow.getFirstLeaf());

                                /* Get the start and end index values for the first SpanElement.
*/
                                var spanStart:int = leaf.getParagraph().parentRelativeStart;
                                var spanEnd:int = leaf.getParagraph().parentRelativeEnd;

                                /* For the first SpanElement, if the cursor position falls
within the
                                SpanElement's character range, then select the entire SpanElement.
*/
                                if (activePos >= spanStart && activePos <= spanEnd)
{
                                        selectSpan(spanStart, spanEnd);
                                        return;
                                }

                                /* Perform the same operations for each leaf in the TextFlow.
*/
                                while(leaf = SpanElement(leaf.getNextLeaf())) {
                                        spanStart = leaf.getParagraph().parentRelativeStart;
                                        spanEnd = leaf.getParagraph().parentRelativeEnd;
                                        if (activePos >= spanStart && activePos
<= spanEnd) {
                                                selectSpan(spanStart, spanEnd);
                                                return;
                                        }
                                }
                        }

                        private function selectSpan(i1:int, i2:int):void {
                                richTxt1.selectRange(i1, i2);
                        }

                ]]>
        </fx:Script>

        <s:Panel width="480" title="this is some text">
                <s:RichEditableText id="richTxt1" height="27" click="selectSomeText(event)"
editable="true"
                                                        percentWidth="100" selectable="true"
text="line one" textAlign="justify">
<!--                    <s:textFlow>
                                <s:TextFlow>
                                        <s:p><s:span>1) Lorem ipsum dolor sit
amet, consectetur adipiscing elit.</s:span></s:p>
                                        <s:p><s:span>2) Cras posuere posuere sem,
eu congue orci mattis quis.</s:span></s:p>
                                        <s:p><s:span>3) Curabitur pulvinar tellus
venenatis ipsum tempus lobortis.</s:span></s:p>
                                </s:TextFlow>
                        </s:textFlow>-->
                </s:RichEditableText>
        </s:Panel>

</s:Application>
















________________________________________
From: Joseph Balderson [news@joeflash.ca]
Sent: Friday, April 04, 2014 4:01 PM
To: users@flex.apache.org
Subject: Re: <BR> in TextArea




Actually, if you create a BreakElement at the right place, it isn't substituted
for a line break character "\n", and it isn't stripped out when you convert to
TLF or HTML code.




As fortune would have it, I am dealing with exactly that TLF issue right now in
my project. I can't share the actual source, but I can tell you how I did it:




1) Create a break element <br /> manually:
        - ideas for solving it were in "I wanted to contribute some code...":
http://stackoverflow.com/questions/9937419/how-do-i-insert-a-spanelement-in-a-textflow
        - but splitting the TextFlow and re-assembling really wasn't cutting it for
complex structures like lists
        SOLUTION:
        1. find the LeafElement for the cursor position (which is a SpanElement)
        --> textflow.findLeaf(interactionManager.activePosition) as SpanElement
        2. find the relative position of the cursor within that SpanElement
        --> since there is no way to get the absolute cursor position relative to a
LeafElement, for this you need a hack comparing strings indexed from
cursorPos+pxAfter and cursorPos-pxBefore with SpanElement.getText();
        3. find the parent ParagraphElement for that LeafElement
        --> targetPara = leafElement.getParagraph();
        4. find the index for that SpanElement within the ParagraphElement (b/c you
might have several SpanElements within a ParagraphElement
        --> leafElement.getParagraph().getChildIndex(leafElement);
        5. split the SpanElement
        --> leafElement.splitAtPosition(relPos);
        6. insert BreakElement after the 1st part of the original SpanElement
        --> targetPara.addChildAt(leafIndex+1,flowElement);




2) Allow for creation of break element <br/> with Shift-Enter (not natively
supported):
        1. detect the shift-key pressed
        2. disable the default Enter key behaviour [it's read-only, so you have to use
your own]
        --> config = editor.textFlow.configuration as Configuration;
        config.manageEnterKey = false/true;
        3. if the Enter key is pressed right after, then create a line break at the
cursor (see above)
        4. on Mouseup on the Shift key, restore default Enter key behaviour (so new
<li> or <p> work)








_______________________________________________________________________




Joseph Balderson, Flex & Flash Platform Developer :: http://joeflash.ca
Author, Professional Flex 3 :: http://tinyurl.com/proflex3book




Scott Matheson wrote:
> Hi
>    I am trying to build a Paragraph from sentences,
>
> this builds the Paragraph (from am XML file and itemRender)
>
> the build function looks like
>
>
> var linkWrapper:LinkElement = new LinkElement();
>
> var sentence:SpanElement = new SpanElement();
>
> sentence.styleName = 'linkStyle';
>
> sentence.textDecoration = TextDecoration.NONE;
>
> sentence.text = model.text + " ";
>
> linkWrapper.addChild(sentence);
>
> paragraphArea.addChild(linkWrapper);
>
>
>
> Layout
>
>
>
> <s:TextArea id="ta" minHeight="0"  width="100%" editable="false"
>
> <s:p id="paragraphArea" paragraphSpaceBefore="0">
>
> </s:p>
>
> </s:TextArea>
>
>
>
> I get
>
>
> sentence1
>
> sentence2
>
> sentence3
>
>
>
> my problem is how to i add a <br> in to the Paragraph and end up with
>
>
> sentence1
>
>
> sentence2
>
>
> sentence3
>
>
>
> it would be good if the  input text  model.text  could be "sentence1<br>sentence2<br>sentence3"
>
>
>
>
>
> ________________________________
>
> Disclaimer: This electronic mail and any attachments are confidential and may be privileged.
If you are not the intended recipient, please notify the sender immediately by replying to
this email, and destroy all copies of this email and any attachments. Thank you.
>




________________________________________
From: Joseph Balderson [news@joeflash.ca]
Sent: Friday, April 04, 2014 4:01 PM
To: users@flex.apache.org
Subject: Re: <BR> in TextArea

Actually, if you create a BreakElement at the right place, it isn't substituted
for a line break character "\n", and it isn't stripped out when you convert to
TLF or HTML code.

As fortune would have it, I am dealing with exactly that TLF issue right now in
my project. I can't share the actual source, but I can tell you how I did it:

1) Create a break element <br /> manually:
        - ideas for solving it were in "I wanted to contribute some code...":
http://stackoverflow.com/questions/9937419/how-do-i-insert-a-spanelement-in-a-textflow
        - but splitting the TextFlow and re-assembling really wasn't cutting it for
complex structures like lists
        SOLUTION:
        1. find the LeafElement for the cursor position (which is a SpanElement)
        --> textflow.findLeaf(interactionManager.activePosition) as SpanElement
        2. find the relative position of the cursor within that SpanElement
        --> since there is no way to get the absolute cursor position relative to a
LeafElement, for this you need a hack comparing strings indexed from
cursorPos+pxAfter and cursorPos-pxBefore with SpanElement.getText();
        3. find the parent ParagraphElement for that LeafElement
        --> targetPara = leafElement.getParagraph();
        4. find the index for that SpanElement within the ParagraphElement (b/c you
might have several SpanElements within a ParagraphElement
        --> leafElement.getParagraph().getChildIndex(leafElement);
        5. split the SpanElement
        --> leafElement.splitAtPosition(relPos);
        6. insert BreakElement after the 1st part of the original SpanElement
        --> targetPara.addChildAt(leafIndex+1,flowElement);

2) Allow for creation of break element <br/> with Shift-Enter (not natively
supported):
        1. detect the shift-key pressed
        2. disable the default Enter key behaviour [it's read-only, so you have to use
your own]
        --> config = editor.textFlow.configuration as Configuration;
        config.manageEnterKey = false/true;
        3. if the Enter key is pressed right after, then create a line break at the
cursor (see above)
        4. on Mouseup on the Shift key, restore default Enter key behaviour (so new
<li> or <p> work)


_______________________________________________________________________

Joseph Balderson, Flex & Flash Platform Developer :: http://joeflash.ca
Author, Professional Flex 3 :: http://tinyurl.com/proflex3book

Scott Matheson wrote:
> Hi
>    I am trying to build a Paragraph from sentences,
>
> this builds the Paragraph (from am XML file and itemRender)
>
> the build function looks like
>
>
> var linkWrapper:LinkElement = new LinkElement();
>
> var sentence:SpanElement = new SpanElement();
>
> sentence.styleName = 'linkStyle';
>
> sentence.textDecoration = TextDecoration.NONE;
>
> sentence.text = model.text + " ";
>
> linkWrapper.addChild(sentence);
>
> paragraphArea.addChild(linkWrapper);
>
>
>
> Layout
>
>
>
> <s:TextArea id="ta" minHeight="0"  width="100%" editable="false"
>
> <s:p id="paragraphArea" paragraphSpaceBefore="0">
>
> </s:p>
>
> </s:TextArea>
>
>
>
> I get
>
>
> sentence1
>
> sentence2
>
> sentence3
>
>
>
> my problem is how to i add a <br> in to the Paragraph and end up with
>
>
> sentence1
>
>
> sentence2
>
>
> sentence3
>
>
>
> it would be good if the  input text  model.text  could be "sentence1<br>sentence2<br>sentence3"
>
>
>
>
>
> ________________________________
>
> Disclaimer: This electronic mail and any attachments are confidential and may be privileged.
If you are not the intended recipient, please notify the sender immediately by replying to
this email, and destroy all copies of this email and any attachments. Thank you.
>

________________________________

Disclaimer: This electronic mail and any attachments are confidential and may be privileged.
If you are not the intended recipient, please notify the sender immediately by replying to
this email, and destroy all copies of this email and any attachments. Thank you.

Mime
View raw message