6 Replies Latest reply on Apr 27, 2010 9:20 PM by Vikash.kumar29

    Measuring the width of an HBox

    SiHoop Level 1

      I am adding a button to an HBox. The button is of variable length and I want to get the width of the HBox each time a new button is added.

      1. How can I get the width of the HBox each time a button is loaded?

      2. How can I add the buttons to the HBox so they are placed end-to-end horizontally (i.e. no spaces between the buttons)?

       

      Thank you!

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
          <mx:Script>
        <![CDATA[
            import mx.events.ChildExistenceChangedEvent;
      import mx.controls.Button;
      private var button:CustomButton;
      public function init():void{
          for(var j:int=0; j<5;j++){
              button=new CustomButton
              buttonsContainer.addEventListener(Event.ADDED, getLength)
              buttonsContainer.addChild(button)
          }
      }
      public function getLength(e:Event):void{
          trace("length="+e.target.width)
      }
        ]]>
      </mx:Script>
            <mx:HBox id="buttonsContainer" horizontalCenter="0" verticalCenter="0"/>
      </mx:Application>

       

       

      CustomButton.mxml

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"    creationComplete="init()">

       

      <mx:Script>
        <![CDATA[
      public function init():void{
          this.width=Math.floor(Math.random()*50)+50
      }
        ]]>
      </mx:Script>
      </mx:Button>

        • 1. Re: Measuring the width of an HBox
          Vikash.kumar29

          Hi,

           

          For you problem

          1. How can I get the width of the HBox each time a button is loaded?

          you can use

           

          public function getLength(e:Event):void

          {

               buttonsContainer.validateSize(true);
               trace(buttonsContainer.getExplicitOrMeasuredWidth())

          }


          and for your problem

          2. How can I add the buttons to the HBox so they are placed end-to-end horizontally (i.e. no spaces between the buttons)?

          You can set the horizontalGap of HBox to 0, so that no horizontal gapping will be used during layout of container.

           

           

          Hope this is what you are looking for.

          Cheers

          -Vikash

          • 2. Re: Measuring the width of an HBox
            SiHoop Level 1

            I tried your solution but it didn't work. It returned a value of 0.

            Could it be that a different event handler is needed?

             

            Thanks very much for the info about horizontalGa-- that was perfect!

            • 3. Re: Measuring the width of an HBox
              Vikash.kumar29 Level 3

              Try using Following code

               

              buttonsContainer.addEventListener(ChildExistenceChangedEvent.CHILD_ADD, getLength) in Application init function which must lookLike

               

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
                  <mx:Script>
                       <![CDATA[
                             import mx.events.FlexEvent;
                              import mx.events.ChildExistenceChangedEvent;
                              import mx.controls.Button;
                              private var button:CustomButton;
                              public function init():void
                              {
                                   buttonsContainer.addEventListener(ChildExistenceChangedEvent.CHILD_ADD, getLength)
                                   for(var j:int=0; j<5;j++){
                                          button=new CustomButton
                                          buttonsContainer.addChild(button)
                                        }
                               }
              
              public function getLength(e:Event):void{
                  buttonsContainer.validateSize(true);
                   trace(buttonsContainer.getExplicitOrMeasuredWidth())
              }
                ]]>
              </mx:Script>
                <mx:HBox id="buttonsContainer" horizontalCenter="0" verticalCenter="0"/>
              </mx:Application>
              

               

              and modify your CustomButton.mxml as

               

               

              <?xml version="1.0" encoding="utf-8"?>
              
              <mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"    preinitialize="init()">
              <mx:Script>
              
                <![CDATA[
              
              public function init():void{
              
                  this.width=Math.floor(Math.random()*50)+50
              
                  this.height = 22;
              
              }
              
                ]]>
              
              </mx:Script>
              
              </mx:Button>
              

               

              Hope this helps you out

               

              Cheers

              -Vikash

              • 4. Re: Measuring the width of an HBox
                SiHoop Level 1

                Perfect! Thanks so much.


                • 5. Re: Measuring the width of an HBox
                  SiHoop Level 1

                  Vikash,

                  I've found one problem with your code: The first time through it returns a value of 0. Is there a way to prevent it from firing the listener until after the component has been added to the display. It looks to me as though the trace value is always one instance behind.

                  Thanks again!

                  • 6. Re: Measuring the width of an HBox
                    Vikash.kumar29 Level 3

                    Yes, coz I think at that point of time button's creationComplete is not completed. So instead adding

                     

                     public function init():void
                                    {
                                         buttonsContainer.addEventListener(ChildExistenceChangedEvent.CHILD_ADD, getLength)
                                         for(var j:int=0; j<5;j++){
                                                button=new CustomButton
                                                buttonsContainer.addChild(button)
                                              }
                                     }

                     

                    Try using

                     

                     public function init():void
                                    {
                                             for(var j:int=0; j<5;j++){
                                                button=new CustomButton
                                                button.addEventListener(FlexEvent.CREATION_COMPLETE,
                    getLength);
                                                buttonsContainer.addChild(button)
                                              }
                                     }

                     

                    Hope, this may result into correct calculations.

                    1 person found this helpful