событие щелчка гибкой строки меню

Question

У меня есть строка меню, которая выглядит следующим образом:

<mx:MenuBar id="myMenuBar" labelField="@label" cornerRadius="8" color="black" fillColors="[green, green]" itemClick="menuItemClickHandler(event);"
        dataProvider="{menuBarCollection}" change="onTopSelection(event)" />    

XML для моей строки меню выглядит следующим образом:

            <menuitem label="Vision">
        </menuitem>
        <menuitem label="About">
            <menuitem label="Our Team"/>
            <menuitem label="Services"/>
        </menuitem>

        <menuitem label="Contact Us">

        </menuitem>

Как вы можете видеть, есть Vision и Contact Us, но eventHandler не знает, когда щелкнули эти два. Как правильно реализовать eventHandler?

Answer 1

В вашем коде есть два обработчика событий. onTopSelection и menyItemClickHandler. Событие изменения отправляется при нажатии на что-либо. Событие itemClick отправляется только при нажатии на элемент подменю.

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                 creationComplete="application1_creationCompleteHandler(event)">


    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.FlexEvent;
            import mx.events.MenuEvent;

            [Bindable] 
            public var menuBarCollectionSource : XML = 
            <menu>
            <menuitem label="Vision">
            </menuitem>
            <menuitem label="About">
                <menuitem label="Our Team"/>
                <menuitem label="Services"/>
            </menuitem>
            <menuitem label="Contact Us">
            </menuitem>
            </menu>;

            [Bindable] 
            public var menuBarCollection : XMLListCollection = new XMLListCollection();

            public function menuItemClickHandler(event:MenuEvent):void{
                trace('menu item clicked ' + event.label);
            }

            protected function onTopSelection(event:MenuEvent):void
            {
                trace('change to ' + event.label);
            }


            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                menuBarCollection.source = menuBarCollectionSource.menuitem as XMLList;
            }

        ]]>
    </mx:Script>


    <mx:MenuBar id="myMenuBar" labelField="@label" cornerRadius="8" 
                color="black" fillColors="[green, green]" 
                itemClick="menuItemClickHandler(event);"
                dataProvider="{menuBarCollection}" change="onTopSelection(event)" />  

</mx:Application>

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

Answer 2

@ SuperString вы на самом деле не используете MenuBar, как было задумано.Как указывает Flextras, событие itemClick срабатывает только для нажатий подменю.

Думайте об этом как о строке меню в типичном приложении Windows.При нажатии на меню Файл открывается подменю, и только тогда, когда вы нажимаете на элемент в подменю, что-то действительно происходит.Я не говорю, что то, что вы пытаетесь сделать, неправильно, просто то, что элемент управления не был разработан с учетом вашего конкретного использования.

Одно из предложений - использовать ButtonBar с PopupMenu, как это необходимо для вложенноговыбор.Он не будет таким чистым, как вам придется обрабатывать события из Меню иначе, чем ButtonBar.

В идеале, вам нужен компонент «Nested Navigation Menu», но я не вижу никаких существующихкомпонент с этой функциональностью.Может быть, что-то для Flextras, чтобы построить?

Answer 3

Большое спасибо за ваш совет!

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

Сначала я добавил список событий в свое меню:

(допустим, у меня есть mx: Menubar с именем _myMenuBarName)

_myMenuBarName.addEventListener(MenuEvent.ITEM_CLICK, eventsLaucher);

Затем я создал функцию, которая будет решать, какое событие следует запустить, в зависимости от метки меню BarItem

    private function eventsLauncher(pEvent:MenuEvent):void 
            {
            switch(pEvent.label)
 {
            case "Our Team":
                         {
                //do something
                break;

                case "Vision":
                    //do something else
                break;              
            }
}