[Flex4] Probleme avec StringValidator et errorString [Résolu]

[jmborel]

Je fais face à un problème étrange avec flex et l'attribut errorString d'un textInput.

Voici un code qui reproduit le problème :

TestMain.xml

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.validators.StringValidator;
 
            import utils.ValidableProperty;
 
            [Bindable] public var nameID:ValidableProperty;
 
            public function start():void {
                var nameIDValidator:StringValidator = new StringValidator();
                nameIDValidator.required = true;
                nameIDValidator.maxLength = 35;
                nameID = new ValidableProperty(nameIDValidator);
                nameID.validate();
            }
        ]]>
    </fx:Script>
 
    <s:applicationComplete>
        start();
    </s:applicationComplete>
 
    <s:minHeight>600</s:minHeight>
    <s:minWidth>955</s:minWidth>
 
    <mx:Form color="0x323232" paddingTop="0">
        <s:Label text="See strange behavior of errorString during validator operation with validate."/>
        <mx:FormItem label="Name">
            <mx:TextInput id="nameInput" width="300" errorString="@{nameID.errorMessage}" text="@{nameID.value}"/>
        </mx:FormItem>
    </mx:Form>
</s:Application>

ValidableProperty.as

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
    package utils
    {
    import flash.events.EventDispatcher;
 
    import mx.events.PropertyChangeEvent;
    import mx.events.ValidationResultEvent;
    import mx.validators.Validator;
 
    public class ValidableProperty extends EventDispatcher
    {
        [Bindable]
        public var value:Object;
 
        private var validator:Validator;
 
        [Bindable]
        public var isValid:Boolean;
 
        [Bindable]
        public var errorMessage:String;
 
        private var statusChangeHandler:Function;
 
        public function ValidableProperty(validator:Validator, statusChangeHandler:Function=null,
                                          target:IEventDispatcher=null) {
            super(target);
 
            this.validator = validator;
            this.statusChangeHandler = statusChangeHandler;
 
            this.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler);
        }
 
        private function propertyChangeHandler(evt:PropertyChangeEvent):void {
            if (evt.property == "value") {
                this.validate();
            }
        }
 
        public function validate():void {
            var result:ValidationResultEvent = this.validator.validate(this.value);
            this.isValid = (result.type == ValidationResultEvent.VALID);
            if (isValid) {
                this.errorMessage = null; 
            }
            else {
                this.errorMessage = result.message;
            }
            if (statusChangeHandler != null)
                statusChangeHandler();
        }
 
        public function set required(required:Boolean):void {
            if (validator == null)
                return;
            validator.required = required;
        }
    }
}

Quand on saisit par exemple "A" dans le textinput, le message de l'attribut "errorMessage" qui est "this field is required" va disparaitre mais le contour rouge va rester et se mélanger avec le contour bleu...

Maintenant si on essaye de supprimer "A" du textinput, cette fois le message d'erreur "this field is required" va s'afficher mais le contour bleu va rester et se mélanger au contour rouge (pas tout le temps reproductible).

Est ce que cela est un bug flex ? Car normalement le contour du textinput devrait être soit bleu, soit rouge. Mais pas les deux à la fois.

J'utilise Eclipse et Flex SDK 4.5.0 (build 20967)

Merci par avance pour vos réponses !

JMB

[jmborel]

J'ai trouvé le problème, en fait je devais utiliser s:TextInput au lieu de mx:TextInput.