Monday, April 25, 2011

Editable Tree Node (Single Click Funtion and Right Click Edit)

MXML File
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="functinality();"  layout="absolute" minWidth="1024" minHeight="768" backgroundColor="#FFFFFF">
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;
            import mx.controls.Tree;
            import mx.events.ListEvent;
           
             public var parentxml:XML;
           
           
            /* Tree Rename */
           
            [Bindable]
            private var treeData: XML = <tree>
                <node label="First Node">
                    <node label="Business Form_1" id="0" name="first"/>
                    <node label="Business Form_2" name="first"/>
                </node>
   
                </tree>
           
             private var retuxmlstru:XML;
           
         
             public function retuxmlfile():void
              
               {
             
               parentxml= XML(treeControl.selectedItem).parent();
               Alert.show(parentxml);
             
             
               }
               
              protected function tree1_itemEditBeginningHandler(event:ListEvent):void
       
                {
                    event.preventDefault();
           
                         }
                
               private function appComplete (event:ListEvent):void
              
               {
                  
              
                var menu1:RightClickMenu = new RightClickMenu ();
                menu1.AddItem("Edit", function ():void {treeControl.editable=true; Tree( event.target ).editedItemPosition = { columnIndex: 0, rowIndex: event.rowIndex };});
                menu1.AssignRightClick(treeControl);
             
                }  
               
                public function samplecheck(event:ListEvent):void
                {
                    treeControl.editable=false;
                     Alert.show("This is Single Click Function ");
                }
               
                public function functinality():void
                {
                    treeControl.addEventListener(ListEvent.ITEM_CLICK, samplecheck);
                    treeControl.addEventListener(ListEvent.ITEM_EDIT_BEGINNING,tree1_itemEditBeginningHandler)
                }
                    
        ]]>
       
    </mx:Script>
   
      <mx:Tree
        x="0" y="0" width="200" height="100%" id="treeControl"
        labelField="@label"
        showRoot="false"
        itemClick="appComplete(event)"
        itemFocusOut="retuxmlfile()"
        dataProvider="{treeData}"
        >
        </mx:Tree>
   
    <mx:Button x="58" y="476" label="Return XML" click="retuxmlfile()" />
       
       
</mx:Application>


Right Click Menu Component:-
RightClickMenu.as

package
{
    import flash.events.ContextMenuEvent;
    import flash.events.MouseEvent;
    import flash.ui.ContextMenuItem;
   
    import mx.core.Application;
    import mx.core.UIComponent;
   
    public class RightClickMenu
    {
        public var MenuContents:Array = new Array ();
       
        public  function RightClickMenu(){}

        public function AddItem (name:String, func:Function):void
        {
            MenuContents.push({Name:name, Func:func});
        }

        public function AssignRightClick (uiComponent:UIComponent):void
        {
            uiComponent.addEventListener(MouseEvent.MOUSE_OVER, genEnableMenu (uiComponent));
            uiComponent.addEventListener(MouseEvent.MOUSE_MOVE, disableMenu);
        }
       
        /* Assignment */
        private function ResetContextMenu (event:MouseEvent):void
        {    //remove menu
            Application.application.contextMenu.customItems = new Array ();       
            //remove this function
            Application.application.removeEventListener(MouseEvent.MOUSE_MOVE, ResetContextMenu);       
        }
       
        private function disableMenu(event:MouseEvent):void
        {   
            //Stop the mouse move event from propagating to the application level, where we remove the menu
            event.stopImmediatePropagation();           
        }
       
        private function genEnableMenu (uiComponent:UIComponent):Function
        {                       
            return function (event:MouseEvent):void
            {       
                //add event listener to remove the menu on mouse move               
                Application.application.addEventListener(MouseEvent.MOUSE_MOVE, ResetContextMenu);           
               
                //hide current menu
                Application.application.contextMenu.hideBuiltInItems();
               
                //remove menu (ifyou right click and then move, this may not be killed.
                Application.application.contextMenu.customItems = new Array ();               
               
                //create new menu
                for (var i:Number in MenuContents)
                {
                    var menuItem:ContextMenuItem = new ContextMenuItem(MenuContents[i].Name);
                    menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, MenuContents[i].Func);                                       
                    Application.application.contextMenu.customItems.push(menuItem);   
                }   
            }           
        }
       
        private function genClickCall (func:Function):Function
        {
            return function (event:ContextMenuEvent):void
            {   
                func()
                ResetContextMenu(null);
            }

        }

    }
}

Your File Keep in this Format;

Output:-



After Edit Node Return XML