flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Joseph Balderson <n...@joeflash.ca>
Subject Re: <BR> in TextArea
Date Fri, 04 Apr 2014 15:53:38 GMT
My sense is that these two lines do not return what you think they do, which is
part of your problem:

var spanStart:int = leaf.getParagraph().parentRelativeStart;
var spanEnd:int = leaf.getParagraph().parentRelativeEnd;

In the above code, leaf.getParagraph().parentRelativeStart will give you the
position of the _parent_ of the _ParagraphElement_. Which will not help you find
the element in question nor the cursor's position within it.

However low in the hierarchy you go,

textflow.findLeaf(interactionManager.activePosition)

...will always return a FlowLeafElement.

https://flex.apache.org/asdoc/flashx/textLayout/elements/FlowGroupElement.html#findLeaf%28%29

...which will always be either a SpanElement or an InlineGraphicElement.

Using findChildIndexAtPosition(relativePosition:int):int is completely useless
for this purpose, as it only returns the child index of the first nested element
in the container. textflow.findLeaf() is the only way.

Even if you don't want to put the <br/> in a SpanElement (and I cannot see a use
case where you would), you still want to use this to get the SpanElement where
the cursor (or the beginning or end selection) resides, as a starting point. If
you want to put it elsewhere, you can drill up in the hierarchy from there using
FlowLeafElement.parent or FlowLeafElement.getParagraph().

>From there you need to get the relative position of the cursor within that
SpanElement, for which you will need to do a nasty character comp hack b/c there
are no hooks in the API to get this number.
	
FlowLeafElement.getAbsoluteStart() might help, but you still need to do a nasty
character compare hack to get the relative cursor position.

_______________________________________________________________________

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

Scott Matheson wrote:
> 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