17 Replies Latest reply: Jun 30, 2011 11:36 PM by kanukukreja

Textflow link element doesn't work after append to an existed textflow

davy zhang Nov 10, 2010 2:05 AM

It's a strange problem

I have two textflow container : RichEditableText

the first one I new the textflow2 everytime I clicked the button,and append a link returned by getElement

the second one I initially new a textflow and reused it to append new link returned by the same function getElement

but the strange thing is , the first one works just fine ,but the second one 's link seems invalid with no hand cursor nor function

thanks a lot for any clue or comment

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="300">
 <s:layout>
 <s:BasicLayout/>
 </s:layout>
 <fx:Script>
 <![CDATA[
 import flashx.textLayout.elements.LinkElement;
 import flashx.textLayout.elements.ParagraphElement;
 import flashx.textLayout.elements.SpanElement;
 import flashx.textLayout.elements.TextFlow;

 [Bindable] public var textFlow:TextFlow = new TextFlow();

 [Bindable] public var textFlow2:TextFlow = new TextFlow();


 protected function button1_clickHandler(event:MouseEvent):void
 {
 textFlow2 = new TextFlow();
 textFlow2.addChild(getElement());


 textFlow.addChild(getElement());
 }



 private function getElement():ParagraphElement{
 var linkSpan:SpanElement = new SpanElement();
 linkSpan.text = "link";
 var link:LinkElement = new LinkElement();
 link.addChild(linkSpan);
 link.href = "event:ok"
 var p:ParagraphElement = new ParagraphElement();
 p.addChild(link);
 return p;
 }

]]>
 </fx:Script>
 <fx:Declarations>
 
 </fx:Declarations>
 <s:RichEditableText editable="false" text="RichText" width="180" height="165" textFlow="{textFlow2}" />
 <s:RichEditableText editable="false" x="196" text="RichText" width="180" height="165" textFlow="{textFlow}" />
 <s:Button x="116" y="217" label="button" click="button1_clickHandler(event)"/>
</s:Application>

1. Re: Textflow link element doesn't work after append to an existed textflow

rdermer Nov 10, 2010 3:48 PM (in response to davy zhang)

I can reproduce this in TLF 2.0 and filed a bug. I did observe that if I click on textFlow2 the link begins to work. What version of TLF are you using?

Thanks,
Richard
Like Show 0 Likes (0)

Actions
2. Re: Textflow link element doesn't work after append to an existed textflow

davy zhang Nov 10, 2010 6:26 PM (in response to rdermer)

Thanks for the reply

I am using flex sdk 4.1 bundled version.I don't know which version exactly, is that 1.1?

is there a way to workaround ? If I switch to tlf2.0 or newer version the problem might gone?
Like Show 0 Likes (0)

Actions
3. Re: Textflow link element doesn't work after append to an existed textflow

rdermer Nov 11, 2010 2:33 PM (in response to davy zhang)

Yes - Flex 4.1 is using TLF 1.1. Thanks.

I have fixed this in 2.0. For a 1.1 workaround you can do this:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="300">
 <s:layout>
 <s:BasicLayout/>
 </s:layout>
 <fx:Script>
 <![CDATA[
 import flashx.textLayout.compose.StandardFlowComposer;
 import flashx.textLayout.elements.LinkElement;
 import flashx.textLayout.elements.ParagraphElement;
 import flashx.textLayout.elements.SpanElement;
 import flashx.textLayout.elements.TextFlow;
 import mx.core.mx_internal;
 import flashx.textLayout.tlf_internal;

 [Bindable] public var textFlow:TextFlow = new TextFlow();

 [Bindable] public var textFlow2:TextFlow = new TextFlow();


 protected function button1_clickHandler(event:MouseEvent):void
 {
 ret2.mx_internal::textContainerManager.tlf_internal::convertToTextFlowWithComposer();
 textFlow2.addChild(getElement());


 ret.mx_internal::textContainerManager.tlf_internal::convertToTextFlowWithComposer();
 textFlow.addChild(getElement());
 }

 private function getElement():ParagraphElement{
 var linkSpan:SpanElement = new SpanElement();
 linkSpan.text = "link";
 var link:LinkElement = new LinkElement();
 link.addChild(linkSpan);
 link.href = "http://www.adobe.com"
 var p:ParagraphElement = new ParagraphElement();
 p.addChild(link);
 return p;
 }
 ]]>
 </fx:Script>
 <fx:Declarations>
 
 </fx:Declarations>
 <s:RichEditableText id="ret2" editable="false" text="RichText" width="180" height="165" textFlow="{textFlow2}" />
 <s:RichEditableText id="ret" editable="false" x="196" text="RichText" width="180" height="165" textFlow="{textFlow}" />
 <s:Button x="116" y="217" label="button" click="button1_clickHandler(event)"/>
