Flex Spark框架使用SkinnableComponent进行VC分离.docxVIP

本文主要阐述Flex框架使用SkinnableComponent如何实现View和Control分离进行分工开发。Flex4引入了一个Spark组件架构（继承了SkinnableComponent，而SkinnableComponent又继承了UIComponent并扩展了Skin类的相关功能，Skin也同样继承UIComponent）实现了全新组件皮肤的自定义(Gumbo Skinning)，从而实现了界面于业务逻辑的分离。结构如下:(此图来自网络)实现步骤：View层:新建一个MySkin，继承Skin，HostComponent修改为MyComponent。 在里面定义布局和组件，比如添加一个id为testBtn的s:Button/组件。Control层:自定义一个组件类MyComponent，继承SkinnableComponent。 引入对testBtn的[SkinPart]引用，实现partAdded(partName:String,instance:Object)，添加testBtn的交互行为。给MyComponent指定skinClass为MySkin。部分代码:MySkin.mxml:MyComponent.as:Main.mxml:上面的代码中还对testButton的label进行了定义。---------------------------------------------------------------------------------------------------------------------------------以下内容来自非常实验：周戈 (DarkStone) 原创, 转载请注明来源!日期: 2014-03-14微博: /dstech博客: /dstechQQ群:发经验指南：在 CSS 里定义 skinClass 的绑定, 更有弹性：???这里改成?styleName=样式名称，样式名称对应的?CSS?里绑定。skinClass:?ClassReference(完整的自定义皮肤类的路径);partAdded()和partRemoved()这2个函数的覆盖很重要。SkinnableComponent?有个?styleChanged?事件,?继承?SkinnableComponent?的子类有必要监听这个事件,?在这个事件发生时,?重新更新?skin.currentState?的值。?[SkinState] 和 [SkinPart] 的原标签，其中 [SkinPart] 有2个重要属性 required 和 type，required 是这个皮肤部件是不是必须绑定，type 用于定于动态皮肤部件的类型, 这个属于高阶的, 入门可跳过, 但要了解。有几个核心的概念:?1. Spark 组件分 逻辑 和 皮肤 2个概念, 逻辑相当于控制层, 皮肤相当于显示层.?2. Spark 组件的逻辑靠继承 SkinnableComponent 类, 它来定义 SkinState 和 SkinPart.?3. SkinState 决定皮肤的状态, 比如 button 组件就有 up over down disabled 状态, 不同的状态可以决定不同的外观. 3.1 关键的问题是, SkinState 的切换完全由逻辑层定义和控制, 比如逻辑层自己调用 skin.currentState = up 来切换. 3.2 继承 Skin 的 MXML 皮肤要做的是绑定所有逻辑层定义的皮肤状态, 为各个皮肤状态写布局, 外观细节, 颜色, 大小等等。?4. SkinPart 决定要配合组件实现需求所必需的组合, 比如说, 一个 Button 组件它有这几个需求: 4.1 Button 要能显示文字, 所以我们把 Label 定义成 Button 的 SkinPart, 也就是把 Label 组合到 Button 里了, Label 负责显示按钮需要的文字, 而 Button 类控制 Label 具体要显示什么, 即在 Button 类里控制 label.text = 我要显示的文字; 4.2 Button 要能显示图标, 于是我们就把 BitmapImage 定义成 Button 的 SkinPart.?5. 监听和处理事件全部由逻辑层做, 比如 Button 要自行监听 rollOver 事件, 事件发生后 Button 要切换皮肤状态, 即 skin.currentState = over.总之, 最重要的在于逻辑层里 SkinState, SkinPart, Event, Style 这些东西的正确用法, 如果能彻底明白自己在做什么, 为什么要把 XX 组件定义成 SkinP