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 [[email protected]]
Sent: Friday, April 04, 2014 4:01 PM
To: [email protected]
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 [[email protected]]
Sent: Friday, April 04, 2014 4:01 PM
To: [email protected]
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.
