在FLEX Panel的Title上添加控件实例

一、自定义Panel组件

 

package test
{
    import mx.containers.Panel;
    import mx.core.UIComponent;
   
    /**
    * 自定义Panel
    * **/
    public class MyPanel extends Panel
    {
            import mx.controls.LinkButton;
            import flash.events.MouseEvent;
            import flash.events.Event;
            private var _cusContr:UIComponent;//客户UI组件
           
            public function get cusContr():UIComponent{
                return _cusContr;
            }
           
            public function set cusContr(contr:UIComponent):void{
                _cusContr=contr;
                _cusContr=_cusContr;
            }
           
           
        public function MyPanel()
        {
            //trace("加载自定义Panel");
            super();
        }
       
            /**
            * 覆盖父类方法，创建自定义可视UI组件
            **/
            override protected function createChildren():void
           {
               trace("create child...");
                 super.createChildren();
                 titleBar.addChild(_cusContr);
           
            }
           
            /**
            * 覆盖父类方法，更新自定义可视UI组件
            * */
           
            override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void
           {
                 super.updateDisplayList(unscaledWidth, unscaledHeight);
                 //调整对象大小
                 _cusContr.setActualSize( _cusContr.getExplicitOrMeasuredWidth(),
                        _cusContr.getExplicitOrMeasuredHeight() );
   
                 var y:int = 4;
                 var x:int = this.width - _cusContr.width - 12;
                 _cusContr.move(x, y);

             }
    }
}

 

二、MXML文件引用自定Panel组件

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="test.*" width="510" height="354">
  <mx:Script>
     <![CDATA[
         import mx.controls.MenuBar;
         import mx.controls.LinkButton;
         import mx.controls.Button;
         import mx.controls.Alert;
         import mx.events.MenuEvent;
         private var myBtn:Button;
         private var myLinkBtn:LinkButton;
         private var myMenuBar:MenuBar;
        
        
         //初始化控件
         public function disp():void{
            
        //        trace("MXML 初始化.....");
         /**   
          * //添加普通按钮
             myBtn=new Button();
             myBtn.label="系统设置";
             myBtn.addEventListener(MouseEvent.CLICK,clickHandler);
             myPanel.cusContr=myBtn;
         **/
        
    
           //带链接的按钮
           myLinkBtn=new LinkButton();
           myLinkBtn.label="系统设置";
           myLinkBtn.addEventListener(MouseEvent.CLICK,clickHandler);
           myPanel.cusContr=myLinkBtn;
      
    
     /**
           //菜单
           var xml:XML=<menuitem label="系统设置" >
                <menuitem label="打开" type="radio" groupName="one"/>
                <menuitem label="截图" type="radio" groupName="one"
                toggled="true"/>
                <menuitem type="separator"/>
                <menuitem label="关闭" type="radio" groupName="one"/>
            </menuitem>;
            myMenuBar=new MenuBar();
            myMenuBar.dataProvider=xml;
            myMenuBar.labelField="@label";
            myMenuBar.addEventListener(MenuEvent.ITEM_CLICK,clickHandler);
            myPanel.cusContr=myMenuBar;
    **/
   
           //添加事件处理
           function clickHandler(event:Event):void{
               Alert.show("哈哈，终于编出来了","FLEX练习",Alert.OK);
           }
     }
      ]]>
  </mx:Script>
  <custom:MyPanel id="myPanel" width="392" height="297" title="在线视频会议" fontSize="12" initialize="disp();" layout="absolute">
  </custom:MyPanel>
</mx:Application>