AS3 FocusManager, tabIndex and tab loop control in flash form components

[jakesee]

Hi,

I need some help on how to use the define a tab loop and making it work correctly in Flash AS3 CS4 FP9. Greatly appreciate any hinting or clue on how to solve this mind bogging issue. Thanks!!

If you do not wish to read the details, my short question is: How do I use FocusManager? I did the following code, which does not work as intended. What is missing?

// TheForm is a MovieClip on the swf.
// TheForm has fl.controls.TextInput
// and other UI componenets as child
// all UI components have tabIndex defined using
// windows > other panels > accessibility
// everything is on first frame
var fm:FocusManager = new FocusManager(TheForm);
fm.activate();

SETUP DETAILS
I have several fl.controls.TextInput and other UI components (ComboBox and Button) in an form.swf that is supposed to make up a contact form.

I have set the tabIndex using the windows>other panels>accessibility panel (and also tried using AS3) for each of the fl.controls.

In operation, form.swf is not the stage, and the heirarchy is as follows: index.swf > main.swf > form.swf

- index.swf: contains background and a flash.display.Loader to load main.swf. Purpose is to calculate screen size and coords for gradient and centering.

- main.swf: contains consistent UI such as main navigation, header, footer and logo. also contains flash.display.Loader to load the "pages", one of which is form.swf

- form.swf: contains the form UI components

TABINDEX
Since main.swf and the form.swf both contains tabEnabled items such as navigation buttons on main.swf and form UI on form.swf, I have set the tabIndex in a way that no two items have same tabIndex even across different swf.

However, problems:

1. when the tab is press, it does not cycle through the controls. It goes from the form controls, to other navigation buttons in the swf and then back to the form controls. i.e. a stage-wide tab loop

2. the first time i go into the page, the tab cycles in the correct order among the form UI components. But if i go to another "page" and come back to the form, the tab no longer cycle correctly among the form UI components. It seems totally random.

NOTE: a "page" is loaded by clicking a button in the main.swf which also contains a flash.display.Loader that will load the swf "page".

[JasonHippy]

