FLEX4 设置全局样式 的方法

参考：

①

Using the Flex 4 StyleManager: Getting Style Declarations

December 6

As you may know, in Flex 4 you no longer call the StyleManager class as a singleton (StyleManager.getStyleManager()). Instead, StyleManager implements IStyleManager2 and you can get a reference to the styleManager directly, like this:

var styleManager:IStyleManager2 = FlexGlobals.topLevelApplication.styleManager;

A new gotcha I ran across today, while converting a Flex 3 project to Flex 4, was the way style declarations are referenced. Take my current issue as an example:

var styleSheet:CSSStyleDeclaration=FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("DragManager");

I worked for a while to understand why the stylesheet variable was null, every time. Then I decided to actually inspect the selectors attribute of the stylemanager and realized that the reference to the selectors has now changed! The reference must now include the full package of the class. This makes a lot more sense, considering that Spark added a whole set of new classes with the same name. Now I changed my code to the following:

var styleSheet:CSSStyleDeclaration=FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("mx.managers.DragManager");

Perfect! Now my style delcaration was being set as I expected. I hope this tip helps you.

 

 

②

Submitted by jrowny on Fri, 03/05/2010 - 11:08

I haven't seen this well documented before, but if you're component was using the style manager and is throwing a bunch of warnings in Flex 4, you need to get the "global" style manager now. You probably see this error:
"3608: 'getStyleDeclaration' has been deprecated since 4.0. Please use 'IStyleManager2.getStyleDeclaration on a style manager instance'."

This is really easy to fix, but not extremely well documented. StyleManager is no longer a global singleton, but there is an instance of it running already at the top of your app. Flex 4 has a new static class called FlexGlobals. You can use that to get a reference to the top of your app and then get the instantiated one.

?

1

2

3

4

//Flex 3 code

StyleManager.getStyleDeclaration("someStyle");

//Flex 4 code

FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("someStyle");

 

 

 

③

Flex4中的StyleManager怎么用？
在Flex3.0中改变样式方法:

StyleManager.getStyleDeclaration('Button').setStyle('fontSize',24);

在Flex4.0中报出警告:
"3608: ewZ文_'getStyleDeclaration' has been deprecated since 4.0.  Please use 'IStyleManager2.getStyleDeclaration on a style manager instance'."

正确的方法为:

var cssDeclaration:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration(‘global’);cssDeclaration.setStyle(‘themeColor’, ‘0x’+gradient_to);

其中"global"是你的CSS选择器的名称，可以是常用的类型选择器如 Button { color: #FF0000 }，也可以是以"."开头的类选择器，如".redButton { color: #FF0000 }"。
CSSStyleDeclaration 类表示一组 CSS 样式规则。
可使用 FlexGlobals.topLevelApplication.styleManager.getStyle()、setStyle() 和 clearStyle() 方法获取、设置和清除 CSSStyleDeclaration 上的样式属性。
还可以使用 FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration() 方法在运行时创建和安装 CSSStyleDeclaration。

完整示例：

  var newStyleDeclaration:CSSStyleDeclaration = new CSSStyleDeclaration(".bigMargins");  newStyleDeclaration.defaultFactory = function():void  {      leftMargin = 50;      rightMargin = 50;  }  FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration(".bigMargins", newStyleDeclaration, true);

还有，使用类型选择器时要记得把namespace写完整，如spark.components.Button或者mx.controls.Button，否则编译器不知道你到底要调用哪个Button,容易报出空指针。

④

2012-07-27 10:44

Flex 全局样式表

<fx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
  @namespace ui "com.ui.*";
  global {    
   fontSize:14; 
   fontFamily: 宋体,Arial, Helvetica;  
   color: Red;
   text-align: left;  
  }

 </fx:Style>

 

设置之后 项目里的 所有组件 的字体 颜色 等 都会按这个样式定义外观

 

 

结果：

想要设置所有TitleWindow的边框颜色 只需要在项目启动时调用一次一下代码就可以了：

mx.containers.TitleWindow  要写带包名的全名。

 

 

var cssDeclaration:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("mx.containers.TitleWindow");
 //   cssDeclaration.setStyle("borderColor","#8878DD");
    cssDeclaration.setStyle("borderAlpha","7");

 

 

附录：

 

Flex 设置样式的各种方法：

设置Flex样式方法集锦

http://developer.51cto.com/art/201008/215929.htm

 

探索 Flex 和 CSS 的强大功能

http://www.ibm.com/developerworks/cn/web/wa-cssflex/