Adding Icons to the Panel

Posted By : Oliver Merk

I run into this question every so often, so I thought I’d share the solution here. The Panel container looks very much like a window that you’d be able to manipulate, perhaps maximizing or minimizing. This simple example gets you as far as adding a couple of icons and listening for click events. You could do the same thing with a TitleWindow (popup) in order to institute a drag and drop interface.


<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”;
xmlns:comp=”comp.*” xmlns:local=”*”>
<comp:MyPanel id=”myPanel” title=”No Design Skills, Inc.” width=”80%”>
<mx:Text width=”80%” >
<![CDATA[Here’s a simple example of adding icons to the panel title. There’s also a click handler on each one, as well as a rollover (to keep it sexy;)<br><br>Pretty cool!


<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=””&gt;

import mx.containers.Panel;
import mx.controls.Image;
import mx.containers.HBox;
import mx.controls.Alert;

// Embed the icon graphics and their rollover states
private var blueSquare:Class;
private var blueSquareHi:Class;
private var greenSquare:Class;
private var greenSquareHi:Class;

// Declare the UI elements which will go into the titleBar
private var myHbox:HBox;
private var blue:Image;
private var blueHi:Image;
private var green:Image;
private var greenHi:Image;

override protected function createChildren() : void

// Init blue image, its event handlers and its rollover state
blue = new Image();
blue.source = blueSquare;
blue.width = 18;
blue.height = 18;
blue.addEventListener( MouseEvent.CLICK, onBlueClick );
blue.addEventListener( MouseEvent.MOUSE_OVER, onBlueOver );
blueHi = new Image();
blueHi.source = blueSquareHi;
blueHi.width = 18;
blueHi.height = 18;
blueHi.addEventListener( MouseEvent.CLICK, onBlueClick );
blue.addEventListener( MouseEvent.MOUSE_OUT, onBlueOut );

// Init green image, its event handlers and its rollover state
green = new Image();
green.source = greenSquare;
green.width = 18;
green.height = 18;
green.addEventListener( MouseEvent.CLICK, onGreenClick );
green.addEventListener( MouseEvent.MOUSE_OVER, onGreenOver );
greenHi = new Image();
greenHi.source = greenSquareHi;
greenHi.width = 18;
greenHi.height = 18;
greenHi.addEventListener( MouseEvent.CLICK, onGreenClick );
green.addEventListener( MouseEvent.MOUSE_OUT, onGreenOut );

// Create an HBox in which to layout the icons
myHbox = new HBox( );
myHbox.addChild( blue );
myHbox.addChild( green );

// Add the HBox and the icons to the titleBar display
titleBar.addChild( myHbox );


override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void
super.updateDisplayList(unscaledWidth, unscaledHeight);

// Do this or the HBox won’t appear!
myHbox.setActualSize( myHbox.getExplicitOrMeasuredWidth(),
myHbox.getExplicitOrMeasuredHeight() );

// Position the HBox
var y:int = 4;
var x:int = this.width – myHbox.width – 12;
myHbox.move(x, y);

// Handlers for click and mouseovers
private function onBlueClick ( event:MouseEvent ):void {‘Blue!’, ‘You clicked…’);
private function onBlueOver ( event:MouseEvent ):void {
blue.source = blueSquareHi;
private function onBlueOut ( event:MouseEvent ):void {
blue.source = blueSquare;

private function onGreenClick ( event:MouseEvent ):void {‘Green!’, ‘You clicked…’);
private function onGreenOver ( event:MouseEvent ):void {
green.source = greenSquareHi;
private function onGreenOut ( event:MouseEvent ):void {
green.source = greenSquare;



~ by mjcprasad2000 on July 11, 2009.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: