Custom context menu in Flex 4 using an XML file.

This sample application adds custom items to its context menu by fetching the captions from a local XML file. 

Below is the sample XML code.

<Context>
<Menu>Click Here 1</Menu>
<Menu>Click Here 2</Menu>
<Menu>Boo!!</Menu>
</Context>

(Note: Custom items in a context menu are added the same way in Flex 4 as they are in Flex 3)

The following steps are to be followed:

1. Use HTTPService to store the captions in an ArrayCollection (say 'myCustomItems')

2. For each of the captions, create a ContextMenuItem and add an event listener to it.

3. Push it into the array 'customItems', which is a property of the contextMenu.

In this app, we add the custom captions to the context menu of the application. They can also be added to a particular component by accessing its contextMenu (eg.  myComponent.contextMenu.customItems.push(customItem1);   )

<?xml version="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/halo" 
                          
creationComplete="application1_creationCompleteHandler()">

   <fx:Declarations>
      <s:HTTPService id="fetchItems"
url="assets/CustomContext.xml"
result="fetchItems_resultHandler(event)"/>
   </fx:Declarations>


<fx:Script>
                <![CDATA[
                        import mx.collections.ArrayCollection;
                        import mx.controls.Alert;
                        import mx.rpc.events.ResultEvent;

                        protected function
application1_creationCompleteHandler():void
                        {
                                fetchItems.send();
                        }
                        
                        protected function
fetchItems_resultHandler(event:ResultEvent):void
                        {
                                var i:Number;
                                var myCustomItems:ArrayCollection =
event.result.Context.Menu;                          
                                for
(i=0;i<myCustomItems.length;i++)
                                {
                                        var myItem:ContextMenuItem
= new ContextMenuItem(myCustomItems.getItemAt(i) as String);
                                       
myItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,contextMenuHandler);
                                       
this.contextMenu.customItems.push(myItem);
                                }                               
                        }
                        
                        protected function
contextMenuHandler(event:ContextMenuEvent):void
                        {
                                // Add your handler code here.
                                Alert.show("And handler
invoked.","Context Menu clicked...");
                        }

                        

                ]]>
        </fx:Script>
</s:Application>