</s:Application>
Like Show 0 Likes (0)

Actions
4. Re: Textflow link element doesn't work after append to an existed textflow

davy zhang Nov 12, 2010 12:13 AM (in response to rdermer)

Thanks for your timely reply!

I swtiched to tlf2.0 and replaced the two as files downloaded from tlt homepage, the problem seems gone.

But here's another one !

The link worked only some firstly added ones, the next added ones can not click.

repoduce steps
use the code below with tlf2.0 and flex sdk4.1 updated version

click the button few more times till the scroller begin to work

check the links at the bottom, they don't work,

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

 xmlns:s="library://ns.adobe.com/flex/spark"

 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="300">

 <s:layout>

 <s:BasicLayout/>

 </s:layout>

 <fx:Script>

 <![CDATA[

 import flashx.textLayout.elements.LinkElement;

 import flashx.textLayout.elements.ParagraphElement;

 import flashx.textLayout.elements.SpanElement;

 import flashx.textLayout.elements.TextFlow;



 [Bindable] public var textFlow:TextFlow = new TextFlow();



 [Bindable] public var textFlow2:TextFlow = new TextFlow();





 protected function button1_clickHandler(event:MouseEvent):void

 {

// textFlow2 = new TextFlow();

// textFlow2.addChild(getElement());



 textFlow.addChild(getElement());

 textFlow.flowComposer.updateAllControllers();

 scrollerChat.verticalScrollBar.value = ret.contentHeight;





 }







 private function getElement():ParagraphElement{

 var linkSpan:SpanElement = new SpanElement();

 linkSpan.text = "link";

 var link:LinkElement = new LinkElement();

 link.addChild(linkSpan);

 link.href = "event:ok"

 var p:ParagraphElement = new ParagraphElement();

 p.addChild(link);

 return p;

 }









 ]]>

 </fx:Script>

 <fx:Declarations>

 

 </fx:Declarations>

 <s:RichEditableText id="ret2" editable="false" text="RichText" width="180" height="271" textFlow="{textFlow2}" />

 <s:Scroller id = "scrollerChat" x="193" width="180" height="271" verticalScrollPolicy="on" >
 <s:RichEditableText id="ret" editable="false" text="RichText" textFlow="{textFlow}" y="0"/>
 </s:Scroller>

 <s:Button x="381" y="9" label="button" click="button1_clickHandler(event)"/>

</s:Application>
Like Show 0 Likes (0)

Actions
5. Re: Textflow link element doesn't work after append to an existed textflow

rdermer Nov 12, 2010 10:28 AM (in response to davy zhang)

My fix hasn't been posted to the TLF sourceforge site yet - there's a lag because we have to run a script that get's odd timeout errors. A separate 2.0 bug with scrolled links demonstrated by your example was fixed a couple of days ago - build 200 contains all these fixes.

In your sample code the call to updateAllControllers can cause a RTE. The textFlow in a RichEditableText is not guaranteed to have a flowComposer. Normally flex takes care of composing for you and that line can be removed.

If you do want to force a compose use this function:
ret.mx_internal::textContainerManager.updateContainer()

BTW thanks for the code examples - they're much easier to follow than verbal descriptions.

Hope that helps,
Richard
Like Show 0 Likes (0)

Actions
6. Re: Textflow link element doesn't work after append to an existed textflow

davy zhang Nov 14, 2010 7:23 PM (in response to rdermer)

Thanks for your correction!

I tried use the new sdk4.1 build by myself with 2.0 tlf. But some other problem pop up related to css,

and I have to merge the spark.swc to my app file because of the signature issue, and the swz file is different for adobe's ftp version

I must host or merge them.

So I think I better use the production version and wait for the sdk 4.5's production version .

Do you know when 4.5sdk will be ready?
Like Show 0 Likes (0)

Actions
7. Re: Textflow link element doesn't work after append to an existed textflow

rdermer Nov 15, 2010 3:07 PM (in response to davy zhang)

Can't comment about 4.5 dates beyond what's posted here:
http://opensource.adobe.com/wiki/display/flexsdk/Hero

Richard
Like Show 0 Likes (0)

Actions
8. Re: Textflow link element doesn't work after append to an existed textflow

kanukukreja Jun 29, 2011 1:06 PM (in response to davy zhang)

I'm facing the same issue and i'm using 4.5 SDk.

Here's my code. Works fine if textFlow value is not bindable, else shows nothing(Blank).

<?xml version="1.0" encoding="utf-8"?>
<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"
 creationComplete="init()">
<s:layout>
<s:VerticalLayout/>
</s:layout>

