8 Replies Latest reply on Aug 26, 2010 11:44 AM by scott_ml00

    Tab movement ??

    scott_ml00

      Ok ... I throw my hands up.

      I have downloaded the latest Flash Builder 4 and have had some success with webservices and servlets - cool. Now I want to make the UI functional for a test.

       

      Let's say I have a Form container with several input boxes and a grouped radio check box. I want to be able to TAB through each item in the container and after the last one I want to loop to the first element or maybe hit Enter to go to a new container of input boxes. I've read, searched and tried .... it's almost as if the TAB is being ignored. Should work, no??

       

      Also - Why is it most documentation examples only reflect CODE when this is suppose to be a rich IDE environment? This basic stuff should be easy plug and play, am I wrong?

      Also - Why can I not get functional help on specific properties by right clicking on the properties window or hitting, I dunno F1 maybe?

      Also - Why does this seem to be such a oddity of flex 3, 4 spark, fs, mx .... My head is spinning trying to figure this out with out having to buy a book. Does anyone buy books anymore?

       

      ...Am I expecting too much?

        • 1. Re: Tab movement ??
          Flex harUI Adobe Employee

          Tabbing should just work, but most browsers require that you click in one of

          the input fields first.  A few allow you to use JS to activate the SWF.

          • 2. Re: Tab movement ??
            scott_ml00 Level 1

            thank you for your reply. However, we

            are using ie7 and I did click into an input text box. In fact I've tried many approaches.

            I am using the trial version with latest upgrades straight from Adobe - nothing special. Doesn't work. Simple thing wanting to TAB loop in a specific container and further capture and control general movement. Not sure why this does not work here.

            • 3. Re: Tab movement ??
              Flex harUI Adobe Employee

              Does the tab do anything?  Does it end up in the browser?

              • 4. Re: Tab movement ??
                scott_ml00 Level 1

                Hitting TAB does move the focus around. It moves it from top down in my control regardless of the tabIndex, never hits my other control which is an accordion and then tabs through the browser areas. I want to loop with in a control ( including each element of a radio group ) only until the user hits the ENTER key then allow them to the next section.

                • 5. Re: Tab movement ??
                  Flex harUI Adobe Employee

                  TabIndex should be working.  If you have a simple example of it not working,

                  we can take a look.  The properties hasFocusableChildren and tabFocusEnabled

                  have replaced the tabChildren and tabEnabled properties.

                   

                  If you have a radiobutton group that is spread out with other controls

                  in-between them, that has caused folks problems in the past.

                   

                  The FocusManager always distributes the tabs through the entire application.

                  There is no way to contain it so a sub-container of the application (you can

                  contain it in a popup).  It uses a tree-walk unless tabIndex is used.  It

                  only handles contiguous groups because it doesn't save state of whether a

                  group has already been visited

                   

                  The fallback plan is to handle keyFocusChange event yourself, call

                  preventDefault, and assign focus as needed.

                  • 6. Re: Tab movement ??
                    scott_ml00 Level 1

                    ( BTW - Thank you for the responses and insights!! ) There are two versions below with comments before each.

                     

                    Adobe Flash Builder 4 Plug-in Trial
                    Full download including Eclipse(ganymede)

                    Version: 3.4.2
                    Build id: M20090211-1700

                    Eclipse CVS Client
                    Version: 1.1.2.R342_v20090122-7C79E9x9sLM1t6M9YD7_A7
                    Build id: M20090211-1700

                    ADobe Flash Builder
                    4.0.1.277662


                    New Project -> Flash Builder -> Flex Project

                    Runs in ADobe Flash Player
                    Use default SDK (4.1)
                    MX+Spark
                    -Otherwise all other defaults.

                    ------------------------------------------------------------------
                    The value of the tabIndex is always -1. It never reflects anything
                    differently unless I manually increment it. I would
                    like to know when I have hit my last element in a container so I
                    can loop back to the first element. My other example which does what I
                    intended has one big draw back in that I have to know what my last element
                    always is. This is a draw back because I would like to be able to
                    add elements/fields as needed with out having to move the event handling
                    code.
                    ------------------------------------------------------------------


                    <?xml version="1.0" encoding="utf-8"?>
                    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

                    <fx:Script>
                      <![CDATA[
                       protected function TabTest_keyDownHandler(event:KeyboardEvent):void
                       {
                       tabind.text = TabTest.tabIndex.toString();
                      
                        if ( event.keyCode == Keyboard.TAB )
                         if ( TabTest.tabIndex == 4)
                           { TabTest.tabIndex = -1;
                             one.setFocus();
                          one.drawFocus(true); }
                             
                       }
                      ]]>
                    </fx:Script>

                    <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                    </fx:Declarations>
                    <mx:Form x="48" y="78" width="278" height="142" id="TabTest" borderColor="#760A0A" borderAlpha="1.0" backgroundColor="#FEFDFD" contentBackgroundColor="#FFFFFF" dropShadowVisible="false" borderVisible="true" cornerRadius="0" borderStyle="solid" keyDown="TabTest_keyDownHandler(event)">
                      <mx:FormItem label="Label">
                       <s:TextInput id="one" tabIndex="1" tabFocusEnabled="true"/>
                      </mx:FormItem>
                      <mx:FormItem label="Label">
                       <s:RadioButton label="Radio" id="twoa" tabIndex="2" tabFocusEnabled="true"/>
                       <s:RadioButton x="42" y="24" label="Radio" id="twob" tabIndex="3" tabFocusEnabled="true"/>
                      </mx:FormItem>
                      <mx:FormItem label="Label">
                       <s:TextInput id="three" tabIndex="4" tabFocusEnabled="true"/>
                      </mx:FormItem>
                    </mx:Form>
                    <s:TextInput x="141" y="34"/>
                    <s:TextInput x="140" y="241"/>
                    <s:Label x="380" y="150" text="Label" id="tabind"/>
                    </s:Application>

                     

                    --------------
                    This example does what I intended to to but has the draw back of
                    having to apply the event to a specific last element/field which
                    may change so then I have to make sure the event goes forward.
                    Kind of a drawn back,
                    --------------

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

                    <fx:Script>
                      <![CDATA[
                       import mx.controls.Alert;
                      
                       public var keybstr:String = "";
                      
                       protected function TabTest_keyDownHandler(event:KeyboardEvent):void
                       {
                       tabind.text = TabTest.tabIndex.toString();
                       if ( event.keyCode == Keyboard.TAB )
                        keybstr="TAB";
                       if ( event.keyCode == Keyboard.ENTER )
                        Alert.show("ENTER");
                             
                       }

                       protected function three_focusOutHandler(event:FocusEvent):void
                       {
                        if ( keybstr == "TAB" )
                        { one.setFocus();
                         one.drawFocus(true);

                         keybstr =="";  }
                       }

                      ]]>
                    </fx:Script>

                    <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                    </fx:Declarations>
                    <mx:Form x="48" y="78" width="278" height="142" id="TabTest" borderColor="#760A0A" borderAlpha="1.0" backgroundColor="#FEFDFD" contentBackgroundColor="#FFFFFF" dropShadowVisible="false" borderVisible="true" cornerRadius="0" borderStyle="solid" keyDown="TabTest_keyDownHandler(event)">
                      <mx:FormItem label="Label">
                       <s:TextInput id="one" tabIndex="1" tabFocusEnabled="true"/>
                      </mx:FormItem>
                      <mx:FormItem label="Label">
                       <s:RadioButton label="Radio" id="twoa" tabIndex="2" tabFocusEnabled="true"/>
                       <s:RadioButton x="42" y="24" label="Radio" id="twob" tabIndex="3" tabFocusEnabled="true"/>
                      </mx:FormItem>
                      <mx:FormItem label="Label">
                       <s:TextInput id="three" tabIndex="4" tabFocusEnabled="true" focusOut="three_focusOutHandler(event)"/>
                      </mx:FormItem>
                    </mx:Form>
                    <s:TextInput x="141" y="34"/>
                    <s:TextInput x="140" y="241"/>
                    <s:Label x="380" y="150" text="Label" id="tabind"/>
                    </s:Application>

                    • 7. Re: Tab movement ??
                      Flex harUI Adobe Employee

                      You should be using keyFocusChange event instead of keyDown so you can use

                      preventDefault to keep the FocusManager from doing its thing.

                       

                      You can copy code from FocusManager.as.  It builds a list of

                      focusableCandidates and that's how it knows where the end is.

                       

                      tabIndex is -1 by default.  You have to set it manually or via some code you

                      write.  You'll probably be better off just walking the tree using code from

                      FocusManager.

                      1 person found this helpful
                      • 8. Re: Tab movement ??
                        scott_ml00 Level 1

                        Thanks