1 Reply Latest reply on Sep 1, 2006 8:24 PM by peterent

    UIComponent.width is always zero

    munkybot Level 1
      Well, not always... When I instantiate a control with an MXML tag, the width property returns the correct number. When I instantiate a control via ActionScript, the width property always returns 0. I've What I'm doing wrong?

      Here's the code


      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application layout="absolute" width="100%" height="100%" frameRate="12" pageTitle="Text Control width test" xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init()">
      <mx:Script>
      <![CDATA[
      import mx.controls.Text;
      [Bindable]
      internal var debugMsg:String; // used for displaying text our textArea at the bottom of the application
      internal function init():void {
      // output widths of text control created via MXML
      debugMsg += "textViaMXML.width = " + textViaMXML.width + "\n";
      debugMsg += "textViaMXML.measuredWidth = " + textViaMXML.measuredWidth + "\n";
      debugMsg += "textViaMXML.textWidth = " + textViaMXML.textWidth + "\n";

      // now we create a Text via actionscript
      var textViaAS:Text = new Text();
      textViaAS.text = "Text Control created via ActionScript";
      textViaAS.y = 40;
      textViaAS.setStyle('horizontalCenter',0);
      application.addChild(textViaAS);
      textViaAS.validateNow(); // for kicks, doesn't seem to fix the problem...

      // output widths of text element created via ActionScript
      debugMsg += "textViaAS.width = " + textViaAS.width + "\n";
      debugMsg += "textViaAS.measuredWidth = " + textViaAS.measuredWidth + "\n";
      debugMsg += "textViaAS.textWidth = " + textViaAS.textWidth + "\n";
      }
      ]]>
      </mx:Script>
      <mx:Style>
      Text { fontFamily: Verdana; fontSize: 16pt; }
      TextArea.debugTextArea { fontFamily: Courier; fontSize: 12pt; }
      </mx:Style>
      <mx:Text id="textViaMXML" text="Text Control created via MXML" horizontalCenter="0"/>

      <!-- a textArea for display messages from AS -->
      <mx:ApplicationControlBar id="debugControlBar" dock="false" width="100%" bottom="0">
      <mx:TextArea id="debugTextArea" styleName="debugTextArea" width="100%" height="120" editable="false" text="{debugMsg}" />
      </mx:ApplicationControlBar>
      </mx:Application>
        • 1. Re: UIComponent.width is always zero
          peterent Level 2
          The Flex framework is a series of phases or steps. That means you cannot instantiate a component and then expect to get its size as it hasn't been through any other phase except for initialization.

          Flex needs to go through its measure phase where it asks each component how large it is; this makes each component ask how large its children are, etc.

          When you used creationComplete="init()" the Application and all of its children have gone through all of the phases. This means the textViaMXML is also complete and sized. Then you create a new Text control and, even though you add it to the container, ask for its size. The container hasn't put the new control through its phases yet (which will also trigger the container to go through a few phases, too, to accomodate the new control). That will happen once your init() function ends and control returns back to the Flex framework.

          To do what you want, add an event listener to your new control and listen for its creationComplete event. Then you can see how large it is.

          If you need to get measurements sooner, there are functions to calculate the size of text based on the font, etc. you plan to use. Check out the Flash TextField control.