<fx:Script>
<![CDATA[
import flash.text.engine.FontWeight;

import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.TextFlow;

import spark.utils.TextFlowUtil;
private var hi:String="my code"
private var cnt:int=10;
var markup:String="hello";
private var text:TextFlow;
private var levelName:String = "family"

public function init()
{
trace("here");

markup += "world";
if(levelName == "family"){
markup +=""+ hi + " ("+cnt+") > ";
trace("string::"+markup)
}
text=TextFlowUtil.importFromString(markup,TextConverter.TEXT_FIELD_HTML_FORMAT);

}

private function clickBtn(event:MouseEvent):void{
markup += "world";
if(levelName == "family"){
markup +=""+ hi + " ("+cnt+") > ";
trace("string::"+markup)
}
rTxt1.textFlow =TextFlowUtil.importFromString(markup,TextConverter.TEXT_FIELD_HTML_FORMAT);
}

]]>
</fx:Script>

<s:RichText>
Hello
<s:span fontSize='16'>BIG NEW</s:span>
World!
</s:RichText>

<s:RichText id="rTxt" textFlow="{text}"/>
<s:RichText id="rTxt1" />
<s:Button click="clickBtn(event)" label="Click"/>
</s:Application>
Like Show 0 Likes (0)

Actions
9. Re: Textflow link element doesn't work after append to an existed textflow

Jin-Huang Jun 30, 2011 12:52 AM (in response to kanukukreja)

Replace the line

rTxt1.textFlow =TextFlowUtil.importFromString(markup,TextConverter.TEXT_FIELD_HTML_F ORMAT);

with

var imp:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
rTxt1.textFlow = imp.importToFlow(markup);

Then your code will work.

flashx.textLayout.convertion.TextConverter is the converter in TLF, which work well. TextFlowUtil is not under our control.
Like Show 0 Likes (0)

Actions
10. Re: Textflow link element doesn't work after append to an existed textflow

kanukukreja Jun 30, 2011 1:15 AM (in response to Jin-Huang)

Hi Jin,

Thanks for the response, but its not working for me.
Its not working for when i'm binding the value.. can you please once lok at it and helping me in resolving this issue.

<?xml version="1.0" encoding="utf-8"?>
<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"
 creationComplete="init()">
<s:layout>
<s:VerticalLayout/>
</s:layout>

<fx:Script>
<![CDATA[
import flash.text.engine.FontWeight;

import flashx.textLayout.conversion.ITextImporter;
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.TextFlow;

import spark.utils.TextFlowUtil;
private var hi:String="my code"
private var cnt:int=10;
var markup:String="hello";
private var text:TextFlow;
private var levelName:String = "family"

public function init()
{
trace("here");

markup += "world";
if(levelName == "family"){
markup +=""+ hi + " ("+cnt+") > ";
trace("string::"+markup)
}
var imp:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
text = imp.importToFlow(markup); {Your code}
//text=TextFlowUtil.importFromString(markup,TextConverter.TEXT_FIELD_HTML_FORMAT); {my code}

}

private function clickBtn(event:MouseEvent):void{
markup += "world";
if(levelName == "family"){
markup +=""+ hi + " ("+cnt+") > ";
trace("string::"+markup)
}

rTxt1.textFlow =TextFlowUtil.importFromString(markup,TextConverter.TEXT_FIELD_HTML_FORMAT);
}
]]>
</fx:Script>

<s:RichText>
Hello
<s:span fontSize='16'>BIG NEW</s:span>
World!
</s:RichText>

<s:RichText id="rTxt" textFlow="{text}"/> {not working this way}
<s:RichText id="rTxt1" />
<s:Button click="clickBtn(event)" label="Click"/> {Working this way}
</s:Application>
Like Show 0 Likes (0)

Actions
11. Re: Textflow link element doesn't work after append to an existed textflow

Jin-Huang Jun 30, 2011 1:47 AM (in response to kanukukreja)

[Bindable]
private var text:TextFlow;

Declare text as Bindable

Besides, I found that two types of import show different results. Choose the one you like
Like Show 0 Likes (0)

Actions
12. Re: Textflow link element doesn't work after append to an existed textflow

kanukukreja Jun 30, 2011 1:53 AM (in response to Jin-Huang)

After binding i can see the text but without formatting...so my problem is still at the place from where i have started

Am i missing anything?

Message was edited by: kanukukreja
Like Show 0 Likes (0)

Actions
13. Re: Textflow link element doesn't work after append to an existed textflow

kanukukreja Jun 30, 2011 1:59 AM (in response to kanukukreja)

One more thing which i just noticed is that after removing textFlowUtil from the clickEvent, its also started showing the text without formatting.

