样式和主题在我们传统WEB开发(如ASP.NET)中是使用非常频繁至于好处嘛我就不多说了在Flex开发中同样有样式和主题概念且样式文件扩展名也是.css其主要功能就是美化界面

　　本文作为ActionScript 3.0 Step By Step系列文章最后篇样式和主题皮肤这些其实也没有什么地方好讲我相信只要是从事过Web开发朋友对不会对它很陌生所以本文不着重介绍样式详细开发更多是介绍样式在Flex开发中开发方式、应用方式以及使用Adobe Flex Builder这样强大开发环境所提供样式生成器去生成样式等相关知识点最后将介绍下如何将个外部皮肤引入项目中应用

　　

　　上图为通过设计界面设计出来界面原图没有经过任何处理我们可以发现字体太小颜色为黑色OK下面我们通过这个简单举例逐步来看看Flex下样式应用

　　、使用<mx:Style>标签定义局部样式

1　　<mx:Style>
2　　　Panel
3　　　{
4　　　　　font-size:12;
5　　　　　color:red;
6　　　　}
7　　</mx:Style>

　　如上通过<mx:Style>标签定义了个样式Panel直接嵌入在mxml里针对当前mxml下所有Panel标签设置其里面字体大小为12颜色为红色

　　 2、使用<mx:Style>标签引入外部样式表

　　<mx:Style>标签出了定义样式也可以将个外部样式表文件引入如上样式我们可将其定义在个样式表文件(default.css)里如下所示:

1/*CSSfile:default.css*/
2Panel
3{
4　　font-size:12;
5　　color:red;
6}

　　此时我们就可以通过<mx:Style>标签将这个外部样式表文件引入当前应用(mxml)了如下:

　　1　　<mx:Stylesource="CSS/default.css"/>

　　下面为设置样式后用户登录界面截图界面字体为12号字体颜色为红色:

　　

　　 3、使用Flex样式设计器

　　Adobe Flex Builder提供了个非常优秀样式设计器可以直接通过设计器设计出非常漂亮效果

　　

　　下面我将对用户名和密码这两个文本输入组件进行美化当然不是写样式表我很懒我想直接使用Flex提供样式设计器来生成我想要效果下面是通过我设计过后文本输入组见编码:

1<mx:TextInputx="90"y="21"id="UserName"color="#FFFFFF"fontFamily="Arial"
2　　　　　　borderStyle="in"borderThickness="1"cornerRadius="0"
3　　　　　　backgroundColor="#000000"borderColor="#FFFFFF"
4　　　　　　textAlign="center"fontSize="14"/>
5 <mx:TextInputx="89"y="59"displayAsPassword="true"id="UserPasswrod"
6　　　　　　color="#FFFFFF"fontFamily="Arial"backgroundColor="#000000"
7　　　　　　textAlign="center"fontSize="14"/>

　　以上通过样式设计器把两个TextInput组件样式设计为背景黑色字体为Arial字体颜色为白色文本居中显示字体大小为14号运行效果如下图示:

　　　

　　 4、以编程方式设置样式

　　以编程方式设置样式很简单我们直接通过组件Style思路方法来完成如下代码:

1　　btnLogin.Style("font-size","20");

　　另外FlexSDK也为我们提供了相应类来以编程方式动态处理样式他们是:StyleManager和CSSStyleDeclaration位于mx.styles包下如上设置按扭字体大小我们也可以如下方式来实现:

1varcs:CSSStyleDeclaration=CSSStyleDeclaration("mystyle");
2cs.Style("fontSize","20");　　　　　　　　　　　　　　　　
3StyleManager.StyleDeclaration("btnButton",cs,true);

　　这就相当于是定义了个名为mystyle样式等同于下面样式定义:

1.mystyle
2{
3　　　　font-size:20px
4}
5

　　 5、引入外部皮肤(Skin)美化应用

　　这里我在网上下载了套叫做“优雅天蓝”皮肤下面我们来看看如何将外部皮肤引入项目来美化应用皮肤主要包括 3部分:皮肤文件(.swc)、样式表文件(.css)和图片下面将皮肤文件相关文件直接Copy到你应用就可以直接使用了

　　那应该如何放置这些文件呢?以.swc结尾皮肤文件放在Flex项目libs目录下.css样式表放在src目录下就可如果有图片图片也应该放在src目录下(包括下级子目录)下图为应用外部皮肤后界面效果:

　　

　　文章出处:http://beniao.cnblogs.com　

　　相关文章:

　　ActionScript 3.0 Step By Step系列( 9):使用样式(style)和皮肤(Skin)两大画笔为应用界面画妆　　　

　　ActionScript 3.0 Step By Step系列( 8):动态数据展现源于灵活数据绑定　　

　　ActionScript 3.0 Step By Step系列( 7):使用XML和XMLList类处理XML数据　　　

　　ActionScript 3.0 Step By Step系列( 6):学对象事件模型从点击按扭开始　　

　　ActionScript 3.0 Step By Step系列( 5):走在面向对象开发路上,以类为基础去研究编程问题 　　

　　ActionScript 3.0 Step By Step系列( 4):来自面向对象开发的前呐喊:“学会写可重用代码”　　　



　　ActionScript 3.0 Step By Step系列( 3):学学流程控制编编- & switch & while & for　　　

　　ActionScript 3.0 Step By Step系列( 2):建立扎实ActionScript 3.0语法基础　　　

　　ActionScript 3.0 Step By Step系列():工欲其善,先利其器(Flex Builder)　　

　　相关资源 :

　　Flash ActionScript 3.0(1) - 数据类型、操作符和流程控制语句

　　Flash ActionScript 3.0(2) - 包、类、包外类、命名空间、属性、思路方法、接口和继承

　　Flash ActionScript 3.0(3) - 以文本形式、XML形式和JSON形式和ASP.NET通信