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

Flex Validator: Personnaliser les tooltip d'erreur du NumberValidator

Le composant Flex NumberValidator permet de valider toutes sortes de nombres (contraindre au domaine entier, aux positifs ...).

On a donc accès à sept propriétés: allowNegative, decimalSeparator, domain, precision, minValue, maxValue et thousandsSeparator.

Flex Validator: Exemple de NumberValidator en MXML et ActionScript

Lorsque la validation ne se fait pas, un tooltip s'affiche avec des valeurs par défaut:

• Plusieurs séparateurs de décimales: "The decimal separator can only occur once"
• Valeur supérieure à la valeur maximale: "The number entered is too large"
• Le nombre n'est pas un entier: "The number must be an integer"
• Le nombre contient des lettres ou autres caractères: "The input contains invalid characters"
• Le nombre contient plusieurs séparateurs ou signe moins: "One of the formatting parameters is invalid"
• Valeur inférieue à la valeur minimale: "The number entered is too small"
• Le nombre entré est négatif (restriction): "The number may not be negative"
• Le nombre contient trop de chiffres après la virgule: "The number entered has too many digits beyond the decimal point"
• Le séparateur des milliers est mal placé: "The thousands separator must be followed by three digits"

Pour pouvoir personnaliser ces messages, pour les écrire en français pas exemple, l'objet NumberValidator possède plusieurs propriétés:

• decimalPointCountError: Plusieurs séparateurs de décimales
• exceedsMaxError: Valeur supérieure à la valeur maximale
• integerError: Le nombre n'est pas un entier
• invalidCharError: Le nombre contient des lettres ou autres caractères
• invalidFormatCharsError: Le nombre contient plusieurs séparateurs ou signe moins
• lowerThanMinError: Valeur inférieue à la valeur minimale
• negativeError: Le nombre entré est négatif (restriction)
• precisionError: Le nombre contient trop de chiffres après la virgule
• separationError: Le séparateur des milliers est mal placé

L’exemple suivant montre comment utiliser ce composant Flex NumberValidator avec des messages d'erreur personnalisés.

<?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:NumberValidator source="{age}" property="text"
        minValue="15" maxValue="55" domain="int" allowNegative="false"
        decimalPointCountError="Il y a plusieurs séparateurs de décimales"
        exceedsMaxError="La valeur entrée est supérieure à la valeure maximale"
        integerError="Le nombre entré doit être entier"
        invalidCharError="Le nombre contient des caractères invalides"
        invalidFormatCharsError="Certains séparateurs sont mal placés"
        lowerThanMinError="La valeur entrée est inférieure à la valeur minimale"
        negativeError="Le nombre doit être positif"
        precisionError="Il y a trop de chiffres après la virgule"
        separationError="Veuillez entrer 3 nombres après le séparateur des milliers"
        trigger="{myButton}" triggerEvent="click"
        valid="Alert.show('Le champ est valide');"/>

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

        <mx:Form>
            <mx:FormItem label="Entrez une valeur entre 15 et 55: ">
                <mx:TextInput id="age" 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