0 Replies Latest reply on Jul 23, 2010 10:25 PM by nimmyliji

    How 2 resolve my Expand & Collapse effect or do u have any other solution 4 this collapse and expand

    nimmyliji

      According to my project when i click on the image it should expand and again clicking on the same image it should collapse and there should be multiple number of images near by, but none of them should overlap or merge, i have to implement it on my canvas so any one please help to find the solution for this or please tell me another way to implement collapse and expand effect.

       

      the following are my codes  when i use it in application window its not overlapping but i have to implement it on canvas

      if i do so its overlapping. please any one find me the solution

       

      for mxml

           <?xml version="1.0" encoding="utf-8"?>
           <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:custComps="comps.*"
               horizontalAlign="center" verticalAlign="middle" paddingTop="10" paddingLeft="10" paddingRight="10" viewSourceURL="srcview/index.html"           borderColor="#FFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
          <mx:Canvas width="558" height="350">
                  <custComps:ExpandCollapsePanel width="36" height="30" increaseWidthBy="100" increaseHeightBy="100" y="136" x="152">
                  </custComps:ExpandCollapsePanel>
                  <custComps:ExpandCollapsePanel width="36" height="30"
                  increaseWidthBy="100" increaseHeightBy="100"  x="240" y="136">
                  </custComps:ExpandCollapsePanel>
                  <custComps:ExpandCollapsePanel width="36" height="30"
                   increaseWidthBy="100" increaseHeightBy="100" x="196" y="136"/>
          </mx:Canvas>     
      </mx:Application>

       

      the code for my component is

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
          width="100%" height="100%" styleName="canvasPanel" cornerRadius="0" borderStyle="solid" headerHeight="5" borderColor="#2A1C1C">
          <mx:Script>
              <![CDATA[
                  import mx.effects.easing.Elastic;
                  import mx.containers.BoxDirection;
                  import mx.managers.LayoutManager;

       

                  [Bindable]
                  public var increaseWidthBy:Number = 100;

       

                  [Bindable]
                  public var increaseHeightBy:Number = 100;

       

                  [Bindable]
                  public var contentLayout:String;
                             
                  private var _childDispObjects:Array = [];
                  private var _childrenChanged:Boolean = false;
                             
                  public function set children( value:* ):void
                  {
                      if( value is DisplayObject )
                          _childDispObjects = [ value ];
                      else
                          _childDispObjects = value;
                     
                      _childrenChanged = true;
                      invalidateProperties();
                  }
                 
                  public function get children():Array
                  {
                      return _childDispObjects;
                  }
                 
                  protected override function commitProperties():void
                  {
                      super.commitProperties();
                     
                      if( _childrenChanged )
                      {
                          for each( var child:DisplayObject in _childDispObjects )
                          {
                              innerContent.addChild( child );
                          }
                      }   
                  }
                 
                  private function handleMaximizeBtnClick():void{
                      maximizeEffect.play([this]);
                      this.maxBtnCtl.includeInLayout=false;
                      this.maxBtnCtl.visible=false;
                      this.minBtnCtl.includeInLayout=true;
                      this.minBtnCtl.visible=true;               
                  }

       

                  private function handleMinimizeBtnClick():void{
                      minimizeEffect.play([this]);
                      this.maxBtnCtl.includeInLayout=true;
                      this.maxBtnCtl.visible=true;
                      this.minBtnCtl.includeInLayout=false;
                      this.minBtnCtl.visible=false;                           
                  }
                             
              ]]>
          </mx:Script>
         
          <mx:Metadata>
              [DefaultProperty("children")]
          </mx:Metadata>

       

          <mx:Resize id="maximizeEffect" widthBy="{this.increaseWidthBy}" heightBy="{this.increaseHeightBy}" duration="1000" />
          <mx:Resize id="minimizeEffect" widthBy="{-this.increaseWidthBy}" heightBy="{-this.increaseHeightBy}" duration="1000" />
          <mx:HBox width="100%" textAlign="right" horizontalAlign="center" useHandCursor="true" borderColor="#363D45" borderStyle="solid">
              <mx:Image source="@Embed('image/icons/maximize.png')" id="maxBtnCtl"
                  useHandCursor="true" buttonMode="true" click="{this.handleMaximizeBtnClick();}"/>
              <mx:Image source="@Embed('image/icons/minimize.png')" id="minBtnCtl"
                  useHandCursor="true" buttonMode="true" click="{this.handleMinimizeBtnClick();}"
                  includeInLayout="false" visible="false"/>
          </mx:HBox>
          <mx:Box id="innerContent" direction="{this.contentLayout}" horizontalGap="0" verticalAlign="middle"  borderStyle="solid"/>
         
      </mx:Panel>