Flex2 开发中应用样式系列(2)

关于样式值的格式
样式属性可以是字符串或者是数值，也可以是这些值的数组。属性值除了类型之外，样式属性值的也有一定的格式（如长度（Length） 时间(Time),颜色(Color),这些都描述了一个有效的属性值。一些属性表现为逻辑值（true 或 false），但是他们是字符串值被解释成逻辑值。这一节叙述这些值的格式。

长度格式（Length format）
长度格式用于一些大小的样式属性，如字体大小，数值的长度。
长度类型有以下语法
长度＋长度单位　length[length_unit]
例如:
<mx:Style>
 .b1{
  fontSize:20px;
}
<mx:Style>
如果你没有指定单位，这里的单位被认为是像素。下面定义了两个相同字体大小的例子：
.b1{ fontSize:10;} .b2{ fontSize:10px;}
注意：在数字值与单位之间不能有空格。

下表描述了Flex支持的长度单位：
 
单位 精度 说明   
px 相对 像素（pixels）   
in 绝对 英吋（Inches）   
cm 绝对 厘米（Centimeters）   
mm 绝对 毫米（Millimeters）   
pt 绝对 点（points）   
pc 绝对 派卡(Picas) 
Flex 不支持em和ex单位。你可以使用下面的公式将它们转换成px单位：
1em =10.06667px
1ex = 6ex
在Flex中，所有的长度在显示之前都被转换成像素，在这种转换中，Flex认为1英吋等于72像素。所有的长度都基于这个默认的转换。例如，1厘米等于1/2.54英吋，为了得到1厘米的等于多少像素，Flex先乘以72，然后再除以2.54。
当你使用内联样，Flex将忽略单位，使用像素作为默认单位。
字体大小（fontSize）样式属性除了数字＋单位的形式赋值，也容许使用下面列出的关键字设定大小。倶体的大小由客户端的浏览器决定。
xx-small,x-small,small,medium,large,x-large,xx-large
下面的例子使用类选择器定义了fontSize为x-small:
.smallFont{
 fontFamily:Arial,Helvetica,”_sans”;
 fontSize:x-small;
 fontStyle:oblique;
}

时间格式
你可以在组件的移动效果属性和已经构建好的效果属性中使用时间格式，例如下拉框（ComboBox）组件下拉和弹出的时候。时间格式是数字类型并且是以毫秒为单位。在输入时间格式的值时不需要指定单位。
下面的例子设定了myTree树形控件的selectionDuration样式属性值为100毫秒:
myTree.setStyle(“selectionDuration”,100);

颜色格式
你可以用很多方法定义颜色（Color）。用CSS样式定义，你可以使用更多的颜色格式。
下表描述可以使用在颜色样式属性中的颜色格式：
 
格式 描述   
十六进制 十六进制颜色是以0x开头或以＃开头的六位数字组成，有效范围值是0x000000到0xffffff
在调用setStyle()方法和在MXML标签中定义颜色的时候，你得使用0x开头，在CSS样式表和<mx:Style>标签块中得使用＃号。   
RGB格式 RGB颜色是红，绿，蓝三种颜色的混合，同时也是三种颜色饱和度所占的百分比。设定RGB颜色的格式是color:rgb(x%,y%,z%).第一个值是红色所占的百分比，第二个值是绿色所占的百分比，第三个值是蓝色所占的百分比，你只能在样式表定义中使用RGB格式的颜色。   
VGB　颜色名称 VGA颜色名称是所有的浏览器都支持的16种基本色，也支持CSS样式表，颜色名称是
Aqua,Black,Blue,Fuchsia,Gray,Green,Lime,Maroon,Navy,Olive,Purple,Red,Silver,Teal.White,Yellow
你可以在样式表定义和内联样式声名中使用VGA颜色名称。
VGA颜色名称不是大小写敏感的。 

颜色格式是数值类型。当你一个颜色格式，如VGA颜色名称，Flex将字符串转换成数值。
CSS样式定义和<mx:Style>标签支持下列颜色值格式：
<mx:Style>
 .myClass{
  shadowColor:#6666cc; /*CSS十六进制格式*/
  color:Blue;/*VGA颜色名称*/
}
</mx:Style>
当使用内联样式和使用setStyle()方法设定颜色时，可以使用以下颜色值格式：
StyleManager.getStyleDeclaration(“TextArea”).setStyle(“color”,0xff0099);
bt2.setStyle(“color”,”Green”);

