Question

Flex和mxml的新功能。我如何将AS3类的函数绑定到菜单栏项？我的菜单栏代码是这样的：

<mx:MenuBar id="myMenubar" labelField="@label">
    <fx:XMLList xmlns="">
        <item label="File">
            <item label="New" />
            <item label="Open"/>
            <item label="Save"/>
            <item label="Save As"/>
            <item label="Quit"/>
        </item>

        <item label="Edit">
            <item label="Undo"/>
            <item label="Redo"/>
            <item label="Preferences"/>
        </item>

        <item label="Level">
            <item label="New Room"/>
            <item label="Properties"/>
        </item>

        <item label="Objects">
            <item label="Clickable"/>
            <item label="Character"/>
            <item label="Door"/>
            <item label="Treasure"/>
        </item>
    </fx:XMLList>
</mx:MenuBar>

我查看了Google中的一些示例，但未找到明确的解释或示例如何触发AS3类功能。我认为我应该以某种方式为我的子项制作click事件监听器并调用我的类。但是，mxml语法让我很困惑。

Answer 1

MXML只是一种以声明方式描述数据和组件的方法，最后它被编译为纯ActionScript，因此您只需订阅适当的监听器myMenubar。

我认为您正在寻找itemClick事件：

myMenubar.addEventListener(MenuEvent.ITEM_CLICK, function(e:MenuEvent):void
{
    trace(e.label + ' was clicked');
});

为了能够在更改标签时区分项目，我建议为其分配ID：

<mx:MenuBar id="myMenubar" labelField="@label">
    <fx:XMLList xmlns="">
        <item label="File">
            <item id="abc" label="New" />
            <item id="xyz" label="Open"/>
            ...

然后你可以使用一个简单的开关来处理不同的项目：

myMenubar.addEventListener(MenuEvent.ITEM_CLICK, function(e:MenuEvent):void
{
    switch(e.item.@id)
    {
        case 'abc':
            // do something
            break;

        case 'xyz':
            // do something else
            break;
    }
});

当然，您还可以使用MXML定义要调用的函数：

<mx:MenuBar id="myMenubar" labelField="@label" itemClick="myMenuItemClickHandler(event)">

-

private function myMenuItemClickHandler(e:MenuEvent)
{
    ...
}

另请参阅example in the Adobe LiveDocs以了解这一切是如何结合在一起的：

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Halo MenuBar control. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="initCollections();">

    <fx:Script>
        <![CDATA[
            import mx.collections.*;
            import mx.controls.Alert;
            import mx.events.MenuEvent;

            [Bindable]
            public var menuBarCollection:XMLListCollection;

            private var menubarXML:XMLList =
                <>
                    <menuitem label="Menu1" data="top">
                        <menuitem label="MenuItem 1-A" data="1A"/>
                        <menuitem label="MenuItem 1-B" data="1B"/>
                    </menuitem>
                    <menuitem label="Menu2" data="top">
                        <menuitem label="MenuItem 2-A" type="check" data="2A"/>
                        <menuitem type="separator"/>
                        <menuitem label="MenuItem 2-B" >
                            <menuitem label="SubMenuItem 3-A" type="radio"
                                groupName="one" data="3A"/>
                            <menuitem label="SubMenuItem 3-B" type="radio"
                                groupName="one" data="3B"/>
                        </menuitem>
                    </menuitem>
                </>;

            // Event handler to initialize the MenuBar control.
            private function initCollections():void {
                menuBarCollection = new XMLListCollection(menubarXML);
            }

            // Event handler for the MenuBar control's itemClick event.
            private function menuHandler(evt:MenuEvent):void  {
                // Don't open the Alert for a menu bar item that 
                // opens a popup submenu.
                if (evt.item.@data != "top") {
                    Alert.show("Label: " + evt.item.@label + "\n" + 
                        "Data: " + evt.item.@data, "Clicked menu item");
                }
            }
         ]]>
    </fx:Script>

    <s:Panel title="Halo MenuBar Control Example"
            width="75%" height="75%"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="10" right="10" top="10" bottom="10">
            <s:Label width="100%" color="blue" text="Select a menu item."/>

            <mx:MenuBar labelField="@label" itemClick="menuHandler(event);" 
                    dataProvider="{menuBarCollection}" />
        </s:VGroup>
    </s:Panel>

</s:Application>

将AS3类功能绑定到Flex菜单栏

1 个答案: