0 Replies Latest reply on Apr 20, 2010 6:43 PM by Chen Zhiyuan

    context menu for element inside tabnavigator

    Chen Zhiyuan

      I find in the document of FLEX saying that only "top level" element can have the context menu. but in example below, is very common for a rich client application. the end user used to have a copy&paste context menu for the text editor.

       

      I assume it should be very simple for flex, if it is aimed to be a rich client platform. anyone can give me the hint?

       

       

       

       

      <?xml  version="1.0" encoding="utf-8"?>
      <s:Application  xmlns:mx="library://ns.adobe.com/flex/mx"
                     xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                 
                  
                      backgroundColor="white"
                       creationComplete="init();"  >
         
           <fx:Script>
              <![CDATA[
                   import spark.components.TextArea;
                  import  mx.controls.Alert;
                 
                   [Bindable]
                  private var  cm:ContextMenu;
                 
                   private function init():void {
                     
                      
                     
                      var  showSelection:ContextMenuItem = new ContextMenuItem("Show selection");
                       showSelection.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,  showSelection_menuItemSelect);
                     
                       var upperCase:ContextMenuItem = new ContextMenuItem("Convert  to upper case");
                       upperCase.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,  upperCase_menuItemSelect);
                     
                      var  lowerCase:ContextMenuItem = new ContextMenuItem("Convert to lower  case");
                      lowerCase.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,  lowerCase_menuItemSelect);
                     
                       cm = new ContextMenu();
                       cm.hideBuiltInItems();
                     
                       cm.clipboardMenu = true;
                       cm.clipboardItems.copy = true;
                       cm.clipboardItems.paste = true;
                       cm.clipboardItems.selectAll = true;
                     
                       cm.customItems.push(showSelection);
                       cm.customItems.push(upperCase);
                       cm.customItems.push(lowerCase);
                     
      //                 richTextEditor.contextMenu = cm;
      //                 textarea.contextMenu = cm;
                  }
                 
                  private function  showSelection_menuItemSelect(evt:ContextMenuEvent):void {
                       Alert.show("evt."+(focusManager.getFocus() is  mx.controls.TextArea));
                      var selText:String =  richTextEditor.selection.text;
                      if (selText.length == 0)  {
                           Alert.show("Please select some text.", "** ERROR **");
                       } else {
                           Alert.show(selText, selText.length + " character(s)");
                       }
                  }
                  
                  private function  upperCase_menuItemSelect(evt:ContextMenuEvent):void {
                      var selText:String =  richTextEditor.selection.text;
                       richTextEditor.selection.text = selText.toUpperCase();
                  }
                  
                  private function  lowerCase_menuItemSelect(evt:ContextMenuEvent):void {
                      var selText:String =  richTextEditor.selection.text;
                       richTextEditor.selection.text = selText.toLowerCase();
                  }
               ]]>
          </fx:Script>
          <s:Panel id="panel"  width="100%" height="100%" mouseEnabled="true">
              
         
          <mx:TabNavigator   id="tn" width="100%" height="100%" creationPolicy="all"  mouseEnabled="true">
              <s:NavigatorContent  label="tab1">
                  <mx:TextArea id="textarea"
                                   
                                    
                                      width="100%"
                                      height="100%" />
              </s:NavigatorContent>
              <s:NavigatorContent  label="tab2">
          <mx:RichTextEditor  id="richTextEditor"
                             title="Rich  Text Editor"
                             status="status  message"
                             width="100%"
                              height="100%">
               <mx:text><![CDATA[Lorem ipsum dolor sit amet, consectetuer  adipiscing elit. Donec lacus est, ullamcorper sit amet, gravida at,  viverra sit amet, lacus. Aliquam quis lectus id nisl condimentum  hendrerit. Maecenas metus libero, dictum et, scelerisque vel, hendrerit  non, felis. Duis venenatis, ligula eu lobortis lobortis, turpis erat  eleifend eros, vitae auctor tortor mi in urna. Etiam aliquam, tellus  aliquet placerat malesuada, orci sem rhoncus lectus, a elementum neque  odio vitae urna. Pellentesque eget felis. Aenean at nisi. Proin felis.  Curabitur scelerisque risus eget purus. Sed commodo eros in dolor. Sed  quis lectus. Integer iaculis leo quis enim. Maecenas orci. Pellentesque  habitant morbi tristique senectus et netus et malesuada fames ac turpis  egestas. Aenean et massa sit amet nibh fermentum accumsan. Maecenas  aliquam metus dapibus mi. Pellentesque egestas posuere leo. Maecenas  pellentesque diam non augue. Nulla vel nisi sit amet eros suscipit  sagittis.]]></mx:text>
          </mx:RichTextEditor>
           </s:NavigatorContent>
              </mx:TabNavigator>
          </s:Panel>
      </s:Application>