转载] 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
*
* <p>The <code><mx:Panel></code> tag inherits all of the tag
* attributes of its superclass and adds the following tag attributes:</p>
*
* <pre>
* <eshangrao:AdvancedTitleBarPanel&gt
* <eshangrao:advancedTitleBar&gt
* <i>child which wants added to titleBar tags</i>
* </eshangrao:advancedTitleBar&gt
* ...
* <i>child tags</i>
* ...
* </eshangrao:AdvancedTilteBarPanel>
* </pre>
*
* @see mx.containers.Panel
*/
public class AdvancedTitleBarPanel extends Panel
{
/**
* @public
* the advancedTitleBar,insert into the <code>titleBar</code> after the title
* <code>titleTextField</code>.
*
* <pre>
* <eshangrao:advancedTitleBar&gt
* <i>child which wants added to titleBar tags</i>
* </eshangrao:advancedTitleBar&gt
* </pre>
*/
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了：

<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 1" width="100%" height="100">
<eshangrao:advancedTitleBar>
<mx:Button label="Button at TitleBar"/>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
如果要在Panel的TitleBar上添加多个组件的话，则需要用容器包括：

<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 3" width="100%" height="200">
<eshangrao:advancedTitleBar>
<mx:VBox>
<mx:Button label="Button at TitleBar"/>
<mx:Text text="this is a text in titleBar"/>
</mx:VBox>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
如果您要将所有组件靠Panle右对奇，可以如下使用：

<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 3" width="100%" height="200">
<eshangrao:advancedTitleBar>
<mx:VBox width="100%" horizontalAlign="right">
<mx:Button label="Button at TitleBar"/>
<mx:Text text="this is a text in titleBar"/>
</mx:VBox>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
注意，缺省情况下，添加到TitlePanel上的组件的大小就组件的原始大小，但是如果您将其width设置为100%的话，那么该组件将占满TilteBar所有的剩余空间。

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:eshangrao="http://www.eshangrao.com" layout="vertical">
<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 1" width="100%" height="100">
<eshangrao:advancedTitleBar>
<mx:Button label="Button at TitleBar"/>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 2" width="100%" height="100">
<eshangrao:advancedTitleBar>
<mx:HBox width="100%" horizontalAlign="right">
<mx:Button label="Button at TitleBar"/>
<mx:Text text="this is a text in titleBar"/>
</mx:HBox>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 3" width="100%" height="200">
<eshangrao:advancedTitleBar>
<mx:VBox width="100%">
<mx:Button label="Button at TitleBar"/>
<mx:Text text="this is a text in titleBar"/>
</mx:VBox>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
</mx:Application>