(十六)使用样式定制Flex应用

为Flex应用程序添加样式：
  通过标签属性设置样式
  可继承的样式属性
  通过<fx:Style>标签设置样式
  通过CSS文件设置样式

改变Flex应用程序外观的方式：1.样式 2.皮肤
样式
通过样式设置可见元素的字体大小及背景颜色，实现改变Flex组件的外观
需要了解：样式的继承、应用样式的几种方式
皮肤
皮肤的概念更宽泛，通过换肤可以一次性改变所有可见元素的外观，甚至重新排列元素在屏

幕上的位置
-------------------------------------------------
Flex开发使用了一套基于标准的语言
基于XML的MXML
基于ECMAScript的ActionScript3.0
基于CSS(层叠样式表)
-------------------------------------------------
使用CSS为Flex应用程序添加样式的途径：
    为个别组件设置个别样式
    使用CSS类选择器为多个组件设置一组样式[类选择器]
    使用类型选择器指定某种类型(如Button)的所有实例都使用同一组样式[类型选择器]
    使用ID选择器指定具有特定id的某一个组件采用一组样式[ID选择器]
    使用伪选择器，为组件的某种特定状态(如按钮按下)应用样式[伪选择器]
    使用后代选择器指定符合某种层次关系的组件采用同一组样式[后代选择器]

Flex中内置组件的可用样式：
    参考Adobe Flex 4 Language Reference(ASDocs)

1.行内样式

<!-- 设置下拉列表的样式 -->
			<s:DropDownList selectedItem="@{orderInfo.cardType}" 
							requireSelection="true"
							rollOverColor="#AAAAAA"
							selectionColor="#EA800C">

2.CSS样式表
-------------------------------------------------------------
1.类选择器

	<fx:Style>
		.customDropDown {
			rollOverColor:"#AAAAAA";
			selectionColor:"#EA800C"
		}
		
	</fx:Style>
	<s:DropDownList styleName="customDropDown"/>

styleName可以指定多个样式样式类，用空格分隔

	<fx:Style>
		.customDropDown {
			rollOverColor:"#AAAAAA";
			selectionColor:"#EA800C"
		}
		.blueStyle {
			color:blue;
		}
	</fx:Style>
	<s:DropDownList styleName="customDropDown blueStyle"/>

2.类型选择器
FlexGrocer.mxml中定义样式

	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		@namespace views "views.*";
		@namespace services "services.*";
		@namespace cart "cart.*";
		
		.customDropDown {
			selectionColor:#EA800C;
			rollOverColor:#AAAAAA;
		}
	</fx:Style>

CreditCartItem.mxml中的form表单引用该样式

<!-- 引用主程序中的样式，设置下拉列表的样式 -->
	<mx:Form styleName="customDropDown">
         ...

推荐做法：
将样式定义到一个样式文件中，在主程序中引用该样式文件
DefaultStyle.css
其中使用到的命名空间可以先在主程序中的<fx:Style>标签中拷贝
当配置<fx:Style>标签程序会自动加入用到的命名空间

/* CSS file */

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace views "views.*";
@namespace services "services.*";
@namespace cart "cart.*";

.customDropDown {
	selectionColor:#EA800C;
	rollOverColor:#AAAAAA;
}

主程序FlexGrocer.mxml中引用该样式文件，被设置样式的组件就会应用到定义的样式了

	<!-- 引入外部css样式表文件 -->
	<fx:Style source="assets/DefaultStyle.css"/>

对样式文件增添更多样式：
使用新字体并应用到程序中

/* CSS file */

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace views "views.*";
@namespace services "services.*";
@namespace cart "cart.*";

/*为下拉列表框中的选项定义选中和悬停状态下的颜色*/
.customDropDown {
	selectionColor:#EA800C;
	rollOverColor:#AAAAAA;
}

/*引入新的字体样式，通过SaccoVanzetti就能引用到该字体*/
@font-face {
	src:url("assets/fonts/SaccoVanzetti.ttf");
	fontFamily:SaccoVanzetti;
}

/*为Spark命名空间的Application添加一个新的类型选择器
指定该应用程序使用SaccoVanzetti字体*/
s|Application {
	fontFamily:SaccoVanzetti;
}

3.后代选择器

/*后代选择器：为ProductList所包含的所有Label标签设置颜色*/
components|ProductList s|Label {
	color:#013FAC;
}

4.ID选择器

/*ID选择器：controlBarContent下的List项被选中和鼠标悬停状态设置颜色*/
#categoryList {
	rollOverColor:#defcdc;
	selectionColor:#6aa95f;
	borderVisible:false;
}

5.伪选择器

/*为组件的某种状态设置样式
  将主应用程序在checkoutView状态下的背景设置为浅绿色*/
s|Application:checkoutView {
	backgroundColor:#BBC8B8;
}

/*为处理购物车导航的几个按钮设置样式
    控制条上的View Cart按钮、购物车组件中的View Cart按钮、Continue Shopping按钮
    设置悬停和按下时的样式*/
.cartButton:over {
	chromeColor:#F3FBF4;
}

.cartButton.down {
	chromeColor:#C2CBE7;
}

说明：通过上述方式使用样式，可以集中管理样式，维护起来方便
但是有一个弊端，每次修改完CSS文件之后，都要求重新编译应用程序

运行时动态加载CSS
优点：迅速完成维护工作，只要把修改好的CSS文件上传到WEB服务器上就行了
不用重新编译应用程序，因为是动态加载样式的
由于Flash Player不具备运行时动态加载CSS文件的能力
只好将CSS文件转换为Flash Player能处理的SWF文件
CSS文件转换为SWF的方法：
   选中需要转换的CSS文件，然后右键，然后选择将CSS转换为SWF文件即可！
编译好的SWF文件放在bin-debug/assets目录下

使用StyleManger加载CSS SWF
StyleManager 管理应用程序中所有样式的一个Flex对象

			private function handleCreationComplete(event:FlexEvent):void {
				
				//动态加载CSS SWF样式到应用程序中
				styleManager.loadStyleDeclarations("assets/DefaultStyle.swf");
				
				//卸载某个SWF样式
				//styleManager.unloadStyleDeclarations("assets/DefaultStyle.swf");
			}

注意：当某个样式在几个样式表中都有定义，那么Flex只会采用最后加载的样式表定义的样式！某些样式表可能是编译到应用程序中的，某些样式表则采用动态加载的，当出现重复定义时，Flex会选用最后加载的样式表中的样式定义！