title: using tab key as3
body: <p>I am working on a data provider application for class and wanted to take it a step further for usability and add tabbing for navigation, but the tabIndex code I have below does nothing. I would like to tab between the buttons and the textfields. Does tabbing work with data providers? </p>
  
  <pre><code>package 
  {
  
      import fl.controls.Button;
      import fl.controls.List;
      import fl.controls.TextInput;
  
      import flash.display.Sprite;
      import flash.events.Event;
      import flash.events.MouseEvent;
  
      public class EditableList extends Sprite 
      {
  
          public function EditableList() 
          {
              init();
          }
  
          private function init():void 
          {
              addName_bn.addEventListener(MouseEvent.CLICK, onAddName);
              addName_ti.addEventListener(Event.CHANGE, onNameEnter);
              addName_ti.addEventListener("enter", onAddName);
              deleteName_bn.addEventListener(MouseEvent.CLICK, onDeleteName);
              editName_ti.addEventListener("enter", onDeleteName);
              editName_ti.addEventListener(Event.CHANGE, onNameChange);
              names_li.addEventListener(Event.CHANGE, onNameSelected);
              addEventListener(Event.ENTER_FRAME, onNextFrame);
              addEventListener(Event.ENTER_FRAME, onFocus);
              addName_ti.setFocus();
  
          }
  
          private function onFocus(event:Event):void {
              addName_ti.tabIndex = 0;
              addName_bn.tabIndex = 1;
              editName_ti.tabIndex = 2;
              deleteName_bn.tabIndex = 3;
          }
  
          // Handler for when the next frame is reached after initialization, when buttons can be disabled.
  
          private function onNextFrame(event:Event):void {
              removeEventListener(Event.ENTER_FRAME, onNextFrame);
              addName_bn.enabled = false;
              deleteName_bn.enabled = false;
              editName_ti.enabled = false;
          }
  
          // Handler for when the add name button is clicked, adds item to list.
  
          private function onAddName(event:Event):void {
              var newItem:Object = {label:addName_ti.text};
              names_li.dataProvider.addItem(newItem);
              names_li.dataProvider.sortOn("label");
              addName_ti.text = "";
              addName_bn.enabled = false;
              addName_ti.setFocus();
          }
  
          // Handler for when text is entered into the add name textfield, enables the add name button.
  
          private function onNameEnter(event:Event):void {
              addName_bn.enabled = addName_ti.text.length &gt; 0;
          }
  
          // Handler for when the delete name button is clicked, removes the list item.
  
          private function onDeleteName(event:Event):void {
              names_li.dataProvider.removeItemAt(names_li.selectedIndex);
              deleteName_bn.enabled = false;
              names_li.dataProvider.sortOn("label");
              editName_ti.text = "";
              editName_ti.enabled = false;
              editName_ti.setFocus();
          }
  
          // Handler for when text is changed into the edit name textfield, alters the item in the list.
  
          private function onNameChange(event:Event):void {
              var newItem:Object = {label:editName_ti.text};
              names_li.dataProvider.replaceItemAt(newItem, names_li.selectedIndex);
          }
  
          //  Handler for when an item is selected in the list, populates fields and enables buttons.
  
          private function onNameSelected(event:Event):void {
              editName_ti.text = names_li.selectedItem.label;
              editName_ti.enabled = true;
              deleteName_bn.enabled = true;
          }
  
      }
  
  }
  </code></pre>