Flex 带有大部分UI组件,为快速搭建RIA程序提供了有力的有力的支持,这套组件也是可以自定义外观的。套用外观有很多的模式,自己的尝试自定义过一套Flex的UI组件外观,用的是Flex Skin for Flash 模式,使用CSS样式表通过Embed skinClass来实现的外观定义,一番折腾下来发现并不是最好的模式,此方法的好处就是套用外观简单,但缺点多多:

  • 加大输出文件字节量(原因默认界面+自定义界面,Flex App运行时会初始化默认UI界面,然后再次通过遍历组件通过setStyle方法来做自定义界面的重渲染)
  • 一些组件外观不可控(滑动条的宽度以及combox的箭头按钮宽度很难定制,以及取色器的边线颜色)
  • 出现另类问题(Panel中的子容器将从头部算起,之前的垂直或水平布局失效,只能用绝对定位来解决问题,相关继承组件Alert布局完全被破坏)

一路走过,觉得最好的外观定制方案是:程序绘制 + 简单素材辅助,为了不添加重复的界面字节量,我们要将Skin包下的资源来引入到项目的Source Path,以达到优先使用我们的界面定制代码,Flex App 会一次成型的生成我们的自定义界面,免去二次界面的渲染,这也会使得Flex App的内存和性能得到优化。

照样是用过CSS来定制界面,只是程序绘制界面会使用ClassReference关键字来制定那个类来绘制对应的UI。这也就是最底层的界面定义模式了。

分享一下仿Flash CS4风格的滑动条,宽度已经比默认的滑动条小了许多了。极大的节省我们的空间。定义过程中,还真的发现默认UI滑动条绘制代码中确实是偏差了2个像素。是的看起来怪怪的。

上图

代码下载

Download: CBMStyle.zip  CBMStyle.zip (14.9 KiB, 718 hits)
Flex技术探索分享 - 定制最好的Flex Skin方案[1] - 相关代码