1 Reply Latest reply on Apr 19, 2007 12:37 PM by bmont

    Restricting focus change within a Canvas

    bmont Level 1
      I have an application with the following:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Script>
      <![CDATA[
      import mx.managers.FocusManager;

      private function creationCompleteHandler() : void {
      myCanvas.focusManager = new FocusManager(myCanvas);
      }
      ]]>
      </mx:Script>
      <mx:Canvas id="myCanvas" x="10" y="10" width="316" height="252" backgroundColor="#ff8040">
      <mx:TextArea x="146" y="10"/>
      <mx:TextInput x="146" y="62"/>
      <mx:TextInput x="146" y="92"/>
      <mx:Label x="10" y="11" text="Text Area:" width="128" textAlign="right"/>
      <mx:Label x="10" y="64" text="Input 1:" width="128" textAlign="right"/>
      <mx:Label x="10" y="94" text="Input 2:" width="128" textAlign="right"/>
      </mx:Canvas>
      <mx:Button x="10" y="270" label="Button1"/>
      <mx:Button x="83" y="270" label="Button2"/>
      <mx:TextInput x="166" y="270"/>

      </mx:Application>

      What I would like to do is to create a tab loop in the orange canvas container that just loops around when I press the tab key and never leaves the canvas. I also want the Button1, Button2 and the Text Input to be in their own tab loop.
      e.g.
      Click on the text area to set focus.
      Press tab to go to Input 1.
      Press tab to go to Input 2.
      Pressing tab again should go back to the text area.

      Does anyone know how to do this?

      Thanks

        • 1. Re: Restricting focus change within a Canvas
          bmont Level 1
          Sorry I missed to add the creationComplete event to the application. Here is the new code:

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationCompleteHandler()">
          <mx:Script>
          <![CDATA[
          import mx.managers.FocusManager;

          private function creationCompleteHandler() : void {
          myCanvas.focusManager = new FocusManager(myCanvas);
          }
          ]]>
          </mx:Script>
          <mx:Canvas id="myCanvas" x="10" y="10" width="316" height="252" backgroundColor="#ff8040">
          <mx:TextArea x="146" y="10"/>
          <mx:TextInput x="146" y="62"/>
          <mx:TextInput x="146" y="92"/>
          <mx:Label x="10" y="11" text="Text Area:" width="128" textAlign="right"/>
          <mx:Label x="10" y="64" text="Input 1:" width="128" textAlign="right"/>
          <mx:Label x="10" y="94" text="Input 2:" width="128" textAlign="right"/>
          </mx:Canvas>
          <mx:Button x="10" y="270" label="Button1"/>
          <mx:Button x="83" y="270" label="Button2"/>
          <mx:TextInput x="166" y="270"/>

          </mx:Application>

          I always get the follwing error message when I first click any object on the screen:

          ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
          at flash.display::DisplayObjectContainer/getChildIndex()
          at mx.managers::SystemManager/getChildIndex()
          at mx.managers::SystemManager/::mouseDownHandler()

          However, the tabbing does work from that point on, except if I start tabbing from the text input screen at the bottom of the page. It hten tabs through all the components.