Publié par

Il y a 11 ans -

Temps de lecture 1 minute

Ecrire son validateur Flex

Pour les besoins de l’un de nos développements Flex, nous avons utilisé les validateurs Flex. De base, le framework nous fournit un ensemble de validateurs (StringValidator, EmailValidator…), mais il se trouve qu’ils ne répondaient pas tous à l’ensemble de nos besoins. En effet, nous avions besoin de valider la longueur d’une suite de chiffres, mais le NumberValidator ne permet pas de valider la longueur… De plus, nous avions aussi besoin d’une longueur minimale…

Heureusement, il est possible d’écrire votre validateur : il suffit de coder une classe ActionScript qui hérite de mx.validators.Validator et de surcharger la méthode doValidation(). Voici notre validateur permettant de contrôler qu’une suite de chiffres doit être comprise entre une longueur minimale et une longueur maximale.

Ecriture du validateur

CustomNumberValidator.as

package validation
{
    import mx.validators.NumberValidator;
    import mx.validators.ValidationResult;
    
    public class CustomNumberValidator extends NumberValidator {

          public var minLength:Number;
        
          public var maxLength:Number;
		
	  public var lengthFieldError:String;
		
	  public function CustomNumberValidator() {
		super();
	  }
		
	  override protected function doValidation(value:Object):Array {
          	var results:Array = super.doValidation(value);
		
		var val:String = value ? String(value) : "";

		// value has to be between minLength and maxLength
		if ((val.length >= minLength && val.length <= maxLength) || ((val.length == 0) && !required)) {
			return results;
		} else {
			return checkForLength(value);		
		}	
    	   }
    	
	   public function checkForLength(value:Object):Array {
		var results:Array = [];
		results.push(new ValidationResult(
				 true, null, "invalidChar",
				 lengthFieldError));
			
		return results;
	   }
    }
}

Tout d'abord, nous définissons des variables:

public var minLength:Number; //la longueur minimale de la suite de chiffres
        
public var maxLength:Number; //la longueur maximale de la suite de chiffres
		
public var lengthFieldError:String; //message d'erreur si la longueur n'est pas comprise entre minLength et maxLength

Ces 3 variables sont paramétrables lors de la définition du Validator dans le fichier MXML que nous verrons plus loin.

Comme vous pouvez le voir, dans la méthode doValidation() nous récupérons une chaîne (la suite de chiffres), et nous testons si cette dernière est bien comprise entre minLength et maxLength. Si la validation se passe mal, la méthode retournera un tableau de ValidationResult avec le message d'erreur que nous avons défini (lengthFieldError), sinon elle renverra un tableau vide.

Voici le fichier MXML utilisant ce Validator:

XebiaValidator1.mxml



 
    
    
		                
    
    
    
    	   
    	        
    	            
    	        
    	        
    	            
    	        
    	        
    	            
    	        
    	    
    

Le résultat:

Dans cet exemple, nous utilisons 2 validateurs (StringValidator et CustomNumberValidator). Au passage, afin d'utiliser notre validateur nous avons défini un namespace (xmlns:validation="validation.*")
En ce qui concerne notre validateur, nous retrouvons nos attributs (minLength, maxLength et lengthFieldError) que nous avons renseignés.

Amélioration de la validation

Améliorons notre processus de validation. En effet, pour le moment nous avons les messages d'erreurs lors du remplissage des champs du formulaire (un Tooltip s'affiche en cas d'erreur). Nous allons faire en sorte d'avoir également ces messages lors du click sur le bouton « Validate ».

XebiaValidator2.mxml



 
    
        
    
    
		                
    
    
    
    	   
    	        
    	            
    	        
    	        
    	            
    	        
    	        
    	            
    	        
    	    
    

Le résultat:

Dans ce fichier, du code ActionScript a fait son apparition. Dans un premier temps la méthode fillValidators(), appelée lors de l'initialisation du composant, remplit une liste composée des validateurs référencés par leurs id.

Par la suite, lors du clic sur « Validate », la méthode validateForm() est appelée. La classe Validator possède une méthode très pratique qui est validateAll(), prenant en paramètre une liste de validateurs. Cette méthode renvoie un tableau vide si la validation a réussi, et sinon il y aura des éléments de type ValidationResultEvent contenant le message que nous affichons. Dans notre exemple, en cas d'erreurs les messages apparaîtront dans une popup.

A travers ces deux exemples, nous voyons que le mécanisme de validation de Flex est assez simple, et écrire ses propres validateurs devient un jeu d'enfant !

Vous pouvez télécharger les sources sur le SVN de Xebia France.

Publié par

Publié par Nicolas Jozwiak

Nicolas est delivery manager disposant de 12 ans d’expérience en conception et développement. Son parcours chez un éditeur avant son entrée chez Xebia lui a notamment permis de développer de solides compétences dans le domaine de la qualité et de l’industrialisation (tests, intégration continue, gestion de configuration, contrôle qualité). Bénéficiant d’une expérience très solide de mise en place des méthodes agiles et d’accompagnement d’équipes sur le terrain, il s’attache à mettre à profit quotidiennement son expérience qui est reconnue pour son approche pragmatique, proactive et pédagogique.

Commentaire

1 réponses pour " Ecrire son validateur Flex "

  1. Publié par , Il y a 11 ans

    Petit trux pour simplifier le code: placer les tags « mx:Validator » dans un tag « mx:Array ».

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nous recrutons

Être un Xebian, c'est faire partie d'un groupe de passionnés ; C'est l'opportunité de travailler et de partager avec des pairs parmi les plus talentueux.