Adding custom context menu items to a Flex application

by Peter deHaan on November 7, 2008

in ActionScript, ContextMenu, ContextMenuItem

The following example shows how you can add custom context menu items to a Flex application by creating new ContextMenuItem objects and adding them to the Flex application’s customItems array (via the contextMenu property).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/07/adding-custom-context-menu-items-to-a-flex-application/ -->
<mx:Application name="Application_contextMenu_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            private function init():void {
                var customMenuItem1:ContextMenuItem = new ContextMenuItem("Flex SDK " + mx_internal::VERSION, false, false);
                var customMenuItem2:ContextMenuItem = new ContextMenuItem("Player " + Capabilities.version, false, false);
                var contextMenuCustomItems:Array = application.contextMenu.customItems;
                contextMenuCustomItems.push(customMenuItem1);
                contextMenuCustomItems.push(customMenuItem2);
            }
        ]]>
    </mx:Script>
 
    <mx:Label text="Right click to see custom context menu items." />
 
</mx:Application>

View source is enabled in the following example.

Tagged as: customItems

{ 9 comments… read them below or add one }

1 Ram November 7, 2008 at 5:41 pm

Could not see any of the GUMBO examples. “It says download
error. Try to download again?” I have Flash 10 installed in
my computer. I am using a XP machine.

2 peterd November 7, 2008 at 6:33 pm

Ram,

This isn’t a Gumbo example (and should only require Flash Player 9.0.115.0), but what version of Flash Player 10 are you using? http://blog.flexexamples.com/about-you/

Does this happen in all browsers, or just one?

Peter

3 Raza November 8, 2008 at 5:40 pm

Very Nice Example
I extended your example by adding an event listener and navigating to a webpage!
It works fine, but when i do right click on a swf loader, it doesnt navigate to webpage (seems like it simply bypass the event)

Could you please find the solution of this problem?

My code is here

//in initApp
mx.core.Application.application.contextMenu.hideBuiltInItems();
var mnuCRight:ContextMenuItem = new ContextMenuItem(“Copyright © 2008″, true);
mnuCRight.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, ctMenu);
mx.core.Application.application.contextMenu.customItems.push(mnuCRight);

//function
private function ctMenu(event:ContextMenuEvent):void
{
navigateToURL(new URLRequest(“www.myweb.com”), “_blank”);
}

4 Massic January 22, 2009 at 2:07 am

Nice, but dont let your immagination be kissed by the idea to add “select all” menu item. You’ll never see it :( Maybe its a “reserved” label …

5 Peter deHaan January 22, 2009 at 8:38 am

Massic,

Correct, “Select All” is a reserved/restricted word. For a complete list, see http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/ui/ContextMenuItem.html

The following captions are not allowed, but the words may be used in conjunction with other words to form a custom caption (for example, although “Paste” is not allowed, “Paste tastes great” is allowed):

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

Peter

6 handoyo July 19, 2009 at 8:21 am

Hi,i want to ask..What should i do suppose i want to add a link to the context menu items on it??Thanks…

7 MechanisM October 18, 2009 at 5:27 am

What About Example for Flex 4 beta 2?

8 Peter deHaan October 18, 2009 at 8:25 am

@MechanisM,

It’s almost exactly the same, except replace application.contextMenu.customItems with FlexGlobals.topLevelApplication.contextMenu.customItems, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_Application_contextMenu_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
 
            private function init():void {
                var customMenuItem1:ContextMenuItem = new ContextMenuItem("Flex SDK " + mx_internal::VERSION, false, false);
                var customMenuItem2:ContextMenuItem = new ContextMenuItem("Player " + Capabilities.version, false, false);
                var contextMenuCustomItems:Array = FlexGlobals.topLevelApplication.contextMenu.customItems;
                contextMenuCustomItems.push(customMenuItem1);
                contextMenuCustomItems.push(customMenuItem2);
            }
        ]]>
    </fx:Script>
 
    <s:Label text="Right click to see custom context menu items."
             horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Peter

9 Peter deHaan October 18, 2009 at 8:33 am: New example posted; “Adding custom context menu items to a Flex 4 application”

Peter

Adding custom context menu items to a Flex application

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

Adding custom context menu items to a Flex application

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising