Question : Flex Panel with icon

Hi,

Can we add an icon in status area (on the right corner) for  flex collapsible panel without effecting the collapse/expand behavior and dispatch click event to that icon to change make always open. If yes, How?

Regards,

   

Answer : Flex Panel with icon

As per my understanding you want two different icon on status area, to show open or close status, and you want the click event only on this icons not on complete title bar.

I have added few comments in code, for your use, or you can make the corrections as per your need. Hope this will help you complete the requirement.

So here's the code
==============

TestApp.mxml - Application mxml
-------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();" xmlns:controls="*">
      <mx:Script>
            <![CDATA[
                  import mx.core.UIComponent;
                  
                  [Embed(source="assets/images/logos/images.jpg")]
            [Bindable]
            public var logo:Class;
           
            [Embed(source="assets/images/logos/images1.jpg")]
            [Bindable]
            public var logoClose:Class;
                  
                  private function init():void
                  {
                        panel.statusIcon = logo;
                        panel.statusIconClose = logoClose;
                  }
            ]]>
      </mx:Script>
      <controls:CollapsiblePanel id="panel" title="Title" width="400" height="500">
            <mx:Text text="Test" />
      </controls:CollapsiblePanel>
</mx:Application>
-----------------------------------------


CollapsiblePanel.mxml - Custom component
-----------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel resizeEffect="{resize}" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" creationComplete="init()">
      <mx:Script>
            <![CDATA[
                  import mx.effects.Resize;
                  import mx.controls.Image;
                  
                  private var isCollapsed:Boolean = false;
                  private var assignedHeight:Number;
                  private var _statusIcon:Class;
                  private var _statusIconClose:Class
                  private var statusIconImg:Image;
                  
                  private var isIconClicked:Boolean = false;
                  private var resize:Resize = new Resize(this);
                  
                  public static const TITLE_ICON_CLICK:String = "titleIconClick";
                  
                  public function set statusIconClose(val:Class):void
                  {
                        _statusIconClose = val;
                  }
                  
                  public function set statusIcon(val:Class):void
                  {
                        _statusIcon = val;
                        this.createChildren();
                  }
                  
                  private function init():void
                  {
                        assignedHeight = height;
                        // use this event if you want complete, titlebar to act for collapse/expand
                        //this.titleBar.addEventListener(MouseEvent.CLICK, titleClicked);
                  }
                  
                  override protected function createChildren():void
                  {
                        super.createChildren();
                        addIcon();
                  }
                  
                  private function addIcon():void
                  {
                        if (!statusIconImg && _statusIcon)
                        {
                              statusIconImg = new Image();
                              // set icon width, height here or pass it from an method
                              statusIconImg.width = 30;
                              statusIconImg.height = 30;
                              statusIconImg.maintainAspectRatio = true;
                              titleBar.addChild(statusIconImg);
                              
                              // un-comment this event and event on line 34, to use complete title bar click, and comment the line # 58
                              //statusIconImg.addEventListener(MouseEvent.CLICK, iconClicked);
                              
                              // using this to act only on icon click, instead of complete titlebar click, comment this if you want to add this event on complete titlebar
                              statusIconImg.addEventListener(MouseEvent.CLICK, titleClicked);
                        }
                        
                        if (_statusIcon)
                        {
                              statusIconImg.source = _statusIcon;
                              positionIcon();
                        }
                  }
                  
                  private function positionIcon():void
                  {
                        statusIconImg.x = this.titleBar.width - statusIconImg.width - 10;
                        statusIconImg.y = (this.titleBar.height - statusIconImg.height) / 2;
                  }
                  
                  private function iconClicked(evt:MouseEvent):void
                  {
                        isIconClicked = true;
                        dispatchEvent(new Event(CollapsiblePanel.TITLE_ICON_CLICK));
                  }
                  
                  private function titleClicked(evt:MouseEvent):void
                  {
                        if (resize.isPlaying)
                        {
                              // avoid if playing
                              return;
                        }
                        if (isIconClicked)
                        {
                              isIconClicked = false;
                              return;
                        }
                        
                        if (isCollapsed)
                        {
                              expandPanel();
                        }
                        else
                        {
                              collapsePanel();
                        }
                  }
                  
                  public function collapsePanel():void
                  {
                        assignedHeight = this.height;
                        isCollapsed = true;
                        var h:Number = 0;
                        if (titleBar)
                        {
                              h += titleBar.height;
                        }
                        
                        if (controlBar)
                        {
                              h += controlBar.height;
                        }
                        this.height = h;
                        
                        statusIconImg.source = _statusIconClose;
                        positionIcon();
                  }
                  
                  public function expandPanel():void
                  {
                        isCollapsed = false;
                        this.height = assignedHeight;
                        
                        statusIconImg.source = _statusIcon;
                        positionIcon();
                  }
            ]]>
      </mx:Script>
</mx:Panel>
----------------------------------