转载] AdvancedTitleBarPanel:标题栏可添加组件的Panel

今天的一个项目中需要在Panel的标题栏中上增加按钮，所以就有这个AdvancedTitleBarPanel了。实现的原理很简单就是扩展mx.containers.Panel，然后在titleBar添加一个UIComponent，源码如下：

package com.eshangrao.containers
{
import mx.containers.Panel;
import mx.core.UIComponent;
import mx.core.EdgeMetrics;
/**
* A Advanced Panel container consists of a Advanced title bar which you can
* add every childer to the Panel't titlte Bar
*
* @mxml
*
*

The tag inherits all of the tag
* attributes of its superclass and adds the following tag attributes:

*
*

 
  
 *  *  * child which wants added to titleBar tags 
  
 *  * ... 
  
 * child tags 
  
 * ... 
  
 *  
  
 * 

*
* @see mx.containers.Panel
*/
public class AdvancedTitleBarPanel extends Panel
{
/**
* @public
* the advancedTitleBar,insert into the titleBar after the title
* titleTextField.
*
*

 
  
 *  * child which wants added to titleBar tags 
  
 *  * 

*/
public var advancedTitleBar:UIComponent;

override protected function createChildren():void{
super.createChildren();

//if(!advancedTitleBar)
// advancedTitleBar=new UIComponent();
//titleBar.addChild(advancedTitleBar);
//rawChildren.addChild(titleBar);
if(!advancedTitleBar){
advancedTitleBar=new UIComponent();
}
titleBar.addChild(advancedTitleBar);
advancedTitleBar.owner = this;

}
override protected function layoutChrome(unscaledWidth:Number,unscaledHeight:Number):void{
super.layoutChrome(unscaledWidth, unscaledHeight);

var bm:EdgeMetrics = borderMetrics;
var minX:Number = titleTextField.x + titleTextField.textWidth + 8;
var rightOffset:Number = 10;
//如果宽度为百分比，则设置宽度为标题所有剩余空间的百分比，否则为组件自身大小
if(isNaN(advancedTitleBar.percentWidth)){
advancedTitleBar.setActualSize(
advancedTitleBar.getExplicitOrMeasuredWidth(),
advancedTitleBar.getExplicitOrMeasuredHeight());
}else{
advancedTitleBar.setActualSize(
(unscaledWidth - (bm.left + bm.right+minX+rightOffset))*advancedTitleBar.percentWidth/100,
advancedTitleBar.getExplicitOrMeasuredHeight());
}
var headerHeight:Number=getHeaderHeight();

advancedTitleBar.move(minX,
(headerHeight - advancedTitleBar.getExplicitOrMeasuredHeight()) / 2);
}
/**
* @private
*/
private static const HEADER_PADDING:Number = 10;
override protected function getHeaderHeight():Number{
var headerHeight:Number=super.getHeaderHeight();
return Math.max(headerHeight,advancedTitleBar.height+HEADER_PADDING);
}
}
}
用法如下：

首先从这里下载二进制SWC包，将其添加到您的Mxmlc编译组件路径中，然后加入如下命名空间声明：

xmlns:eshangrao="http://www.eshangrao.com"
接着就可以使用AdvancedTitleBarPanel了：






如果要在Panel的TitleBar上添加多个组件的话，则需要用容器包括：









如果您要将所有组件靠Panle右对奇，可以如下使用：









注意，缺省情况下，添加到TitlePanel上的组件的大小就组件的原始大小，但是如果您将其width设置为100%的话，那么该组件将占满TilteBar所有的剩余空间。

完整的范例演示代码如下：