Flex отменить событие изменения на дереве

Question

Краткие сведения: я использую Flex 3.5.

У меня есть компонент Tree, который используется в качестве меню навигации между различными «страницами».Когда пользователь щелкает определенную опцию в меню, я переключаю «страницу», переключаясь между компонентами состояния в моем приложении.Дело в том, что когда пользователь действительно щелкает опцию в меню, я хочу выполнить проверку некоторой информации в определенном компоненте.Если проверка не удалась, я показываю предупреждение, и я хотел бы предотвратить переход на другую страницу.Одна часть этого просто не изменяет currentState документа, но компонент дерева все еще продолжается с событием изменения, и в результате страница A все еще отображается на экране, тогда как выбранная опция в дереве - страница B (к которому пользователь хотел перейти, но потерпел неудачу, так как некоторая информация была недействительной).

Я попытался выяснить, как я могу отменить событие изменения на самом компоненте дерева.Мысли, которые у меня не совсем подходили:

Я искал немного другое событие (например, «change» или «startChange»), для которого я могу вызвать метод stopPropagation () (начиная с обычного ').событие change 'не может быть отменено), но для компонента Tree его не существует.

Я также думал о том, чтобы всегда сохранять текущий параметр, выбранный в компоненте Tree, самостоятельно, и когда проверка не пройдена, я установлюЭлемент дерева selectedItem для этой сохраненной опции.Это также безобразно, потому что такое действие вызовет еще одно событие изменения в Дереве, таким образом, еще одно изменение в компонентах Состояний и другую популяцию страницы, на которой я уже присутствую.Это то, что я действительно не хочу делать.

Я также хотел бы использовать другой компонент, такой как Menu (и я также нашел реализацию вертикального Menu), но это даже не похоже наПомогите.Там будет существовать та же проблема.

Есть ли правильный способ сделать это?Должна быть лучшая практика для предотвращения фиксации процесса изменений!

Answer 1

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

Как и Максим, я расширяю компонент Tree и переопределяю метод isItemSelectable (), чтобы проверить этосвойство указанного элемента, таким образом предотвращая процесс изменения.

Доступ между представлением, содержащим информацию, подлежащую проверке, и представлением, содержащим компонент дерева (они не обязательно являются одинаковыми представлениями).) делается через класс presentor, который содержит оба представления (я использую механизм MVP).Это не самый элегантный дизайн, но он намного лучше всего, о чем я мог подумать.Предполагаемая проблема с дизайном заключается в связи между представлениями и сложностью автора, который должен иметь дело с более чем одним представлением и иметь методы, которые связаны с взаимодействием между представлениями (вместо методов, которые представляют действия определенногоПосмотреть).Дело в том, что с точки зрения бизнеса эти два представления связаны (поскольку информация в одном влияет на дерево навигации в другом), и, следовательно, настоящее связывает их.Связь также осуществляется через интерфейс средства представления, так что каждый вид на самом деле не «знает» другой вид.

Я надеюсь, что он может помочь другим людям.

Спасибо, Даниэль

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">

    <mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.events.ListEvent;

        private function tree_changeHandler(event:ListEvent):void
        {
            trace("Change, selectedItem.label is: " + tree.selectedItem.label);
        }

        protected function tree_itemClickHandler(event:ListEvent):void
        {
            var data:Object = event.itemRenderer.data;
            if (!tree.isItemSelectable(data))
                Alert.show("Item \"" + data.label + "\" is not selectable");
        }

    ]]>
    </mx:Script>

    <local:MyTree id="tree" change="tree_changeHandler(event)" itemClick="tree_itemClickHandler(event)">
        <local:dataProvider>
            <mx:ArrayCollection>
                <mx:Object label="Label 1"/>
                <mx:Object label="Label 2"/>
                <mx:Object label="Label 3 (non-selectable)"/>
                <mx:Object label="Label 4"/>
            </mx:ArrayCollection>
        </local:dataProvider>
    </local:MyTree>

</mx:Application>

Источник для MyTree.as:

package
{
import mx.controls.Tree;

public class MyTree extends Tree
{

    override public function isItemSelectable(data:Object):Boolean
    {
        if (!super.isItemSelectable(data))
            return false;

        var label:String = data.label;
        if (label.indexOf("non-selectable") >= 0)
            return false;

        return true;
    }

}
}