Flex Spark Panel 扩展成 TitleBarPanel

Summary:  由于Spark组件重新架构了，导致mx组件里的好多功能不能使用了。比如Panel： mx的Panel有titleBar，可以添加一些组件在titleBar里； 但在 spark的Panel上实现titleBar 要另辟其径了。   在网上search了半天，没有符合要求的。  只好去官方文档仔细阅读一下 spark组件的来龙去脉。 终于明白了，spark 框架的良苦用心。


Requirement: 要求spark 的Panel 可以在使用时，任意地添加组件在title上，比如：Close Button, Refresh Button, Max Button等。


Solution: 使用自定义的SparkSkin，扩展spark.components.Panel 控件， 添加 titleBarContent 属性。
1. TitleBarPanelSkin 的代码如下：

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark Panel container.  

    @see spark.components.Panel

    @langversion 3.0
    @playerversion Flash 10
    @playerversion AIR 1.5
    @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false" 
    minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
	<fx:Metadata>[HostComponent("com.lombardrisk.common.components.panel.TitleBarPanel")]</fx:Metadata>
    
    <fx:Script fb:purpose="styling">
        <![CDATA[
		import mx.core.FlexVersion;
		
		/* Define the skin elements that should not be colorized. 
        For panel, border and title background are skinned, but the content area, background, border, and title text are not. */
        static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup", "border"];
			
		/* exclusions before Flex 4.5 for backwards-compatibility purposes */
		static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
		
		/**
		 * @private
		 */
		override public function get colorizeExclusions():Array 
		{
			// Since border is styleable via borderColor, no need to allow chromeColor to affect
			// the border.  This is wrapped in a compatibility flag since this change was added  
			// in Flex 4.5
			if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
			{
				return exclusions_4_0;
			}
			
			return exclusions;
		}
        
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
        
        /**
         * @private
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            if (getStyle("borderVisible") == true)
            {
                border.visible = true;
                background.left = background.top = background.right = background.bottom = 1;
                contents.left = contents.top = contents.right = contents.bottom = 1;
            }
            else
            {
                border.visible = false;
                background.left = background.top = background.right = background.bottom = 0;