9 Replies Latest reply on Jun 4, 2010 12:31 PM by M. Ridcully

    How to set ID to a button inside a ToggleButtonBar?

    M. Ridcully

      There's a ToggleButtonBar element, populated from a ViewStack. I need to set IDs to individual buttons (this is needed for QA automation).

       

      How do I do this?

        • 1. Re: How to set ID to a button inside a ToggleButtonBar?
          samschauhan Level 1

          I hope you just want to know which particular button is clicked.

           

          In that case for yourToggleButtonBar you can set:

           

           

          itemClick="clickHandler(event);"

           

          and then you can use event.index to get the button clicked.

           

          If the question is still not answered please elaborate your question a bit.

           

          Regards,

          Sameer Chauhan

          • 2. Re: How to set ID to a button inside a ToggleButtonBar?
            M. Ridcully Level 1

            No, it's not what I need.

             

            If I just put a Button, or any other control, directly into MXML, I can set its ID: <mx:Button id="btn0" ..etc.

             

            Now I need to do the same, but for buttons, created by ToggleButtonBar.

            • 3. Re: How to set ID to a button inside a ToggleButtonBar?
              samschauhan Level 1

              Ok, Got it. I am afraid I dont know the solution, though pretty sure that some work-around will be there.

               

              Why can't you put IDs to all the components which you are providing inside the dataProvider for ToggleButtonBar?

               

              Regards,

              SAM

              • 4. Re: How to set ID to a button inside a ToggleButtonBar?
                M. Ridcully Level 1

                > Why can't you put IDs to all the components which you are providing inside the dataProvider for ToggleButtonBar?

                 

                I don't know how to do this. dataProvider is a ViewStack. I tried setting "id" properties of elements, added to ViewStack as children, but this doesn't seem to affect anything.

                • 5. Re: How to set ID to a button inside a ToggleButtonBar?
                  samschauhan Level 1

                  Can you please share your code, I should be able to help you in that.

                   

                  Regards,

                  SAM

                  • 6. Re: How to set ID to a button inside a ToggleButtonBar?
                    BhaskerChari Level 4

                    Hi Ridcully,

                     

                    Can you please share your code, so that I should be able to help you in that.

                     

                    Regards

                    Bhasker Chari

                    • 7. Re: How to set ID to a button inside a ToggleButtonBar?
                      M. Ridcully Level 1

                      Here's a relevant piece of MXML:

                       

                      <mx:ToggleButtonBar id="selector" dataProvider="{content}"/>

                      <mx:ViewStack id="content" selectedIndex="{selector.selectedIndex}"/>

                       

                      And here's a function, used to populate the content at runtime:

                       

                      function addView(index:int, view:UIComponent):void {

                         var container:Container = Container(content.getChildAt(index));

                         container.removeAllChildren();

                         container.addChild(view);

                         view.percentWidth = view.percentHeight = 100;

                      }

                       

                      The problem is, I don't know how to set "id" property of the buttons in the selector.

                      • 8. Re: How to set ID to a button inside a ToggleButtonBar?
                        BhaskerChari Level 4

                        Hi Ridcully,

                         

                        Why do you require to set button ids for the ToggleButtonBar...?

                         

                        If at all you want to get a reference to any button within the ToggleButtonBar you can get by using the getChildAt() method and you an perform the opertaions on it.

                         

                        Say if your ToggleButtonBar id="selector" then you can get a reference to any button by using below kine of code...

                         

                        var btn:Button = selector.getChildAt(index) as Button;

                         

                        Check out the below example...In which I am getting a reference to the button clicked in ToggleButtonBar.

                         

                        You can also see in the below example the name of button clicked coming in an Alert.

                         

                        <?xml version="1.0"?>

                        <mx:Application

                         

                         

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

                         

                         

                        <mx:Script>

                        <![CDATA[

                         

                         

                        import mx.controls.Alert;

                         

                        import mx.controls.Button;

                         

                         

                        import mx.events.ItemClickEvent;

                         

                         

                        // Event handler function to print a message

                         

                         

                        // describing the selected Button control.

                         

                         

                        private function clickHandler(event:ItemClickEvent):void {

                        myTA.text=

                        "Selected button index: " + String(event.index) +

                         

                        "\n" + "Selected button label: " + event.label;

                         

                        var btn:Button = selector.getChildAt(event.index) as Button;

                        Alert.show(selector.name);

                        }

                        ]]>

                         

                        </mx:Script>

                         

                         

                         

                        <mx:Panel title="ToggleButtonBar Control Example" height="75%" width="75%"

                        paddingTop="

                        10" paddingLeft="10" paddingRight="10" paddingBottom="10">

                         

                         

                         

                        <mx:Label width="100%" color="blue"

                        text="

                        Select a button in the ToggleButtonBar control."/>

                         

                         

                         

                        <mx:TextArea id="myTA" width="100%" height="100%"/>

                         

                         

                         

                        <mx:ToggleButtonBar id="selector" itemClick="clickHandler(event);">

                         

                         

                        <mx:dataProvider>

                         

                         

                        <mx:Array>

                         

                         

                        <mx:String>Flash</mx:String>

                         

                         

                        <mx:String>Director</mx:String>

                         

                         

                        <mx:String>Dreamweaver</mx:String>

                         

                         

                        <mx:String>ColdFusion</mx:String>

                         

                         

                        </mx:Array>

                         

                         

                        </mx:dataProvider>

                         

                         

                        </mx:ToggleButtonBar>

                         

                         

                        </mx:Panel>

                        </mx:Application>

                         

                        If this post answers your question or helps, please kindly mark it as such.


                        Thanks,

                        Bhasker Chari

                         

                         

                        • 9. Re: How to set ID to a button inside a ToggleButtonBar?
                          M. Ridcully Level 1

                          > Why do you require to set button ids for the ToggleButtonBar...?

                           

                          As I said above - for QA automation.

                           

                          Anyway. I seem to have found a way to set those IDs, but it's quite hackish and fragile. I'd really like for someone from Adobe to confirm that it will work under all scenarios:

                           

                          <mx:ToggleButtonBar id="selector" dataProvider="{content}" childAdd="viewButtonAdded(event)"/>

                           

                          ... and later in a script:

                           

                          private var _numViews:int = 0;

                          private function viewButtonAdded(event:ChildExistenceChangedEvent):void {

                             event.relatedObject["id"] = "view_" + _numViews++;

                          }