8 Replies Latest reply on Oct 6, 2011 10:56 AM by m_woot

    Tab index not work on image, panel and Group tags

    m_woot

      I am writing code to order the tab on multiple tags like "img","Panel","LinkButton",... and pie charts. when I run my flash program, the tab indexing does not work at all. it just works on pie chart and "link button" tags, not on "img","Panel","Group" tags. I also have tried to "enable tab" on those fields, and also setting the tab chilern to true , but no help.

       

      on the other hand when I disable tab on the pie chart, and link button, still the tab is enabled. it seems no matter what I do regarding the tab index, it does not reflect when I run my program.

      I appreciate a lot if someone could help me I am working with flex sdk 4.1

        • 1. Re: Tab index not work on image, panel and Group tags
          Flex harUI Adobe Employee

          In Flex, components that receive focus must implement IFocusManagerComponent.  Most containers do not.

          • 2. Re: Tab index not work on image, panel and Group tags
            m_woot Level 1

            thanks for the anwser, but could you explain more? you mean there is not a way for me to tab on img, panel, and group? I have seen some accessibilty website in adobe website which they can tab through the images. like

            http://www.dignubia.org/index.php?flash=no.

             

            the thing is I have a "sun: image in my image tag identifying the weather on the website, so when the user clicks on it, it will go to a weather website. but I have to define tabs on it for the prupose of accessibilty.

             

            I would appreciate a lot if you could help me

            • 3. Re: Tab index not work on image, panel and Group tags
              Flex harUI Adobe Employee

              Not all components were intended to have focus “out of the box”.  You can extend those components to take focus by implementing IFocusManagerComponent on a subclass.

               

              However, in the case of the image, I would recommend using an image in a Button skin, since Button can take focus and has a screen reader implementation as well.  Maybe if we understand what your uses for Panel and Group are, you’ll find that you really want to use built-in accessible components instead.

              1 person found this helpful
              • 4. Re: Tab index not work on image, panel and Group tags
                m_woot Level 1

                Thanks alot for the help. I finally got that to work. however Ihave one more question. I was able to put the tab on image throught the code (.as) file , like below, where I am setting the tab dynamically based on number of images we have and used my new class which implemetns the IFocusManagerComponent.

                 

                functionSetTab(j){

                          //var img:mx.controls.Image = new Image();  // the old code

                          var img:FocusableImage = new FocusableImage();


                img.tabEnabled = true;

                img.tabFocusEnabled = true;

                img.tabIndex = j;

                }

                 

                now if I want to set a fix tab index(not dynamically) to a picture through my mxml file, ifI change the <mx.Image> to <FocusableImage> ,it will give me error,  how can I use FocusableImage in mxml file?

                 

                I really appreciate if you could help me again.

                • 5. Re: Tab index not work on image, panel and Group tags
                  Flex harUI Adobe Employee

                  In the top tag, use xmlns:custom=”*” (or path to the class/package)

                  And

                  <custom:FocusableImage

                  1 person found this helpful
                  • 6. Re: Tab index not work on image, panel and Group tags
                    m_woot Level 1

                    thanks alot for the reply.

                     

                    the thing is I have created my custome class in .as file like below .

                     

                     

                    import mx.controls.Image;

                    import mx.managers.IFocusManagerComponent;

                     

                              public class FocusableImage extends Image implements IFocusManagerComponent

                              {

                                        public function FocusableImage()

                                        {

                                                  super();

                                        }

                              }

                     

                    but using the custom, in mxml file I cannot access to FocusableImage , I mean when I type <custom:FocusableImage>....I get the error: could not resolve <custom:FocusableImage> to a component implementation. I also did  xmlns:custom=”*” in my <mx.application> which is toppest tag in my mxml file.

                     

                    then I thought maybe I have to create mxml file to have my custome foucasble image class. so I created the following in mxml file.

                     

                    <?xml version="1.0" encoding="utf-8"?>

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

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

                                         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">

                              <fx:Declarations>

                                        <!-- Place non-visual elements (e.g., services, value objects) here -->

                              </fx:Declarations>

                              <fx:Script>

                                        <![CDATA[

                                                  import mx.controls.Image;

                                                  import mx.managers.IFocusManagerComponent;

                     

                                                  public class FocusableImage extends Image implements IFocusManagerComponent

                                                  {

                                                            public function FocusableImage()

                                                            {

                                                                      super();

                                                            }

                                                  }

                                        ]]>

                              </fx:Script>

                    </s:Group>

                     

                     

                    this way I was able to do <custom:FocusableImage> in my mxml file , however I have error in this mxml file that " the class cannot be nested".

                     

                    is there a way to access use  <custom:FocusableImage> without any of these errors?

                     

                    also I wantto have just one file to access to my FocusableImage class, not one mxml file for the sake of <custom:FocusableImage> and one .as file.

                     

                    can you help me again how can I achieve this?

                     

                    Thanks alot for your time

                    • 7. Re: Tab index not work on image, panel and Group tags
                      Flex harUI Adobe Employee

                      Is that .as file in the default package?  Otherwise you have to specify the package path in xmlns:custom=”...”

                      • 8. Re: Tab index not work on image, panel and Group tags
                        m_woot Level 1

                        thanks, it worked. I changed it to xmlns:custom ="packageName.* "