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

Flex Validator: Création de Validator en MXML (mx:Validator) et AS

Tous les validator héritent d'un type de base appelé Validator. Bien que vous travaillerez le plus souvent avec des sous-types (StringValidator par exemple), vous pouvez travailler avec Validator pour les besoins les plus basiques, et tous les validators héritent du fonctionnement et des propriétés de base de Validator. Quand vous créez un validator, vous devez spécifier au moins 2 propriétés, appelées source et property. La source est la référence à l'objet contenant la donnée que vous souhaitez valider, et property, la propriété de l'objet qui contient la donnée. Vous pouvez créer un validator en MXML en utilisant la structure suivante:

<mx:Validator source="{sourceObject}" property="sourceProperty"/>

Par défaut, le comportement d'un validator est simplement de valider que l'utilisateur à bien rempli le champ. Tous les validators ont une propriété appelée "required" qui est à true par défaut. Ceci reproduit exactement le comportement du code précédent:

<mx:Validator source="{sourceObject}" property="sourceProperty" required="true"/>

Le déclencheur (trigger) par défaut d'un validator est l'évènement valueCommit. Tous les composants permettant à l'utilisateur de faire une saisie déclenchent des évènements valueCommit quand la valeur est changée de manière programmatique ou lorsque le composant perd le focus (clic à l'extérieur par exemple). L'exemple suivant montre une utilisation très simple d'un Validator. L'application consiste en un formulaire avec un champ de saisie et un bouton. Le validator utilise le champ de saisie comme source, et est valide lorsque l'utilisateur a entré au moins un caractère. Le validator se lance quand le champ de saisie perd le focus. Ce qui veut dire que vous devez d'abord donner le focus au champ de saisie (en cliquant dessus) et ensuite lui faire perdre le focus soit en cliquant sur le bouton ou en appuyant sur la touche Tab.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	horizontalAlign="center" verticalAlign="middle" viewSourceURL="srcview/index.html">
	<mx:Form>
		<mx:FormHeading label="Formulaire Simple"/>
		<mx:FormItem label="Nom:">
			<mx:TextInput id="username"/>
		</mx:FormItem>
		<mx:FormItem>
			<mx:Button id="button" label="Envoyer"/>
		</mx:FormItem>
	</mx:Form>	

	<mx:Validator source="{username}" property="text"/>

</mx:Application>

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

Lorsqu'un validator est lancé, il y a deux issues possibles: soit il va valider la donnée ou pas. S'il valide la donnée, le comportement par défaut est de ne rien faire. Si la donnée n'est pas validée, le comportement par défaut est d'appliquer un contour rouge autour du composant de saisie et d'afficher un message quand l'utilisateur bouge la souris au dessus du composant. Comme mentionnée plus tôt, il est bien plus commun de créer des validator en utilisant le MXML qu'en ActionScript. Cependant, il y a des cas dans lesquels il vous faut créer les validators en ActionScript. Par exemple, si vous créer un formulaire à l'exécution, basé sur de la donnée XML, vous devez aussi créer les validator à l'exécution, en utilisant une instruction "new" avec le bon constructeur. Par exemple, ce code va créer un objet Validator:

var _validator:Validator  = new Validator;

De même, vous devez toujours fixer les propriétés source et property:

_validator.source = sourceObject;
_validator.property = "sourceProperty";

L'exemple suivant produit la même chose que l'exemple précédent mais cette fois le validator est crée en ActionScript:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	horizontalAlign="center" verticalAlign="middle" viewSourceURL="srcview/index.html"
	creationComplete="initializeHandler(event)">
	<mx:Script>
		<![CDATA[
			import mx.validators.Validator;

			private var _validator:Validator;

			private function initializeHandler(event:Event):void{
				_validator = new Validator;
				_validator.source = username;
				_validator.property = "text";
			}
		]]>
	</mx:Script>
	<mx:Form>
		<mx:FormHeading label="Formulaire Simple"/>
		<mx:FormItem label="Nom:">
			<mx:TextInput id="username"/>
		</mx:FormItem>
		<mx:FormItem>
			<mx:Button id="button" label="Envoyer"/>
		</mx:FormItem>
	</mx:Form>	

</mx:Application>

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