上一篇我们将一个应用程序的皮肤风格改造成了spark风格，界面变得非常漂亮。但是如果我们想开发自定义的皮肤风格应该怎么做呢？这篇文章我们来探讨一下这个问题。
我们先来看看spark是怎样定义皮肤风格的。打开我们上篇用过的PhotoGallery例程的PhotoGallery.mxml文件，我们可以看到WindowedApplication的skinClass属性值为“spark.skins.spark.SparkChromeWindowedApplicationSkin”，那么这个SparkChromeWindowedApplicationSkin源文件在哪呢？找到你安装Flash Builder 4的文件夹，然后按.\sdks\4.0.0\frameworks\projects\airspark\src\spark\skins\spark路径就可以找到“SparkChromeWindowedApplicationSkin.mxml”这个源文件了。（注：我安装的版本是“Adobe Flash Builder 4 Premium (Build 272416)”，如果版本不同路径可能会有所变化！）Flex工程是将.\sdks\4.0.0\frameworks\projects\airspark\src\这个路径默认作为src路径的，同样的还有projects下的其他文件夹路径。
Flex4的spark skin架构是一套完整的模型，将可视化组件的行为逻辑和外观完全分开，使开发者可以非常方便地自定义各种组件的皮肤风格和布局。一般情况下，组件的行为逻辑将被定义在ActionScript文件中，而外观皮肤将被定义在MXML文件中，spark皮肤框架将他们结合起来组成一个完整的可视化组件。关于这部分的完整介绍请参考官方文档：Spark Skinning，关于组件类和外观类之间的结合规则请搜索关键词“skinning contract”。另外可以参考这篇中文文章：介绍 Flex 4 beta 中的外观设计。
“states”标签定义了这个组件的几种外观状态，通过命名状态，并指定子组件在各状态中的外观形式，可以使组件外观切换更加方便灵活。关于states的文章很多，在此不多啰嗦，可以参考这篇：Working with States in Flex 4。
通过上面的分析，我们已经了解了SparkChromeWindowedApplicationSkin.mxml文件的代码结构，自定义WindowedApplication的皮肤就变得简单了，步骤如下：
1、将SparkChromeWindowedApplicationSkin.mxml文件复制到工程src\skins路径下，并重命名为“MyAppSkin.mxml”；
2、在Flash Builder中打开此文件，对其中的代码做如下改变：
我们将标题栏的高度增大到36像素，给窗口边框添加了圆角，并将边框颜色改为黑色，宽度改为2个像素；
3、打开PhotoGallery.mxml代码，将皮肤风格改为“skinClass="skins.MyAppSkin"”；
4、到Flash Builder安装目录的相对路径“\sdks\4.0.0\frameworks\projects\airspark\src\spark\skins\spark\windowChrome”下，将“TitleBarSkin.mxml”文件复制到工程src\skins路径；
5、在Flash Builder中打开此文件，做如下修改：
我们将标题栏的最小高度进行了修改，并改变了背景渐变色；
6、再次打开MyAppSkin.mxml代码，做如下修改：
7、保存运行，看看我们的成果吧。
总之，通过组件类和外观类的分离模型，我们可以重写外观，并利用组件的“skinClass”属性指定自定义的外观类，来完成任意组件的外观自定义。当然，我们也可以完全自定义组件逻辑和外观，那就是组件开发的内容了。这篇就到这，下一篇我们整理一下Flex4中spark框架的相关知识。
PS. 我将本篇实例的源码导出了一个PhotoGallery.fxp文件，有需要的可以到 我的网络硬盘空间下载。
我们先来看看spark是怎样定义皮肤风格的。打开我们上篇用过的PhotoGallery例程的PhotoGallery.mxml文件，我们可以看到WindowedApplication的skinClass属性值为“spark.skins.spark.SparkChromeWindowedApplicationSkin”，那么这个SparkChromeWindowedApplicationSkin源文件在哪呢？找到你安装Flash Builder 4的文件夹，然后按.\sdks\4.0.0\frameworks\projects\airspark\src\spark\skins\spark路径就可以找到“SparkChromeWindowedApplicationSkin.mxml”这个源文件了。（注：我安装的版本是“Adobe Flash Builder 4 Premium (Build 272416)”，如果版本不同路径可能会有所变化！）Flex工程是将.\sdks\4.0.0\frameworks\projects\airspark\src\这个路径默认作为src路径的，同样的还有projects下的其他文件夹路径。
Flex4的spark skin架构是一套完整的模型，将可视化组件的行为逻辑和外观完全分开，使开发者可以非常方便地自定义各种组件的皮肤风格和布局。一般情况下，组件的行为逻辑将被定义在ActionScript文件中，而外观皮肤将被定义在MXML文件中，spark皮肤框架将他们结合起来组成一个完整的可视化组件。关于这部分的完整介绍请参考官方文档：Spark Skinning，关于组件类和外观类之间的结合规则请搜索关键词“skinning contract”。另外可以参考这篇中文文章：介绍 Flex 4 beta 中的外观设计。
我们打开SparkChromeWindowedApplicationSkin.mxml文件，可以看到SparkChromeWindowedApplicationSkin继承自SparkSkin类。SparkSkin类继承自Group，是所有spark外观的基类，也就是说该类是一个spark外观组件容器类（非常贴合WindowedApplication的概念）。代码中值得注意的还有这一段：
“HostComponent”标签指定了该skin是用于哪个类型的组件的，即指定了宿主的类型；同时通过这个标签就可以直接访问宿主的style属性等设定值了。再下面可以看到如下代码：
“states”标签定义了这个组件的几种外观状态，通过命名状态，并指定子组件在各状态中的外观形式，可以使组件外观切换更加方便灵活。关于states的文章很多，在此不多啰嗦，可以参考这篇：Working with States in Flex 4。
在下面的代码就是对窗口外观的具体定义了，我们分析一下，如下图。
通过上面的分析，我们已经了解了SparkChromeWindowedApplicationSkin.mxml文件的代码结构，自定义WindowedApplication的皮肤就变得简单了，步骤如下：
1、将SparkChromeWindowedApplicationSkin.mxml文件复制到工程src\skins路径下，并重命名为“MyAppSkin.mxml”；
2、在Flash Builder中打开此文件，对其中的代码做如下改变：
我们将标题栏的高度增大到36像素，给窗口边框添加了圆角，并将边框颜色改为黑色，宽度改为2个像素；
3、打开PhotoGallery.mxml代码，将皮肤风格改为“skinClass="skins.MyAppSkin"”；
4、到Flash Builder安装目录的相对路径“\sdks\4.0.0\frameworks\projects\airspark\src\spark\skins\spark\windowChrome”下，将“TitleBarSkin.mxml”文件复制到工程src\skins路径；
5、在Flash Builder中打开此文件，做如下修改：
我们将标题栏的最小高度进行了修改，并改变了背景渐变色；
6、再次打开MyAppSkin.mxml代码，做如下修改：
7、保存运行，看看我们的成果吧。
总之，通过组件类和外观类的分离模型，我们可以重写外观，并利用组件的“skinClass”属性指定自定义的外观类，来完成任意组件的外观自定义。当然，我们也可以完全自定义组件逻辑和外观，那就是组件开发的内容了。这篇就到这，下一篇我们整理一下Flex4中spark框架的相关知识。
PS. 我将本篇实例的源码导出了一个PhotoGallery.fxp文件，有需要的可以到 我的网络硬盘空间下载。
扫一扫
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