样式属性中使用数组
一些控件属性接收颜色数组作为属性值。例如，设定Tree控件的depthColors样式属性，可为Tree的层次级别使用不同的背景色。为了使用数组设定颜色属性，在属性定义时将所有颜色项加入一个逗号分格的列表中。索引就是输入时的显示在列表中的顺序。
Tree{
 DepthColors:#EAEAEA,#FF22CC,#FFFFFF;
 AlternationgItemColors:red,green,blue,yellow;
}
在这个例子中，只有depthColors是可见的,如果depthColors 没有设定，仅alternatingItemColors属性可见。这里设定两者只是为了描述颜色设定的目的。
在ActionScript脚本中，你可以在中括号中将一组值用逗号分隔，将其定义成一个数组。
正象下面例子所显示的：
myTree.setStyle(“alternatingItemColors”,[0xEAEAEA,0xFF22CC]);
你也可以用内联数组设定属性，如下面例子所示：
<mx:tree alternatingItemColor=”[oxEFEFEF,0xFF0000]”/>
最后，你可以使用MXML语法设定数组的值，然后应用这些值，如下如示：
<mx:Array id=”myArray”>
 <mx:Object>blue</mx:Object>
 <mx:Object>red</mx:Object>
</mx:Array>
<mx:Button label=”click Me” fillColors=”{myArray}”/>

使用级联样式表
级联样式表（CSS）是大多数脚本语言和HTML文档中声名文本样式的机制。一个样式表是包括一列组件的类选择器和类型选择器定义的规则集合。Flex支持以CSS语法的形式使用样式，并将这些样式应用到Flex组件。
在CSS语法形式中，每个样式的声名是将一个或多个样式属性的名称与样式的属性值相关联。例如。下面的样式定义了一个名叫bodyText的类选择器：
.bodyText{
 textAlign:left;
}
在这个例子中，bodyText定义了一个新的样式类，这就叫类选择器。也就是说，你可以显示将bodyText样式应用了控件和一类控件。
一个类型选择器隐式地将自已应用到特殊一类的组件，就象是这个特别类的子类。
下面的例子定义了一个名子为Label的类型选择器：
Label{
 TextAlign:left;
}
Flex将此样式应用到所有的Label控件，并且应用到所有Label控件的子类。如果你在一个容器中定义一个类型选择器，那么这个样式将应用到此容器的所有子控件，前题是此样式是一个可继承的样式。
当决定为一个新的组件实例应用样式国，Flex检测所有的父类查找类型选择器。Flex将样式设定应用到所有类型选择器，直到完全匹配。例如，假设MyButton继承自Button类。所有的MyButton实例，Flex首先检测MyButton类型选择器，并且应用MyButton选择器样式。然后检测Button类型选择器，应用Button选择器样式，再检测UIComponent类型选择器。Flex检测应用样式只到UIComponent。不会再向上追遡，因为Flex Sprite(UIComponent的父类)类不支持类型选择器，sprite类的父类也不支持。
注意：Flex中的类型选择器的名字不能使用连子符，如果使用了连字符，flex将忽略此样式
在一个类型选择器中定义多个样式属性，请用分号分隔，如下面的例子显示：
Label{
 TextAlign:left;
 FontSize:12;
 Color:Blue;
}
你可以使用StyleManager编程定义一个新的类和类型选择器.更多信息，请参看“使用StyleManager”P620.
关于属性和类型选择器名称
当在<mx:Style>或者在一个外部样式表中使用级联样式表(CSS)应用样式属性的时候，最好的样式属性表示是使用驼峰法，如fontWeight和fontFamily.
为了使开发简单，Flex在样式表中同时支持驼峰表示法和连字符表示法，如下所示：
<mx:Style>
 Button{
 fontSize:14;
}
Button{
 font-size:14;
}
</mx:Style>
在ActionScript和MXML标签里，你不能使用连字符表示属性名称，所以你必须使用驼峰法表示样式属性。例如
<mx:Button fontSize=”24”/>
myButton.setStyle(“fontSize”,24);
StyleManager.getStyleDeclaration(“Button”).setStyle(“fontSize”,14);
至于类属性的，你不可使用连字符法，所下例所示：
.myClass{……}/*有效的样式名称*/
.my-class{……}/*不是有效的样式名称*/

