] 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>&lt;mx:Panel&gt;</code> tag inherits all of the tag
*  attributes of its superclass and adds the following tag attributes:</p>
* 
*  <pre>
*  &lt;eshangrao:AdvancedTitleBarPanel&gt
*   &lt;eshangrao:advancedTitleBar&gt
*      <i>child which wants added to titleBar tags</i>
* &lt;/eshangrao:advancedTitleBar&gt
*      ...
*      <i>child tags</i>
*      ...
*  &lt;/eshangrao:AdvancedTilteBarPanel&gt;
*  </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>
     *  &lt;eshangrao:advancedTitleBar&gt
*    <i>child which wants added to titleBar tags</i>
* &lt;/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>