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
Tags: context menu, flex, RIA, treecontrol
August 25th, 2009 by Manish | Posted in Development Tips | Comments (0)