Динамически добавленный FormItem не показывает текст ошибки

Question

Я динамически создаю форму во время выполнения моего приложения.Содержимое моего элемента формы (назовем его MyFormItemContent) выглядит следующим образом (упрощенно):

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   width="100%" borderAlpha="0.0">
    <fx:Declarations>
        <utils:DataItemValidator dataItem="{referenceToDataItem}"
                                 source="{this}"/>
    </fx:Declarations>

    <s:HGroup width="100%">
        <s:TextInput width="100%" text="@{bindingToText}"/>
        <s:CheckBox width="14" selected="{refToBoolean}"/>
    </s:HGroup>
</s:BorderContainer>

и код используемого нами валидатора.Он отлично работает в других частях приложения, и отладка показывает, что сообщение существует, но не отображается.

/**
 * This class effectively does *not* validate the given 'value', but just returns
 * his 'dataItem's attached messages.
 */
public class DataItemValidator extends Validator {

    private var _dataItem:StatefulDataItem;

    public function get dataItem():StatefulDataItem {
        return _dataItem;
    }

    public function set dataItem(dataItem:StatefulDataItem):void {
        _dataItem = dataItem;
        ChangeWatcher.watch(_dataItem, "messages", function():void {
            validate();
        }, false);

        validate();
    }

    override protected function doValidation(value:Object):Array {
        if (!isInitialized()) return [];

        // Clear results Array.
        var results:Array = [];
        // If dataItem has error indicator append all messages to result array.
        if (dataItem && dataItem.messages) {
            for each (var message:ResultMessage in dataItem.messages) {
                results.push(new ValidationResult(message.isErroneous(), null, "", message.text));
            }
        }
        return results;
    }

    public function isErroneous():Boolean {
        if (!dataItem) return false;
        return dataItem.isErroneous();
    }

    private function isInitialized():Boolean {
        return (dataItem != null);
    }
}

Код, который объявляет форму, выглядит следующим образом:

<s:Form id="myForm" width="100%" height="100%">
    <s:layout>
        <s:FormLayout gap="-7" paddingBottom="2" paddingLeft="2" paddingRight="2"
                      paddingTop="2"/>
    </s:layout>
</s:Form>

И, наконец,элемент добавляется в форму следующим образом:

var formItem:FormItem = new FormItem();
formItem.label = "some text";
formItem.addElement(new MyFormItemContent());
myForm.addElement(formItem);

Если при проверке MyValidator возникают ошибки, красная рамка появляется вокруг BorderContainer, как и предполагалось.Но, к сожалению, текст ошибки, который должен появиться справа от элемента формы, не отображается.Я думаю, что это проблема макета, потому что я определяю валидатор внутри содержимого элемента формы, прежде чем добавить его в форму.Я уже отлаживал это и много читал документацию.

Я думал, что было бы полезно узнать, как FormItem добавляется в форму, если вы объявите его в mxml, но я также не смог найти информацию об этом.

Answer 1

<?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" creationComplete="application2_creationCompleteHandler(event)" xmlns:local="*">

    <fx:Script>
        <![CDATA[
            import mx.charts.series.ColumnSeries;
            import mx.collections.ArrayCollection;
            import mx.containers.FormItem;
            import mx.events.FlexEvent;



            protected function application2_creationCompleteHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                for(var i:int = 0; i < 4; i++)
                {
                    var formItem:FormItem = new FormItem();
                    formItem.label = "some text";
                    formItem.addElement(new MyFormItemContent());
                    myForm.addElement(formItem);
                }
            }

        ]]>
    </fx:Script>


    <s:Form id="myForm" width="100%" height="100%">
        <s:layout>
            <s:FormLayout gap="-7" paddingBottom="2" paddingLeft="2" paddingRight="2"
                          paddingTop="2"/>
        </s:layout>
    </s:Form>


</s:Application>

элемент формы mxml файл

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   width="100%" borderAlpha="0.0" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="bordercontainer1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.ValidationResultEvent;

            [Bindable]
            private var bindingToText:String;

            [Bindable]
            private var refToBoolean:Boolean;

            protected function bordercontainer1_creationCompleteHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub

            }

            protected function txt_focusOutHandler(event:FocusEvent):void
            {
                var obj:ValidationResultEvent = validator.validate(txt.text);
                error.visible = !(obj.type == "valid");
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:PhoneNumberValidator id="validator"/>
    </fx:Declarations>

    <s:HGroup width="100%">
        <s:TextInput id="txt" width="100%" text="@{bindingToText}" focusOut="txt_focusOutHandler(event)"/>
        <s:CheckBox width="14" selected="{refToBoolean}"/>
        <s:Label id="error" visible="false" backgroundColor="red" text="This Field Required"/>
    </s:HGroup>
</s:BorderContainer>

Я публикую этот код для вашего интереса.