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

Flex Focus et Keyboard – Traiter les évènements clavier (KeyboardEvent)

Vous pouvez écouter les évènements clavier comme vous le feriez pour tout autre évènement en utilisant soit un attribut MXML et/ou de l'ActionScript. Tous les Display Object (composants visuels dont les conteneurs, contrôles et le stage lui-même) propagent des évènements de type flash.events.KeyboardEvent quand l'utilisateur presse une touche de son clavier. Il y a deux types d'évènements distincts pour chaque appui sur une touche: keyUp et keyDown, qui sont représentés par les constantes respectives KeyboardEvent.KEY_UP et KeyboardEvent.KEY_DOWN.
Le type KeyboardEvent définit plusieurs propriétés spécifiques à l'évènement. Parmi elles, la propriété keyCode, qui contient le code de la touche pressée, et la propriété charCode qui contient le code pour ce caractère spécifique. Les propriétés keyCode et charCode sont identiques pour toutes les touches alphanumérique s'il on appuie pas sur Shift, Ctrl ou Alt. Pour les caractères alphanumériques, les codes représentent les codes ASCII.

La classe flash.ui.Keyboard définit des constantes que vous pouvez utiliser pour vos tests. Par exemple, les constantes Keyboard.ENTER et Keyboard.SHIFT contiennent les code correspondant aux touches Enter et Shift.

Les composants propagent des évènements clavier seulement quand ils ont le focus.

Voici un petit exemple qui crée un système d'aide dans le formulaire d'une application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
	<![CDATA[
		import mx.controls.TextArea;
		import mx.events.CloseEvent;
		import mx.managers.PopUpManager;
		import mx.containers.TitleWindow;

		private var _helpWindow:TitleWindow;

		private function onKeyUpHandler(event:KeyboardEvent):void{
			if (_helpWindow) return;
			if (event.keyCode == Keyboard.F1){
				_helpWindow = TitleWindow(PopUpManager.createPopUp(this, TitleWindow, true));
				_helpWindow.title = "Aide de l'application";
				_helpWindow.width = 300;
				_helpWindow.height = 100;
				_helpWindow.showCloseButton = true;
				_helpWindow.addEventListener(CloseEvent.CLOSE, closeHandler);
				var textArea:TextArea = new TextArea;
				textArea.percentWidth = 100;
				textArea.percentHeight = 100;
				_helpWindow.addChild(textArea);
				switch (event.currentTarget){
					case firstName:
						textArea.text = "Spécifiez votre prénom (Ex. Jean)";
					break;
					case lastName:
						textArea.text = "Spécifiez votre Nom (Ex. Smith)";
					break;
					case email:
						textArea.text = "Spécifiez votre email (Ex. xxx@gmail.com)";
					break;
					case accountType:
						textArea.text = "Sélectionnez un type de compte dans la liste";
					break;
					default:
						textArea.text = "Texte Générique...";
					break;
				}
				PopUpManager.centerPopUp(_helpWindow);
			}
		}
		private function closeHandler(event:CloseEvent):void{
			PopUpManager.removePopUp(_helpWindow);
			_helpWindow = null;
		}
	]]>
	</mx:Script>
	<mx:Form>
		<mx:FormItem label="Prénom">
			<mx:TextInput id="firstName" keyUp="onKeyUpHandler(event)"/>
		</mx:FormItem>
		<mx:FormItem label="Nom">
			<mx:TextInput id="lastName" keyUp="onKeyUpHandler(event)"/>
		</mx:FormItem>
		<mx:FormItem label="Email">
			<mx:TextInput id="email" keyUp="onKeyUpHandler(event)"/>
		</mx:FormItem>
		<mx:FormItem label="Type de Compte">
			<mx:ComboBox id="accountType" dataProvider="[bronze, silver, gold, platinium]"
				keyUp="onKeyUpHandler(event)"/>
		</mx:FormItem>
	</mx:Form>
</mx:Application>

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

Dans cet exemple, quand l'utilsateur presse F1, une fenêtre d'aide va apparaître avec l'aide spécifique au composant qui a le focus.
La classe KeyboardEvent définit aussi des Boolean ctrlKey, altKey et shiftKey, qui vous indiquerons si l'utilisateur a pressé les touches Ctrl, Alt et Shift. Pour n'afficher la fenêtre que sur Ctrl+F1, on peut redéfinir l'instruction if comme ceci:

if (event.keyCode == Keyboard.F1 && event.ctrlKey) {...

Si vous voulez écouter les évènements clavier de manière globale, vous pouvez ajouter des listener sur le conteneur application:

this.addEventListener(KeyboardEvent.KEY_DOWN, keyUpHandler);