12 Replies Latest reply on Mar 8, 2011 1:28 PM by Kristin95762

    Radio Button behavior different when selecting with keyboard vs mouse

    Kristin95762 Level 1

      Is there some simple explanation as to why my code runs as expected whey I use my mouse to select radio buttons, as opposed to when I use my arrow keys?

       

      I have 5 radio buttons and one list. Radio buttons are in a RadioButtonGroup, though I understand that to be optional. It doesn't matter wether they're in a group or not, they behave the same way as per below.

       

      In my MXML I use a focusIn(event) on the RB. This, as I understand it, is to allow recognition when using keyboard to select the object.

       

      The focusIn(event) accesses the same function as my change(event). So I have 2 events defined there. One for mouse interaction, and one for keyboard interaction, which loads up some sqlite data. The data loads into the list perfectly fine.

       

      My list control code is: list.selectedIndex = 0, which works with every RB as anticipated if I use the mouse to select it.

       

      However, if I use the arrow keys, the selectedIndex only fires on every other radio button selected with the keyboard. It behaves unpredictably with various key presses and mouse events.

       

      I'm a beginner in Flex 4, with limited experience working with AS3. I'm not using class files. All my code is in a single *.as file.

       

      Just hoping there is some theory out there that will help.

        • 1. Re: Radio Button behavior different when selecting with keyboard vs mouse
          Flex harUI Adobe Employee

          I think there is a change event from the RadioButtonGroup you should be

          using, not the individual button events.

          • 2. Re: Radio Button behavior different when selecting with keyboard vs mouse
            Kristin95762 Level 1

            Thanks for your idea. I will check it out.

             

            In the mean time, I will have to change my code to use a case statement because each radio button performs a different job.

            • 3. Re: Radio Button behavior different when selecting with keyboard vs mouse
              Kristin95762 Level 1

              Okay

               

              I learned from my experiment that I didn't have to use switch/case because I have a focusIn event on my radio buttons.

               

              Adding a change handler to the RadioButtonGroup didn't work.

               

              What it did was this:

               

              Cycling through the radio buttons with the arrow keys still only highlights the first item in my list box on every other hit. So, if that's not clear, my radio buttons dispatch code that should cause the first item in the list box to be highlighted, which it does only every other radio button.

               

              Now there is a new problem in that when I use the mouse to select the radio button, the first item in the list gets highlighted but immediately disappears. It remains selected until I life the mouse button.

               

              Maybe I can't use both mouse and arrow functionalities in this instance???

               

              I don't know.

              • 4. Re: Radio Button behavior different when selecting with keyboard vs mouse
                Kristin95762 Level 1

                excuse me, not 'life' but 'lift' or 'release' the mouse button

                • 5. Re: Radio Button behavior different when selecting with keyboard vs mouse
                  Kristin95762 Level 1

                  In my second experiment I removed the focusIn event from my radio buttons.

                   

                  Now when I select with the mouse button, the first item in the list only highlights on every other selection.

                   

                  Im starting to get very confused.

                  • 7. Re: Radio Button behavior different when selecting with keyboard vs mouse
                    Kristin95762 Level 1

                    hmmmm, 20 lines. Here are some relevant snippets: This is an Adobe AIR, sqlite project

                     

                    this is the .as file part...

                     

                    private function selectWandsCards(event:Event):void

                    {

                    selectedImage = "W/ace.jpg";

                     

                    selectWandsStmt.sqlConnection = conn;

                     

                    selectWandsStmt.text = "SELECT * FROM tarot WHERE image LIKE 'images/W%'";

                     

                    selectWandsStmt.addEventListener(SQLErrorEvent.ERROR, error);

                    selectWandsStmt.addEventListener(SQLEvent.RESULT, showWands);

                     

                    selectWandsStmt.execute();

                    }

                     

                    private function showWands(event:SQLEvent):void

                    {

                    var wandsData:Array = selectWandsStmt.getResult().data;

                    dp = new ArrayCollection(wandsData);

                    selectedCardData();

                    }

                     

                    .     There are five such compbinations of functions as above because I haven't figured out VO's yet

                    .

                    .

                    .

                    .

                    .

                    protected function buttonGroup_changeHandler(event:Event):void

                    {

                    switch(buttonGroup.selectedValue)

                    {

                    case "Wands" :

                    selectWandsCards(event);

                    break;

                    case "Swords" :

                    selectSwordsCards(event);

                    break;

                    case "Cups" :

                    selectCupsCards(event);

                    break;

                    case "Pentacles" :

                    selectPentaclesCards(event);

                    break;

                    case "Major Arcana" :

                    selectMajorsCards(event);

                    break;

                    }

                    }

                     

                    private function selectedCardData():void

                    {

                    cardList.selectedIndex = 0;

                    myTextArea.text = cardList.selectedItem.cardMeaning;

                    }

                     

                    private function cardList_changeHandler(event:Event):void

                    {

                    selectedImage = cardList.selectedItem.image;

                    myTextArea.text = cardList.selectedItem.cardMeaning;

                    }

                     

                    this is the relevant mxml part:

                     

                    <fx:Declarations>

                    <s:RadioButtonGroup id="buttonGroup" change="buttonGroup_changeHandler(event)" />

                    </fx:Declarations>

                    <s:HGroup x="55" y="15">

                    <s:RadioButton x="283" y="394" label="Major Arcana" id="maRb"   groupName="buttonGroup"  selected="true"/>

                    <s:RadioButton x="410" y="394" label="Wands" id="wandsRb"   groupName="buttonGroup" />

                    <s:RadioButton x="506" y="394" label="Cups" id="cupsRb"   groupName="buttonGroup" />

                    <s:RadioButton x="593" y="395" label="Swords" id="swordsRb"   groupName="buttonGroup" />

                    <s:RadioButton x="690" y="394" label="Pentacles" id="pentaclesRb"   groupName="buttonGroup" />

                    </s:HGroup>

                     

                    <s:List

                    x="55"

                    y="408"

                    width="184"

                    height="201"

                    dataProvider="{dp}"

                    id="cardList"

                    labelField="card"

                    change="cardList_changeHandler(event)"/>

                     

                    Sorry this is so long.

                     

                    I've changed my code a bit based on your earlier suggestion. Here's how it currently sorts out:

                     

                    With mouse action..

                    If I select successive radio buttons w/o making a selection from the list, the list loads with data, but the 0-index is only highlighted on every other rb selection. If I select some item in the list before I select the next radio button, the list will highlight the 0-index item.

                     

                    With the arrow keys...

                    Works the same way as with the mouse.

                     

                    This must be a focus issue. Don't know enough about how to implement a focus manager.

                     

                    Thank you for your input, very much.

                    • 8. Re: Radio Button behavior different when selecting with keyboard vs mouse
                      Flex harUI Adobe Employee

                      In 20 lines, you need to post a complete working app.  I'll copy and paste

                      it into two files maximum, and it has to compile and run and show the

                      problem.  I won't set up servers or databases or do any other configuration.

                       

                      I suspect that you don't need any data to replicate the problem, and if you

                      do, you could fake the data instead of actually pulling it from a SQL Lite

                      DB.

                      • 9. Re: Radio Button behavior different when selecting with keyboard vs mouse
                        Kristin95762 Level 1

                        I'm a noob. Most of what I've put together has been extensive searches on the internet and my Flash Builder 4 and Flex 4 Bible in the past month, and an AS2 class 3 years ago.

                         

                        It'll probably take me a few days to figure out 20 lines that produces a running program that may or may not reproduce my issue, because the circumstances will be different.

                         

                        In fact now that I look at it, 20 lines would be impossible. My Switch/case function is 20 lines because there are 5 radio buttons being evaluated.

                         

                        I was hoping you could just look at the relevant code and follow the logic. I cut out all but the most important stuff.

                         

                        20 lines of MXML code...no problem. In fact it works there just as expected with basic, hardcoded data. But this is a sqlite database app. It's not the same animal.

                         

                        No matter where I put my cardList.selectedIndex = 0 instruction, I get the same unpredictable result. Wouldn't have thought that would be so difficult to implement.

                        • 10. Re: Radio Button behavior different when selecting with keyboard vs mouse
                          Flex harUI Adobe Employee

                          In order to find the cause of a problem, my first approach is to isolate and

                          encapsulate the functionality provided in the SDK.  The purpose of the

                          20-line test is to force to you remove as much of your code as possible so

                          it is easier to identify the cause of the problem.

                           

                          If a basic test works, then it indicates there is an issue in your

                          implementation.  If hardcoded data does not fail and loaded data does, it

                          indicates it might be a problem with asynchronicity, in which case it might

                          be worth using an asynchronous event like a timer event to apply the hard

                          coded data, or that your application is not designed with the proper

                          boundaries separating data and views.  A well-designed app should not care

                          whether the data is hardcoded or coming from a different source.

                           

                          If your switch block is more than 20 lines, get rid of it.  If there is code

                          in the switch manipulating the selected state of the radiobuttons, that

                          might be the cause of the problem.  If there isn't, then it shouldn't matter

                          if you take away the switch block.

                           

                          Lots of folks say the cut out all but the important stuff, but half the

                          time, they cut out the important thing.  That's another reason for requiring

                          a cut-and-paste-able test case.

                          • 11. Re: Radio Button behavior different when selecting with keyboard vs mouse
                            Kristin95762 Level 1

                            Hi

                             

                            Thanks for you time, really.

                             

                            I set up a different method that behaves the same way, so it's not an issue with radio buttons or radiobuttongroup.

                             

                            This time I used a suitsList with an xml dataprovider. then I used the selectedIndex to determine which switch/case option to choose.

                             

                            I admit my code is sloppy by professional standards. I just don't see how I can cut it down to something so small in order for you to see what's going on. Each choice runs a different sql statement, and within the results function for each result set, I figured I should run the cardList.selectedIndex = 0, but it's just not that straight forward.

                             

                            So, in the following code, myTextArea.text gets assigned properly each time, but the cardList.selectedIndex = 0 doesn't.

                             

                            private function showWands(event:SQLEvent):void

                            {

                            var wandsData:Array = selectWandsStmt.getResult().data;

                            dp = new ArrayCollection(wandsData);

                            selectedCardData()

                            }

                             

                            private function selectedCardData():void

                            {

                            cardList.selectedIndex = 0;

                            myTextArea.text = cardList.selectedItem.cardMeaning;

                            }

                             

                            I think this is about the best I can narrow it down.

                            • 12. Re: Radio Button behavior different when selecting with keyboard vs mouse
                              Kristin95762 Level 1

                              Also,

                               

                              In my app, only visual elements and my hardcoded dataprovider are defined in the mxml file. All my code is in a separate *.as file