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

本文档翻译自Flex 英文开发指南,下面是第一节的内容!!!!

 

Flex 中使用样式和主题

一、           关于样式

 

你可以通过样式属性来修改 Flex 组件的外观，这此属性可以定义一个 Label 控件的字体大小，或者是 Tree 控件的背景颜色。在 Flex 中，一些样式属性是从父容器继承到子控件的，如样式类型和类。这意味着你只需定义一次样式，然后你可以将此样式应用到单个控件和列表控件，此外，你还可以在本地覆盖每个控件的单独样式属性。组件级别和全局级别的样式将给你控制应用程序的外观以很大的灵活性。

本节向你介绍将样式应用到控件，也介绍了 CSS （层叠样式）的基础知识，样式属性值的基本格式（ Length,Color ,Time ）以及样式的继承。本节的子节介绍了在 Flex 中，应用样式的不同方法。

Flex 不提供使用 CSS 控制组件布局的所有属性方面，像 x,y,width 和 height 是 UIComponent 的属性，所以不能用 CSS 来定义。其他属性，比如 left,right,top 和 bottom 是样式属性，通常用来在容器中操作组织件的定位。

 

一、            在 Flex 中使用样式

 

在 Flex 中有使用样式的很多方法。一些提供了更细粒度和可编程的控制，另外一些不是很灵活，但是可运算量很小。在 Flex 中将样式应用到控件有几种方法。

当应用样式的时候，你必须留心你的主题支持哪些属性。 Flex 中的并不支持所有的样式属性。更多的信息，请查看“关于支持的样式”

二、            外部样式表

使用 CSS 应用样式到文档或者整个应用程序。你可以不调用 ActionScript 程序指定一个样式表。这是应用样式的最简单方法，但是这不是最灵活的方法。样式表可以定义被所有控件继承的全局样式 , 也可以定义应用到某一控件的单独样式类。

下面的例子 , 在当前的文档应用了一个外部样式表 myStyle.css.

<mx:Style source=”myStyle.css”/>

更多关于应用外部样式表的信息，请参看 ” 应用外部样式表 ”P617

Flex 在 framework.swc 文件中包括了一个全局样式表 (default.css) 。这个文件包含全局样式类选择器的定义，以及大多数 Flex 组件的类型选择器。关于 default.css 更多信息 , 请参看“关于默认样式表部分”（ P618 ）

Flex 还包括一些其他的样式表，他们有统一的外观。更多信息，参看 ” 关于包括主题文件 ”P631

 

三、            本地样式定义

使用 <mx:Style> 标签定义应用到当前文档和其子组件的样式，你使在 <mx:Style> 标签中应用 CSS 语法定义样式，此样式可以应用到某个控件和单独的控件的实便。下面的例子定义了一个新的样式并且将它应用到 myButton 控件。

<mx:Style>

       .myFontStyle { fontSize:15}

</mx:Style>

<mx:Button id=”myButton” styleName=”myFontStyle” label=”Click Here”/>

下面的例子定义了一个新的样式并且应用到一个按钮控件上。

更多的关于使用本地样式定的信息，请参看 ” 使用本地样式定义 ”p619

 

四 样式管理器类(StyleManager )

使用样式管理器类（ StyleManager ）应用样式到所有的类，或者应用到所有的指定类的实例。下面的例子设定了所有的 TextArea 控件的字体大小（ fongSize ）为 15 像素。

StyleManager.getStyleDeclaration(“TextArea”).setStyle(“fongSize”,15);

你也可以使用 CSSStyleDeclaration 对象去构建一个运行时样式表，并且使用 StyleManager 类的 setStyleDeclaration() 方法运用这些样式 .

使用 StyleManager 类的更多信息，请参考 ” 运用样式管理器类 (StyleManager)”.

 

getStyle() 和 setStyle() 方法的使用

使用 setStyle() 和 getStyle() 方法操作控件实例的样式属性。使用这些方法运用样式比使用样式表需要客户端大量的处理资源，但是担供了更细粒度的应用。

 

下面的例子设定了 Button 控件的实例 myButton 的字体大小为 15 像素 .

myButton.setStyle(“fontSize”,15);

关于 getStyle() 和 setStyle() 方法的更多信息，请参看 ” 使用 getStyle() 和 setStyle() 方法节 ”p623

 

五 内联样式

使用 MXML 标签应用样式属性。这些属性仅被除应用到控件的实例。这是应用实例属性的最简便的方法，因为没有 ActionScript 代码块和方法调用。

下面的例子设定了 Button 控件的实例 myButton 的字体大小为 15 像素

<:Button id="myButton" fontSize="15" label="My Button"/>

 

在一个 MXML 标签里，你必须使用样式属性名称的驼峰表示法。例如，前一个例子，你必须写成“ fongSize” 而不是“ font-size(CSS 方式 ). 更多的样式属性名，请参考“关于属性和选择器名称节” p607.

你可以给内联样式属性绑定值。

关于内联样式的更多信息，请参看 ” 使用内联样式 ”.

 

六 设定全局样式

大多数文本和颜色样式，比如 fontSize 和 color 属性，是可继承的。当你应用一个可继承的样式到一个容器，此容器的所有子组件会继承此样式属性的值。如果你设定一个面板（ Panel ）容器的颜色（ color ）属性为绿色（ green ） , 所有在此容器中的按钮都将是绿色，除非这些按钮覆盖了颜色（ color ）属性。

然后一些样式并不是可继承的。如果你应用这些样式属性到父容器，那么只有父容器应用了此样式，此容器的子控件没有使用此不可继承的样式属性的值。

运用全局样式，你可以应用不可继承的样式到所有的控件而不需要显示的覆盖此样式。 Flex 提供以下方法应用全局样式：

A． StyleManager 样式管理器全局样式

B． CSS 全局选择器。

样式管理器让你将全局样式应用到所有的控件。更多的关于应用样式管理器的信息，请参考“使用样式管理器类 StyleManager ”

在你的 CSS 样式定义中应用 global 选择器应用全局样式，这些可以在外部的样式表中定义也可在 <mx:Style> 标签中定义。更多信息，参看“使用全局选项择器（ global ）”