Flex Text input focus

Question

On my Air app , I have 2 problems with focus. Indeed, when I try to move inside my form with tab key, order is not good. Second point, focus border is not visible even if cursor is in the text input.

Find below part of code

For moving with tab key

this.focusManager.activate();
this.focusManager.setFocus(this.fdNom);

My TextInput CSS

 s|TextInput 
{
    focusColor: #33CC00;
    color : #343434;
    font-weight : normal;
    font-family: Helvetica ;
    font-size : 12;

}

My form

<s:Form x="0" y="94" id="foPerso" width="100%" height="100%" 
            includeInLayout="true" includeIn="tb1" 
            backgroundColor="#FFFFF">

        <s:layout>
            <s:FormLayout gap="3" paddingLeft="0"/> 

        </s:layout>



        <s:HGroup width="100%" gap="3" horizontalAlign="left" resizeMode="noScale"
                  verticalAlign="baseline" >


            <s:DropDownList id="cbQualite" dataProvider="{DP_PAT_CIVIL}"
                            selectedItem="{getSelectedItem(DP_PAT_CIVIL, objectPatient.paQualPatient)}" 
                            change="objectPatient.paQualPatient = event.currentTarget.selectedItem.label"/>

            <s:FormItem label="Nom" >
                <s:TextInput id="fdNom" width="200" 
                             text="@{objectPatient.paNomU}"

                             />
            </s:FormItem>
            <s:FormItem  label="Prénom" >
                <s:TextInput id="fdPrenom" width="200" text="@{objectPatient.paPrenom}"/>
            </s:FormItem>
            <s:DropDownList id="cbDossier1" dataProvider="{DP_PAT_DOS1}" width="118" height="22" tabIndex="3"
                            change="objectPatient.paQualPatient = event.currentTarget.selectedItem.label"
                            />

            <s:FormItem label="" >
                <s:TextInput id="fDossier1" width="90" paddingRight="5" text="@{objectPatient.paDossier1}"/>
            </s:FormItem>
        </s:HGroup>

My form is on custom TitleWindow component.

Thanks for helping

Answer 1

I found a part of solution but I need you help to finish.

Indeed, with spark Window all work well but I create my window like that, and focus is not visible. What the mistake?

var wdetcorr:wDetailCorrespondant = new wDetailCorrespondant();
            wdetcorr.monIdCorresp = correspDG.selectedItem.crIndex;

            var wOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
            wOptions.systemChrome = NativeWindowSystemChrome.NONE;
            wOptions.transparent = false;
            var fnwDetailPatient:FlexNativeWindow = new FlexNativeWindow(wdetcorr, wOptions);
            fnwDetailPatient.activate();

And FlexNativeWindow code is:

package fr.ui.windowSkin
{
import flash.display.NativeWindow;
    import flash.display.NativeWindowInitOptions;
    import flash.events.Event;
    import flash.events.KeyboardEvent;
    import flash.ui.Keyboard;

import mx.core.IUIComponent;
import mx.core.IVisualElement;
import mx.core.IVisualElementContainer;
import mx.core.UIComponent;
import mx.events.*;
import mx.managers.WindowedSystemManager;

[Event(name="creationComplete", type="mx.events.FlexEvent")]

public class FlexNativeWindow extends NativeWindow implements IFlexNativeWindow
{
    private var _systemManager:WindowedSystemManager;

    private var _content:UIComponent;

    private var _window:IVisualElementContainer;

    public function FlexNativeWindow(window:IVisualElementContainer, initOptions:NativeWindowInitOptions = null)
    {
        super(initOptions);


        _window = window;

        addEventListener(Event.ACTIVATE, windowActivateHandler);

    }

    public function addElement(control:IVisualElement):void
    {
        _window.addElement(control);
    }

    public function removeElement(control:IVisualElement):void
    {
        _window.removeElement(control);
    }

    private function windowActivateHandler(event:Event):void
    {
        event.preventDefault();
        event.stopImmediatePropagation();
        removeEventListener(Event.ACTIVATE, windowActivateHandler);

        if (stage)
        {
            if (!_systemManager)
                _systemManager = new WindowedSystemManager(IUIComponent(_window));

            stage.addChild(_systemManager);

            dispatchEvent(new FlexEvent(FlexEvent.CREATION_COMPLETE));

            stage.addEventListener(Event.RESIZE, windowResizeHandler);
            stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownListener);

        }
    }

    private function keyDownListener (e:KeyboardEvent):void {

        if (e.keyCode == Keyboard.ESCAPE) {
            stage.nativeWindow.dispatchEvent(new Event("myEventClose", true));
            stage.nativeWindow.close();
        }


    }

    private function windowResizeHandler(event:Event):void
    {
        // prise en compte de la valeur mini
        UIComponent(_window).height = stage.stageHeight;
        UIComponent(_window).width = stage.stageWidth;


    }
}

}

Answer 2

Flex will automatically set the tab order for you based on the order in which the components were added in the MXML. If your MXML looks like this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="200" minHeight="200">

  <s:TextInput id="textInput1" 
               x="0" y="0" 
               text="TEXT INPUT #1" />
  <s:ComboBox id="comboBox2" 
              x="0" y="60">
    <s:dataProvider>
      <mx:ArrayList>
        <fx:String>Red</fx:String>
        <fx:String>Orange</fx:String>
        <fx:String>Yellow</fx:String>
        <fx:String>Blue</fx:String>
        <fx:String>Green</fx:String>
      </mx:ArrayList>
    </s:dataProvider>
  </s:ComboBox>
  <s:TextInput id="textInput2" 
               x="0" y="30"
               text="TEXT INPUT #2" />
</s:Application>

When you hit the tab button to move between fields, it will go to TextInput1, then Combobox1, then TextInput2 even though they are arranged in a different order based on their x,y coordinates. This is due to the order that those components appear in the MXML. When you set the tabIndex property you can manually control the tab order.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="200" minHeight="200">

  <s:TextInput id="textInput1" 
               x="0" y="0" 
               text="TEXT INPUT #1"
               tabIndex="1"/>
  <s:ComboBox id="comboBox2" 
              x="0" y="60"
              tabIndex="3">
    <s:dataProvider>
      <mx:ArrayList>
        <fx:String>Red</fx:String>
        <fx:String>Orange</fx:String>
        <fx:String>Yellow</fx:String>
        <fx:String>Blue</fx:String>
        <fx:String>Green</fx:String>
      </mx:ArrayList>
    </s:dataProvider>
  </s:ComboBox>
  <s:TextInput id="textInput2" 
               x="0" y="30"
               text="TEXT INPUT #2"
               tabIndex="2"/>
</s:Application>

As for the focus border, unless you are setting a custom skin on your components they should still have the default blue focus border around them. The Combobox component can also receive focus no problem. Make sure you're not setting the tabFocusEnabled property to false as well.

Answer 3

Use TextInput tabindex property to manipulate taborder.

Answer 4

(1) I'd probably just allow Flex to handle the tabbing, rather than managing it yourself.

(2) Are you using a custom skin for your TextInput that doesn't have a focus skin?