private function clickBtn(event:MouseEvent):void{
markup += "world";
if(levelName == "family"){
markup +=""+ hi + " ("+cnt+") > ";
trace("string::"+markup)
}
var imp:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
rTxt1.textFlow = imp.importToFlow(markup);
//rTxt1.textFlow =TextFlowUtil.importFromString(markup,TextConverter.TEXT_FIELD_HTML_FORMAT);
}
Like Show 0 Likes (0)

Actions
14. Re: Textflow link element doesn't work after append to an existed textflow

Jin-Huang Jun 30, 2011 2:11 AM (in response to kanukukreja)

TextFlowUtil.importFromString will give you text with sytles, while imp.importToFlow cannot. I will investigate if it's a TLF bug.
(At the very beginning, TextFlowUtil.importFromString does not show any text, but importToFlow can. But now importFromString works. I'm not sure what's going on. My answer at #9 is wrong.)
Like Show 0 Likes (0)

Actions
15. Re: Textflow link element doesn't work after append to an existed textflow

kanukukreja Jun 30, 2011 2:20 AM (in response to Jin-Huang)

Thanks a ton Jin for the quick responses, please share if you find anything regarding the same.

TextFlowUtil.importFromString will give you text with sytles, while imp.importToFlow cannot. I will investigate if it's a TLF bug.

>>> Let me know if you find any solution for the same.

(At the very beginning, TextFlowUtil.importFromString does not show any text, but importToFlow can.

>>> Only in the case of bindable textflow values otherwise it shows the formatted text.

But now importFromString works. I'm not sure what's going on. My answer at #9 is wrong.)

>>> importFromString still works but not with the bindable texts. Thats the only issue.
Like Show 0 Likes (0)

Actions
16. Re: Textflow link element doesn't work after append to an existed textflow

Jin-Huang Jun 30, 2011 2:40 AM (in response to kanukukreja)

Is the result OK for you after you run the code as follows?

<?xml version="1.0" encoding="utf-8"?>
<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"
 creationComplete="init()">
 <s:layout>
 <s:VerticalLayout/>
 </s:layout>
 <fx:Script>

 <![CDATA[
 import flash.text.engine.FontWeight;
 import flashx.textLayout.conversion.*;
 import flashx.textLayout.elements.ParagraphElement;
 import flashx.textLayout.elements.TextFlow;
 import spark.utils.TextFlowUtil;
 private var hi:String="my code"
 private var cnt:int=10;
 var markup:String="hello";
 [Bindable]
 private var text:TextFlow;
 private var levelName:String = "family"
 public function init()
 {
 trace("here");
 markup += "world";
 if(levelName == "family"){
 markup +=""+ hi + " ("+cnt+") > ";
 trace("string::"+markup)
 }
 text = TextFlowUtil.importFromString(markup,TextConverter.TEXT_FIELD_HTML_FORMAT);
 }

 private function clickBtn(event:MouseEvent):void{
 markup += "world";
 if(levelName == "family"){
 markup +=""+ hi + " ("+cnt+") > ";
 trace("string::"+markup)
 }
 rTxt1.textFlow =TextFlowUtil.importFromString(markup,TextConverter.TEXT_FIELD_HTML_FORMAT);
 }
 ]]>

 </fx:Script>
 <s:RichText>
 Hello
 <s:span fontSize="16">BIG NEW</s:span>
 World!
 </s:RichText>
 
 <s:RichText id="rTxt" textFlow="{text}"/>
 <s:RichEditableText id="rTxt1"/>
 <s:Button label="Click" click="clickBtn(event)"/>
</s:Application>
Like Show 0 Likes (0)

Actions
17. Re: Textflow link element doesn't work after append to an existed textflow

kanukukreja Jun 30, 2011 11:36 PM (in response to Jin-Huang)

Thanks a Jin, its working fine now.
I found one more way of doing the same, please have a look below:

<?xml version="1.0" encoding="utf-8"?>
<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"
 creationComplete="init()">
<s:layout>
<s:VerticalLayout/>
</s:layout>

<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.ITextImporter;
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.TextFlow;

import spark.utils.TextFlowUtil;

[Bindable]
private var textFlowTxt:TextFlow;

private var hi:String="my code"
private var cnt:int=10;
private var markup:String="hello";

private var levelName:String = "family";

private function createTextFlow():TextFlow {
var htmlText:String = ""+ hi + " ("+cnt+") > ";
var textFlow:TextFlow = TextFlowUtil.importFromString(htmlText, TextConverter.TEXT_FIELD_HTML_FORMAT );
return textFlow;
}
]]>
</fx:Script>

<s:RichText>
Hello
<s:span fontSize='16'>BIG NEW</s:span>
World!
</s:RichText>

<s:RichText id="rTxt" textFlow="{createTextFlow()}"/>
</s:Application>
Like Show 0 Likes (0)

Actions