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

Flex Validator: Exemple de DateValidator en MXML et ActionScript

Le composant DateValidator vous permet de valider des chaînes dont le format est celui d'une date. Il y a plusieurs propriétés de base que vous pouvez configurez pour personnaliser ce type de Validator et il existe des propriétés avancées qui vous permettront de valider plusieurs champs à la fois.

Les deux propriétés de base que vous pouvez utiliser avec un DateValidator sont allowedFormatChars et inputFormat:

• allowedFormatChars: permettre de spécifier quels caractères soit autorisés à être utilisés comme séparateur entre l'année, le mois et le jour (String, "/\-. " par défaut)
• inputFormat: détermine l'ordre des différentes parties: année, jour et mois (String, "MM/DD/YYYY" par défaut)

Flex Validator: Personnaliser les tooltip d’erreur du DateValidator

Les exemples suivant montrent comment utiliser ce composant Flex DateValidator en MXML.

Il est bien sur possible de combiner les différentes possibilités afin de faire un composant de validation qui correspond à votre besoin.

La valeur de la propriété allowedFormatChars par défaut ("/\-. ") permet de valider des valeurs telles que:

• 04/10/2008
• 04 10 2008
• 04.10.2008
• 04\10\2008
• 04-10-2008

Le premier exemple autorise seulement l'astérisque comme délimiteur (date type 04*10*2008):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

    <mx:Script>
        import mx.controls.Alert;
    </mx:Script>

    <mx:DateValidator source="{date}" property="text"
        allowedFormatChars="*"
        trigger="{myButton}" triggerEvent="click"
        valid="Alert.show('Le champ est valide');"/>

    <mx:Panel title="Exemple simple de DateValidator" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Entrez une date du type MM*DD*YYYY: ">
                <mx:TextInput id="date" width="100%"/>
            </mx:FormItem>

            <mx:FormItem >
                <mx:Button id="myButton" label="Valider" />
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>
</mx:Application>

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

Pour créer ce composant avec le même comportement en ActionScript, il suffit d'utiliser ce code AS3:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	creationComplete="initApp()">
	<mx:Script>
		<![CDATA[
			import mx.validators.DateValidator;
			public function initApp():void{
				var dateValidator:DateValidator = new DateValidator();
				dateValidator.source = date;
				dateValidator.property = "text";
				dateValidator.allowedFormatChars  = "*";
			}
		]]>
	</mx:Script>

    <mx:Panel title="Exemple simple de DateValidator" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Entrez une date du type MM*DD*YYYY: ">
                <mx:TextInput id="date" width="100%"/>
            </mx:FormItem>

            <mx:FormItem >
                <mx:Button id="myButton" label="Valider" />
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>
</mx:Application>

La propriété inputFormat détermine l'ordre dans lequel l'année, le mois et le jour vont être entrés. Vous pouvez utiliser les chaînes de caractère YYYY, MM et DD respectivement pour l'année, le mois et le jour. Vous pouvez utiliser n'importe quel des séparateurs par défaut ("/\-. ") pour la chaîne d'inputFormat. Le format par défaut est le format américain, c'est-à-dire MM/DD/YYYY. Pour utiliser le format européen par exemple, il faut entrer la chaîne DD/MM/YYYY.

Ce code impose la saisie de la date sous le format européen:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

    <mx:Script>
        import mx.controls.Alert;
    </mx:Script>

    <mx:DateValidator source="{date}" property="text"
        inputFormat="DD/MM/YYYY"
        trigger="{myButton}" triggerEvent="click"
        valid="Alert.show('Le champ est valide');"/>

    <mx:Panel title="Exemple simple de DateValidator au format européen" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Entrez une date du type DD/MM/YYYY: ">
                <mx:TextInput id="date" width="100%"/>
            </mx:FormItem>

            <mx:FormItem >
                <mx:Button id="myButton" label="Valider" />
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>
</mx:Application>

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

Contrairement aux autres validateurs, le composant Flex DateValidator vous permet d'utiliser un seul validateur pour plusieurs champs de saisie. En effet, il peut arriver qu'il y ai 2 champs texte différents pour l'année, le mois et le jour. Lorsque vous spécifiez un attribut source au DateValidator, il tente de valider seulement la date d'un seul champ texte.

Cependant, vous pouvez spécifier 3 sources différentes en utilisant les propriétés yearSource, monthSource, daySource, yearProperty, monthProperty et dayProperty.

L'exemple suivant montre comment utiliser le DateValidator Flex avec 3 textInput différents:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

    <mx:Script>
        import mx.controls.Alert;
    </mx:Script>

    <mx:DateValidator yearSource="{year}" yearProperty="text"
        monthSource="{month}" monthProperty="text"
        daySource="{day}" dayProperty="text"
        trigger="{myButton}" triggerEvent="click"
        inputFormat="DD/MM/YYYY"
        valid="Alert.show('Le champ est valide');"/>

    <mx:Panel title="Exemple simple de DateValidator sur 3 champs" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Entrez le jour: ">
                <mx:TextInput id="day" width="100%"/>
            </mx:FormItem>
            <mx:FormItem label="Entrez le mois: ">
                <mx:TextInput id="month" width="100%"/>
            </mx:FormItem>
            <mx:FormItem label="Entrez l'année: ">
                <mx:TextInput id="year" width="100%"/>
            </mx:FormItem>
            <mx:FormItem >
                <mx:Button id="myButton" label="Valider" />
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>
</mx:Application>

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