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

Flex Tips – Valider automatiquement un Formulaire Flex (mx:Form) avec la touche Entrée

Voici le premier tutorial/article sur les Flex Tips, ces petits trucs que vous ne connaissez pas forcement et qui peuvent grandement vous faciliter la vie. Le framework Flex est très riche en fonctionnalités (on ne va pas s'en plaindre) et il est difficile de tout connaître. Ces Flex Tips sont des petits trucs que j'ai découvert au fur et à mesure de mon apprentissage de Flex, et je suis sûr qu'ils vous sauveront souvent pas mal de temps et de lignes de code.

Le premier porte sur la validation des formulaires Flex. La plupart du temps, quand vous avez un formulaire Flex,  vous avez un certain nombre de champs, des combobox etc. Et la plupart du temps, quelques boutons (Valider, Annuler, Reset, ...). Quand un utilisateur complète un formulaire HTML (login par exemple), il a l'habitude de valider en faisant Entrée car le HTML permet de faire cette validation de <form> de manière automatique. Avec Flex en revanche, pas de comportement par défaut. Si vous voulez répondre aux évènements clavier, vous devrez le coder vous-même. Cela permet bien sûr plus de fonctionnalités et de personnalisation car vous pouvez valider votre formulaire de manière quelconque.

Si vous voulez valider un formulaire avec la touche Entrée (pratique  pour un login par exemple), il va vous falloir ajouter un event listener global, traiter chaque évènement clavier et si la touche Entrée est détectée, exécuter la même action que l'appui sur le bouton. Cela est un peu laborieux, d'autant plus que si vous changez la fonction handler de l'évènement "click" du bouton, il faut aller modifier votre code dans le keyUpListener.

Heureusement, le composant <mx:Form> de Flex contient une propriété "defaultButton" qui va vous sauver de toutes ces lignes de code. La propriété "defaultButton" prend un id de composant (Button) en valeur. Une fois cette propriété fixée, vous n'avez plus rien à faire, la validation du formulaire se fera automatiquement sur pression de la touche Entrée. Vous remarquerez aussi que dès que le formulaire a le focus, le bouton par défaut est mis en valeur (emphasized).

Voici un exemple pour vous montrer sa facilité d'utilisation:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
		]]>
	</mx:Script>
	<mx:Form defaultButton="{validButton}">
		<mx:FormHeading label="Identification (Appuyer sur Entrée pour valider)"/>
		<mx:FormItem label="Login">
			<mx:TextInput text="monlogin"/>
		</mx:FormItem>
		<mx:FormItem label="Password">
			<mx:TextInput text="monmdp"/>
		</mx:FormItem>
		<mx:FormItem direction="horizontal">
			<mx:Button id="validButton" label="Valider" click="Alert.show('Formulaire identification validé !')"/>
			<mx:Button id="cancelButton" label="Annuler"/>
		</mx:FormItem>
	</mx:Form>
</mx:Application>

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