Flex学习笔记

Flex是一个安装在客户端的表现层的服务器；是一个富用户界面组件库；是一个类XML基础的标记语言，用来布局组件；是使用ActionScript这种OOP（面向对象程序设计）语言用于用户界面和应用程序的一个框架。
类的名称使用大写字母开头。属性名称起始于一个小写字母，并且在分离的单词的头一个字母使用大写字母。
Flex建议将属性值为简单的标量值的属性定义在标签内，将属性值为复杂的类型如ActionScript对象的属性定义为子标签。
使用约束布局的子类组件必须放置在绝对值布局的容器中。在Flex中，应用容器、面板容器及画布容器可使用绝对值布局。
有三类容器支持绝对值定位。
①、应用容器(Application)和面板(Panel)容器：在定义layout属性为absolute时，支持自动定位。
②、画布容器(Canvas)：支持绝对值定位。
大多数容器，如盒子(Box)、格栅(Grid)、格（Form）、都使用自动定位。当容器使用自动定位时，定义x、y值不会产生影响。
■绝对值定位的容器（画布、应用容器、面板）没有定位规则，子类组件直接放入容器中，必须给出子类组件的x、y坐标的像素值。

■如果约束定位定义了组件的位置和大小，其值就会覆盖由绝对值定义的位置的大小。例如，定义了左边距(left)后，组件的位置、大小就不能再由宽度(width)或者百分比宽度(percentWidth)来定义。

■标签条控件<mx:TabBar>应用类似于标签导航(TabNavigator)容器，但标签条按钮不能放置子类。标签导航容器使用标签来打开和关闭子容器。标签条控件可用来设置单个容器的可视性。

■菜单控件只能在ActionScript代码中定义。它通过用户的行为触发，弹出菜单项。它不具有MXML标签。

菜单控件一般情况下处于不可视状态，要通过用户行为的触发，弹出菜单项，才处于可视状态。菜单条控件<mx:MenuBar>和菜单控件一样，都是从数据源中获得数据，也支持相同的事件。但与菜单控件不同的是，菜单条总保持可视状态，它是一个静态的控件，因此菜单条可以在MXML中实现。

■弹出菜单按钮控件<mx:PopUpMenuButton>只支持单级的菜单，因此当选择了菜单中的子菜单后，住按钮上的标签或图标不会改变。

■Flex语言提供了多样化的容器，其中最基本的容器是应用(Application)容器。它类似于Java中Swing的Frame，可以容纳所有其他的容器。

除画布(Canvas)之外，Flex所有的容器都支持自动布局。画布容器、应用容器和面板(Panel)容器都支持精确布局。此时，编程者需给出子类的绝对定位值或相对定位值。精确布局可使编程者控制某个容器的大小和定位，利用这类容器还可以设计出组件重叠的效果。

Flex容器按其使用方式又可分为两类：布局(Layout)和导航(Navigator)。导航容器用于控制用户对多个子类容器的导航、转移。导航容器只定义子类容器的顺序，不定义子类容器的布局和定位。导航容器中的子类必须是容器，而不是控件、组件。导航容器包括：视窗堆栈导航容器(ViewStack Navigator Container)、列表导航容器(TabNavigator)、折叠导航容器(Accordion Navigator Container)。不论是布局容器还是导航容器，它们都基于最基本的容器——应用容器(Application)。

视窗堆栈导航容器(ViewStack Navigator Container)可以使用selectedChild属性激活子类容器，此属性是定义子类容器的ID，如果没有容器被选择，其值为null。此属性只能在ActionScript中被定义，而不能在MXML中定义。

列表导航容器(TabNavigator)是视窗堆栈导航容器的子类，它继承了视窗堆栈导航容器的多数功能。

画布布局容器<mx:Canvas>可以使用绝对值定位和约束版面布局两种不同的定位方式和画布子类可重叠的特性。

可以用两种方法定义垂直或水平的盒子：一种是使用<mx:VBox>、<mx:HBox>标签；另一种是使用<mx:Box>标签，但设定其direction属性值为垂直或水平。

在MXML中，使用<mx:TitleWindow>标签定义标题窗口布局容器。标题窗口可以在浏览器中被拖动，其窗口的典型用法是显示一个表格，以供用户填写信息。

