2 Replies Latest reply on Aug 16, 2006 1:13 PM by jmortimer

    defaultButton in Accordian

    jmortimer
      I can't get the defaultButton (hit the enter key to submit data when focus is on a TextInput field) to work while its associated container is set inside of an accordian. Any ideas? Compile the script below to see exactly what I mean.

      Interesting, right? Thanks in advance.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Script>
      <![CDATA[
      public function submitLogin1():void {
      text1.text="See, it works here!";
      }
      public function submitLogin2():void {
      text2.text="Yay, you figured it out!";
      }
      ]]>
      </mx:Script>
      <mx:Panel title="Place cursor in textbox, and hit the enter key." x="10" y="10" width="322" height="221">
      <mx:Form width="238" defaultButton="{searchButton1}">
      <mx:FormItem label="Last Name:" fontWeight="bold">
      <mx:TextInput width="120" id="lName1"/>
      </mx:FormItem>
      <mx:FormItem label="First Name:" fontWeight="bold">
      <mx:TextInput width="120" id="fName1"/>
      </mx:FormItem>
      <mx:FormItem label="HBS ID:" fontWeight="bold">
      <mx:TextInput width="120" id="HBS1"/>
      </mx:FormItem>
      <mx:FormItem>
      <mx:Button label="Search" id="searchButton1" click="submitLogin1();"/>
      </mx:FormItem>
      </mx:Form>
      <mx:Text id="text1" width="150"/>
      </mx:Panel>

      <mx:Accordion x="340" y="10" width="386" height="365">
      <mx:Canvas label="Enter Key doesn't work in here." width="100%" height="100%">
      <mx:Panel title="Place cursor in textbox, and hit the enter key." x="10" y="10" width="322" height="221">
      <mx:Form width="238" defaultButton="{searchButton2}">
      <mx:FormItem label="Last Name:" fontWeight="bold">
      <mx:TextInput width="120" id="lName2"/>
      </mx:FormItem>
      <mx:FormItem label="First Name:" fontWeight="bold">
      <mx:TextInput width="120" id="fName2"/>
      </mx:FormItem>
      <mx:FormItem label="HBS ID:" fontWeight="bold">
      <mx:TextInput width="120" id="HBS2"/>
      </mx:FormItem>
      <mx:FormItem>
      <mx:Button label="Search" id="searchButton2" click="submitLogin2();"/>
      </mx:FormItem>
      </mx:Form>
      <mx:Text id="text2" width="150"/>
      </mx:Panel>
      </mx:Canvas>
      </mx:Accordion>

      </mx:Application>
        • 1. Re: defaultButton in Accordian
          mmalpartida
          I think the problem is due to the fact that the Acordion has a default behavior to swtich tabs via ENTER as shown in the help documentation.

          ----------------------------------------------
          Accordion container
          Press the arrow keys to move the focus to a different panel, and then use the Spacebar or Enter key to select that panel. Use the Page Up and Page Down keys to move between individual panels of the container.

          When a screen reader encounters an Accordion container, it indicates each panel with the word tab. It indicates the current pane with the word active.

          For more information on keyboard navigation, see Accordion container Keyboard navigation.
          ----------------------------------------------------------

          Also in regards to precedence
          ---------------------------------------------
          Understanding KeyboardEvent precedence
          If you define keyUp or keyDown event listeners for both a control and its parent, each component dispatches the same keyboard event twice because the event bubbles. The only difference is that the target property of the KeyboardEvent object is changed.

          In the following example, the application, the my_vbox container, and the my_textinput control all dispatch keyUp events to the keyHandler() event listener function:

          application.addEventListener(KeyboardEvent.KEY_UP, keyHandler);
          my_vbox.addEventListener(KeyboardEvent.KEY_UP, keyHandler);
          my_textinput.addEventListener(KeyboardEvent.KEY_UP, keyHandler);


          The order of calls to the event listener is determined by the object hierarchy and not the order in which the addEventListener() methods were called. Child controls dispatch events before their parents. In this example, for each key pressed, the TextInput control dispatches the event first, the VBox container next, and finally the application.

          When handling a key or key combination that the underlying operating system or browser recognizes, the operating system or browser generally processes the event first. For example, in Microsoft Internet Explorer, pressing Control+w closes the browser window. If you trap that combination in your Flex application, Internet Explorer users never know it, because the browser closes before the ActiveX Flash Player has a chance to react to the event.

          --------------------

          add this to your code to get a working example...based on help documentation:

          in your <mx:Script>

          private function addListeners() {
          // Add an id to the form in the accordion...i gave it "form2"
          form2.addEventListener(KeyboardEvent.KEY_DOWN, trapKeys);
          }

          private function trapKeys(e:KeyboardEvent) {
          if(e.keyCode == 13 ){
          submitLogin2();
          }
          }

          ------------------

          Next in the form inside accordion:

          <mx:Form width="238" defaultButton="{searchButton2}" id="form2" keyUp="trapKeys(event)">


          Hope this helps....needs cleaning up but it worked in my test
          • 2. Re: defaultButton in Accordian
            jmortimer Level 1
            Works perfectly. Thanks a lot.