Flex - проверка изменений в полях под вкладкой

Question

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

Я планирую установить переменную в модели и установить / сбросить ее, если какое-либо изменение произойдет в поле под вкладкой. Но как мне это контролировать? Есть ли слушатель для этого?

Также как проверить и сбросить состояние предыдущей вкладки? Содержимое, которое находится под вкладкой, только из компонентов.

[РЕДАКТИРОВАТЬ] Мои вопросы:

1. Как проверить, внес ли пользователь какие-либо изменения в текущую вкладку? Некоторые поля тоже генерируются динамически.
2. Я вызываю функцию в событии onchange TabNavigator и спрашивает пользователя, действительно ли он хочет переключить вкладку. Я хочу, чтобы другая вкладка загружала ее содержимое только в том случае, если пользователь нажимает Да в окне оповещения, которое я выскакиваю. Но теперь появляется окно подтверждения, и содержимое загружается на другую вкладку, и если пользователь нажимает Нет, он возвращается на другую вкладку. Как вообще запретить загрузку содержимого другой вкладки, пока пользователь не нажмет Да?

Пожалуйста, предоставьте ваши ценные материалы.

Answer 1

Ответ на вопрос 1 заключается в следующем; Используйте логическую переменную, чтобы отслеживать, редактировал ли пользователь данные. Когда пользователь выбирает вкладку, установите для этой переменной значение false. Прослушайте событие изменения во всех полях вкладки. Установите обработчик события изменения для всех полей как метод, который устанавливает логическое значение true. Для динамических полей добавьте тот же обработчик события изменения, что и в других полях. Сделайте это, как только вы создадите каждое динамическое поле. Смотрите код ниже;

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private var userChangedData:Boolean=false

            function onUserChangedData()
            {
                trace("onUserChangedData")
                userChangedData=true
            }

            function onTabChanged()
            {
                trace("ontabchanged")
                trace(userChangedData)
                userChangedData=false
            }
        ]]>
    </mx:Script>
    <mx:Panel title="TabNavigator Container Example"
              height="90%"
              width="90%"
              paddingTop="10"
              paddingLeft="10"
              paddingRight="10"
              paddingBottom="10">

        <mx:TabNavigator id="tn"
                         width="100%"
                         height="100%"
                         change="onTabChanged()">
            <!-- Define each panel using a VBox container. -->

            <mx:VBox label="Panel 1">
                <mx:Label text="TabNavigator container panel 1"/>
                <mx:TextInput text="default"
                              change="onUserChangedData()"/>
                <mx:CheckBox label="check something"
                             change="onUserChangedData()"/>
            </mx:VBox>

            <mx:VBox label="Panel 2">
                <mx:Label text="TabNavigator container panel 2"/>
            </mx:VBox>

            <mx:VBox label="Panel 3">
                <mx:Label text="TabNavigator container panel 3"/>
            </mx:VBox>
        </mx:TabNavigator>


    </mx:Panel>

Answer 2

Во-первых, вы можете отправлять Событие каждый раз, когда пользователь редактирует поле. Событие может быть обработано командой, которая обновит некоторые свойства в вашей модели с правильной информацией о том, что было обновлено. Тогда тот, кто заботится о вашем видении, может связываться с этими свойствами.

Для 2) в обработчике onChange() вызовите event.preventDefault(). Тогда вы можете программно выбрать следующую вкладку, только если пользователь нажмет Да.

Answer 3

У меня пока нет репутации добавлять комментарии, но я отвечаю на ваш вопрос:

"Можно ли добавить глобальный метод onchange/onkeypress, который перехватывает все приложение и устанавливает логическое значение? В противном случае мне придется редактировать в нескольких местах, чтобы добавить событие onchange. - Basani"

Да, каждое место, которое должно сигнализировать о том, что "что-то изменилось", отправляет Событие. Затем попросите Команду наблюдать за отправкой этого события. Эта команда может выполнять всю необходимую вам обработку, включая установку логического значения userDataChanged в модели.

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