6 Replies Latest reply on Feb 24, 2011 2:53 AM by smon_ed

    Tabbing errors when using a RadioButtonGroup

    smon_ed Level 1

      Could someone please take a look at this code below and let me know if they have the same issue as I am getting?

       

      Tabbing through the elements on the screen works fine until a radio button is selected form any of the groups.  Then, the tabbing fails because it gets trapped, mysteriously.

       

      The screen elements have to created dynamically.

       

      Can any one provide a solution to get the tabbing working, while still creating the questions dynamically using the actionscript?  Is there something I am doing wrong while setting up the RadioButtonGroups?  Or what?  I'm experiencing a major accessibility flaw with this, I have no solution and my client is not very pleased, so any help is massively appreciated!

       

      Main.mxml

      <?xml version="1.0" encoding="utf-8"?>
      <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
              xmlns:s="library://ns.adobe.com/flex/spark" 
              xmlns:mx="library://ns.adobe.com/flex/mx"
              applicationComplete="applicationCompleteHandler(event)"
              width="800" height="600">
        
       
       <fx:Script>
        <![CDATA[
         import mx.events.FlexEvent;
         import spark.components.RichEditableText; 
         
         protected function applicationCompleteHandler(event:FlexEvent):void
         {
          for (var i:int=1; i<=4; i++){
           var questionGroup:VGroup = new VGroup();
           _ac_01_act.addElement(questionGroup);
           
           var qu:RichEditableText = new RichEditableText();
           qu.selectable = true;
           qu.editable = false;
           qu.text = "This is some text";
           questionGroup.addElement(qu);
           
           var rb:ActivityRadioButtonGroup = new ActivityRadioButtonGroup();
           rb.id = "q"+i+"radioButtonGroup";
           questionGroup.addElement(rb);
           
          }
         }
        ]]>
       </fx:Script>
       
       
       <s:VGroup id="activityGroup" x="20" y="20">
        <s:VGroup id="activityContent" gap="40">
         <s:RichEditableText id="_ac_01_txt" name="_ac_01_txt" text="This is some introductory text" width="400" selectable="true" editable="false" paddingRight="5" paddingTop="5" paddingBottom="5" accessibilityName="text field"/>
         <s:VGroup id="_ac_01_act" width="900" gap="20"/>
        </s:VGroup>
       </s:VGroup>
       
       
       
      </s:WindowedApplication>
      
      
      

       

       

       

      ActivityRadioButtonGroup.mxml

      <?xml version="1.0" encoding="utf-8"?>
      <s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
       
       
       <fx:Declarations>
        <s:RadioButtonGroup id="buttonGroup"/>
       </fx:Declarations>
       
       <s:RadioButton id="radio1" value="1" groupName="buttonGroup" />
       <s:RadioButton id="radio2" value="2" groupName="buttonGroup" />
       <s:RadioButton id="radio3" value="3" groupName="buttonGroup" />
       <s:RadioButton id="radio4" value="4" groupName="buttonGroup" />
       
      </s:VGroup>
      

       

       

       

        • 1. Re: Tabbing errors when using a RadioButtonGroup
          Flex harUI Adobe Employee

          I didn't run the code.  Are you trying to mix components into the middle of

          a radiobuttongroup?  That's a known limitation.

           

          I'm not sure why you would want different sets of radiobuttons all in one

          group.  Groups are not per-document, they are per-application.  Find a way

          to give each set a different groupname and it should work better.

          • 2. Re: Tabbing errors when using a RadioButtonGroup
            Shongrunden Adobe Employee

            You probably want to be using group instead of groupName in this case:

             

            <s:RadioButton id="radio1" value="1" group="{buttonGroup}" />

            • 3. Re: Tabbing errors when using a RadioButtonGroup
              Shongrunden Adobe Employee

              It seems like there might be a bug here, for example I would expect this simple example to work when using group instead of groupName:

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark" 

                             xmlns:local="*">

               

                  <fx:Declarations>

                      <fx:Component className="ActivityRadioButtonGroup">

                          <s:VGroup>

                              <fx:Declarations>

                                  <s:RadioButtonGroup id="buttonGroup"/>

                              </fx:Declarations>

                              <s:RadioButton id="radio1" value="1" label="1" group="{buttonGroup}" />

                              <s:RadioButton id="radio2" value="2" label="2" group="{buttonGroup}" />

                              <s:RadioButton id="radio3" value="3" label="3" group="{buttonGroup}" />

                              <s:RadioButton id="radio4" value="4" label="4" group="{buttonGroup}" />

                          </s:VGroup>

                      </fx:Component>

                  </fx:Declarations>

               

                  <s:VGroup gap="20">

                      <local:ActivityRadioButtonGroup />

                      <local:ActivityRadioButtonGroup />

                  </s:VGroup>   

               

              </s:Application>

               

              A workaround seems to be to define your RadioButtonGroup's on the Application and then pass it into your ActivityRadioButtonGroup component, here's an example:

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark" 

                             xmlns:local="*">

               

                  <fx:Declarations>

                      <s:RadioButtonGroup id="group1" />

                      <s:RadioButtonGroup id="group2" />

               

                      <fx:Component className="ActivityRadioButtonGroup2">

                          <s:VGroup>

                              <fx:Script>

                                  <![CDATA[

                                      import spark.components.RadioButtonGroup;

                                      [Bindable] public var rbg:RadioButtonGroup;

                                  ]]>

                              </fx:Script>

                              <s:RadioButton id="radio1" value="1" label="1" group="{rbg}" />

                              <s:RadioButton id="radio2" value="2" label="2" group="{rbg}" />

                              <s:RadioButton id="radio3" value="3" label="3" group="{rbg}" />

                              <s:RadioButton id="radio4" value="4" label="4" group="{rbg}" />

                          </s:VGroup>

                      </fx:Component>

                  </fx:Declarations>

               

                  <s:VGroup gap="20">

                      <local:ActivityRadioButtonGroup2 rbg="{group1}"  />

                      <local:ActivityRadioButtonGroup2 rbg="{group2}" />

                  </s:VGroup>

               

              </s:Application>

               

              I've filed a bug for this here: http://bugs.adobe.com/jira/browse/SDK-29378

              • 4. Re: Tabbing errors when using a RadioButtonGroup
                smon_ed Level 1

                Shongrunden,

                 

                Thanks so much for your help with this.

                 

                The example I gave was a rather simplified version of the issue and it's more actionscript-based than that.  The component is created within an AS class and not within the main application but, following your advice to create the RadioButtonGroup outside the component and then pass it in, I have eventually managed to get the tabbing working properly.

                 

                I did this by creating a setGroup(rbg:RadioButtonGroup){ } function within the ActivityRadioButtonGroup component, and then in my class, I created the component like so:

                 

                var questionAnswerGroup:ActivityRadioButtonGroup = new ActivityRadioButtonGroup();
                var rbg:RadioButtonGroup = new RadioButtonGroup();
                questionAnswerGroup.setGroup(rbg);
                

                 

                As you can see, I just create the new RadioButtonGroup instance and it does not have any unique identifier.

                 

                And the function within my component:

                public function setGroup(rbg:RadioButtonGroup):void
                   {
                    radio1.group = rbg;
                    radio2.group = rbg;
                    radio3.group = rbg;
                    radio4.group = rbg;
                    
                    rbg.addEventListener(Event.CHANGE, changeHandler);
                   }
                

                 

                This solution works.

                 

                I wouldn't have thought of passing the RadioButtonGroup like that as a solution, so your advice was invaluable and I can't thank you enough.

                • 5. Re: Tabbing errors when using a RadioButtonGroup
                  MichaelSteward

                  Stumbled across this post when facing the same issue (albeit in Flex 3).  The solution contained within the bug works well - basically it's essential to remember that even if you define different group attributes for your radio button sets, if groupName is not also set the tabbing gets "stuck" on the first group.

                   

                  So a simple example in Flex 3 would be the following.  Tabbing works from the groupName rather than group property so setting this to something different for each group seems to solve the problem:

                   

                   

                  <mx:RadioButtonGroup id="radioButtonGroup1"/>

                  <mx:RadioButtonGroup id="radioButtonGroup2"/>

                   

                  <mx:VBox>

                       <mx:RadioButton id="radioButton1"

                                          label="My radio button"

                                          group="{radioButtonGroup1}"

                                          groupName="Group 1"/>

                       <mx:RadioButton id="radioButton2"

                                          label="My radio button"

                                          group="{radioButtonGroup1}"

                                          groupName="Group 1"/>

                   

                  </mx:VBox>

                  <mx:VBox>

                       <mx:RadioButton id="radioButton3"

                                          label="My radio button"

                                          group="{radioButtonGroup1}"

                                          groupName="Group 2"/>

                       <mx:RadioButton id="radioButton4"

                                          label="My radio button"

                                          group="{radioButtonGroup1}"

                                          groupName="Group 2"/>

                  </mx:VBox>