使用约束版面，必须定义容器的layout属性是绝对的，即layout=“absolute"。这一属性的定义给出了改变定位和改变大小的可行性，并提供了当容器改变大小时，移动和缩放组件的能力。在使用约束版面时，所有相对的边宽度是容器相对于容器，而不能被设定为相对于其它控件。

Flex通过两个类——一个工厂类和一个实体类(Factory and Instance Classes)实现行为效果控制。

             ※工厂类：建立一个实体类的对象来表现效果。

             ※实体类：用来实现效果逻辑。

首先定义工厂类的行为效果，然后为使用行为效果的目标控件赋值。示例代码如下：

    <!-- 定义工厂类 -->

    <mx:WipeDown id="wipeOut" duration="1000"/>
    <mx:WipeDown id="wipeIn" duration="1000"/>
    <!-- 给效果目标控件赋予工厂类 -->

    <mx:Image source="@Embed(source='assets/Nokia_6630.png')"
            visible="{cb1.selected}"
            hideEffect="{wipeOut}" showEffect="{wipeIn}"/>

当效果完成，Flex销毁实体对象。如果效果有多个目标控件，工厂类就建立多个实体对象，每个目标一个。

工厂类与实体类有相对应的关系。在使用一个行为效果时，就执行了下面的步骤。

（1）建立一个工厂类对象。

（2）定义这个工厂类对象。

当Flex显示一个效果时，就执行了下面的行为：

（1）给每一个行为效果的目标组件建立一个实体类的对象。

（2）复制工厂对象的定义信息到实体对象。

（3）使用实体对象在目标上显示效果。

（4）当效果完成时，删除实体对象。

如果使用了Glow发光效果，则不能在同一个组件上使用GlowFilter或第二个发光效果。

     移动效果（Move）一般应用在目标组件使用绝对位置的容器中，例如画布(Canvas)。

如果使用的容器是自动布局，如VBox和Grid，它也可以产生移动的效果，但下一次容器改变升级布局时，目标组件会回到初始的位置。可以通过设定该类容器的autoLayout属性为false来使组件不能移动回初始位置。

一些行为控制融合、褪色和旋转只能对嵌入的文本产生作用。如果在带有系统字体的控件上使用这些效果，文本不会发生任何改变。

在标签中必须使用驼峰格式camel-case版本来定义样式属性。camel-case是一种命名方式，除了第一个单词以外的其他单词的首字母都是大写，其他所有字符都是小写。例如必须使用fontSize，而不是font-size（在CSS文件中使用）。

当使用样式属性时，最好使用驼峰格式(camel-case)，例如fontWeight和fontFamily。不过在CSS文件和setStyle方法中，Flex支持驼峰格式和连字符语法。

在MXML标签中，不能使用连字符样式属性名称，因此必须使用驼峰格式。另外，在CSS文件中样式名称不能使用连字符名称。下面的代码定义了样式名称。

.myClass{...}/*合法的样式名称*/

.my-class{...}/*非法的样式名称*/

在运行时，可以使用StyleManager来加载样式表单（此样式表单是从Flex应用程序中动态加载的SWF文件中获得）。通过动态加载样式表单，可以加载图像、字体、类型和类选择器及自定义的外观。在运行时加载样式表单的步骤如下：

（1）为当前的应用程序书写一个CSS文件。

（2）将其编译为SWF文件。

（3）使用StyleManager.loadStyleDeclarations()方法加载此SWF文件到当前应用程序中。

在运行时加载的样式表单不能代替编译时的样式，只是重写。编程者可以加载多个样式表单。

■类选择器比类型选择器优先.类型选择器应用在某个特定的类时,它的子类和子组件也同样应用此样式。例如定义VBox控件的颜色属性为蓝色。代码如下：

<mx:Style>

    VBox{

             color:blue

             }

</mx:Style>

则它里面包含的子类组件上的颜色也为蓝色。

