Flex编程模型
- 格式：doc
- 大小：55.00 KB
- 文档页数：5
Flex编程模型Flex包含Flex类库，MXML以及ActionScript程序语言，如下表所示：包含在Flex中，但是却并没有在上图中显示的还有Flex编译以及Flex调试器。
我们使用MXML与ActionScript的组合来编写Flex程序。
MXML和ActionScript程序语言都给了我们访问Flex类库的能力。
使用MXML来定义程序的用户界面元素，使用ActionScript来定义客户逻辑与过程控制。
Flex类库包含Flex组件，管理器与行为。
使用基于组件的Flex开发模型，开发者可以合并预编译的组件，创建新的组件，或者是组合预编译的组件为复合组件。
Flex类库与MXML和ActionScript的关系Flex是作为ActionScript类库来实现的。
这个类库包含组件（容器与控件），管理类，数据服务类以及其他特性的类。
我们使用MXML和ActionScript语言配合类库来开发程序。
MXML标签与ActionScript类或是类的属性相对应。
Flex分析MXML标签，并且编译包含相应ActionScript 对象的SWF文件。
例如，Flex提供了ActionScript Button类来定义Flex按钮控件。
在MXML中，我们可以用下面的MXML语句来创建一个按钮控件：<mx:Button label="Submit"/>当我们使用MXML标签声明了一个控件，我们就创建了那个类的一个实例。
这个MXML语句创建了一个按钮对象，并且初始化这个按钮对象的label属性为Submit字符串。
与ActionScript类相对应的MXML使用与ActionScript类相同的命名约定。
类名以一个大写字母开头，而且在类名中以大写字母分隔单词。
每一个MXML标签属性对应着ActionScript对象的一个属性，适合于对象的一种风格，或者是这个对象的一个事件监听器。
布局我们的程序我们使用代表用户界面的组件来声明Flex程序的用户界面。
有两种类型的组件：控件与容器。
控件是窗体元素，如按钮，文本框，列表框。
容器是屏幕上包含控件和其他容器的矩形区域。
在Flex的根部是单一的容器，称之为程序容器，这代表整个Flash播放器的界面。
这个程序容器保存所有的其他的代表对话框，面板和窗体的容器。
一个容器有预定义的规则来布局他的孩子容器和控件，包括尺寸以及位置。
Flex定义了布局规则来简化富网络程序的设计与实现，然而也提供了足够的灵活性来使得我们可以创建多样的程序集合。
使用预定义的布局规则的一个优点就是我们的用户可以很快的习惯我们的程序。
也就是说，通过标准化用户交互的规则，我们的用户就不需要考虑如何来导航程序，相反却可以集中于程序所提供的内容。
另一个优点就是我们不必在定义导航以及作为设计一部分的布局规则上花费大量的时间。
相反，我们可以集中精力于我们想要传递的信息以及我们要提供给用户的选择，并且不需为所有用户行为的细节与程序响应担心。
通过这样的方式，Flex提供了一个结构可以让我们快速容易的使用丰富的特性与交互集合来开发程序。
使用Flex Builder来布局我们的程序我们可以使用Flex Builder构建Flex程序的用户界面。
我们可以使用Flex Builder通过可视的编码与设计工具来开发Flex与ActionScript程序。
我们也可以使用可以提供代码提示与代码辅助特性的编辑编写MXML，ActionScript与CSS代码，从而帮助我们的开发工作。
在这个编辑器中，我们可以切换到设计模式来可视化的开发我们的程序，在设计画布上使用容器与组件，使用约束来布局我们的组件，并查看运行时用户界面的转化。
然后我们使用定制的编译器来构建我们的工程，并且使用集成的调试工具来调试我们的工程。
在MXML中定义用户界面我们的程序可以由一个或是多个MXML文件组成。
使用多个MXML文件可以促进代码重用，简化构建复杂程序的过程，并且使得多个开发者贡献同一个工程变得更为容易。
下面的例子是一个MXML程序，这个程序使用一个按钮控件来触发从一个文本输入控件拷贝文本到一个文本区控件：<?xml version="1.0" encoding="utf-8"?><!-- ?xml tag must start in line 1 column 1 --><!-- MXML root element tag. --><mx:Application xmlns:mx="/2006/mxml"><!-- Flex controls exist in a container. Define a Panel container. --><mx:Panel title="My Application"><!-- TextInput control for user input. --><mx:TextInput id="myInput" width="150" text=""/><!-- Output TextArea control. --><mx:TextArea id="myText" text="" width="150"/><!-- Button control that triggers the copy. --><mx:Button id="myButton" label="Copy Text"/></mx:Panel></mx:Application>这个程序第一行指明了XML声明，而且必须放在MXML文件的第一行，第一列。
第二行以<mx:Application>标签开始，这是Flex程序的根元素。
这个标签包含了Flex名字空间声明。
在起始与结束的<mx:Application>标签之间的部分定义了Flex程序。
下图演示了在Flash播放器中运行这个程序的效果图：正如这段代码所写的，这个例子布局了我们的用户界面，但是却并没有包含从文本输入框控件到文本区控件的拷贝逻辑。
向Flex程序中添加ActionScript我们可以为了下列目的使用ActionScript处理事件Flex用户界面是事件驱动的。
例如，当用户选择一个按钮时，这个按钮生成一个事件。
我们在ActionScript中定义名为事件监听器的函数来处理事件。
我们的事件监听器可以打开一个窗口，播放SWF文件，或者是执行我们的程序所必须的任何动作。
处理错误我们在ActionScript处理运行时错误。
我们可以检测数据验证错误，向用户发送错误信息，向服务器重新提交请求，或者是执行基于我们程序的其他事件。
在MXML语句中向Flex控件绑定数据对象我们可以使用数据绑定从一个Flex控件组织数据模型，或是从数据模型组织组件，或者是从一个组件向另一个组件拷贝数据。
定义自定义组件我们可以从Flex组件类层次继承来创建适合我们程序需求的组件。
下面的例子是在前一个例子的基础上所做的更改，为按钮的click事件添加事件监听器。
一个事件监听器为了响应用户的事件而执行的ActionScript代码。
在我们这个例子中的事件监听器是当用户选择按钮控件时从文本输入控件向文本区拷贝文本：<?xml version="1.0" encoding="utf-8"?><!-- ?xml tag must start in line 1 column 1 --><!-- MXML root element tag. --><mx:Application xmlns:mx="/2006/mxml"><!-- Flex controls exist in a container. Define a Panel container. --><mx:Panel title="My Application"><!-- TextInput control for user input. --><mx:TextInput id="myInput" width="150" text=""/><!-- Output TextArea control. --><mx:TextArea id="myText" text="" width="150"/><!-- Button control that triggers the copy. --><mx:Button id="myButton" label="Copy Text"click="myText.text=myInput.text;"/></mx:Panel></mx:Application>前一个例子在MXML代码中直接插入了ActionScript代码。
虽然这对于一或是两行的ActionScript代码可以工作的很好，但是对于更为复杂的逻辑，通常我们会在<mx:Script>块中定义我们的ActionScript，如下面的例子所示：<?xml version="1.0" encoding="utf-8"?><!-- ?xml tag must start in line 1 column 1 --><!-- MXML root element tag --><mx:Application xmlns:mx="/2006/mxml"><mx:Script><![CDATA[// Define an ActionScript function.private function duplicate():void {myText.text=myInput.text;}]]></mx:Script><!-- Flex controls exist in a container. Define a Panel container. --><mx:Panel title="My Application"><!-- TextInput control for user input. --><mx:TextInput id="myInput" width="150" text=""/><!-- Output TextArea control. --><mx:TextArea id="myText" text="" width="150"/><!-- Button control that triggers the copy. --><mx:Button id="myButton" label="Copy Text"click="duplicate();"/></mx:Panel></mx:Application>在这个例子中，我们使事件监听器作为一个ActionScript函数来实现。
