Java与Flex学习札记（18）-Flex中创建右键菜单

2012-09-27

Java与Flex学习笔记（18）----Flex中创建右键菜单每次使用网盘如“115网盘”时都可以使用定制的右键菜单很是方

Java与Flex学习笔记（18）----Flex中创建右键菜单

每次使用网盘如“115网盘”时都可以使用定制的右键菜单很是方便，都想在WEB中怎么实现这个右键菜单呢？到现在也没有摸清楚。不过，右键菜单在Flex中却可以很容易就实现了。

Flex中创建右键菜单现实内容的类是ContextMenuItem类。ContextMenuItem 类表示上下文菜单中的项。每个ContextMenuItem 对象都有一个显示在上下文菜单中的标题（文本）。要向上下文菜单中添加新项，需要将其添加到 ContextMenu 对象的 customItems 数组。利用 ContextMenuItem 类的属性，您可以启用或禁用特定菜单项，也可以显示或隐藏菜单项。可以为 menuItemSelect 事件编写事件处理函数，以便在用户选择菜单项时为其添加功能。

当然，定义右键菜单可以定制全局右键菜单，也可以定制特有的右键菜单，例如只有在DataGrid上才显示一个菜单，但是在其他地方则不显示。下面这段代码为本人写的一个小demo:

<?xmlversion="1.0" encoding="utf-8"?><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" minWidth="955" minHeight="600" creationComplete="app_creationCompleteHandler(event)">    <fx:Script>       <![CDATA[           import flash.utils.clearInterval;           import flash.utils.setInterval;                     import mx.collections.ArrayCollection;           import mx.collections.IList;           import mx.controls.Alert;           import mx.controls.dataGridClasses.DataGridItemRenderer;           import mx.core.FlexGlobals;           import mx.events.CloseEvent;           import mx.events.FlexEvent;           import mx.events.ListEvent;           [Bindable]private var contextMenuCustomItems:Array;           [Bindable]private var cm:ContextMenu;           [Bindable]private var songList:ArrayCollection=new ArrayCollection([              {showName:'恋上另一个人',songer:'游鸿明',filmName:'chirsyu_lslygr.flv'},              {showName:'一天一万年',songer:'游鸿明',filmName:'chirisyu_ytywn.flv'},              {showName:'下沙',songer:'游鸿明',filmName:'chirisyu_xs.flv'},              {showName:'五月的雪',songer:'游鸿明',filmName:'chirisyu_wydx.flv'},              {showName:'楼下那个女人',songer:'游鸿明',filmName:'chirisyu_lxngnr.flv'},              {showName:'白色恋人',songer:'游鸿明',filmName:'chirisyu_bslr.flv'}           ]);           protected function app_creationCompleteHandler(event:FlexEvent):void           {              // TODOAuto-generated method stub              Alert.okLabel="确定";              Alert.yesLabel="是";              Alert.cancelLabel="否";              var aboutUserMenu:ContextMenuItem=new ContextMenuItem("关于我们",true,true);               aboutUserMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,aboutUserMenuHandler);              contextMenuCustomItems=FlexGlobals.topLevelApplication.contextMenu.customItems;              contextMenuCustomItems.push(aboutUserMenu);              var linkMenu:ContextMenuItem=new ContextMenuItem("联系作者",true,true);              linkMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,linkHandler);              contextMenuCustomItems.push(linkMenu);           }           private function aboutUserMenuHandler(event:ContextMenuEvent):void{                Alert.show("我的网盘 V1.0","提示");           }           protected function showList_clickHandler(event:MouseEvent):void           {              var obj:Object=showList.selectedItem;              var fileName:String=obj['showName']              if(fileName!=""){                  createContextMenu("删除歌曲",buyHandler);                  showList.contextMenu=cm;              }           }           private function linkHandler(event:ContextMenuEvent):void{              Alert.show("QQ:996475895","提示");           }                     private function createContextMenu(menuName:String,fun:Function):void           {              cm = new ContextMenu();              cm.hideBuiltInItems();              var customItemsArr:Array = new Array();              var customMenuItem:ContextMenuItem = newContextMenuItem(menuName,true,true);              customMenuItem.addEventListener("menuItemSelect", fun);              customItemsArr.push(customMenuItem);              cm.customItems = customItemsArr;           }                     private function buyHandler(event:ContextMenuEvent):void           {              var showName:String=showList.selectedItem['showName'];              Alert.show('确实要删除歌曲"'+showName+'"吗？',"提示",Alert.YES|Alert.CANCEL,this,yesOrCancleHandler,null,Alert.CANCEL);           }           private function yesOrCancleHandler(event:CloseEvent):void{              if(event.detail==Alert.YES){                  var index:int=showList.selectedIndex;                  songList.removeItemAt(index);                  showList.dataProvider=songList;              }           }       ]]>    </fx:Script>    <fx:Declarations>       <!-- Place non-visualelements (e.g., services, value objects) here -->    </fx:Declarations>          <mx:DataGrid id="showList" x="228" y="97" width="563" height="355"                   click="showList_clickHandler(event)"dataProvider="{songList}"  fontSize="16" fontWeight="bold">           <mx:columns>              <mx:DataGridColumn headerText="歌曲名" dataField="showName" width="250"/>              <mx:DataGridColumn headerText="演唱者" dataField="songer" />              <mx:DataGridColumn headerText="链接地址" dataField="filmName" visible="false" />           </mx:columns>       </mx:DataGrid> </s:Application>

此文件创建了一个全局右键菜单和一个局部右键菜单：当鼠标没有选择DataGird数据时显示的是“关于我们”，“联系作者”这两个菜单，当选中了DataGird的一个数据时则显示“删除歌曲”右键菜单。

当然，右键菜单的命名也是有规则的，如下所示：

Save

Zoom In
Zoom Out
100%
Show All
Quality
Play
Loop
Rewind
Forward
Back
Movie not loaded
About
Print
Show Redraw Regions
Debugger
Undo
Cut
Copy
Paste
Delete
Select All
Open
Open in new window
Copy link

Adobe
Macromedia
Flash Player
Settings

注意：如果播放器运行在非英语系统上，标题字符串将同时与英语列表和对应的本地化字符串进行比较。例如我开始直接添加了“删除”。结果怎么都添加不上，原来“删除”与“Delete”是对应的。后来改成了“删除歌曲”才添加成功的！

不过有一个小小的遗憾的，如果将此DataGrid添加到一个容器如Panel中时，右键菜单则失效，原因是Flex只有顶级容器才能创建右键菜单，后续我在看看这种情况下的右键菜单创建。

这是本人学习的结果，允许转载，欢迎交流，但转载务必给出本文章的链接地址：http://blog.csdn.net/youqishini/article/details/8008459，谢谢~

热点排行