Flex从入门到精通 第10章.ppt

1、第10章 使用样式（Styles）和主题（Themes）,每一个客户的界面设计都有自己独特的样式和突出的主题。Flex作为在RIA领域领先的技术，它在界面外观设计上有着独到的优势。在Flex中，用户可以通过样式和主题来进行外观的设计。本章将详细讲解Flex中样式和主题的应用。,10.1 样式概观,样式用来定义应用程序的外观。在Flex中，通过定义样式属性来改变组件的外观。例如，改变标签上文本的字体大小，数据表格的背景等。在Flex中，一些样式是从父类的容器中继承过来的。用户只要一次性定义一个样式，就可以使所有的控件具有相同的样式。,10.1.1 Flex使用样式的方法,在Flex中有很多方法来

2、使用样式，一些方法通过细致的方法，可以程序化的实现。一个不是很易于使用，但需要较少的计算。在使用样式时，必须要知道当前的主题是否支持此样式。 1MXML使用CSS 2ActionScript使用CSS,10.1.2 样式的继承特性,大多数文本和色彩样式（如fontSize和color）是从父类容器继承来的。当父类使用一个可以继承的样式，所有的子类都继承此样式属性的值。例如，定义一个面板容器的背景色彩为蓝色，那么在此面板上所有的按钮的颜色都是蓝色，除非重写color的值。但是，有一些样式是不能被继承的。 通过使用全局样式，可以将非继承的样式应用到所有的控件。Flex提供了以下方法来应用全局样式。

3、 StyleManager类的global样式。 CSS global选项。可以在外部的CSS文件中定义，也可以在标签中定义。,10.2 MXML使用样式表单,在MXML中使用样式表单就是使用标签来实现的。,10.2.1 使用外部的样式表单文件,Flex支持外部的CSS样式表单。CSS样式表单文件定义整个应用文件的样式，即样式表单文件定义全局的样式属性应用在所有的控件上。要在当前的文件和其子文件中设定CSS样式，就使用标签中的source属性。代码如下所示。 ,10.2.2 使用本地的样式定义,本地样式定义使用标签，语法如下： 选择器名称 样式属性：数值; . ,10.2.3 使用组件标签内部

4、属性样式,编程者可以在MXML标签中，类似于定义属性一样来定义样式属性。标签内定义的样式最具有优先权。这些属性只能应用在控件的实体上。因为这样非方法不需要调用ActionScript代码块和方法，因此这也是最有效的方法使用实体属性。使用在标签内部定义样式的方法定义按钮上的字体大小为25，颜色为9933FF。,10.3 在ActionScript中使用样式表单,在ActionScript中使用样式表单简单的说就是使用ActionScript有关定义样式的类中的方法来实现。,10.3.1 使用StyleManager类,使用StyleManager类可以在ActionScript代码中使用类选择器

5、和类型选择器，也可以全局的使用可继承和不可继承的属性。使用StyleManager的语法如下所示。 mx.styles.StyleManager.getStyleDeclaration(style_name).setStyle(property, value); 其中style_name可以是global，类型选择器名称，类选择器名称。下面的示例10-7中，首先定义了一个类选择器的样式，代码如下所示。 .myStyle color: red; ,10.3.2 使用CSSStyleDeclaration类,可以在ActionScript中使用CSSStyleDeclaration类来建立CSS样

6、式声明。其结果是可以在运行时间建立和编辑样式文本并且在Flex程序中应用。使用setStyle()方法在运行时间改变样式。 可以使用clearStyleDeclaration()方法来去掉CSSStyleDeclaration的对象，代码如下所示。 StyleManager.clearStyleDeclaration(.myButtonStyle, true);,10.3.3 使用getStyle()和setStyle()方法,类似于其他组件上的属性，样式属性也不能直接从组件上获得信息。可以在ActionScript代码中，在运行时间使用getStyle()和setStyle()方法来设定样式

7、属性。由于使用setStyle()的方法是耗费资源，因此要尽量使用使用样式表单文件，而只在运行时间使用此方法。 1设定样式 2setStyle()方法的性能提升,10.3.4 在运行时使用样式表单,在运行时，可以使用StyleManager来加载样式表单。此样式表单由Flex应用程序中动态加载的SWF文件中获得。通过动态加载样式表单，可以加载图像、字体、类型和类选择器和自定义的外观。通过以下三个步骤在运行时间加载样式表单。 （1）为当前的应用程序书写一个CSS文件。 （2）将其编译为SWF文件。 （3）使用StyleManager.loadStyleDeclarations()方法加载此SWF

