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

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

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

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

[EDIT] Мои вопросы:

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

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


person jobinbasani    schedule 09.08.2009    source источник


Ответы (3)


Ответ на вопрос 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>

person Phil C    schedule 10.08.2009
comment
Можно ли добавить глобальный метод onchange/onkeypress, который подключается ко всему приложению и устанавливает логическое значение? В противном случае мне придется редактировать в нескольких местах, чтобы добавить событие onchange. - person jobinbasani; 10.08.2009
comment
Спасибо за решение. А вот установка обработчика события onchange не сработает для TabNavigator. Я нашел решение здесь, на natescodevault.com/?p=43, и оно тоже хорошо работает. . - person jobinbasani; 11.08.2009
comment
Интересный. Не понял, что о событии изменения для навигатора вкладок - person Phil C; 11.08.2009

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

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

person Stephen Horvath    schedule 10.08.2009

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

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

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

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

person Stephen Horvath    schedule 10.08.2009