在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>