La gestion du Focus et cette du clavier sont deux sujets liés avec Flex. Un objet qui a le focus peut répondre aux évènements clavier. Par exemple, lorsqu'une champ texte (TextInput ou TextArea) a le focus, l'utilisateur peut entrer du texte dans le champ. Quand un composant a le focus, il est généralement indiqué avec une bordure colorée. Vous pouvez utiliser le clavier pour contrôler le focus dans les applications Flex.
Une convention classique dans les applications est que la touche Tab (tabulation) fait avancer le focus vers le prochain élément, et la combinaison Shift + Tab fait reculer le focus. Ceci est vrai pour la plupart des applications bureautiques. C'est aussi vrai pour la plupart des applications HTML, et ça l'est aussi pour les applications Flex.
La plupart des composants Flex sont capables de recevoir le focus. Par exemple, les TextInput, ComboBox, et autres boutons sont capables de recevoir le focus. Certains composants ne peuvent clairement pas recevoir le focus. Par exemple, un conteneur VBox, un Label ou un Spacer ne peuvent pas recevoir le focus car aucun de ces composants de répond aux entrées clavier.
Quand plusieurs composant pouvant avoir le focus existent dans une application en même teps, il existe un ordre par défaut dans lequel l'utilisateur peut se déplacer en utilisant la touche Tab. Cet ordre bouge toujours de la gauche vers la droite, de haut en bas.
Le code suivant crée un formulaire avec 3 champs texte et un bouton. Les deux premiers champs sont côte à côte sur la même ligne, vient ensuite le troisième TextInput sur la ligne suivant puis le bouton sur la dernière ligne. Dans cet exemple, si l'utilisateur place le focus sur le TextInput firstName et presse Tab, le focus se déplace vers le champ lastName. Encore une pression sur Tab et le focus passe sur le champ email. Enfin, encore un appui sur Tab et le focus passe sur le bouton:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Form>
<mx:FormItem label="Nom">
<mx:HBox>
<mx:TextInput id="firstName"/>
<mx:TextInput id="lastName"/>
</mx:HBox>
</mx:FormItem>
<mx:FormItem label="Email">
<mx:TextInput id="email"/>
</mx:FormItem>
<mx:FormItem label="">
<mx:Button label="Envoyer"/>
</mx:FormItem>
</mx:Form>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
Si l'utilisateur presse Tab encore une fois alors qu'il a le focus sur le bouton, le focus va retourner au premier élément, le TextInput firstName. C'est appelé "tab loop" (boucle de tab), car un appui sur la touche Tab déplace le focus de composant en composant de manière circulaire.
Bien que l'ordre par défaut soit généralement celui souhaité, il se peut que vous vouliez le modifier. Dans ce cas, vous pouvez contrôler l'ordre à l'aide de la propriété "tabIndex". Tout composant pouvant recevoir le focus a cette propriété. Par défaut, elle est à null et les applications Flex utilisent l'ordre de base. Cependant, vous pouvez explicitement donner un ordre aux éléments dans une tab loop en spéicifiant des valeurs entières (en commençant par 1) pour la propriété tabIndex. L'exemple suivant montre cela avec des champs texte arrangés en Grid. Par défaut, le focus irait de gauche à droite, de haut en bas. Dans notre exemple, on fixe les propriétés tabIndex pour que l'ordre soit de haut en bas, de gauche à droite:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Grid>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
<mx:TextInput id="a" tabIndex="1"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:TextInput id="c" tabIndex="3"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:TextInput id="e" tabIndex="5"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:TextInput id="g" tabIndex="7"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
<mx:TextInput id="b" tabIndex="2"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:TextInput id="d" tabIndex="4"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:TextInput id="f" tabIndex="6"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<mx:TextInput id="h" tabIndex="8"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
Notez que le comportement de l'ordre des tabulations peut-être imprévisible si vous fixez certains tabIndex et pas tous.
Bien que tous les composants pouvoir recevoir le focus soient inclus dans les boucles de tab par défaut, vous pouvez demander à les exclure en fixant leur propriété tabEnabled à false. Mettre tabEnabled à false ne signifie pas que le composant ne peut plus recevoir le focus du tout, vous pourrez toujours lui donner le focus en cliquant dessus avec la souris.
Si vous voulez exclure tous les composants enfant d'un conteneur des boucles de tab, fixez simplement la propriété tabChildren à false sur le conteneur. Cela aura exactement le même effet que si mettiez la propriété tabEnabled à false pour chaque composant enfant.
