How to add a custom context menu to a Spark TextArea in Flex 4

There is a current known issue with adding custom context menus on a RichEditableText Spark component:
http://bugs.adobe.com/jira/browse/SDK-23926

This includes the TextArea component. Essentially, any custom context menus will not show up. There is a work around mentioned in the comments for the bug on Adobe’s website but I thought I would re-hash and show an example since this had me a bit stumped.

The work around is to attach the context menu to the TextArea’s TextDisplay object via the “textDisplay()” accessor method. I have created a simple example with source.

<!--?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/mx" minwidth="400" minheight="200" backgroundcolor="#9FA0D4" width="500" height="300" creationcomplete="init();" viewsourceurl="srcview/index.html">
    <s:layout>
        <s:basiclayout>
    </s:basiclayout></s:layout>
    <fx:declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:declarations>
    <fx:script>
        <!--[CDATA[
            private function init():void{
                var cm:ContextMenu = new ContextMenu();
 
                var red:ContextMenuItem = new ContextMenuItem('Red',false,true,true);
                red.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleRed);
 
                var green:ContextMenuItem = new ContextMenuItem('Green',false,true,true);
                green.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleGreen);
 
                var blue:ContextMenuItem = new ContextMenuItem('Blue',false,true,true);
                blue.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleBlue);
 
                cm.customItems.push(red);
                cm.customItems.push(green);
                cm.customItems.push(blue);
                cm.clipboardMenu = true;
                textArea.textDisplay.contextMenu = cm;
            }
 
            private function handleRed(e:Event):void{
                textArea.setStyle('contentBackgroundColor', 'red');
            }
 
            private function handleGreen(e:Event):void{
                textArea.setStyle('contentBackgroundColor', 'green');
            }
 
            private function handleBlue(e:Event):void{
                textArea.setStyle('contentBackgroundColor', 'blue');
            }
        ]]-->
    </fx:script>
    <s:textarea id="textArea" x="161" y="74" text="This is a Flex 4 Spark TextArea.  Right click to see the custom context menu. ">
</s:textarea></s:application>

2 Comments

Add Yours →

Hi,
I got issue it he following line.
“textArea.textDisplay.contextMenu = cm;”.
There is no property called “textDisplay” associated with TextArea,
please help me..

Rathna,
textDisplay is part of the Spark skin for TextArea.
Make sure that you use the Spark theme when compiling your app.

Leave a Reply

Related Posts