Hey dude,
Been away for a while (on holiday with the wife 'n kids!), so I've not been online much recently.

I've also not used the focus manager since AS2 (and then it was only once!), so I can't be of much help just yet. But I'll try to have a play with it when I get a chance and I'll see what I can find out for you!

I'm still using FlashDevelop for AS3 at the moment too, but I think one of my mates has a copy of CS3, so I'll try hijacking his machine at some point and see what I can do!

I'm not sure exactly what you're after. From reading the details you've posted:
When the form is visible/loaded into the content area, you want the tab manager to tab only through the controls on the form and ignore the other controls? Is that right?? Or have I missed something?

Cheers for now,
Jas.

[jakesee]

Hey dude,
Been away for a while (on holiday with the wife 'n kids!), so I've not been online much recently.

Hello Jas,

You sound as if you are obliged to make frequent replies to the forum. Are you moderator or something? Of course, I think it will be alright if you did not reply, but thanks anyway!

I'm not sure exactly what you're after.

Ideally, I would like the tab KEY_DOWN to cycle through all the mouse enabled items so as to address accessibility issues. The problem I faced is that despite assigning the tabIndex properties, the tab order is still wrong (it cycles in consistent but undefined order).

Like I explained, the form.swf is nested in another main.swf which is nested in index.swf. A navigation button on main.swf will Loader.load() the form.swf. The tab order is messed up inside the form.swf only when I visit form.swf the second time.

Since it has been 5 days since I posted this, I managed to make one progress. That is to make my above code work as I expect it would.

I read from AS2 forums that the stage has a _focusManager property on which one can focusManager.deacivate() it. But I cannot find a parallel in AS3.

What I realised was that the fl.controls.* has got such a focusManager property. I assume that the entire stage plus children uses the same FocusManager, and then I take it and call focusManager.deactivate() before running my custom fm.activate().

And it worked.

Even after all these, still there remains many unanswered questions. Mainly regarding the awkward programming. I suppose there is a (more) proper way of using FocusManager.

So my questions would be:
1. How to use FocusManger (or otherwise) to define a tab loop properly?
2. Who/What is responsible for calling deactivate() and activate()?

[JasonHippy]

Hmm, yes tab indexing and the FocusManager have always been buggy to say the least!

I've tried a few things myself, not sure if this is of much help though!

In pure AS3, because we're deriving from sprite, the focusManager instance at stage level seems to be unavailable.
It's obviously there somewhere, as any tabEnabled items in your code are controlled by it. But I too have been unable to find a way to directly access it.
So I'm not sure what to suggest to stop the items outside of the form from tabbing when the form is visible.

If you use mxml for your flash/flex apps; mxml uses mx:Application as a base class for the app and the stage-wide FocusManager instance, called focusManager is available and you can manipulate it.
I've tried creating an AS3 class which derived from/extended Application, but without any luck so far. I keep getting various errors.

I guess one workaround could be to manipulate the tabEnabled properties of the items you want to exclude from the global tab-loop. So you set the tabEnabled property to false for anything you don't want tabbable when the form is visible.

So perhaps, as soon as your form is made visible, you call a function to toggle the tabEnabled property for all items you want disabled and then when the form is finished with, you call the function again to re-enable them.
i.e.

private function toggleTabEnabled():void
{
    // These are the items you want to toggle tabEnabled for.
    btn1.tabEnabled = !btn1.tabEnabled; // use the NOT operator
    btn2.tabEnabled = !btn2.tabEnabled; // '!' to toggle the 
                                                         // tabEnabled property
}

But as you're dealing with nested clips things aren't quite so cut and dry as that. You'd probably have to set up some kind of event dispatcher/listener system so that when index.swf displays the form, it will call its own toggle function to disable the tab enabled items you don't want accessible. It would also have to dispatch an event to it's parent (main.swf) to inform its parent that it needs to call it's toggle function.
Likewise, when the form is finished with, index.swf would have to call it's toggle function and then dispatch an event to it's parent (main.swf) to get it to call it's toggle function.

If you get my meaning?

Not an elegant solution, but it's an option I guess.

However, thinking about it. From an accessibility point of view, should you really be disabling any of your tab enabled UI components at any point? If somebody doesn't have a mouse connected, shouldn't they still be able to access some of the other UI components outside the form via tab when the form is visible?

If there are any UI components which have to be disabled at any point (e.g. they are disabled until the user has filled in the form, or until they've clicked on a particular button) then where you disable/enable those items by setting the enabled property, you can also set the tabEnabled property too. Which will stop them getting tab-focus when they're disabled. That way only the enabled items will be included in the stage-wide tab loop.

Generally with the tab-loop, the items are added to the tab index in the order in which they were added to the stage, but manually specifying their place in the tab-order by setting the tabIndex property should allow you to set the order. But as I've already said, the focus manager in flash seems to be quite buggy and that's with just the one seemingly inaccessible instance at stage level...As for dealing with multiple instances of the focus manager, who knows?!

But I'll keep playing and try to keep you posted!

Cheers for now,
Jas.

[ivt]

Hi,
I am one of the untamed types who used to reinvent the wheel. So I suffer... :) For a year I've been writing my own as3 environment named T_KIT, which has great capabilities, and that was a very very exhaustive process since I had to develop a framework which is consistent, systematic, code oriented and bug free.
I managed to overcome many Adobe features(!) on as3 such as great 3D with no depth sorting etc...:confused:

The last challenge I've crashlanded on is (ladies and gentleman applause) focus behaviour.

Well when you write your own object, component and control system, you of course build your container control class and a focus manager class. Using as3 focus manager is allready not an option since I am not (definitively) using as3 components which came with CS4.

(Note that as3 focusManager is not a part of flash player, when you use it, it is compiled into your project, and for that you should use cs4 or whatsoever library system and add ui components of adobe, else compilation will end up with an error message)

In Flash player and Firefox 3.5.5 everything works fine. Focus is trapped in my application and T KIT focus manager handles tabs and shift tabs well.

In Internet Explorer 7, sadly when I press tab, the focus jumps out of my application instead of jumping to the next focus target. Actually when I debugged it, to my surprise, the next focus target became active but supressed since Ie7 stole the focus.

Now a little meditation before spending our boos on Ie7... As an activex control (a single control) embedded in an html page this may be the correct behaviour since there really is no focusable "thing" inside the application (T KIT virtualizes focus control so only focusable thing is a dummy unnoticable textfield on the stage, this way for non textedit controls the hidden textfield is used).

Now, without any "divine intervention" (as javascripts etc) how can I keep the focus in my application when running in Ie7?
When searching for this, I found out that many people suffer the inverse too. They want to take the focus out of their application when appropriate...

Thanks.
IVT

[ivt]

A very late update, sorry... I solved my problem but forgot to write it here. Now my controls can stay in a tab loop or exit from the beginning (shift-tab)and end(tab) points. The trick is achieved by three text field objects at my top level display container object(which handles stage and root). They have the tabIndexes 1 2 and 4, whenever one of my edit controls is focused its textField.tabIndex is set to 3. When unfocused tab is disabled. On controls which are not tab supported via as3 (since my controls are not native to as3), the stage tab focus is trapped primarily to textField with index 2. That solves all problems with tab and shift-tab.
Then, my container control class has a property of tabLoop. If it is true, I let tab go to wherever it likes to...

I hope this would help all mad sciencetist framework builders.... Ahahaha...
IVT