The following example shows how you can add an icon to a Flex Panel container’s title bar by setting the titleIcon property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/18/adding-a-title-icon-to-a-panel-container-in-flex/ -->
<mx:Application name="Panel_titleIcon_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:String id="lorem" source="lorem.txt" />
<mx:Panel id="panel"
title="Panel title"
titleIcon="@Embed('assets/Panel.png')">
<mx:Text id="txt"
text="{lorem}"
width="500"
textAlign="justify"
selectable="false" />
</mx:Panel>
</mx:Application>
View source is enabled in the following example.
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/18/adding-a-title-icon-to-a-panel-container-in-flex/ -->
<mx:Application name="Panel_titleIcon_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:String id="lorem" source="lorem.txt" />
<mx:Script>
<![CDATA[
import mx.controls.Text;
import mx.containers.Panel;
[Embed("assets/Panel.png")]
private const PanelTitleIcon:Class;
private var panel:Panel;
private function init():void {
var txt:Text = new Text();
txt.text = lorem;
txt.selectable = false;
txt.width = 500;
txt.setStyle("textAlign", "justify");
panel = new Panel();
panel.title = "Panel title";
panel.titleIcon = PanelTitleIcon;
panel.addChild(txt);
addChild(panel);
}
]]>
</mx:Script>
</mx:Application>
{ 2 comments… read them below or add one }
Do you know whether it’s possible to have a rollover state on the titleIcon? I’m struggling with this as it is just a class property, I can’t create a rollover-equipped icon in advance and ‘plug it in’.
If you have any suggestions of possible solutions, I’d love to hear them :)
hi:
i tried doing the same for an AIR application for the Application’s titleIcon, so that the main window of the application will have a custom icon instead of the standard AIR icon.
it just won’t work. however, if i use the same gif/png icon for a panel it works fine.
any suggestions?
ram
–