Display multiple icons on Panel titlebar

So.. In centain pages in your application you may want to show help icon and clicking on it, display a popup with help contents or take you to new page. Or you may want to display next page icon and clicking on it take you to next page. Or a close icon, clicking on it should close the panel. Well, where do you like to place those icons. If you ask me, I would say the best place is titlebar. Check below demo and click on the Help icon on the Panel titlebar. An alert message will display. You can change it to popup having help contents.



To provide this functionality, in simple words, you need to create your custom Panel class that extends Panel class. In this class, add the icons as children to titleBar and set the position of the icons. Thats it. Lets see step by step on how to get this functionality.

Step 1: As a first step, you need to create your custom Panel class that extends Panel class and override createChildren function of the Panel class. In this function, you will add icons as children to titleBar.



public class CustomPanel extends Panel {
		
  public var icons:ArrayCollection;

  public function CustomPanel()	{
    super();
  }

  override protected function createChildren():void {
    super.createChildren();

    if (icons != null) {
      for(var i:int=0; i<icons.length; i++) {
        titleBar.addChild(CustomIcon(icons.getItemAt(i)));
      }

    }
}


If you observe this piece of code, icons are CustomIcons. Well, why do you need custom class for icon and why not use simple image. Yes, you can use simple image instead of custom class but since you want to call a function when you click on the icon, you need to create a custom class for icons. The CustomIcon class structure should be something like this



public class CustomIcon	extends Image {
		
  public var onClickFunction:Function;

  public function CustomIcon(imgSrc:Object, hth:Number, 
          wth:Number, tip:String=null, onClickFctn:Function=null) {

    super();
    source = imgSrc;
    height = hth;
    width = wth;
    toolTip = tip;
    onClickFunction = onClickFctn;
    if (onClickFctn != null) {
      addEventListener(MouseEvent.CLICK, onClick);
    }
  }

  private function onClick(evt:MouseEvent):void {
    if (onClickFunction != null) {
      onClickFunction();
    }    
  }

}	


Step 2:Now the last step :-). After adding the icons to titlebar, you need to set the position of icons. Do you want then in the extreme right or extreme left or center or any other place. Set the position of icons in the overridden "updateDisplayList" function and thats it. Setting icons position is simple logic. In the below setIconsPosition function, I am calculating icons width and removing it from total panel width and setting the value as X-coordinate as I am setting the icons in the extreme right of the Panel.You can change the logic as per your requirement.



public class CustomIcon	extends Image {

  ...

  override protected function updateDisplayList (
           unscaledWidth:Number, unscaledHeight:Number):void{	

    super.updateDisplayList(unscaledWidth, unscaledHeight);

    setIconsPosition();							
  } 

  /**
  * Set the position of the icons on the titleBar
  */
  private function setIconsPosition():void{
    var newYPosition:int = titleTextField.y;		

    if (icons != null) {
      for(var i:int=0; i<icons.length; i++) {
        var icon:CustomIcon = CustomIcon(icons.getItemAt(i));
        var totalIconsWidth:Number = getTotalIconsWidth(i);
        var newXPosition:Number = this.width - totalIconsWidth;
        icon.move(newXPosition, newYPosition);
      }

    }
  }

  /**
  * Function returns the sum of the width of each icon starting from
  * index until the end of the icons list
  */ 
  private function getTotalIconsWidth(index:int):Number {
    var totalWidth:Number = 0;

    if (icons != null) {
      for(var i:int=index; i<icons.length; i++) {
        var icon:CustomIcon = CustomIcon(icons.getItemAt(i));
        totalWidth += icon.visible?(icon.width + ICON_SPACER):0;
      }
    }
    return totalWidth;
  }

}

Now use your newly created Custom class.



<mx:Script>
  <![CDATA[
    import mx.controls.Alert;
    import com.jusfortechies.controls.CustomIcon;
    import mx.collections.ArrayCollection;
    [Bindable]
    public var iconColl:ArrayCollection;

    private function addIcons():void {
      iconColl = new ArrayCollection();
      iconColl.addItem(new CustomIcon("assets/white-question-mark.png", 20, 20, "Help", onHelp));
      iconPanel.icons = iconColl;
    }

    private function onHelp():void {
      Alert.show("Perform any action on clicking the icon");
    }
  ]]>
</mx:Script>

<customPanel:CustomPanel id="iconPanel" title="Displaying icons in Panel titlebar" 
    initialize="addIcons()" >

...

</customPanel:CustomPanel>		



You can download the example source code here.

Download the example code.





blog comments powered by Disqus