Best practice for adding text to Flex container?

Forum|Forum|17 years ago
January 18, 2009
3 replies
2843 views

Hi,
I'm having some troubles to lay a TextFlow class out properly inside a Flex container. What's the best practice to achieving this, for example adding a lot of text to a small Panel?
Is it possible to pass anything other than a static width and height to DisplayObjectContainerController constructor, or is this not the place to implement this? I guess what I am looking for is the layout logic I'd normally pack into a custom Flex component and implement inside measure() and so on.

My use case: a chat application which adds multiple TextFlow elements to a Flex container such as Panel. Or use TextFlow as a substitute for UITextField.

Some example code would help me greatly.

I'm using Flex 3.2.

Regards,

Stefan

Text layout framework

This topic has been closed for replies.

Correct answer brian_thomas2

Thanks Brian, the example helps. However problems quickly arise if I modify it slightly to this (please compile it to see):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
<mx:Script>
<![CDATA[
import flashx.textLayout.compose.StandardFlowComposer;
import flashx.textLayout.container.DisplayObjectContainerController;
import flashx.textLayout.container.IContainerController;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextFilter;

private var _container:Sprite;
private var _textFlow:TextFlow;

private function init():void
{
_container = new Sprite();
textArea.rawChildren.addChild(_container);

var markup:String = "<TextFlow xmlns=' http://ns.adobe.com/textLayout/2008'>Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! </TextFlow>";

_textFlow = TextFilter.importToFlow(markup, TextFilter.TEXT_LAYOUT_FORMAT);
_textFlow.flowComposer.addController(new DisplayObjectContainerController(_container, 200, 50));
_textFlow.flowComposer.updateAllContainers();
}
]]>
</mx:Script>
<mx:Canvas width="100" height="100" id="textArea" x="44" y="46" backgroundColor="#F5EAEA"/>
</mx:Application>

What is the best way to make my textflow behave like a 'normal' UIComponent in Flex? Should I use UIComponent instead of Sprite as a Container? Will that take care of resize behaviour?
I have never before needed to use rawChildren.addChild for example, maybe you can explain why that's needed here?

I realise that the new Textframework works on an AS basis and is not Flex or Flash specific, but this also poses some challenges for those of us using the Flex framework primarily.

I think it would help to have some more basic examples such as using the new text features in a 'traditional' context. Say for example a TextArea that is just that, a TextArea but with the addition of inline images. I personally feel that the provided examples largely try to teach me to run before I can walk.

Many thanks,

Stefan

You are right, the examples we have provided are specific to TLF as an ActionScript component, rather than as a Flex Component. Flex Gumbo is implementing what I think you are looking for (a UIComponent for TLF). As Gumbo is still in active development, we chose to stick with examples that apply to both Flex 3.2 and Gumbo.

Check out mx.components.FxTextArea; I'd be interested to hear if this is the "walking start" you are looking for in terms of using TLF in Flex.

stoemAuthor

Known Participant

thank you.
I'm still struggling with this. All I'd need is a simple example for adding TextFlow to a Flex container. All the samples I can find are much too complex to start with, at least for me...

Cheers

Stefan

brian_thomas2

Adobe Employee

Hi Stefan,

My apologies that it has taken us so long to get back to you on this! Included is a very simple example for setting up a TextFlow in Flex. From here I'd dig into the SimpleEditor example in the Examples/Flex directory from our Text Layout Framework Download. I don't quite understand what you are looking for in your description of your more complex layout, but hopefully this will get you started in the right direction. You should be able to organize your layout with Flex components and then add your TextFlows to those components.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
<mx:Script>
<![CDATA[
import flashx.textLayout.compose.StandardFlowComposer;
import flashx.textLayout.container.DisplayObjectContainerController;
import flashx.textLayout.container.IContainerController;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextFilter;

private var _container:Sprite;
private var _textFlow:TextFlow;

private function init():void
{
_container = new Sprite();
textArea.rawChildren.addChild(_container);

var markup:String = "<TextFlow xmlns=' http://ns.adobe.com/textLayout/2008'>Hello World!</TextFlow>";

_textFlow = TextFilter.importToFlow(markup, TextFilter.TEXT_LAYOUT_FORMAT);
_textFlow.flowComposer.addController(new DisplayObjectContainerController(_container, 200, 50));
_textFlow.flowComposer.updateAllContainers();
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%" id="textArea" />
</mx:Application>

stoemAuthor

Known Participant

Thanks Brian, the example helps. However problems quickly arise if I modify it slightly to this (please compile it to see):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
<mx:Script>
<![CDATA[
import flashx.textLayout.compose.StandardFlowComposer;
import flashx.textLayout.container.DisplayObjectContainerController;
import flashx.textLayout.container.IContainerController;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextFilter;

private var _container:Sprite;
private var _textFlow:TextFlow;

private function init():void
{
_container = new Sprite();
textArea.rawChildren.addChild(_container);

var markup:String = "<TextFlow xmlns=' http://ns.adobe.com/textLayout/2008'>Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! </TextFlow>";

_textFlow = TextFilter.importToFlow(markup, TextFilter.TEXT_LAYOUT_FORMAT);
_textFlow.flowComposer.addController(new DisplayObjectContainerController(_container, 200, 50));
_textFlow.flowComposer.updateAllContainers();
}
]]>
</mx:Script>
<mx:Canvas width="100" height="100" id="textArea" x="44" y="46" backgroundColor="#F5EAEA"/>
</mx:Application>

What is the best way to make my textflow behave like a 'normal' UIComponent in Flex? Should I use UIComponent instead of Sprite as a Container? Will that take care of resize behaviour?
I have never before needed to use rawChildren.addChild for example, maybe you can explain why that's needed here?

I realise that the new Textframework works on an AS basis and is not Flex or Flash specific, but this also poses some challenges for those of us using the Flex framework primarily.

I think it would help to have some more basic examples such as using the new text features in a 'traditional' context. Say for example a TextArea that is just that, a TextArea but with the addition of inline images. I personally feel that the provided examples largely try to teach me to run before I can walk.

Many thanks,

Stefan

stoemAuthor

Known Participant

thank you.
I'm still struggling with this. All I'd need is a simple example for adding TextFlow to a Flex container. All the samples I can find are much too complex to start with, at least for me...

Cheers

Stefan

stoemAuthor

Known Participant

Anyone got any input on this?

M

mrapcznski

Inspiring

You know what nevermind. I originally posted code, but I re-read your message and my idea was irrelevent. Sorry for wasting a post...

You should be able to add multiple canvas items with TextFlows to a VBox. Just thinking quickly that ought to make sense for a chat application. I haven't worked with the measure() method but I had no problem implementing resizing by listening for the resize event of the parent container that a TextFlow calls home.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded