How to add context menu in flex

Here is the sample code to add context menu in you flex application

I have a tree control on which I need to show a context menu for cut, copy and paste

Here is the code for that

 

 [Bindable]
 private var cm:ContextMenu=new ContextMenu();
 
 // This function initializes a new Context Menu
 private function createContextMenuItems():void {
  try
  {
 // Declare ContextMenuItem variable
 
 var deleteMenu:ContextMenuItem = new ContextMenuItem(“Delete Element Del”);
  var cutMenu:ContextMenuItem = new ContextMenuItem(“Cut Element Ctrl+x”,true);
 var copyMenu:ContextMenuItem = new ContextMenuItem(“Copy Element Ctrl+c”);
 var pasteMenu:ContextMenuItem = new ContextMenuItem(“Paste Element Ctrl+v”,true);
 // Add event listener which calls the deleteMenu_Select function declared below
 deleteMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, deleteMenu_Select);
  cutMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, cutMenu_Select);
 copyMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, copyMenu_Select);
 pasteMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, pasteMenu_Select);
  // Create new context menu
 //cm = new ContextMenu();
 // Hide default context menu items
 cm.hideBuiltInItems();
 // Add link
 cm.customItems.push(deleteMenu);
  cm.customItems.push(cutMenu);
 cm.customItems.push(copyMenu);
 cm.customItems.push(pasteMenu);
 // Apply context menu to application
  
  //formTree.contextMenu=cm;
  }
  catch(e:Error)
  {
   Alert.show(e.message.toString());
  }
}
   
 private function deleteMenu_Select(evt:ContextMenuEvent):void
 {
  formTree.selectedItem=currentcontextitem.data;
  removeEmployee();
 } 
 private function cutMenu_Select(evt:ContextMenuEvent):void
 {
  formTree.selectedItem=currentcontextitem.data;
  var frmelem:FormElement=(formTree.selectedItem as FormElement);
  //var frmelem:XMLNode=(formTree.selectedItem as XMLNode);
  fec.Data=frmelem;
  removeEmployee();
 }
 private function copyMenu_Select(evt:ContextMenuEvent):void
 {
  formTree.selectedItem=currentcontextitem.data;
  //Alert.show(currentcontextlistevt.toString());
  
  
  var frmelem:FormElement=(currentcontextlistevt.itemRenderer.data as FormElement);
  //var frmelem:XMLNode=(formTree.selectedItem as XMLNode);
  fec.Data=frmelem;
 }
 private function pasteMenu_Select(evt:ContextMenuEvent):void
 {
  formTree.selectedItem=currentcontextitem.data;
  
  var fele:FormElement=new FormElement();
  
  fele=fec.Data;
  fec=new FormElementClipboard()
  fec.Data=fele;
   if((formTree.selectedItem as FormElement).Type != “question” && (formTree.selectedItem as FormElement).Type != “Image”)
   {
   fele.ImmediateParent=formTree.selectedItem as FormElement;
   (formTree.selectedItem as FormElement).AddElements(fele);
   }
   else
   {
      var selectedItemParent:FormElement;
               var selectedItemIndex:int=formTree.selectedIndex;
              selectedItemParent = formTree.getParentItem((formTree.selectedItem as FormElement));
              
              fele.ImmediateParent=selectedItemParent as FormElement;              
              
              if(selectedItemParent.Type==”Form”)
              {
                   (selectedItemParent as FormClass).AddElements(fele);
                
              }
               else if(selectedItemParent.Type==”Group”)
               {
                   (selectedItemParent as Group).AddElements(fele);
                 
               }
   }
  Application.application.formTree.selectedItem=fele;
     Application.application.formTree.validateNow(); 
     //fec.Data=null
 }  
   
 public function onItemRollOver(e:ListEvent):void
{
 
 
 currentcontextitem=TreeItemRenderer(e.itemRenderer);
 currentcontextlistevt=e.clone() as ListEvent;
 var frmelem:FormElement=(currentcontextitem.data as FormElement);
 if(frmelem.Type==”Form”)
 {
  (cm.customItems[0]as ContextMenuItem).enabled=false;
  (cm.customItems[1]as ContextMenuItem).enabled=false;
  (cm.customItems[2]as ContextMenuItem).enabled=false;
  (cm.customItems[3]as ContextMenuItem).enabled=true;
 }
 //
 else if(frmelem.Type==”question” ||frmelem.Type==”Image”)
 {
  
  //(cm.customItems[3]as ContextMenuItem).enabled=false;
  (cm.customItems[3]as ContextMenuItem).enabled=true;
  (cm.customItems[0]as ContextMenuItem).enabled=true;
  (cm.customItems[1]as ContextMenuItem).enabled=true;
  (cm.customItems[2]as ContextMenuItem).enabled=true;
 }
 else
 {
  (cm.customItems[3]as ContextMenuItem).enabled=true;
  (cm.customItems[0]as ContextMenuItem).enabled=true;
  (cm.customItems[1]as ContextMenuItem).enabled=true;
  (cm.customItems[2]as ContextMenuItem).enabled=true;
 }
 /* if(fec.Data!=null && (frmelem.Type!=”question” && frmelem.Type!=”Image” ))
 {
  
  (cm.customItems[3]as ContextMenuItem).enabled=true;
 }
 else
 {
  
  (cm.customItems[3]as ContextMenuItem).enabled=false;
 } */
TreeItemRenderer(e.itemRenderer).contextMenu = cm;
}  
    /**
    *
    * end of context menu code
    *
    **/
    /**
    *
    * cut,copy and paste command handler
    *
    **/
   private function cut_Command():void
 {
  if(((formTree.selectedItem as FormElement).Type!=”Form”))
  {
  var frmelem:FormElement=(formTree.selectedItem as FormElement);
  //var frmelem:XMLNode=(formTree.selectedItem as XMLNode);
  fec.Data=frmelem;
  removeEmployee();
  }
 }
 private function copy_Command():void
 {
  if(((formTree.selectedItem as FormElement).Type!=”Form”))
  {
  //formTree.selectedItem=currentcontextitem.data;
  //Alert.show(currentcontextlistevt.toString());
  
  
  //var frmelem:FormElement=(currentcontextlistevt.itemRenderer.data as FormElement);
  var frmelem:FormElement=(formTree.selectedItem as FormElement);
  //var frmelem:XMLNode=(formTree.selectedItem as XMLNode);
  fec.Data=frmelem;
  }
 }
 private function paste_Command():void
 {
  if(fec.Data!=null)
  {
   var fele:FormElement=new FormElement();
   fele=fec.Data;
    fec=new FormElementClipboard()
    fec.Data=fele;
    
   if((formTree.selectedItem as FormElement).Type != “question” && (formTree.selectedItem as FormElement).Type != “Image”)
   {
   fele.ImmediateParent=formTree.selectedItem as FormElement;
   (formTree.selectedItem as FormElement).AddElements(fele);
   }
   else
   {
      var selectedItemParent:FormElement;
               var selectedItemIndex:int=0;
               var selectedParentIndex:int=0;
              selectedItemParent = formTree.getParentItem((formTree.selectedItem as FormElement));
              
              //selectedItemIndex=(selectedItemParent as FormElement).GetElementIndex(fele);
              selectedItemIndex= formTree.selectedIndex;
              selectedParentIndex=formTree.getItemIndex(selectedItemParent);
              fele.ImmediateParent=selectedItemParent as FormElement;              
              
              if(selectedItemParent.Type==”Form”)
              {
                   //(selectedItemParent as FormClass).AddElements(fele);
                  
                   (selectedItemParent as FormClass).AddElementsAt(selectedItemIndex-selectedParentIndex,fele);
                
              }
               else if(selectedItemParent.Type==”Group”)
               {
                   //(selectedItemParent as Group).AddElements(fele);
                   (selectedItemParent as Group).AddElementsAt(selectedItemIndex-selectedParentIndex,fele);
                 
               }
   }
   /* if(((formTree.selectedItem as FormElement).Type==”Group”)||((formTree.selectedItem as FormElement).Type==”Form”))
   {
    var fele:FormElement=new FormElement();
    
    fele=fec.Data;
    fec=new FormElementClipboard()
    fec.Data=fele;
    fele.ImmediateParent=formTree.selectedItem as FormElement;
    (formTree.selectedItem as FormElement).AddElements(fele);
    Application.application.formTree.selectedItem=fele;
       Application.application.formTree.validateNow();
    } */
   } 
     //fec.Data=null
 }
   /**
    *
    * end of cut,copy and paste commnd
    *
    **/

 

Please feel free to customize this code

although I have put it here for my reference but I will be the happiest person if it helps someone in any way

 Thanks

Leave a Reply