Multiple tab loops using FocusManager

programming flash
1

I’m having a problem creating multiple tab loops using the FocusManager (fl.controls.FocusManager) from the v3 UI Components.

The first UIComponent instantiated creates a FocusManager instance whose container (or form) is the stage. This instance receives the “FocusEvent.KEY_FOCUS_CHANGE” first and processes the change based on all objects on the stage. Then it calls “preventDefault” so all other FocusManager instances ignore the event.

My workaround is to deactivate the “offending” FocusManager by modifying UIComponent so the static “focusManagers” is public…

var fmStage:FocusManager = UIComponent.focusManagers[stage] = new FocusManager(stage);
fmStage.deactivate();

Then my seperate tab loops function properly.

Is this really necessary? It seems like there should be a better way…

My complete modified version of the documentation example “FocusManagerExample” follows in case anyone is curious…


package
{
    import fl.controls.TextInput;
 import fl.core.UIComponent;
    import fl.managers.FocusManager;
    import flash.display.InteractiveObject;
    import flash.display.Sprite;
    import flash.events.*;
 import flash.utils.Timer;
 
    public class FocusManagerExample extends Sprite 
    {
  private var _fms:Array = new Array();
  private var _s1:Sprite;
  private var _s2:Sprite;
        
        public function FocusManagerExample() {
   //var fmStage:FocusManager = UIComponent.focusManagers[stage] = new FocusManager(stage);
   //fmStage.deactivate();
      
   _s1 = new Sprite();
   _s1.addEventListener(Event.ADDED, _handleEvent);
   _s1.name = "_s1";
   _s1.tabEnabled = false;
   _s1.x = 0;
   buildGridOfTextInputs(_s1);
   addChild(_s1);
   var fm1:FocusManager = new FocusManager(_s1);
   fm1.deactivate();
   
   _s2 = new Sprite();
   _s2.name = "_s2";
   _s2.tabEnabled = false;
   _s2.y = stage.stageHeight * .5;
   buildGridOfTextInputs(_s2);
   addChild(_s2);
   var fm2:FocusManager = new FocusManager(_s2);
   fm2.deactivate();
      
   _fms.push(fm1);
   _fms.push(fm2);
   
   activateFM(fm1);
        }
  
  private function activateFM(fm:FocusManager):void {
   fm.activate();
   fm.setFocus(fm.getNextFocusManagerComponent());
   //fm.showFocus();
  }
  
        private function buildGridOfTextInputs(container:Sprite):void {
            var rowSpacing:uint = 10;
            var colSpacing:uint = 10;
   var compHeight:uint = 20;
   var compWidth:uint = 100;
            var totalRows:uint = 2;
            var totalCols:uint = 2;
            var i:uint;
   
   
            container.graphics.beginFill(0x000000);
   container.graphics.drawRect(0, 0, (compWidth + colSpacing) * totalCols, (compHeight + rowSpacing) * totalRows);
   container.graphics.endFill();
   
   container.addEventListener(MouseEvent.ROLL_OVER, _handleMouseEvent);
   
            for(i = 0; i < totalRows * totalCols; i++) {
                var ti:TextInput = new TextInput()
                ti.name = "component"+i.toString();
                ti.addEventListener(FocusEvent.FOCUS_IN,focusChange);
                ti.setSize(compWidth,compHeight);
                ti.x = 5 + ((i % totalCols) * (compWidth + colSpacing));
                ti.y = 5 + (Math.floor(i / totalCols) * (compHeight + rowSpacing));
                ti.tabEnabled = true;
    ti.tabIndex = container.numChildren + 1;
                container.addChild(ti);
            }
        }
  
  private function _handleEvent(event:Event):void {
   trace(event.currentTarget, event.target);
  }
  
  private function _handleMouseEvent(event:MouseEvent):void {
   trace("_handleMouseEvent");
   for each( var fm:FocusManager in _fms) {
    if (fm.form == event.currentTarget) {
     activateFM(fm);
    } else {
     fm.deactivate();
    }
   }
  }
        
        private function focusChange(e:FocusEvent):void {
            trace("Focus change: " + e.target);  
        }
    }
}