Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Focus et Keyboard – Contrôler le focus en ActionScript avec FocusManager

Vous pouvez contrôler le focus dans une application avec du code ActionScript en utilisant une instance de mx.managers.FocusManager. Une instance de FocusManager contrôle une boucle de tabulation (tab loop), et il peut donc y en avoir plusieurs pour une même application. Cela vient du fait que certains containers sont capables de créer leur propre tab loop. Par exemple, un fenêtre Pop-Up pourrait avoir sa propre tab loop, distincte de la tab loop du formulaire derrière la fenêtre. Puisque plusieurs tab loop peuvent exister à la fois, une application Flex peut avoir plus d'un FocusManager à la fois.

Vous n'aurez jamais à construire une nouvelle instance de FocusManager. Tout composant a une propriété focusManager qui référence l'instance de FocusManager qui contrôle la tab loop qui agit sur ce composant.

Vous pouvez en ActionScript, retrouver l'item qui a le focus en utilisant la méthode getFocus() sur une instance de FocusManager. La méthode getFocus() renvoie le composant qui a actuellement le focus, typé comme IFocusManagerComponent. Vous devrez faire un cast (conversion de type) de ce retour si nécessaire. Contrairement aux APIs Flash Player bas-niveau pour la gestion du focus, la méthode getFocus() d'une instance de FocusManager renvoie toujours une référence vers le composant qui a le focus, et pas l'objet enfant du composant (raw children). Par exemple, dans la perspective du FP, quand un composant champ texte a le focus, c'est le champ texte bas-niveau, inclus dans le composant qui a le focus. Seulement, d'un point de vus pratique, vous serez habituellement intéressé par le composant qui a le focus, pas par ses sous-éléments.

Vous  pouvez mettre le focus en utilisant la méthode setFocus() d'un objet de type FocusManager. Pour cela, il vous suffit de passer une référence vers l'élément en paramètre. Par exemple, le code suivant met à zero les champs texte et bouge le focus vers le premier champ texte quand l'utilisateur clique le bouton:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			private function reset (event:Event):void{
				// RAZ
				a.text = "";
				b.text = "";
				c.text = "";
				d.text = "";
				// passer le focus au composant ayant l'id "a"
				// on prend ici le focusManager de l'Application
				focusManager.setFocus(a);
			}
		]]>
	</mx:Script>
	<mx:VBox height="100%">
		<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: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:GridRow>
		</mx:Grid>
		<mx:Button label="Reset" click="reset(event)"/>
	</mx:VBox>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application