Replace the Flex’s Default Right Click Menu

Adobe-Flex-CS3-48x48 Sometimes we need replace the Flex’s Default Right Click Menu,the code likes below that can hide the default menu but can not replace it(with function “hideBuiltInItems”).

var contextMenu : ContextMenu = new ContextMenu();
contextMenu.hideBuiltInItems();

The code below tells you how to implement this.

1,add below javascript function at Flex’s Html file

<script>
function onNsRightClick(e){
if(e.which == 3){
  FlexTest.openRightClick();
  e.stopPropagation();
}
return false;
}

function onIeRightClick(e){
if(event.button > 1){
  FlexTest.openRightClick();
  parent.frames.location.replace('javascript: parent.falseframe');
}
return false;
} 

if(navigator.appName == "Netscape"){
document.captureEvents(Event.MOUSEDOWN);
document.addEventListener("mousedown", onNsRightClick, true);
}
else{
document.onmousedown=onIeRightClick;
}
</script>
2.modify Flex's MXMLI. add initialize method and MOUSEOVER event      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  initialize="init()" mouseOver="getMouseTarget(event)" >

II. add MX Script

import mx.events.MenuEvent;
import mx.controls.Alert;
private var mouseTarget:DisplayObject;
function init()
{
ExternalInterface.addCallback("openRightClick", openRightClick);
} 

function getMouseTarget(event:MouseEvent):void
{
   mouseTarget = DisplayObject(event.target);
} 

function openRightClick():void
{
var e:MouseEvent = new MouseEvent(MouseEvent.MOUSE_DOWN, true, false, mouseTarget.mouseX, mouseTarget.mouseY);
mouseTarget.dispatchEvent(e);
} 

function showMouseEvent(event)
{
if(event.buttonDown == true)
  Alert.show("Left");
else
  Alert.show("Right");
}

<mx:Image x=”0″ y=”10″ id=”bbb” name=”bbb” source=”res/15.jpg” mouseDown=”showMouseEvent(event)” height=”247″/>

III.modify the parameter “wmode”(You can set the value opaque or transparent )

AC_FL_RunContent(
“src”, “playerProductInstall”,
“FlashVars”, “MMredirectURL=”+MMredirectURL+’&MMplayerType=’+MMPlayerType+’&MMdoctitle=’+MMdoctitle+”",
“width”, “100%”,
“height”, “100%”,
“align”, “middle”,
“id”, “FlexTest”, //// OBJECT ID
“wmode”, “opaque”, //////////////////////here
“quality”, “high”,
“bgcolor”, “#869ca7″,
“name”, “FlexTest”,
“allowScriptAccess”,”sameDomain”,
“type”, “application/x-shockwave-flash”,
“pluginspage”, “http://www.adobe.com/go/getflashplayer
);

That’s OK!

Description:

Sets the Window Mode property of the SWF file for transparency, layering, and positioning in the browser. Valid values of wmode are window, opaque, and transparent.

Set to window to play the SWF in its own rectangular window on a web page.

Set to opaque to hide everything on the page behind it.

Set to transparent so that the background of the HTML page shows through all transparent portions of the SWF file. This can slow animation performance.

To make sections of your SWF file transparent, you must set the alpha property to 0. To make your application’s background transparent, set the alpha

property on the <mx:Application> tag to 0.

The wmode property is not supported in all browsers and platforms.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

15 Responses to “Replace the Flex’s Default Right Click Menu”

  1. Santanu.K says:

    Nice article… very much helpful!.. thanks.

    Though some ppl might get this problemetic with IE7… for those, here’s some workout which I’ve found in some different article..

    Add event.stopPropagation() after parent.frames.location.replace(‘javascript: parent.falseframe’);

    Remember, in IE6 you SHOULD NOT call these new line of code, so essentially you just need a bit of detection to know how to invoke it.

    Cheers!

  2. manohar dudda says:

    this solution works great for me on both ff and ie .. but the default scrolling in containers has stopped working.. it seems to be blocking the mousewheel event somehow.. if I remove the code for rightclick, mousewheel works just fine and im able to scroll.. has anyone run into this issue before? any thoughts appreciated..

    thanks

  3. MechanisM says:

    source code please..its not working for me..

  4. [...] Flex中鼠标的控制有些时候会成为一种麻烦,比如右键功能(@see Replace the Flex’s Default Right Click Menu),当然还有滚动的功能。Ntt.cc上的发布了一个称为AutoScrollManager的类,可以帮助我们很容易的实现鼠标移动到某个区域并且按下时自动滚动。下面是其问题描述以及原文URL链接: [...]

  5. maverick says:

    Doesn’t work in linux(ubuntu, fedora) – firefox

  6. Ntt.cc says:

    can anyone provide more error info in linux/ubuntu/fedora firefox?

  7. [...] the problem in flex project of the mouse control. For example like the right-mouse function(@see Replace the Flex’s Default Right Click Menu) and so on. When the list has fixed width and height and the context is too many to display. Then [...]

  8. chirag says:

    this solution does not work for me. i am still getting context menu on right click event. i want to get rid of the defaut context menu and create new menu for my application.
    please direct me in right direction..
    Thanks,
    Chirag

  9. chirag says:

    can anyone provide me workaround for IE7? i tryed the one which was suggested by Santanu.K .
    Thanks in Advance…

  10. malkomalko says:

    Something like this should work for IE7:

    function onIeRightClick(e){
    if(event.button > 1){
    AppName.openRightClick();
    parent.frames.location.replace(‘javascript: parent.falseframe’);
    if(IE7){
    event.stopPropagation();
    event.cancelBubble = true;
    }
    }
    return false;
    }

  11. malkomalko says:

    Whoops forgot the IE7 var declaration: Stick this above that function.

    // Browser Detection
    IE7 = (navigator.appVersion.indexOf(“MSIE 7.”)==-1) ? false : true;

  12. Larry says:

    Why is the source code truncated? Is t here a place to get the full source (without truncation on this page…)

  13. I used the custom-context-menu project.
    See my example:
    http://blog.mariojunior.com/?p=17

    Google Code (http://code.google.com/p/custom-context-menu/)

    Best regards.
    Florianopolis-SC-Brazil

  14. [...] who read Replace the Flex’s Default Right Click Menu asked how to do the same with Flash AS3. In fact, AS3 provides the class named ContextMenu to [...]

  15. mendia says:

    I have Flash builder4. I want to change right click menu.
    where should I add MX Script(step II)?
    I did step 1 but I can,t understand others.
    pls help me.
    many thanks.

Leave a Reply