7 Replies Latest reply on Jan 7, 2008 11:34 AM by Tikis_Mikis

    Getting dynamic width of a dynamic button

    Tikis_Mikis
      Hello I'm trying to figure out what the width of a dynamically generated button compenent (in a forloop) is. Here is my code:

      var buttonFilterData:Button = new Button();
      // set the button's data - the filter data
      buttonFilterData.id = "instance__" + items ['data'];
      buttonFilterData.label = items
      ['label'];
      buttonFilterData.data = items ;
      // set button text appearance
      buttonFilterData.setStyle("fontWeight", "normal");
      buttonFilterData.setStyle("fontSize", "10");
      buttonFilterData.setStyle("textAlign", "center");
      // set the buttons position attributes
      buttonFilterData.height = 20;

      // THIS PART DOESNT WORK!)
      Alert.show(buttonFilterData.width.toString());

      buttonFilterData.x = event.currentTarget.mouseX;
      buttonFilterData.y = event.currentTarget.mouseY;
      // add the buttons event listener to allow for dragging of the component
      buttonFilterData.addEventListener(MouseEvent.MOUSE_DOWN, dragIt);
      // add the button to the canvas as a child
      memberFilters.addChild(buttonFilterData);

      Im trying to get the width of a button (the widht will depend on the length of text inside the button ) to determine where I wasnt the button to be place in the x,y coordinates of a canvas. HELP!
        • 1. Re: Getting dynamic width of a dynamic button
          m_hartnett Level 3
          I believe what you need is this:

          var rect : Rectangle = buttonName.getRect(coordObject);
          coordObject would be the box or application to measure against.

          The getRect method returns a rectangle with width,height,top,bottom .... and lots of other info.
          • 2. Getting dynamic width of a dynamic button
            VarioPegged Level 2
            You could also try calling validateNow() on the button container after you add the button as a child and before you check the width:
            ...
            var buttonFilterData:Button = new Button();
            buttonFilterData.id = "instance__" + items[a]['data'];
            ...
            buttonFilterData.addEventListener(MouseEvent.MOUSE_DOWN, dragIt);
            memberFilters.addChild(buttonFilterData);
            memberFilters.validateNow();
            ...
            Alert.show(buttonFilterData.width.toString());

            -- Somewhat related issue --
            As an aside, what I find crappy about the way this forum handles posted code is that whenever you place \[i\] in a section of that code, the parser thinks it's italic text and strips it out and then the rest of the post will be italicized. Lately I try to use anything but the letter i as the variable in a for loop when referring to code on this forum.

            for (var a:int = 0; a < value; a++) {
            myObject[a].someValue = someOtherValue;
            }

            TS
            • 3. Re: Getting dynamic width of a dynamic button
              Tikis_Mikis Level 1
              Ok...so there is a problem with both methods - I'm trying to get the width of the button BEFORE it is added to its parent. Is that possible at all?
              • 4. Re: Getting dynamic width of a dynamic button
                m_hartnett Level 3
                That is not possible.
                You need to add the button before Flex will do any calculations such as width or height. Since dynamic calculations such as width / height top bottom etc can be expensive calculations so they are not done until needed.

                An object created in memory has no graphic infomation associated with it.

                If you need to do something special then you can add an creationComplete or updateComplete listeners to the button and do any special code in there.
                • 5. Re: Getting dynamic width of a dynamic button
                  Tikis_Mikis Level 1
                  Ok...maybe if I explained my problem someone can help me. I have a List component where I have enabled dragging. I can click on a row and drag it into a canvas. From there I use this to get the row's information and create a button for it in the canvas:

                  var items:Array = event.dragSource.dataForFormat("items") as Array;

                  // create a new button component
                  var buttonFilterData:Button = new Button();
                  // set the button's data - the filter data
                  buttonFilterData.id = "instanceTier__" + items[0]['data'];
                  buttonFilterData.label = items[0]['label'];
                  buttonFilterData.data = items[0];
                  // set button text appearance
                  buttonFilterData.setStyle("fontWeight", "normal");
                  buttonFilterData.setStyle("fontSize", "10");
                  buttonFilterData.setStyle("textAlign", "center");
                  // set the buttons position attributes
                  buttonFilterData.height = 20;
                  buttonFilterData.x = event.currentTarget.mouseX;
                  buttonFilterData.y = event.currentTarget.mouseY;
                  // add the buttons event listener to allow for dragging of the component
                  buttonFilterData.addEventListener(MouseEvent.MOUSE_DOWN, tbMouseMoveHandler);
                  // add the button to the canvas as a child
                  memberFilters.addChild(buttonFilterData);

                  This is the part I need help with (and this is strictly VISUAL purposes everything works perfectly):

                  buttonFilterData.x = event.currentTarget.mouseX;
                  buttonFilterData.y = event.currentTarget.mouseY;

                  The problem is that the button is drawn in the canvas where the tip of the cursor is. In other words no matter where I click on the list row once I drag, then drop in the canvas (lets say the tip of the pointer is is at coordinate (20, 30) then the button is drawn with its top left corner right at coordinate (20, 30). I would like to change it so that the center of the button is instead at approximately in the middle of where the cursor is (so instead of the topleft corner of the the button drawn at (20, 30) the top center of the button will be drawn at that coordinate instead.

                  Make sense??? My formulat for calculating that was going to be to get the entire width of the button, divide by 2, and subtract that from the X coordinate and then draw the button at (X-(lengthofbutton/2), Y).

                  Thanks!
                  • 6. Re: Getting dynamic width of a dynamic button
                    m_hartnett Level 3
                    Click on the canvas and you will see how the button is centered.
                    The key is adding the creationComplete listener to the button.

                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
                    layout="absolute"
                    xmlns:view="view.*"
                    >

                    <mx:Script>
                    <![CDATA[
                    import mx.controls.Button;

                    private function clickHandler( e:Event) : void {

                    // create a new button component
                    var buttonFilterData: Button = new Button();
                    buttonFilterData.label = "Label XXXX";
                    // set button text appearance
                    buttonFilterData.setStyle("fontWeight", "normal");
                    buttonFilterData.setStyle("fontSize", "10");
                    buttonFilterData.setStyle("textAlign", "center");
                    // set the buttons position attributes
                    buttonFilterData.height = 20;
                    buttonFilterData.addEventListener("creationComplete",btnCreateCompleteHandler);
                    buttonFilterData.x = e.currentTarget.mouseX;
                    buttonFilterData.y = e.currentTarget.mouseY;

                    cvs.addChild(buttonFilterData);

                    }

                    private function btnCreateCompleteHandler(e : Event) : void {
                    var ix : int = e.currentTarget.x - (e.currentTarget.width / 2);
                    var iy : int = e.currentTarget.y - (e.currentTarget.height / 2);
                    e.currentTarget.x = ix;
                    e.currentTarget.y = iy;
                    }


                    ]]>
                    </mx:Script>
                    <mx:Canvas id="cvs" x="8" y="9" width="531" height="210" mouseDown="clickHandler(event)" backgroundColor="#c0c0c0">
                    </mx:Canvas>

                    </mx:Application>
                    • 7. Re: Getting dynamic width of a dynamic button
                      Tikis_Mikis Level 1
                      OMG that's it! Thank you so much that was sooo easy! Wow you are very knowledgeable thank you so much for your help.