檢測Flex Form元素的變化（textinput，textarea，combobox，checkbox ..）

Question

我在我的應用程序中有各種（閱讀很多..）flex表單，我現在想要創建一個系統，通過該系統，如果用戶修改表單中的任何內容，則通知用戶他沒有保存...

現在..我不想重寫我擁有的每一個表格..有一些很好的方法來實現它嗎？ 以某種方式擴展TextInput（和其他..）類？

謝謝

Answer 1

你可以進入TextInput類（和其他人）並添加該事件監聽器和函數，但是你會改變SDK本身，這是一個壞主意。 我會創建自定義類來擴展您使用的類，並進行查找/替換以使其更快。

Answer 2

這並沒有經過深思熟慮，但應該有效。

您可以創建一個自定義組件，讓我們稱之為FormWatcher，您可以將其放在表單旁邊。 表單觀察者將要做的是等待表單中的CreationComplete事件。

所以現在，因為我們已准備好Form，您可以使用表單的getChildren（）方法來獲取其中的所有FormItem。 然后查看每個內部，你將獲得TextInputs，Comboboxes等，你可以添加事件監聽器（作為單獨的組件），例如。

        // THIS IS WHERE THE COMPONENT SHOULD START
        protected function changeHandler(event:Event):void
        {
            trace ("something is dirty");
        }

        protected function startWatching(passTheFormHere:Form):void
        {
            for each (var O:Object in passTheFormHere.getChildren())
            {
                if (O is FormItem) 
                {
                    // Let's assume you only have a single child in one FormItem
                    // and always one child for simplicity
                    addChangeHandlerFor((O as FormItem).getChildAt(0));
                }
            }
        }

        protected function addChangeHandlerFor(someComponent:Object):void
        {
            // Most regular flex components send a Event.CHANGE event 
            // when their value is changing
            // keep in mind you should check stuff, this is a simple example
            (someComponent).addEventListener(Event.CHANGE,changeHandler);

        }
        // THIS IS WHERE THE COMPONENT SHOULD END

只需將此代碼粘貼到某個表單旁邊，並調用startWatching（nameOfYourForm），您應該看到正在調用changeHandler。

還有一些說明：

1）完成后你應該清理事件監聽器。

2）我會創建一個組件，以便您可以像這樣使用它：

<mx:Form id="form1" >
[...]
</mx:Form>

<FormWatcher form="{form1}"  />

FormWatcher將有一個名為“clean”的布爾變量或其他東西。

3）示例非常簡單，因此它僅適用於與此類似的表單：

<mx:Form id="myForm" >
    <mx:FormItem>
        <mx:TextInput id="someComponent1" />
    </mx:FormItem>
    <mx:FormItem>
        <mx:CheckBox id="someComponent2" />
    </mx:FormItem>
    <mx:FormItem>
        <mx:TextArea id="someComponent3"  />
    </mx:FormItem>      
</mx:Form>