常见Flex样式定义类型

你对Flex样式定义类型是否了解，这里向大家简单描述一下，如果三种Flex样式定义方式同时使用的话，优先级别从高到低依次为：内嵌式Flex样式>本地Flex样式定义(脚本Flex样式定义)>外部Flex样式定义。

Flex样式定义类型

1.外部Flex样式表

 
 
 

  
  
  
<mx:Stylesourcemx:Stylesource='/css/myStyle.css'/> 
 
 
 

Flex会调用全局Flex样式表global.css，该全局Flex样式表由flex-config.xml定义，如：

 
 
 

  
  
  
<global-css-url>/WEB-INF/flex/global.css</global-css-url> 
 
 
 

系统默认的Flex样式表文件global.css文件其实没有任何Flex样式定义，我们可以手动添加全局Flex样式，也可以更改默认的全局Flex样式文件路径。如，把全局Flex样式文件该为：

 
 
 

  
  
  
<global-css-url>/css/styles.css</global-css-url> 
 
 
 

在这里顺便提一点，定义外部css文件的时候，颜色Flex样式有四种定义方式：

1:.myclass{fillColor:#6666CC}//16进制颜色格式

2:.myclass{borderColor:rgb(77%,22%,0%)}//RGB颜色格式

3:.myclass{errorColor:rgb(0,255,0)}//10进制RGB颜色格式

4:.myclass{color:Blue}//VGA颜色名称格式

2.本地Flex样式定义

使用<mx:Style>来定义当前文件的Flex样式
下面的例子定义了myFontStyle子类Flex样式，要使用对应的Flex样式可以在组件中使用styleName属性来应用Flex样式。

 
 
 

  
  
  
1.<mx:Style> 
  
  
  
 
  
  
  
2..myFontStyle{fontSize:15}  
  
  
  
 
  
  
  
3.</mx:Style> 
  
  
  
 
  
  
  
4.<mx:Buttonidmx:Buttonid='myButton'styleName='myFontStyle'label='ClickHere'> 
  
  
  
 
 
 
 

 下面的Flex样式则定义了所有Button组件的Flex样式，使用该方式定义的Flex样式在使用的时候不需要指定Flex样式名。

 
 
 

  
  
  
1.<mx:Style> 
  
  
  
 
  
  
  
2.Button{fontSize:15}  
  
  
  
 
  
  
  
3.</mx:Style> 
  
  
  
 
  
  
  
4.<mx:Buttonidmx:Buttonid='myButton'label='ClickHere'> 
  
  
  
 
 
 
 

 3.内嵌Flex样式定义

对个别需要特殊处理的组件，可以使用下面的方式进行内嵌Flex样式定义

 
 
 

  
  
  
<mx:Buttonidmx:Buttonid='myButton'fontSize='15'color='0x9966CC'label='MyButton'/> 
 
 
 

4.使用脚本Flex样式定义

这种方法使用了Flash传统的AS脚本方式来定义Flex样式，具有更强大的灵活性，并且可以使用StyleManager类以及getStyle()和setStyle()方法，如下所示：

 
 
 

  
  
  
1.<mx:Script> 
  
  
  
 
  
  
  
2.<![CDATA[  
  
  
  
 
  
  
  
3.//使用styleManger类  
  
  
  
 
  
  
  
4.mx.styles.StyleManager.styles.ToolTip.fontWeight='bold';  
  
  
  
 
  
  
  
5.//获取组件Flex样式  
  
  
  
 
  
  
  
6.lb1.text=ip1.getStyle('fontSize');  
  
  
  
 
  
  
  
7.//设置组件Flex样式  
  
  
  
 
  
  
  
8.lb1.text=ip1.setStyle('fontSize',newSize);  
  
  
  
 
  
  
  
9.]]> 
  
  
  
 
  
  
  
10.</mx:Script> 
  
  
  
 
 
 
 

 如果三种Flex样式定义方式同时使用的话，优先级别从高到低依次为：内嵌式Flex样式>本地Flex样式定义(脚本Flex样式定义)>外部Flex样式定义。

【编辑推荐】

1. Flex样式定义类型剖析
2. Flex主题创建及支持的样式设置方式
3. 全面认识Flex应用程序的六大元素
4. 揭开Flex正则表达式的神秘面纱
5. Flex数据绑定及其使用频繁的几种情况