初学Flex

一、 RIA

RIA 是 Rich Internet Applications 的缩写，翻译为丰富互联网应用程序。 RIA 的目标是将桌面程序的表现力与浏览器的程序的方便、快捷结合在一起。开发者可以在浏览器程序上部署 C/S 客户端的程序，得到比传统 HTML 更强大的表现力。

RIA 最突出的特点为 “Rich” ，同时 RIA 最核心的部分也体现在 “Rich” 中。 “Rich” 包含了两层含义：

1 ．丰富的数据模型

RIA 技术提供了多种数据模型来处理客户端复杂的数据操作。使用 RIA 可以将部分原本需要在后台程序处理的问题转移到客户端，使数据能够被缓存在客户端，从而可以实现一个比基于 HTML 的响应速度更快，且数据往返于服务器的次数更少的用户界面。

2 ．丰富的界面元素

RIA 技术提供了比 HTML 更为丰富的界面表现元素，密集、响应速度快和图形丰富的页面元素与数据模型结合在一起，为用户提供好的使用体验。

二、 Flex

2004 年初， RIA 技术的主要倡导者 Macromedia 发布了 Flex 。

Flex 是为满足希望开发 RIA 的企业级程序员的需求而推出的表示层服务器和应用程序框架，它可以运行于 J2EE 和 .NET 平台。

Flex 具有桌面应用程序的响应性与丰富性，又具有 Web 传播范围广的的特性。接下来首先介绍一下 Flex 的基本架构。

Flex 的基本架构包括 4 部分

1 ． Adobe SDK

2 ． Adobe Flex Charting

3 ． Adobe Flex Data Services

4 ． Adobe Flex Builder

三、 MXML

1. MXML 是 Flex 应用程序用于进行用户界面组件布局的语言。用户可以通过 MXML 来显式地定义应用程序的非可视方面，例如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。 MXML 是由 Flex 引入的，用来描述 Flex 应用程序界面的语言。本节简要地介绍什么是 MXML 和 MXML 的标准。 MXML 基于 XML ，是用来描述用户界面的语言。 MXML 遵循 W 3C XML 标准，所以也可以把 MXML 看作普通的 XML 文件。可以使用任何的文本编辑器编写 MXML 。下面就是一个 MXML 的例子，包含标签、属性、命名控件等。

<?xml version="1.0" encoding="utf-8"?> 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

</mx:Application>

与 HTML 不同， MXML 借助 XML 的规范拥有更强的结构，更少的语法歧义。 MXML 还引入了更丰富的标签集，如： DataGrid 、 Tree 、 TabNavigator 、 Accordion 和 Menu 等。这些都是 Flex 标签集中的一部分。还可以扩展 MXML 标签，创建自己的组件。此外，二者最大的区别是， MXML 定义的用户界面用 Flash 播放器运行，相对传统的基于 HTML 、页面为中心的 Web 应用而言，这将更具吸引力。

2. MXML 遵循 XML 的标准，但对于 XML 中的标签、属性、文件结构等 XML 元素进行了相应的约束和扩展。

 

标签：

MXML 是一种描述 Flex 应用程序构造的 XML 语言。每个 MXML 文件应该以一个 XML 声明开始：

<?xml version="1.0"?>

<?xml version="1.0" encoding="utf-8"?>

和其他 XML 语言一样， MXML 包含元素（标签）和属性，对大小写敏感。但标签名称以大写字母开头，大小写混合，必须有对应的结束标签，如下所示。

<ComboBox> </ComboBox>

也可以这样结束对没有内容的标签，如下所示。

<ComboBox/>

 

属性：

属性以小写字母开头，大小写混合。属性必须包含在引号内。

<ComboBox id="myCombo"/>

除了 click 或 initialize 之类的事件属性外，其他属性都被编译器作为文本字符串处理。如果需要绑定数据或者强迫编译器执行表达式，可以将变量的部分用花括号括起来。

<ComboBox dataProvider="{myArray}"/>

大部分的属性都可以作为子标签。如，

<ComboBox dataProvider="{myArray}"/>

等效代码如下。

<ComboBox>

 <dataProvider>{myArray}</dataProvider>

</ComboBox>

 

文件结构

描述应用程序的 MXML 文件必须有一个位于其他元素之外的 Application 标签，如下所示。

<?xml version="1.0"?> 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <!-- 定义其他界面元素 --> 

</mx:Application>

在上面的代码中 xmlns 属性，声明了 XML 的命名空间。命名空间可以让用户在单个文档中使用多重 XML 语言，而避免混淆不同语言中相同的元素名称。这里的 ":mx" 就是一个在特定命名空间中使用的前缀。这里定义的命名空间是标准的 MXML 类库，它必须包含在每个 MXML 文件中。

 

<mx:Script>

MXML 文件中直接插入 ActionScript 方法时要用到 <mx:Script> 标签，具体语法如下。

     <mx:Script>

              <![CDATA[

                    // 插入 ActionScript

              ]]>

       </mx:Script>

在这个标签里，需要注意的地方有如下几点：

标签要成对出现。不能在标签内定义任何的类或者接口，因为本身当前的 MXML 文件就是一个类， ActionScript 并没有像 Java 一样支持内部类定义。

CDATA 标签主要用来告诉编译器标签内的内容不要被解释成 MXML 语法，而是 ActionScript 。

<mx:Script> 标签必须定义在 MXML 文件根标签的层次，否则会出现编译器错误。

四、 Flex 中使用 MXML

1. 定义界面组件

•          在 MXML 中可以利用标签、属性定义 Flex 提供组件。如： <mx:Button>

2. 自定义组件

3. 数据绑定

Flex 针对用户界面数据的复杂性，提出双向的数据绑定机制：可以将用户界面控件绑定到服务调用的数据结果集上，反过来，也可以将服务的参数与用户界面控件输入的值进行绑定。

4. 使用样式表

MXML 中可以利用 <mx:Style> 标签定义样式或者引入外部的样式表

5. 存储和验证数据

可以使用数据模型来存储特定数据，数据模型是一个可以提供存储数据属性和包含附加方法的 ActionScript 对象。声明一个简单的没有任何方法的数据模型可以使用 <mx:Model> 或 <mx:XML> 标记，还可以使用验证组件验证存储数据的有效性。 Flex 包含了一套标准的数据验证组件，当然也可以创建自己的验证组件。

6. 格式化数据

与验证数据类似，可以使用 Flex 提供的数据格式器对指定的数据进行格式化，在 MXML 中定义相应的格式器即可。

7. 触发事件

Flex 应用程序是基于事件驱动的，每一个组件都有许多不同的事件和其对应，例如 <mx:Button> 有 click 事件等。组件可触发的事件都可以将事件的名称，作为组件标签的属性指定该事件发生的处理方法。例如在按钮的组件标签 <mx:Button> 中定义 click 属性，并为 click 属性指定处理方法，该处理方法可在 <mx:Script> 内利用 ActionScript 定义。