Flex Spark皮肤定制

转自 http://www.cnblogs.com/twaver/archive/2011/07/21/2112824.html

 

 

Flex Spark皮肤定制

 

Flex3到Flex4，增加了Spark组件，这是Flex的一次重要升级，基本上组件全部重写了一套，为了保持向下兼容，出现了同一组件两套实现并存的现象，虽然说Spark组件中也可嵌入MX组件，但实际使用常会遇到些小麻烦，例如mx:Tree滚动条异常，透明背景无法监听鼠标事件等等，如果你使用定制的组件，写法稍有不规范，就会出现Spark下显示异常，比如之前定制的TWaver圆角文本输入框就是如此，不得不在Spark下重新实现。

Spark与MX组件的区别

Spark最大的目的或许是方便Adobe兜售它的Flash Catalyst，当然这是个玩笑，Spark组件更加轻量，更易扩展。所有的Flex组件都从UIComponent继承，Spark组件也是如此，只不过它多了一层包装，从SkinnableComponent继承。MX中每个组件对应一个类，在Spark体系中，每个组件对应两个类，一个Component类，一个Skin类，例如按钮组件对应：spark.components.Button和spark.skins.spark.ButtonSkin，这种设计实现了组件行为逻辑与视图呈现的分离，就像将程序员和美工的工作分开一样，这也是MVC思想的产物。
Flex 3与Flex4的区别详见：
Differences between Flex 3 and Flex 4
what is difference in halo and spark in Flex3 and Flex4

Spark组件外观定制

前面提到Flash Catalyst，这就是Adobe提供的组件外观可视化编辑工具，这个工具主要针对美工、设计师，对于习惯于写代码的程序员们也可以使用Flash Builder 4+来定制组件。
回到实际问题，之前我定制的圆角文本输入框在Spark框架下出现了问题，我决定将其改造，使用定制组件Skin的方式实现圆角文本输入框。

定制圆角文本输入框

需求与分析

我的需求很简单，文本框带圆角，其内放个图标，如同mac osx的搜索框。实现思路也很清晰，给矩形增加圆角，再多放个icon，定好位置，做好布局……

定义组件类

开始动手，按Spark组件定制的步骤，先定义组件类，再定义外观类。
组件类描述组件的行为和属性，这里我们定义一个CustomTextInput.as，继承于spark.components.TextInput，组件行为不需要特别定义，这里只是增加两个样式：icon和radius，分别表示图标和圆角半径，而具体的呈现将在Skin类中实现。

 

。。。。。。。。。。。。。。。。。