Adobe Flex Tutorial - Adobe Flex Tutorial

Flex Validator / Formatter

Flex Validator / Formatter: Valider et formater des données

Lorsque vous travaillez avec de la donnée, vous aurez fréquemment besoin de vous assurer que la donnée adhère à certaines règles. Quand cette donnée provient d'une entrée utilisateur, ce processus est est appelé validation. Parfois, cette donnée est affichée sous un certain format, avant d'être enregistrée ou envoyée à une méthode, on appelle ce processus le formatage. Le Framework Flex fournit des mécanismes pour ces deux types d'opération. Vous allez maintenant apprendre comment valider et formater de la donnée avec Flex.

Valider les entrées utilisateur

Quand vous travaillez avec des saisies utilisateur, vous aurez souvent besoin de valider ces données avant de les soumettre à un traitement (du côté client ou du côté serveur). Par exemple, si vous voulez soumettre les données d'un formulaire à un script serveur qui insère la donnée dans un base de données, vous voudrez sûrement vérifier que ces valeurs sont d'un format correct pour les insérer (par ex., une valeur numérique doit bien être un nombre, une date doit être formatée pour que votre script puisse le transformer en un format requis pour votre base de données…).

Vous pouvez écrire vos propres procédures de validation pour cela. Cependant, la plupart de ces procédures de validation font toujours écrire le même type de code. Pour cette raison, le Framework Flex fournit un type de composant appelé validator, que vous pouvez utiliser pour vous aider à valider les saisies utilisateur.

Il y a de nombreux validator standards:

La suite de cet article montre comment utiliser chacun de ces validator standards et montrera comment écrire ses propres validator.

Utilisation des Validator

Il y a deux manières d'utiliser les validator: avec du MXML ou de l'ActionScript (AS3). Dans la plupart des cas, l'utilisation du MXML est suffisante. Même s'il est plus commun d'utiliser les validator sous leur forme MXML, il y a des cas dans lesquels vous voudrez travailler avec des Validators à la fois en MXML et en AS pour le même projet (en créant des validator MXML, et en ajoutant des fonctionnalités supplémentaires en AS3).

Dans certains cas, vous travaillerez avec des validator entièrement en AS. Ce sont des cas spéciaux dans lesquels vous devrez savoir construire un validator dynamiquement à l'exécution car le champ d'entrée utilisateur et le validator ne sont pas connus à la compilation.

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

Flex Validator: Personnaliser les messages d’erreur (tooltip)

Flex Validator: Récupérer les événements d’un Validator

Flex Validator: Déclencher la validation en MXML et ActionScript

Flex Validator: Coder ses propres validateurs en ActionScript

Flex Formatter: Formater les saisies utilisateur

Le framwork Flex fournit un groupe de composants permettant de formater des valeurs. Vous pouvez utiliser ces formateur pour formater de la donnée dans n'importe quel contexte, même s'il on l'utilise le plus souvent pour afficher de la data.

Flex fournit de nombreux Formatter standards, comme le NumberFormatter ou le PhoneFormatter, et vous pouvez aussi coder vos propres Formatter. Chaque Formatter à ses propres propriétés mais de manière globale, ils fonctionnent tous de la même manière. D'abord vous devez créer un Formatter en MXML ou en ActionScript en lui assignant les propriétés nécessaires. Ensuite il faut appeler la méthode format() du Formatter en lui passant en paramètre la valeur à formatter. S'il ne peut pas formater une chaîne, il propage une événement d'erreur.

La méthode format() d'un Formatter retourne une String.

Vous pouvez créer un Formatter en utilisant un le tag MXML correspondant. L'exemple suivant crée une instance du NumberFormatter avec les propriétés par défaut. Notez que vous devez assigner un id aux Formatter car ils vous serviront de référence en ActionScript.

<mx:NumberFormatter id="numberFormatter"/>

Vous pouvez tout aussi bien crée ce Formatter en AS3 en utilisant le constructeur:

var numberFormatter:NumberFormatter = new NumberFormatter();

Une fois que vous avez crée un objet Formatter, vous devez appeler la méthode format() pour appliquer le formatage. La méthode format() prend en paramètre la valeur à formater. Cette méthode ne change pas la valeur originale, mais elle retourne une nouvelle String formatée suivant les propriétés imposées au Formatter.

var formattedString:String = numberFormatter.format(userInput.text);

Utilisation des Formatter

Il y a deux manières d'utiliser les Formatter: avec du MXML ou de l'ActionScript (AS3). Dans la plupart des cas, l'utilisation du MXML est suffisante. Même s'il est plus commun d'utiliser les validator sous leur forme MXML, il y a des cas dans lesquels vous voudrez travailler avec des Formatter à la fois en MXML et en AS pour le même projet (en créant des Formatter MXML, et en ajoutant des fonctionnalités supplémentaires en AS3).

Il existe plusieurs types de Formatter standards mais vous pouvez aussi créer vos propres Formatter comme décrit dans les articles suivants:

Flex Formatter: Exemple de NumberFormatter en MXML et ActionScript

Flex Formatter: Exemple de DateFormatter en MXML

Flex Formatter: Exemple de CurrencyFormatter en MXML

Flex Formatter: Exemple de PhoneFormatter en MXML

Flex Formatter: Coder ses propres formateurs en ActionScript