关于级联样式表(CSS)的继承
一些样式属性是可继承的，如果你将一个可继承的样式应用到父容器，那么其子控件将继承其样式属性。例如，你定义fontFamily为Times的样式应用到Panel 容器，Panel的子控件的fontFamily样式将也使用Times值，除非你覆盖此属性。如果你设定父容器的一个不可继承的属性，比如textDecoration样式属性，那么只有此父容器使用此属性，而其子控件不使用此样式。关于更多可继承的样式属性信息，请看“关于样式继承“p613.
一般来讲，颜色和文本的样式是可继承的，无论是用样式表还是setStyle()方法设定。剩下的样式是不可继承的，除了其他需要注意的。
下面是继承规则的一些特殊情况：
如果使用样式表定义全局样式，Flex将应用样式到所有的控件。无论此样式属性是否可以继承。关于全局选择器的更多信息，请参看“使用全局选择器“p620.
类型选择器设定的值，不公可以应用到目标类，也可以用于其子类，即使样式属性是不可继承的。例如，Flex将应用所有的Vbox类型选择器应用到Vbox容器。

Flex样式与CSS样式的差别
在Flex中，CSS支持和CSS规范有主要的不同。
Flex支持CSS所俱有的样式的一个子集。Flex样式属性中有些是唯一的样式属性，但是CSS规范中没有定义。为了查看应用到Flex中控件的所有样属性列表，请参看“支持的CSS属性“p612.
Flex控件只支持在被当前主题定义样式。如果主题不使用一个特别的样式，应用此样式到一个控件或一组控件将没有效果。例如，默认的主题(Halo Aeon)，不支持sybolColor,sybolBackgroundColor.关于主题的更多信息，请看“关于主题P29“.
Flex样式表支持使用Embed关键字定义控件的Skin 。更多信息，请参看“使用Skin“p661.
关于类选择器
类选择器定义了一你可以应用到一些组件的样式。你定义了样式类，然后在组件的MXML标签styleName属性中指定此样式类。所有的组件都是UIComponent 的子类，所以都支持styleName属性。
下面的例子定义了一个新的样式myclass，并将其应用到一个Button组件
<mx:Style>
 .myclass{color:#6666CC;}
</mx:Style>
<mx:Canvas>
 <mx:Button styleName=”myclass” label=”This text is dark blue”/>
</mx:Canvas>
当你通过getStyleDeclaration()方法访问类选择器时，类选择器的名称必须以点开头，如下例所示：
StyleManager.getStyleDeclaration(‘.myclass’).setStyle(….);
通过styleName属性设定内联样式时，你不必在类选择器名称前加点。

关于类型选择器
类型选择器指定样式到所有特殊的类别的组件。当你定类型选择器时，不需要显示应用样式。取而代之的是，Flex应用此样式到此类型的所有类及其子类。
下面的例子显示了Button控件的类型选择器:
<mx:Style>
 Button{
 Color:#6666CC
}
</mx:Style>
<mx:Canvas>
 <mx:Button label=”This text is dark blue”/>
</mx:Canvas>

在上面的例子中，Flex为当前文档中的所有Button控件应用此颜色样式，同是也为其子文档中的Button控件应用此颜色样式。除此，Flex也应用颜色样式到Button的所有子类。
你可用逗号分隔组件的形式为多个组件定义相同的样式声名。下面的例子为所的Button控件，TextInput组件定义了样式信息。
<mx:Style>
 Button,TextInput,Label{
 FontStyle:italic;
}
</mx:Style>
你可以使用多个相同名称的类型选择器在不同的级别层次中设定不同的样式属性。在一个外部CSS文件中，你可以让所有Label组件的字体使用蓝色字体，如下所示：
Label{
 Color:Blue;
}
然而，在本地的样式声名中，你可以让所有的Label使用10磅大小的文字，如下所示：
<mx:Style>
 Label{
 FontSize:10pt;
}
</mx:Style>
本地的样式声名不妨碍使用外部样式声名。Flex仅使用你指定的样式属性。这个例子的结果是：当前文档的Label控件使用蓝色字体并且字体大小为10磅。
在一个应用程序中整个文档共享所有的样式，并且同时载入相同的应用。例如，在TabNavigator容器中载入两个独立的SWF文件，但是这两个SWF文件共享外部样式定义。