Adding icons to Panel containers

By Peter deHaan On August 2, 2007 · 12 Comments

Personally, I’m amazed I can write an entire post around setting a single (and simple) style, but yet here I am. The following example shows how you can place an icon of your choosing in the upper-left corner of a Panel container. As an added bonus, at least I create the Panel in both MXML and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/02/adding-icons-to-panel-containers/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        backgroundColor="white"
        applicationComplete="init();">

    <mx:Script>
        <![CDATA[
            [Embed(source='bulletCheck.png')]
            private static const ico:Class;

            private var panel:Panel;

            private function init():void {
                var image:Image = new Image();
                image.source = "http://www.helpexamples.com/flash/images/image2.jpg";

                panel = new Panel();
                panel.titleIcon = ico;
                panel.title = "Brought to you by ActionScript";
                panel.addChild(image);
                addChild(panel);
            }
        ]]>
    </mx:Script>

    <mx:Panel title="Brought to you by MXML" titleIcon="{ico}" id="pan">
        <mx:Image id="img" source="http://www.helpexamples.com/flash/images/image1.jpg" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

Tagged with: icon

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

12 Responses to Adding icons to Panel containers

adam says:

January 12, 2008 at 10:14 am

How can I add a toolTip to the titleIcon? Thanks. You’re site has helped me tremendously, keep up the good work….please!

Reply
adam says:

January 12, 2008 at 10:31 am

tooltip for titleicon?

Reply

peterd says:

January 13, 2008 at 12:50 am

Adam,

Not sure if this is the “best” way, but this seems to work (although it does use mx_internal namespace, so I can’t guarantee it will work this way in the future (or in past versions).

Since I don’t have a very high confidence level in this code, I’ll just post it in the comments here instead of making it a new entry.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/02/adding-icons-to-panel-containers/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import mx.controls.Image;

            private function init():void {
                var titleBar:UIComponent = panel.mx_internal::getTitleBar();
                var titleIcon:Bitmap = panel.mx_internal::titleIconObject;

                var icon:Image = new Image();
                icon.source = new Bitmap(titleIcon.bitmapData);
                icon.toolTip = "I'm a mystery tool tip";
                icon.width = titleIcon.width;
                icon.height = titleIcon.height;
                icon.x = titleIcon.x;
                icon.y = titleIcon.y;

                var depth:int = titleBar.getChildIndex(titleIcon);
                titleBar.removeChildAt(depth);
                titleBar.addChildAt(icon, depth);
            }
        ]]>
    </mx:Script>

    <mx:Panel id="panel"
            title="My icon has a tool tip"
            titleIcon="@Embed('asterisk_orange.png')"
            width="320"
            height="120"
            creationComplete="init();" />

</mx:Application>

You may want to try asking on a high volume list, such as FlexCoders and see if you can get any other suggestions. It may be better to extend the Panel class and use an Image control instead of the Bitmap display object. Plus, by extending Panel, you could add a custom parameter (such as titleIconToolTip which would make the code easier to reuse.

Hope that helps,
Peter

adam says:

January 13, 2008 at 4:48 pm

Peter,

Thank you for the quick response. Your code worked first time around for me, so thank you for that as well. I will take your advice, I have already posted the question at FlexCoders. I agree best method probably would be extending the Panel. Peter…thanks again.

Reply
Stranger says:

January 29, 2008 at 10:11 pm

Hi,

I want to shuffle the panels. Say for Example, if i have two panels that are created at run time using action script. I have one panel after the other in a canvas vertically. If i drag one panel and drop it over the other panel, the dragged panel must be placed on the position where the other panel is and the entire order of panels must get shuffled.

If its confusing, in the above example, if i drag the left panel and drop it over the right panel, the right should come to left and the left panel should come to right.

How can i do this.

Any suggestions or example.

Thanks for the help in advance.

Stranger

Reply
Joel says:

June 27, 2008 at 8:02 am

Is there any way of getting around embedding the titleIcon and being able to populate it dynamically?

Reply
peterd says:

June 27, 2008 at 10:41 am

Joel,

Check out Ben Stucki’s IconUtility class at IconUtility Component for Dynamic Run-Time Icons.

Peter

Reply
FlexBeginner says:

December 2, 2008 at 7:19 am

Hi,

Is there a way to make the image thats been added to panel titleBar to make it visible and invisible with a button click ?

Thank you for the help in advance

Reply
Barry Becker says:

March 31, 2010 at 8:21 am

Is it possible to have the icon positioned on the far right instead of on the left?

Reply
john desouza says:

December 5, 2010 at 10:35 pm

HI All,

I need to display image in canvas. The image i am displaying is larger then the panel, due to which i cn’t see the image completely. I tried to add the scroll bars, which i am able to display but they are disabled. Please let me know the solution.

Thanks,
Jhon

Reply
john desouza says:

December 5, 2010 at 10:37 pm

Sorry I need to display image in panel but not in canvas.

Reply
Asha says:

January 28, 2011 at 12:55 pm

Is it possible to have the icon positioned to the far right instead of on the left?

Reply