整理下免得自己忘掉,关于flex的spark皮肤组件,网上有很好的结构组织图,这里也就懒得扒过来。示范没有,都是看SDK源码看出来的,希望对初学者有点用处
Flex皮肤设计,三类对比(mx,spark,mobile)
一、mx组件皮肤
特点:
a、 部分组件支持
b、 名称不统一,有些如mx:Button支持skin,upskin,overskin…等mx:Panel的titleBackgroundSkin等
c、 上面两点导致组件的皮肤只是部分可设,不具备高度灵活性
d、 一个独立的显示元素,可以使图片,或者其他任意的可显示对象(示例中的mx:Button的skin="mx.skins.halo.ButtonSkin")就属于此类
e、 设置皮肤后作为固定的元素添加到组件中,只负责显示,和交互没有直接关系(相对spark而言)。而皮肤往往添加到rawChildren中间,不作为元素的child
二、spark组件皮肤
特点:
a、 几乎所有的spark组件都支持
b、 样式设置名称通过统一接口skinClass设置。基本继承自Group--Skin--SparkSkin而来
c、 可以设置全局的皮肤(非常灵活)
d、 Group组件支持添加IGraphicElement元素作为子元素,因此spark皮肤可以方便的添加矢量界面(通过Flash Catalyst定义的)
e、 皮肤设置的时候,可以添加任意的元素作为纯显示元素,也可以对现有可编辑元素做站实现过更改
三、mobile组件皮肤
mobie皮肤跟spark皮肤有着同样的使用原理和引用方式
特性:为了减少spark皮肤过大的内存和性能开销,移动设备上提供了专门的mobile皮肤
1、皮肤基本继承自UIComponent—mobileSkin。减少过多的group嵌套,减少大量的继承代码
2、使用as定义代替mxml
四、对比总结:
作为一种良好的将view和逻辑分离开的设计,spark皮肤具有多种优点。
建议
1、 首先优先使用spark组件,对于产品的界面修改有很大帮助。
2、 对于移动设备,直接使用as编写继承自mobileSkin的皮肤,经测试对于性能的影响的确很大,尤其是初次加载的时间。
3、 对于mx组件,可以通过使用继承自sparkSkin类来使用mxml来编写部分皮肤(对于不擅长美工编辑的码农是个不错的选择,通过简单的graphic元素来拼接一个简单的界面)
————————————————————————————————————————————————————————
五、仿照spark模式自定义一个可设置皮肤的组件(补充点)
使用spark自定义皮肤组件需要注意的环节有以下几点。
首先,必须清楚自己的目标:
1、 梳理清楚应有的界面组件,哪些归皮肤所有,允许用户设置,哪些归组件所有,用来提供具体的功能,二者允许相同。
2、 梳理清楚应有的功能接口,组件用来完成那些工作,需要哪些属性,样式设置
3、 选择合适的基类(Flex核心库提供了大量的成品组件,可以直接继承扩展,或者修改使用…不用事事躬亲,否则太累的说)
其次,我们需要清楚spark定义皮肤组件,完成这种skin+component组合方式所需要做的具体工作。
1、 定义内部组件属性,如closeBtn关闭按钮, textDisplay文本显示条,contentContainerd等。(一方面这些组件作为基础功能的提供者,将在我们组件生命周期中发挥重要作用,监听事件,提供编辑,控制等。另一方面可以在皮肤中对内部组件进行样式设置)。。。。。注,无需跟用户直接交互(所有交互逻辑内部处理)或者只是提供显示的组件最好在skin中定义,降低组件的复杂性。
2、 定义外部功能接口,和提供的相关交互事件(窗口关闭,dropDown等)
3、 创建皮肤组件,安排内部组件和显示元素的展现效果
4、 创建组件和皮肤之间的联系
a) 使用元数据标签SkinPart,用来定义皮肤中哪个部件是必须的,需要在皮肤类中设置其显示。
形如[SkinPart(“required=”true”)] public var closeBtn:Button。
b) 使用SkinState元数据标签,用来定义皮肤中哪些状态是必须的,可以在组件发生交互是修改状态以同步更新皮肤显示。
形如[SkinState(“normal”)] [SkinState(“hover”)] [SkinState(“down”)]
c) 在皮肤组件中使用元数据标签HostComponent,该标签表明了当前皮肤的应用组件对象,flashBuilder在编译过程中据此检查响应的skinpart,skinState,验证皮肤是否合适,也可以通过this.hostComponent在皮肤中获取对组件的引用,虽然这样的意义不大。(皮肤+组件功能==最终的组件,一般来说皮肤只需显示该显示的,功能相关都在组件中详细写入)
形如:[HostComponent(“spark.components.Button”)]
在组建中定义交互功能,继承复写partAdded(),partRemoved()方法,该方法实现在皮肤中定义的内部组件实例化后添加到组件中。如果可能提供交互功能,这些相关的功能逻辑剧需要在初次获取时添加到对应的组件之上。一般都是用来添加交互事件,也可以是内部的一些逻辑事件。。