自定义控件_动态加载图标和按钮的Panel

1.应用范围
    网站首页面的新闻标题框

2.应用环境
   flash builder4 ,actionscript3

3.代码
3.1 自定义panel控件
newsPanelTwo.mxml

          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/halo"
          layout="horizontal"
          creationComplete="onCreationComplete()" titleIcon="{ico}">
    
    
                    import mx.containers.Panel;
            import mx.controls.Image;
            import mx.containers.HBox;
            import flash.events.MouseEvent;
            import mx.controls.Alert;
            
            import utility.IconUtility;
            
            private var blueSquare:String="";
            private var blueSquareHi:String="";
            private var greenSquare:String="";
            private var greenSquareHi:String="";
            
            // 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;
            
            
            [Inspectable]
            [Bindable]
            public var titleIconSrc:String;
            
            [Bindable]
            private var ico:Class;
            private function onCreationComplete():void {
                ico = IconUtility.getClass(this.titleBar, titleIconSrc, 16, 16);
            }

            
            override protected function createChildren() : void
            {
                super.createChildren();
                
                // 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 {
                Alert.show('xia 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 {
                Alert.show('xiaGreen!', 'You clicked...');
                
                
            }
            private function onGreenOver ( event:MouseEvent ):void {
                green.source = greenSquareHi;
            }
            private function onGreenOut ( event:MouseEvent ):void {
                green.source = greenSquare;
            }
        ]]>
    


3.2 调用自定义panel控件例子
                           titleIconSrc=""
                width="40%">
        
            
            
        
    

3.3 静态加载图标
    如果要求静态加载图标，下面代码会把图片嵌入到swf文件中，下载速度变慢
    将代码
private var blueSquare:String="";
            private var blueSquareHi:String="";
            private var greenSquare:String="";
            private var greenSquareHi:String="";

换成
            // 嵌入图片
            [Embed("asserts/square_blue.png")]
            private var blueSquare:Class;
            [Embed("asserts/square_blue_hi.png")]
            private var blueSquareHi:Class;
            [Embed("asserts/square_green.png")]
            private var greenSquare:Class;
            [Embed("asserts/square_green_hi.png")]
            private var greenSquareHi:Class;

注：
    IconUtility类参见《FLEX静态和动态加载图标》