■如果在文件中只定义了一个样式，Flex就使用它来定义样式。然而，一个应用程序中可以有多个样式文件、本地样式定义、外部样式定义和组件实体上定义的样式属性。在这种情况下，Flex就需要决定它们的优先权来确定属性值。Flex首先寻找在组件实体的标签内部定义的样式；如果没有，Flex检查实体是否使用setStyle()方法；如果没有，Flex检查实体的StyleName属性是否被赋值；如果没有，Flex继续检查类型选择器定义的样式；如果没有定义类型选择器，Flex则检查实体父类容器上定义的属性；如果父类容器没有定义，Flex进而检查父类的父类；如果父类定义的属性不能被继承，Flex就忽略父类容器的样式设定。样式属性的优先权顺序，从第一到最后排序如下：

□   标签内部定义(Inline)

□   类选择器(Class selector)

□    类型选择器(Type selectors)

□   父类容器（可继承的样式）

□   全局选择器(Global selector)

■当Flex组件中包含子组件时，子组件也会继承类型选择器所设定的样式属性。例如，文本条(TextInput)被用作下拉列表(ComboBox)、计数器(NumbericStepper)和富文本编辑器(RichTextEditor)的子组件，同样会映射子组件的样式

■ 每个控件都有自己默认的条目渲染器。在默认情况下，列表控件使用文本条作为条目渲染器。

建立标签内部(drop-in)条目渲染器和选项编辑器就是在标签内定义itemRender或itemEditor属性的值为某些控件。

■在组件嵌套的环境下，如果子类容器定义了工具条提示，将自动显示子类的提示；如果没有定义提示，ToolTipManager就会自动显示父类容器的工具条提示。

使用下列的容器时，该容器将自动使用其子类的工具条提示。如果定义了其子类容器的工具条提示，当鼠标指向容器标签时，将显示定义在子类容器上的工具条提示，但当鼠标指向子类容器时，工具条提示则不显示。

□折叠导航容器(Accordion)

□标签导航容器(TabNavigator)

□按钮条(ButtonBar)

□链接按钮条(LinkBar)

□列表条(TabBar)

□切换按钮条(ToggleButtonBar)

在使用重复控件时，需要注意以下几点：

□ 不能使用重复控件循环一个二维的数组对象

□ 在运行时改变重复组件的数据源数组，不会对重复组件产生影响。可以使用集合(collection)来定义数据源

□ 在使用重复控件时，定义其数据源时不要忘记“{}”标识

□ 如果使用相邻或嵌套的重复控件，可能需要在Repeater标签之后定义一个虚设的UIComponent控件。

■建立一种新的视窗状态，首先应定义一种基本的状态(Base State)，然后在此基础上定义一组变化或重写来定义新的状态。每种新的视窗状态都是在基本视窗的基础上增加或减少子类组件。不过，新的视窗不是一定要在基本视窗的基础上进行修改，它可以基于任何其他的视窗状态来改变。

在ActionScript代码中建立新的视窗状态时，有以下几个步骤：

（1）输入mx.states类包。

（2）声明一个State变量

（3）建立一个函数来完成以下工作：

①建立新的State对象实体。

②给State变量赋值

③设定状态名称

④为重写类对象声明变量，并将它们赋值给新的类的实体。

⑤定义重写对象的属性

⑥增加重写实体到State对象overrides数组

⑦增加状态到states数组

（4）在程序初始化时调用此函数。

■过渡(Transition)就是一个或多个行为效果的组合，用于定义如何改变视窗状态（States）。Flex使用行为效果定义过渡行为。当改变视窗状态时，Flex在同一时间显示应用程序外观改变。

当应用程序改变视窗状态时，Flex寻找符合当前和目标视窗状态的Transition对象。如果Transition中定义的fromState和toState属性均为“*”（默认情况），则所有视窗状态的改变都符合该Transition对象过渡行为的定义。可以在过渡中使用target和targets属性来定义复杂的效果目标。

■和所有的效果行为一样，过渡也需要定义目标组件的起始和终止的信息，例如移动效果的xFrom、yFrom、xTo和yTo属性。Flex使用下面的规则来确定行为效果起始和终止值：

□   如果效果明确定义地定义了起始、终止属性值，就在过渡中使用这些值。

□ 如果效果没有定义起始值，Flex使用当前视窗的值。

□ 如果效果没有定义终止值，Flex使用目标视窗的值。

□ 如果没有明确的定义，Flex也不能从当前和目标视窗状态中得到值，则效果使用默认的属性值。