Flex4 spark中Application工具条自定义的原理

      采用Spark进行Flex的Web应用开发的时候，往往会用一个固定栏，比如说类似Windows的任务栏，我们想把它固定在顶部或是底部，用于某些场景存放一些控件。<s:Application>组件中有一个<s:controlBarContent>属性和<s:controlBarLayout>，用于设置Application的一个组件区域（我猜官方起的这个名称大概用意在于此吧），下面这段话就是官方的中文注释：
Title 包含在 Application 容器控件栏区域中的组件集。Application 容器控件栏区域的位置和外观由 spark.skins.spark.ApplicationSkin 类确定。默认情况下，ApplicationSkin 类定义以灰色背景显示在 Application 容器内容区域顶部的控件栏区域。创建自定义外观以更改控件栏的默认外观。

      于是可以简单的给<s:controlBarContent>区域添加各种控件，以及设置它内在的布局(controlBarLayout)。但是，发现它只能显示在Application的顶部！
      这是怎么回事，根据上面的注释，感觉应该原因在它的皮肤，得跟进代码，看一下究竟。
      首先找到<s:Application>控件的标准Skin，可以在Flash Builder中直接查看。

      
      双击打开ApplicationSkin，里面的代码包含了各种SVG图形学的实现api调用，flex管这些库叫FVG，大意就是SVG的Flex实现版本，该库实现得还算简洁！
      Application标准皮肤的就是先画一个矩形，然后用一个Group来包含不同的形状，最后一段<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />，代表Application的内容区域，Flex从设计上区分了控件树和布局树，有些复杂，可以参考官方的文档。因为Application是属于容器，所以必须在皮肤中包含这一句，不然程序运行时就看不到它包含的子控件。
     而前面长长一串<s:Group id="topGroup">中是画了顶栏的外观，它用FVG库画了四层：
     <!-- layer 0: control bar highlight -->     底部高亮线（用画笔填充一个矩形）
     <!-- layer 1: control bar fill -->              背景填充线性渐变颜色
     <!-- layer 2: control bar divider line -->  分割线
     <!-- layer 3: control bar -->                  controlBar的具体内容容器
     当然这个controlBar不是自己会出现的，只有当你填充了内容控件的时候它才显示，所以有includeIn="normalWithControlBar, disabledWithControlBar"，表示在这二个State下才显示，什么时候State才包含这二个呢？当然，就得去看Application.as的实现原理，具体篇幅就不描述。
     那么回到最初的问题：我想改变controlBar的位置在下方怎么处理？
     从上面的分析可知其实controlBar的摆放位置是在Skin中定义的，而它是什么布局，它显示不显示是通过Application.as本身的代码控制的，那么我们就只要自定义Application.as的皮肤就可以，新建一个外观mxml，直接复制官方的ApplicationSkin.mxml的代码，然后，把<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />代码移到<s:Group id="topGroup">代码的上面，在你的Application中强制指定skinClass为你自定义的ApplicationSkin，或是通过css设定即可。
     再扩展思维一下，其实我们完全可以把controlBar放到左边或是右边，甚至任何位置，都取决你在Skin的定义和Application.as的逻辑控制（你可以继承Application扩展）。
     那么controlBar有什么作用？其实spark的Panel从及它的子类TitleWindow都有controlBar的概念，它能独立于你容器外的区域，对于你容器本身包含的组件和布局不会产生干扰，以及你设置了width、height为100%时也不产生影响。如果你不要controlBar，直接在Application中用布局添加一个Group也是可以实现，但是它从根本上是属于布局树中contentGroup的内容，会受限于布局。
     Spark Skin的设计的确有高明的地方，对比Flex3的外观，它提供给设计人员的空间实在大得多，你可以组合图片和FVG库的功能自定义各种外观，当然，我就建议你多熟悉一下FVG库的应用，毕竟从外加载图片对flex来说是一个消耗，你的程序也会增肥。

刚进场的时候戏就落幕