Flex Text input focus

Question

Sur mon application Air, j'ai 2 problèmes de mise au point. En effet, lorsque j'essaie de passer à l'intérieur de mon formulaire avec la touche de tabulation, l'ordre n'est pas bon. Deuxième point, la bordure de mise au point n'est pas visible même si le curseur est dans l'entrée de texte.

Trouver ci-dessous une partie du Code

Pour se déplacer avec la touche tab

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

Mon TextInput CSS

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

} 

Ma forme

<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> 

Ma forme est TitleWindow personnalisé composant .

Merci pour aider

Answer 1

(1) Je serais probablement juste laisser Flex gérer la tabbing, plutôt que de gérer vous-même. (2) Utilisez-vous un skin personnalisé pour votre TextInput qui n'a pas de skin de focus?

Answer 2

Utilisez la propriété tabIntext TextInput pour manipuler les tabulations.

Answer 3

Flex configure automatiquement l'ordre des onglets en fonction de l'ordre dans lequel les composants ont été ajoutés dans le fichier MXML. Si votre MXML ressemble à ceci:

<?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> 

Lorsque vous appuyez sur le bouton de tabulation pour se déplacer entre les champs, il ira à TextInput1, puis Combobox1, puis TextInput2 même si elles sont disposées dans un ordre différent en fonction de leur x, y coordonnées. Cela est dû à l'ordre dans lequel ces composants apparaissent dans le fichier MXML. Lorsque vous définissez la propriété tabIndex, vous pouvez contrôler manuellement l'ordre des onglets.

<?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> 

En ce qui concerne la frontière de mise au point, à moins que vous configurez un habillage personnalisé sur vos composants, ils doivent encore avoir la frontière de mise au point bleu par défaut autour d'eux. Le composant Combobox peut également recevoir la mise au point sans problème. Assurez-vous de ne pas définir la propriété tabFocusEnabled sur false.

Answer 4

J'ai trouvé une partie de solution mais j'ai besoin de votre aide pour finir.

En effet, avec étincelle Window tout fonctionne bien mais je crée ma fenêtre comme ça, et la mise au point n'est pas visible. Quelle est l'erreur?

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(); 

et le code FlexNativeWindow est:

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; 


    } 
} 

}