nighty

折腾的年华
posts - 37, comments - 143, trackbacks - 0, articles - 0

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

Posted on 2011-10-13 18:14 寒武纪 阅读(2455) 评论(0)  编辑  收藏 所属分类: Flex
      采用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来说是一个消耗,你的程序也会增肥。


刚进场的时候戏就落幕

只有注册用户登录后才能发表评论。


网站导航: