Clever Geek Handbook

Is there a multi-line text traversal for Flex

Is there a way to get around multiline text in Flex 3? The two controls I've tried so far are mx: Text and mx: TextArea. Each control has its own error associated with it. For reference: mx: Text error - http://bugs.adobe.com/jira/browse/SDK-9819 mx: TextArea error - http://bugs.adobe.com/jira/browse/SDK-12616 . Basically, none of the control handles scroll correctly unless you specify a height and the text wraps to the next line (the height is determined dynamically by Flex based on the wrapper). Does anyone have a workaround that might be helpful?

Thank.

Update: One of the methods I tried in the past was to manually calculate the height of the mx: Text element. I can do this using the following:

var textItem:Text = new Text();
var len:int = value.length;
var lines:int = int(len/115) + 1;
var height:int = lines * 20;
textItem.height = height;

While this seems to have exacerbated the problem in mx: Text, there is one big mistake. The calculation is highly dependent on the font size, letter spacing, and textItem width. I can use this method and go to my project. However, maintenance on this is inevitable, and with such a code, it will be a giant PITA.

+2


source to share


2 answers


I've had to deal with this several times. The best way to find the dynamic height of a dimension <mx:Text>

is to leave the height out of the text and then specify a percentage height of 100% on the attached VBox, HBox, etc. Something like the following should work for you:

<mx:VBox width="100%" height="100%">
    <mx:Text text="Your really long text goes here." width="100%"/>
</mx:VBox>

Since it crumbles a little, your movement may change.



Edit

If you want to extend the above example to make your code easier to maintain, you should look into the TextLineMetrics class. This will allow you to measure the width and height of the text based on font, size, etc. TextLineMetrics for papers can be found here , to use the example above, you need to do something like the following:

var textItem:Text = new Text();
var metrics:TextLineMetrics = textItem.measureText( value );
var len:int = metrics.width;
var lines:int = int(len/textItem.width) + 1;
var height:int = lines * metrics.height;
textItem.height = height;
+7


source


I am using the variable height textarea class which works very well for me:



package
{
    import mx.controls.TextArea;

    /**
     * TextArea that xpands to the height of the content contained
     * within. 
     * @author joel
     * 
     */ 
    public class VariableHeightTextArea extends TextArea
    {
        public function VariableHeightTextArea()
        {
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(this.height != int(this.textField.measuredHeight) + 5 )
            {
                this.height = this.textField.measuredHeight + 5;
            }           
        }
    }
}
+1


source






More articles:


All Articles