读书人

Java与Flex学习札记(18)-Flex中创建

发布时间: 2012-09-27 11:11:17 作者: rapoo

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的一个数据时则显示“删除歌曲”右键菜单。

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

读书人网 >flex

热点推荐