Text - wrapping problem

[Mortimer Jazz]

Hello, I seem to be having an issue with getting text to display multiline for some reason. I've created an item renderer for a List component (yes - the list has variableRowHeight="true" already set).

The basic structure of the renderer is below.

Problem
If I don't set height to be 100% then some of my text on the bottom line gets cut off, but at least my text does wrap, but if I do set the height, then my text doesn't wrap at all.

Any suggestions?
here is the outline:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    
    <mx:HBox width="100%" height="100%">
        <mx:Image id="img" width="80" height="80" source="{data.img}" 
        <mx:VBox width="100%" height="100%">
            <mx:Label text="Person: {data.person}" />
                <mx:Label text="Date: {data.date}" />
                <mx:Text text="Description: {data.description}" width="100%"  height="100%" />
        </mx:VBox>
    </mx:HBox>
</mx:VBox>

Edit - behaves in the same way regardless of me specifying width="100%" in the Text component.
I want the content to push out as far as it can, but because I've got the horizontal scroll policy off I want it to wrap.

[dr_zeus]

I would recommend building your renderer in ActionScript without VBox and HBox components. These containers don't always resize to fit the size of their children.

Also, the mx:Text component is notorious (at least in my mind) for not handling multiline and wrapping properly. I won't touch it. I'd rather just reskin the mx:TextArea.

[Mortimer Jazz]

Thanks dr_zeus. I have to say this a joke - I thought we left all this crap behind with AS2 components!

Check out the images I just posted ....
http://www.actionscript.org/forums/s...131#post582131

so I can't depend on the Text component to resize properly at all?

[dr_zeus]

Yeah, I saw your images. Like I said, I won't touch the Text component at all.

You should build your renderer in ActionScript as a subclass of UIComponent and use a regular TextField or maybe UITextField if you want to style it. These two classes tend to work more like you'd expect them too.

Text/font support in Flash sucks. It doesn't matter what component set you're using. It's a player-level problem. Personally, I can't believe that device fonts still can't have alpha or rotation. You'd think it would be a higher priority to get that working.

[Mortimer Jazz]

Yeah, I had looked around for other people experiencing the same kind of problem and found nothing at all - I thought I must just be doing something wrong

I sort of figured out what I may do doing wrong with regards to the Text component not wrapping (I posted about it here), but this new problem stumped me.

I just posted source code (a cut down version of the project) on the other thread for kicks, and for anyone who wants to see a working example of what goes wrong.

I agree, your suggestion must be the way to go. Is it also possible that layout could be 'fixed' by using some method call such as callLater or validateNow? I'm just so surprised I've not seen more people posting about this.

[Mortimer Jazz]

Originally Posted by dr_zeus

You should build your renderer in ActionScript as a subclass of UIComponent and use a regular TextField

Could you give me a quick overview of how to do that?

I tried something along the lines of the following, but had trouble setting the text and width. Also, if i add a border to the textfield I can see that it is 100*100 square - driving me nuts!

package components
{
    import mx.core.UIComponent;
    import flash.text.TextField;
    import flash.text.TextLineMetrics;

    public class NWText extends UIComponent
    {
        private var _textField:TextField;
        private var _text:String;
        private var _btextChanged:Boolean = false;
        
        public function NWText(){
            super();
        }
        
        override protected function createChildren():void{
            super.createChildren();
            if (!_textField) _textField = new TextField();
            _textField.border = true; //shows 100* 100 square
            addChild(_textField);
        }
        
        override protected function commitProperties():void{
            super.commitProperties();
            if(_btextChanged){
                _btextChanged = false;
                //handle change here...
                               _textField.text = text;
            }
        }
        
        override protected function measure():void{
            super.measure();
            // Calculate the default size of the control based on the 
            // contents of the .text property.
            var lineMetrics:TextLineMetrics = measureText(text);
            // Add a 10 pixel border area around the text.
            measuredWidth = 50;//measuredMinWidth = lineMetrics.width + 10;
            measuredHeight = measuredMinHeight = lineMetrics.height + 10;
          
        }
        
        public function get text():String{
            return _text;
        }
        
        public function set text(value:String):void{
            _btextChanged = true;
            _text = value;
            invalidateProperties();
            invalidateSize();
            invalidateDisplayList();
        }
    }
}