[flexcoders] how to show icon in ToggleButtonBar

[nathanleewei]

package com
{
        import mx.controls.ToggleButtonBar;
        import mx.events.FlexEvent;

        public class MyToggleButtonBar extends ToggleButtonBar
        {
                [Embed(source="assets/java.gif")]
                public var iconJavaClass:Class;

                [Embed(source="assets/flex.gif")]
                public var iconFlexClass:Class;

                [Embed(source="assets/cvs.gif")]
                public var iconCVSClass:Class;


                public function MyToggleButtonBar()
                {
                        super();
                        this.addEventListener(FlexEvent.CREATION_COMPLETE, 
onCreationComplete);
                }

                private function onCreationComplete(event:FlexEvent):void
                {
                        var perspectiveToggleItem:Array=[];

                        var xmlList:XMLList=dataXml.perspective;
                        var xml:XML;
                        for (var i:int=0; i < xmlList.length(); i++)
                        {
                                xml=xmlList[i];

                                perspectiveToggleItem.push({ //
                                                label: x...@label.tostring(), 
//                                                
                                                perspectiveName: 
x...@name.tostring(), //
                                                icon:  
Class(systemManager.getDefinitionByName(x...@icon.tostring())) //
                                                //icon: x...@icon.tostring()//
                                                });
                        }

                        this.dataProvider=perspectiveToggleItem;
                }


                private var dataXml:XML=<xml>
                                <perspective label="Java" name="java" 
icon="iconJavaClass"/>
                                <perspective label="Flex" name="flex" 
icon="iconFlexClass"/>
                                <perspective label="CVS" name="cvs" 
icon="iconCVSClass"/>
                        </xml>;
        }
}







////
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns:com="com.*" 
layout="absolute">
        <mx:Script>
                <![CDATA[
                        [Embed(source="assets/java.gif")]
                        public var iconJavaClass:Class;

                        [Embed(source="assets/flex.gif")]
                        public var iconFlexClass:Class;

                        [Embed(source="assets/cvs.gif")]
                        public var iconCVSClass:Class;
                ]]>
        </mx:Script>

        <mx:XMLList id="dataProvider">
                <perspective label="Java" name="java" icon="iconJavaClass"/>
                <perspective label="Flex" name="flex" icon="iconFlexClass"/>
                <perspective label="CVS" name="cvs" icon="iconCVSClass"/>
        </mx:XMLList>

        <mx:MenuBar id="menuBar" dataProvider="{dataProvider}" 
labelField="@label" iconField="@icon"/>

        <!-- mx:ToggleButtonBar dataProvider="{dataProvider}" 
labelField="@label" iconField="@icon"/ -->

        <com:MyToggleButtonBar y="50"/>

</mx:Application>



Why do icons not shown in MyToggleButtonBar?Thanks