Flex 3 UITextField Layout Problem

Question

Hi,

I'm using Flex 3, SDK 3.2.

I'm having problems determining the height of a UITextField. (Unfortunately, I have to use the UITextField because I'm using FlashEff 2.0. Otherwise, I'd use a different component).

I've got a UITextfield that is multiline and has wordWrap. The text is pulled from a database, so the length varies. I've got a radioButtonGroup underneath the UITextField.

My goals are:

1. To keep the UITextField from crashing into the radioButtonGroup's VBox.

2. To change the y position of the radioButtonGroup based on the height of the UITextField.

3. To make the TitleWindow's height variable. The UITextField and the radioButtonGroup are in a TitleWindow. I'd like to change the height of the TitleWindow based on the contents inside.

At the moment, I've set y of the  radioButtonGroup way down on the TitleWindow, so that the UITextField's content doesn't overlap. But, when there isn't too much text in the UITextField, I get a huge gap between the radioButtonGroup's VBox and it.

If I don't give the TitleWindow a height, then the UITextField will stretch itself to something like 2000 px.

I've Googled and from what I can tell, the UITextField's height behaves weirdly.

Does anyone know how to solve this problem?

I create the UITextField like this:  

public var tf:UITextField = new UITextField;

     

tf.autoSize = TextFieldAutoSize.LEFT;

     tf.embedFonts = true;

     tf.multiline = true;

     tf.text = myText;

     tf.width = 440;

     tf.wordWrap = true;

     var myFormat:TextFormat = new TextFormat;

     myFormat.size = 25;

     myFormat.blockIndent=53;

     this.addChild(tf);

     tf.validateNow();

     tf.setTextFormat(myFormat);

    My VBox looks like this:

<mx:VBox  id="radioVBox" x="180" y="220">

     <mx:RadioButtonGroup id="myRadioButtonGroup" itemClick="goClickHandler(event);"/>

     <mx:RadioButton  groupName="myRadioButtonGroup" label="A"  fontSize="17" />

     <mx:RadioButton  groupName="myRadioButtonGroup" label="B"  fontSize="17" />

     <mx:RadioButton  groupName="myRadioButtonGroup" label="C"  fontSize="17" />

     <mx:RadioButton  groupName="myRadioButtonGroup" label="D"  fontSize="17" />

     <mx:RadioButton  groupName="myRadioButtonGroup" label="E"  fontSize="17" />

  And it's all wrapped in a TitleWindow that looks like this:  

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 

     layout="absolute" 

     width="520"  

     height="450"

     verticalScrollPolicy="off" 

     horizontalScrollPolicy="off" 
     >

Any suggestions?

Thank you.

-Laxmidi

Answer 1

Hi,

rtalton helped me out.

I figured out that the radioVBox was shifting up and overlapping the MainBox, because the UITextField is dynamic and has a FlashEff2 effect on it. Basically, the height of the MainBox is 0 when radioVBox's layout is calculated.

So, I add the UITextField to one VBox. Below that I've got the radioVBox. I set the radioVBox's visibility to false. Then I added an eventListener for when the FlashEff2 effect ended, which called a function that turned on the radioVBox's visibility. Also, in the function I set: radioVBox.y = (tf.y + tf.height + 40);. Lastly, I set the TitleWindow's height as follows: height="{radioVBox.y + 270}"

Thank you.

-Laxmidi