8、文件到当前应用程序中。,10.4 样式值的格式,样式属性的值有很多种。他们可以是字符串、数字，也可以是字符串或数字的数组。根据这些值的格式，可以分为以下几种类型：长度（Length）、时间（Time）和颜色（Color）。还有一些属性的数值格式是布尔数（true或者false）。这一节详细讲解这些数值格式。,10.4.1 长度（Length）格式,长度格式是所有使用大小数值的样式属性。例如，字体的大小（fontSize）长度是数字类型。长度类型的语法如下所示。 +|-lengthlength_unit 其中，length设定了属性的绝对数值，length_unit定义一个单位（unit），+|

9、-定义数值的正负。下面的代码定义了样式设定font-size属性为20像素。 .b1 fontSize: 20px; ,10.4.2 时间（Time）格式,在组件属性移动或是有built-in效果时使用时间格式，如当下拉列表组件下拉并弹出列表。Time格式是数字类型，其默认单位为毫秒。在定义Time格式时，用户不需要定义其单位。下面的代码定义了Tree控件上的selectionDuration样式属性为1000毫秒。 Tree.setStyle(selectionDuration, 1000);,10.4.3 颜色（Color）格式,Flex中可以有几种方法定义颜色格式。大多数格式只能应用在C

10、SS样式定义中。 颜色格式是连续的数字，当定义为VGA色彩名称时，Flex会将字符串转化为数字。CSS文件定义和使用标签都支持下面代码中的颜色格式。,10.4.4 使用数组定义样式属性,一些控件可以定义一组颜色值，如数据表格中交替的颜色背景。下面的代码定义一组应用在树结构上的颜色值。 Tree depthColors: #FFCC33, #FFCC99, #CC9900; alternatingItemColors: red, green; ,10.5 使用Cascading Style Sheets（CSS）样式表单文件,Cascading Style Sheets（CSS）样式表单文件是H

11、TML文件和其他多数脚本语言用于描述文本属性的标准方法。样式表单文件是组件所使用格式规则的一个集合。Flex支持CSS语法，并应用其样式使用到Flex组件上。,10.5.1 CSS概述,在CSS语法中，每一个声名都包括了一个样式的名称（也被称为选择器selector）和一个或多个样式属性和它们的值。选择器通常可以分为类选择器（Class selector），类型选择器（Type selector），应用（Application selector）选择器和全局（Global selector）选择器。 类选择器（Class selector）首先定义一个样式类，然后应用到组件上。类型选择器（Ty

12、pe selector）是隐含的应用到它所特定的类型的组件上。应用（Application selector）选择器是在程序最上层定义的样式。全局（Global selector）选择器定义在所有的控件上应用样式。,10.5.2 属性和选择器（selector）名称,当使用样式属性时，最好是使用驼峰格式（camel-case），例如fontWeight和fontFamily。不过在CSS文件和setStyle()方法中，Flex支持驼峰格式和连字符语法。下面代码所示都是合法的。 Button fontSize: 14 Button font-size: 14 StyleManager.getS

13、tyleDeclaration(Button).setStyle(fontSize, 14); StyleManager.getStyleDeclaration(Button).setStyle(font-size, 14);,10.5.3 CSS中的继承,一些样式属性是继承的，如果在父类容器中设定一个可继承的样式属性，它的子类就会继承此样式属性。例如，在面板容器中定义了fontFamily，那么在面板容器中所有的子类的字体都为被定义的字体，除非重写这个属性。如果在面板容器中设定一个非继承的社会学，例如textDecoration，那么子类的组件就不应用此属性。通常来说，颜色和字体是可继承的，

14、其他的属性是不能继承的。不过对于继承属性有以下的例外： 如果在CSS样式表单定义中使用全局选择器，Flex在使用的控件上应用这些属性。 设定的类型选择器的值，应用在目标类和他的子类上。例如，应用所有的容器类型选择器的样式，都可以应用在盒子（Box）容器上。,10.5.4 Flex中CSS,在Flex中，CSS支持和CSS样式表单定义有如下的差异。 Flex支持CSS样式表单中样式属性的子集。Flex控件也具有在CSS样式表单中没有定义的，独一无二的样式属性。 Flex控件支持当前主题定义的样式。如果一个主题不支持某个样式，控件应用此样式则不显示效果。例如默认的主题是Halo Aeon，不支持s

