关于学习Flex皮肤的一点小结

这一节主要还是看的官方的API，看的比较无聊，毕竟是第一次看全英文的东西，下面来做一个相关的记录吧算是（主要讨论在Flash Builder 4下编程环境下的一些心得）。

我感觉做皮肤其实主要还是和CSS相关，不过FLEX中又多了一些更加好的东西，我主要感觉比较纠结的是因为FLEX的几个版本的不同，导致默认的主题不同，因此有时候两天的东西不一样不好调试，一个是spark主题，默认在MXML文件中以S开头，一个是MX开头的，注意区别两者有些东西的区别。

按照API上的结构，皮肤应该分为图形化皮肤，编程式皮肤和状态皮肤来讲，不过我个人认为，制作皮肤的方法主要就是两个，一个是用CSS写（以下称为CSS方式）（其中又分为两种，一种是单独的CSS文件，一种是直接在MXML应用程序文件中写，以<fx:Style>开头的那种），一个是用创建MXML外观文件的方式来写（以下称为MXML方式）。

其中MXML方式主要是控制那些可视化组件的表现样式，拿API讲的最多的按钮来说，就是比如控制按钮的圆角，颜色，按钮的几个状态下的不同样式等，他主要是对可视化组件进行外观的统一控制，但是他的写法和CSS是不一样的，他主要是类似XML的节点方式来写，而且可以写一些比较复杂的样式出来，比如圆角，CSS就不太好搞。再来说一个例子，比如TitleWindow的标题栏我们就无法通过CSS来修改其标题栏的背景色，只能修改其边框颜色，但是标题栏的背景色就无法修改，那么像这些我们就只有通过修改皮肤，也就是新建一个基于TitleWindow的外观文件【同时还要在应用程序中用相应的SKIN属性把这个外观文件引用进来】，然后到文件里面去，如果对文件代码不熟悉的话就切换到设计视图，然后去找我们要修改的样式在哪一段代码中，像这样的样式设置我们是无法通过CSS来修改的，所以有时候还必须要使用MXML方式。（感觉是从根源处进行修改）

CSS方式我觉得比较灵活，他即可以控制但单独的组件样式，也可以对可视化组件进行统一控制，CSS的写法和HTML中的CSS写法基本一致（HTML中的css比如font-size,在FLEX中的写法就为fontSize），下面我就这一点来举例说明一下，请看如下代码：

/* CSS file */

@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/mx";.heading{   fontFamily: Arial, Helvetica, sans-serif;   fontSize: 17px;   color: #9b1204;   textDecoration:none;   fontWeight:normal;}#container

{

   cornerRadius :10;   horizontalCenter :0;   borderColor: #777777;   verticalCenter:0;   backgroundColor: #efefef;

}s|Button{color:#FF0000;fontWeight:bold;}

看看，CSS中的.和#应该很熟悉吧，就是和HTML中的CSS一样的用法，在MXML应用程序中用属性styleName来调用css文件中以.开头的样式（也即css中的class类型的样式），代码如下：

<s:Label id="errorMsg"  text="This is an error message" styleName="heading" />

而要调用ID类的CSS比如上面的"#container"则只需要使用ID即可，代码如下：

<s:Label id="container"  text="This is an error message" />

而最下面的 s|Button也就是我说的CSS中可以对按钮进行样式的统一控制，就和我们平时在HTML中写CSS的时候在最开头把TR,UL,LI的样式定义好，然后以后整个网页的UL,LI都用这个样式的作用是一样的，不过要注意在前面加上s| 或者 mx|对应MXML应用程序中以<s:开头的和以<mx:开头的可视化组件。

至于具体还有些细节，比如语法啊，MXML方式中的代码怎么写啊之类的，可以再去参考我已经写的一些例子来看(注意其中一些ID的值是固定的，比如BUTTON的<s:Label的ID 就是labelDisplay不能写其他的，否则看不到效果)，最后还要说的是，可以在MXML应用程序中用<fx:Script来写一些事件等来动态控制页面可视化组件的样式，这也是可以的，还有嵌入图片到组件中，注意Embed的语法以及路径问题。

基本上我觉得主要的就是这些，具体的语法格式，如何调整还需要多多练习，同时也谢谢网上的一些朋友写的教程，特别是这个：http://www.tutorialspoint.com/flex/index.htm 感觉对我帮助很大。

今天就到这里。

其他皮肤相关的技术文章：http://wolfgangkiefer.blog.163.com/blog/static/8626550320115485511752/

http://wolfgangkiefer.blog.163.com/blog/static/86265503201151875513630/