¿Cómo funciona el enfoque en Flex?

Question

Intento descubrir cómo funciona el mecanismo de enfoque en Flex. Aquí viene el ejemplo de lo que quiero decir:

Supongamos que tenemos una aplicación web simple, que contiene un componente personalizado que extiende Canvas e implementa mx.managers.IFocusManagerComponent. Este componente anula los métodos focusInHandler y focusOutHandler y muestra algunos comentarios sobre cómo se llaman (borde más delgado o más grueso). Este componente personalizado también contiene algunos Text.

La fuente del componente es:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100" creationComplete="cc();" implements="mx.managers.IFocusManagerComponent"> 
<mx:Script> 
    <![CDATA[ 
     import mx.containers.Canvas; 
     import mx.controls.Text; 
     import mx.controls.TextArea; 
     import mx.core.UIComponent; 
     import mx.managers.IFocusManagerComponent; 

     public function cc():void 
     { 
      text = new Text; 
      text.text = "123"; 
      addChild(text); 

      setStyle("backgroundColor", "0xddddff"); 
      setStyle("borderColor", "0x000000"); 
      setStyle("borderThickness", 1); 
      setStyle("borderStyle", "solid"); 
     } 

     private var text:Text; 

     override protected function focusInHandler(e:FocusEvent):void { 
      trace("focusInHandler, currFocus: " + focusManager.getFocus()); 
      setStyle("borderThickness", 4); 
     } 

     override protected function focusOutHandler(e:FocusEvent):void { 
      trace("focusOutHandler, currFocus: " + focusManager.getFocus()); 
      setStyle("borderThickness", 1); 
     } 
    ]]> 
</mx:Script> 
</mx:Canvas> 

Aquí está la versión en vivo (con vista de origen): http://rafalrybacki.com/lab/focus_question/. En la aplicación también hay un TextArea debajo del Canvas - para facilitar la manipulación del foco durante la prueba.

Las preguntas:

1. Si hace clic una vez sobre una violeta lienzo recibe el foco (focusInHandler se llama), a continuación, si hace clic de nuevo se pierde el foco (focusOutHandler llama) - por qué?

2. de hacer clic en un Text la Canvas recibe el foco (focusInHandler llama) y lo mantiene cuando se hace clic en cualquier lugar del área (focusOutHandler Nevet llama) - por qué?

¿Quizás mi comprensión del problema del enfoque completo es incorrecta? Gracias por cualquier sugerencia.

Con respecto,

Rafal

Answer 1

Hey Rafalrybacki. [Estoy en una reunión, y realmente no puedo dedicarle tiempo a la pregunta, pero pensé que podría ayudar con un puntero o dos:]

Primero, la intención de un lienzo es interactuar con FocusManager de forma diferente que un componente que implementa IFocusManagerComponent. Canvas implementa IFocusManagerContainer y aunque puede lograr lo que está tratando de lograr convirtiendo el contenedor en un IFocusManagerComponent, lo evitaría, simplemente porque trato de hacer lo que creo que el equipo de flex sdk pretendía cuando utilizaba componentes internos.

Lo que creo que pretenden es que escuches el FocusEvent en tu contenedor. FocusEvents se activa de forma predeterminada, de modo que puede lograr la mayoría de todo lo que necesita con un simple detector de eventos.

Nota: Escuchar un focusOut puede ser confuso con componentes que tienen varios uicomponents como elementos secundarios --- es decir, combobox tiene un UITextField y un botón, por lo que el componente tiene múltiples eventos FocusOut y FocusIn sucediendo desde un mismo componente. Su salvador estará (supongo) haciendo un container.contains() en un elemento focusManger.getFocus() (fundiéndolo, etc.) para establecer con precisión su estilo.

Acabo de contar, así que si necesita ayuda más allá de esto, o si desea saber más acerca de por qué se envía un focusIn o focusOut evt cuando se está enviando, estaré encantado de escribir un código juntos para ti y explica por qué se captura el tipo de evento. Su mejor opción es que (para ajustarse a las pautas de flex sdk) use un detector de eventos desde el contenedor y no pelee con un componente que sea tanto un IFocusManagerComponent como un IFocusManagerContainer. Podría ser desordenado.

Espero que ayude. La mejor de las suertes, Jeremy