1 Reply Latest reply on Jun 3, 2011 3:13 PM by david.dom

    How to create collapsible panel in flex3

    navinflex3

      I Demo.JPG

       

      How to create Collapsible panel in flex.

      If you observer above image. There are three panels.For ffirst and last panel i have provided one button where it contains open/close button.When user selects close button left panel should collapse to left hand side and the same should come to its original postion. In case of right panel is the same process except it should collapse to right side.

       

      Below is my code:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" >


      <mx:Script>
        <![CDATA[
       
        import flash.net.FileReference;
        import mx.controls.Menu;
        import flash.display.Stage; 
        import mx.events.MenuEvent;
        import mx.controls.Alert;
        import mx.events.ListEvent;
        import mx.managers.DragManager;
              import mx.core.DragSource;
              import mx.events.DragEvent;
        import DrawingClasses.Designer;
       
        [Bindable]
        [Embed(source="/images2/line.png")]
        public var linePicture:Class;
        [Bindable]
        [Embed(source="/images2/box.png")]
        public var boxPicture:Class;
       
        [Bindable]
        public var xm:XML =
        <AbstractComponentTemplate></AbstractComponentTemplate>;
       
        public var compType:XML =
         <ComponentTemplateDescriptor>
          <Owner>BackTesting</Owner>
          <Name>Component</Name>
          <Version>1</Version>
         </ComponentTemplateDescriptor>;

       
        [Bindable]
              private var cm:ContextMenu; 

        public var xm1:XML;
        
        public var loopparent:Array = new Array();
       
        private var mouseTarget:DisplayObject;
        private var xOff:Number;
        private var yOff:Number;
        private var designer:Designer = new Designer();  
        private var i:int;
        private var j:int;
       
        private function init():void
        {
         designer.setDesignArea(designArea);
        
         var cmi1:ContextMenuItem = new ContextMenuItem("Properties", true);
                  cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_propertiesSelect);
        
         var cmi2:ContextMenuItem = new ContextMenuItem("View XML", true);
         cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_viewXMLSelect);
        
         var cmi3:ContextMenuItem = new ContextMenuItem("Saved Components", true);
         cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_savedListSelect);  

         cm = new ContextMenu();
         cm.hideBuiltInItems();
         cm.customItems = [cmi1, cmi2, cmi3];
         cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
        }
       
        private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
                     
              }

        private function contextMenuItem_propertiesSelect(evt:ContextMenuEvent):void {
          accrCon2.label = "Two Way Split - Properties";   
          accrWin.selectedIndex = 1;
              }
       
        private function contextMenuItem_viewXMLSelect(evt:ContextMenuEvent):void {               
          viewstack1.selectedIndex = 1;
              }
       
        private function contextMenuItem_savedListSelect(evt:ContextMenuEvent):void {               
          accrWin.selectedIndex = 0;
              }
       
        [Bindable]
        private var propValue:String = "Component";
       
              private function itemClickEvent(event:ListEvent):void {
         var propKey:String = dgProp.selectedItem.@key;
        
         if (propKey == "name") {
          propValue = dgProp.selectedItem.propvalue;   
         }
              }
       
        [Bindable]
        private var sourceXML:XML =
        <order>
         <!--This is a comment. -->
         <?PROC_INSTR sample ?>
         <item id='1'>
          <menuName>burger</menuName>
          <price>3.95</price>
         </item>
         <item id='2'>
          <menuName>fries</menuName>
          <price>1.45</price>
         </item>
        </order>;
       
        [Bindable]
        private var savedComp:Array=['ComponentTemplate',
        'iv85341.EquityCash.v1',
        'ra92724.ThreeWaySplit.EU.US.OTHERS.v1',
        'ra92724.TwoWaySplit.EU.OTHERS.v1',
        'ra92724.TwoWaySplit.US.OTHERS.v1',
        'iv85341.VanillaNode.v1',
        'iv85341.ReadGmrFs.v1'
        ];
         
           [Bindable]
           private var propData:XML =
            <properties>
             <prop key="name">
              <propvalue>Component</propvalue>
           <itemRenderer>mx.controls.NumericStepper</itemRenderer>
             </prop>
             <prop key="Version">
              <propvalue>1.0</propvalue>
           <itemRenderer>mx.controls.NumericStepper</itemRenderer>
             </prop>
             <prop key="Owner">
              <propvalue>iv85341</propvalue>
           <itemRenderer>mx.controls.NumericStepper</itemRenderer>
             </prop>
             <prop key="width">
              <propvalue>250</propvalue>
           <itemRenderer>mx.controls.NumericStepper</itemRenderer>
             </prop>
             <prop key="height">
              <propvalue>300</propvalue>
           <itemRenderer>mx.controls.NumericStepper</itemRenderer>
             </prop>      
             <prop key="X-Pos">
              <propvalue>40</propvalue>
           <itemRenderer>mx.controls.NumericStepper</itemRenderer>
             </prop>
             <prop key="Y-Pos">
              <propvalue>20</propvalue>
           <itemRenderer>mx.controls.NumericStepper</itemRenderer>
             </prop>
            </properties>;
        
         private function rightClick(event:MouseEvent):void
         {
          Alert.show("Properties ..." + event.currentTarget, "Open");
         }
        
        
         // Draging Code Starts Here
         private var curDate:Date = new Date();
         private var dateList:XMLList = null;
        
         public function pictureDragDrop(event:DragEvent):void { 
         
          //Alert.show (" com = " + event.dragSource.dataForFormat("key"));
          var nodeName:String = event.dragSource.dataForFormat("key").toString(); //txtInput1.text;
          var nodeValue:String = "";
          if (nodeValue == "")
          {
           if (xm == <AbstractComponentTemplate></AbstractComponentTemplate>)
           {     
            xm.appendChild(compType);
            dateList = new XMLList("<DateCreated>" + curDate + "</DateCreated>");
            xm.appendChild(dateList);     
            dateList = new XMLList("<DateModified>" + curDate + "</DateModified>");
            xm.appendChild(dateList);
           
            xm1 = XML("<" + nodeName + "></" + nodeName + ">");
            xm.appendChild(xm1);
           }
           else
           {     
            i++;
            xm1 = XML("<" + nodeName + "></" + nodeName + ">");
           
            xm.appendChild(xm1);
            //loopparent.push(xmlarray:xm1);
          
            loopparent[i] = xm1;     
           }
          }
          else
          {
          
          
           var xmlList:XMLList = new XMLList("<" + nodeName + ">" + nodeValue + "</" + nodeName + ">");
          
           if (xm1 == null)
           {    
            xm.appendChild(xmlList);
           }
           else
           {
            for (j = i; j>0; j--)
            {
           
            (loopparent[j]).appendChild(xmlList);
           
            //Alert.show("alert");
            }    
         
           }
          }
          var x:int = event.currentTarget.mouseX - xOff;
          var y:int = event.currentTarget.mouseY - yOff; 
          if(event.dragSource.dataForFormat("key") == "box")
          {
           designer.addBox(x, y); 
          }  
          else  if(event.dragSource.dataForFormat("key") == "circle")
          {
           designer.addCircle(x, y);
          }
          else
          {
           designer.addRectangle(x, y);
          }
        
          //txtInput1.text = "";
          //txtInput2.text = "";
           }
         // this method gets x and y coordinate of template box image
         private function myoffset(img:Image):void {
          xOff = img.mouseX;
          yOff = img.mouseY;
         }
        
         // this method does acceptable draging box image
         public function pictureDragEnter(event:DragEvent):void{
          DragManager.acceptDragDrop(Canvas(event.target));       
         }
        
         // this method supply drag box when mouse move on the design area
         private function dragPicture1(event:MouseEvent, img1:Image,format:String):void{
          var dragInitiator:Image=Image(event.currentTarget);
          var ds:DragSource = new DragSource();
          var imageProxy:Image = new Image();
          imageProxy.source = img1.source;    
          imageProxy.height= 150;
          imageProxy.width= 150;
          ds.addData(format,"key");
         
          DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
         }     
         // this method works when click on the line button
         // it is make enable to draw line
         public function doDrawEnable():void {
         
          designer.setIsDrawEnable(true);  
            
         }
        
         private var fileRef:FileReference;

         public function createXML():void {
          var fileName:String = "component.xml";
                      fileRef = new FileReference();
          fileRef.browse();
         }
        
         // Draging code ends here
       
        ]]>
      </mx:Script>


      <mx:Fade id="theEffect"/>


      <mx:HDividedBox width="100%" height="100%">
        <mx:VDividedBox height="100%" width="20%">  
          <mx:Panel title="Drawing Components" width="100%" height="100%" layout="vertical" >
           
              <mx:Panel title="Nodes" width="100%" height="100%" layout="vertical">
               <mx:Image id="box" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" x="84" y="6"></mx:Image>
               <mx:Image id="rectangle" toolTip="MultiWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" x="160" y="10"></mx:Image>
               <mx:Image id="circle" toolTip="Reader" useHandCursor="true" buttonMode="true"  source="@Embed(source='images2/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" x="120" y="8"></mx:Image>
              
               <mx:Image id="line" toolTip="Line" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/line.png')" click="doDrawEnable()" width="28" height="28"  x="279" y="10"></mx:Image>
              
               <!--<mx:Image id="dottedline" source="@Embed(source='images2/dottedline.png')" click="doDrawEnable()" width="28" height="35"  x="279" y="10"></mx:Image>
       
               <mx:Label text="Name" x="350" y="10"/>
               <mx:TextInput id="txtInput1" width="50" height="28" x="400" y="10"/>
               <mx:Label text="Value" x="470" y="10"/>
               <mx:TextInput id="txtInput2" width="50" height="28" x="510" y="10"/>-->
              </mx:Panel>
             
          </mx:Panel>
        </mx:VDividedBox>
        <mx:VDividedBox height="100%" width="60%">
        
          <mx:HDividedBox width="100%" height="100%">   
           <mx:Canvas width="100%" height="100%" >
          
            <mx:TabBar x="0" y="10" dataProvider="viewstack1" />

            <mx:ViewStack id="viewstack1" width="100%" height="100%" y="32">

             <mx:Canvas backgroundColor="#ffffff" borderColor="0xB7BABC" borderStyle="solid" borderThickness="7" label="{propValue}" id="designArea" contextMenu="{cm}" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" width="100%" height="100%" >
             
             </mx:Canvas>
            
             <mx:Panel id="pnlXML" label="XML" width="100%" height="100%" showEffect="{theEffect}" >
              <mx:ControlBar width="100%" barColor="#FF22CC">
               <mx:Spacer width="100%"/>
               <mx:Button id="btnSave" label="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />    
              </mx:ControlBar>
              <mx:TextArea fontSize="12" wordWrap="false" textIndent="8" id="txtAreaXML" text="{xm}" width="100%" height="100%" editable="false" />       
             </mx:Panel>
            
            </mx:ViewStack>
           
           </mx:Canvas>
          </mx:HDividedBox> 
        
        </mx:VDividedBox>
       
        <mx:VDividedBox height="100%" width="20%">
         <mx:Panel title="Saved Components and Properties" width="100%" height="100%" layout="vertical" >
          <mx:Accordion id="accrWin" x="51" y="35" width="100%" height="100%">
         
              <mx:Canvas label="Saved Components" width="100%" height="100%">
               <mx:List height="100%" width="100%" dataProvider="{savedComp}" />        
              </mx:Canvas>
             
              <mx:Canvas id="accrCon2" label="Properties" width="100%" height="100%">
              
               <mx:DataGrid id="dgProp" dataProvider="{propData.prop}" height="100%" width="100%" editable="true" itemClick="itemClickEvent(event);">
                <mx:columns>
                 <mx:DataGridColumn dataField="@key" headerText="Property" editable="false" />
                 <mx:DataGridColumn dataField="propvalue" headerText="Value" editable="true" />                 
                </mx:columns>
               </mx:DataGrid>
              
              </mx:Canvas>
             
           </mx:Accordion>
         </mx:Panel>
        </mx:VDividedBox>
       
      </mx:HDividedBox>


      <mx:ApplicationControlBar dock="true"> 
        <mx:Image source="images/Openfile.gif" toolTip="Open" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
        <mx:Image source="images/Savefile.gif" toolTip="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
       
        <mx:Image source="images/Undo.gif" toolTip="Undo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
        <mx:Image source="images/Redo.gif" toolTip="Redo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
        <mx:Image source="images/Delete.gif" toolTip="Delete" useHandCursor="true" buttonMode="true" mouseChildren="false" />
        <mx:Image source="images/Print.gif" toolTip="Print" useHandCursor="true" buttonMode="true" mouseChildren="false" />
        
        <mx:Spacer width="100%" />
        <mx:Label text="BackTesting" fontWeight="bold" fontSize="16" />
      </mx:ApplicationControlBar>


      </mx:Application>

      Plz change my code according to the requirement.

       

      Thanks