15、ymbolColor和symbolBackgroundColor。 Flex样式可以使用嵌入关键词来定义控件外表。,10.5.5 类选择器（Class selector）,类选择器定义了一组可以应用在任何组件上的样式。首先定义一个样式类，然后使用MXML标签中的syleName属性来指向定义好的样式类。所有的Flex的UIComponne子类的组件都支持styleName属性。下面的代码定义了一个新的样式类myFontStyle，并且通过赋值到按钮的styleName属性，将它应用到按钮控件上。 .myFontStyle color: #ff9900; textRollOverColor: #

16、ff99cc; fontFamily: Monaco; fontSize: 25; fontWeight: bold; ,10.5.6 类型选择器（Type selector）,类型选择器赋值给某个类型的所有的控件一个特定的样式。当定义一个类型选择器，不需要明显的应用样式，Flex应用此样式在这一类型的所有类上。 下面的代码显示了按钮控件上的类型选择器，在代码中Flex使用了color类型到当前程序中所有的按钮控件上。 Button color: #6666CC; / Dark blue ,10.5.7 使用混合的选择器,编程者也可以将类选择器和类型选择器混合起来，建立一个组件基于混合的样式声

17、明。在示例10-15中，在类选择器中定义颜色，代码如下所示： .myLable color: Blue; ,10.5.8 选择器的优先权,类选择器比类型选择器优先。在下面的示例10-16中，首先定义了一个类选择器，并设定其颜色为红色，并将其定义在第一个按钮上，代码如下所示。 .myclass color: Red; ,10.5.9 所支持的CSS属性,Flex支持以下的CSS样式表单属性的子集。 color fontFamily fontSize fontStyle fontWeight paddingBottom paddingLeft paddingRight paddingTop tex

18、tAlign textDecoration textIndent Flex也支持有CSS语法和继承的法则定义的属性。但这些属性不属于CSS属性库。,10.5.10 在样式中嵌入数据源,编程者可以在标签中嵌入数据源。这对定义backgroundImage这一类的属性非常有帮助。这样就可以轻松的应用图形文件。就嵌入了一个图形文件到样式的背景中，代码如下所示： .style1 backgroundImage: Embed(assets/background.jpg); ,10.6 样式的继承,如果在文件中只定义一个样式，Flex就使用它来定义样式。然而，一个应用程序中可以有多个样式文件，本地样式定义

19、，外部样式社会学和组件实体上定义的样式属性。在这种情况下，Flex就需要决定它们的优先权来确定属性值。通常低级的样式比高级的样式有更高的优先权。例如在一个实体中定义一个样式，然后设定了全局的样式，那么这个全局的样式不能重写本地定义的样式。,10.6.1 样式继承顺序,理解Flex的样式顺序对于在控件上应用样式是非常重要的。Flex首先寻找在组件实体的标签内部定义的样式。如果没有，Flex 检查实体是否使用setStyle()方法。如果没有，Flex检查实体的styleName属性是否被赋值。如果没有，Flex继续检查类型选择器定义的样式；如果没有定义类型选择器，Flex此实体父类容器上定义的属

20、性。如果父类容器没有定义，Flex就进而检查父类的父类，如果父类定义的属性不能被继承，Flex就忽略父类容器的样式设定。样式属性的优先权顺序，从第一到最后排序，如下所示。 标签内部定义(Inline) 类选择器(Class selector) 类型选择器（Type selectors) 父类容器 (可继承的样式) 全局选择器（Global selector）,10.6.2 继承异议（exceptions）,不是所有的样式都能继承，也不是所有的组件和主题能支持所有的样式。一般来说，颜色和文本样式是可以被继承的。其他样式不能被继承除非符合下列的条件。 必须是主题支持的样式。 样式是可继承的。可以使

21、用StyleManager类的静态的isInheritingStyle()方法或isInheritingTextFormatStyle()方法来确定此样式是否可以继承。 必须是控件支持的样式。 是由控件的父类容器或容器的父类设定的样式。 样式不被低层的定义重写。,10.6.3 支持的样式,所有主题支持继承和非继承的文本样式，但不是所有的主题支持所有的样式。如果要设定一个控件上的样式属性，但当前的主题不支持次样式，Flex则不显示此样式。,10.6.4 主题色彩属性,在默认的Halo主题中的多数的组件都支持themeColor属性。编程者可以在Application标签中设定此属性，然后这个颜色会应用在组件上，例如按钮的外边，折叠导航容器的上边，集合ToolTip的背景。例如对银色和蓝色来说，合法的themeColor有：haloOrange、haloBlue、haloSilver、haloGreen。默认的值为haloBlue。下面的示例定义了themeColor的值为haloOran