Flex编程模型学习指南-51CTO.COM

本文和大家重点讨论一下Flex编程模型，Flex类库包含Flex组件，管理器与行为。使用基于组件的Flex开发模型，开发者可以合并预编译的组件，创建新的组件，或者是组合预编译的组件为复合组件。

Flex编程模型

Flex包含Flex类库，MXML以及ActionScript程序语言，如下表所示：

包含在Flex中，但是却并没有在上图中显示的还有Flex编译以及Flex调试器。

我们使用MXML与ActionScript的组合来编写Flex程序。MXML和ActionScript程序语言都给了我们访问Flex类库的能力。使用MXML来定义程序的用户界面元素，使用ActionScript来定义客户逻辑与过程控制。

Flex类库包含Flex组件，管理器与行为。使用基于组件的Flex开发模型，开发者可以合并预编译的组件，创建新的组件，或者是组合预编译的组件为复合组件。

Flex编程模型中Flex类库与MXML和ActionScript的关系

Flex是作为ActionScript类库来实现的。这个类库包含组件（容器与控件），管理类，数据服务类以及其他特性的类。我们使用MXML和ActionScript语言配合类库来开发程序。

MXML标签与ActionScript类或是类的属性相对应。Flex分析MXML标签，并且编译包含相应ActionScript对象的SWF文件。例如，Flex提供了ActionScriptButton类来定义Flex按钮控件。在MXML中，我们可以用下面的MXML语句来创建一个按钮控件：

<mx:Buttonlabelmx:Buttonlabel="Submit"/>

当我们使用MXML标签声明了一个控件，我们就创建了那个类的一个实例。这个MXML语句创建了一个按钮对象，并且初始化这个按钮对象的label属性为Submit字符串。

与ActionScript类相对应的MXML使用与ActionScript类相同的命名约定。类名以一个大写字母开头，而且在类名中以大写字母分隔单词。每一个MXML标签属性对应着ActionScript对象的一个属性，适合于对象的一种风格，或者是这个对象的一个事件监听器。#p#

布局我们的程序

Flex编程模型中我们使用代表用户界面的组件来声明Flex程序的用户界面。有两种类型的组件：控件与容器。控件是窗体元素，如按钮，文本框，列表框。容器是屏幕上包含控件和其他容器的矩形区域。

在Flex的根部是单一的容器，称之为程序容器，这代表整个Flash播放器的界面。这个程序容器保存所有的其他的代表对话框，面板和窗体的容器。

一个容器有预定义的规则来布局他的孩子容器和控件，包括尺寸以及位置。Flex定义了布局规则来简化富网络程序的设计与实现，然而也提供了足够的灵活性来使得我们可以创建多样的程序集合。

使用预定义的布局规则的一个优点就是我们的用户可以很快的习惯我们的程序。也就是说，通过标准化用户交互的规则，我们的用户就不需要考虑如何来导航程序，相反却可以集中于程序所提供的内容。

另一个优点就是我们不必在定义导航以及作为设计一部分的布局规则上花费大量的时间。相反，我们可以集中精力于我们想要传递的信息以及我们要提供给用户的选择，并且不需为所有用户行为的细节与程序响应担心。通过这样的方式，Flex提供了一个结构可以让我们快速容易的使用丰富的特性与交互集合来开发程序。

使用FlexBuilder来布局我们的程序

我们可以使用FlexBuilder构建Flex程序的用户界面。我们可以使用FlexBuilder通过可视的编码与设计工具来开发Flex与ActionScript程序。我们也可以使用可以提供代码提示与代码辅助特性的编辑编写MXML，ActionScript与CSS代码，从而帮助我们的开发工作。

在这个编辑器中，我们可以切换到设计模式来可视化的开发我们的程序，在设计画布上使用容器与组件，使用约束来布局我们的组件，并查看运行时用户界面的转化。然后我们使用定制的编译器来构建我们的工程，并且使用集成的调试工具来调试我们的工程。#p#

在MXML中定义用户界面

我们的程序可以由一个或是多个MXML文件组成。使用多个MXML文件可以促进代码重用，简化构建复杂程序的过程，并且使得多个开发者贡献同一个工程变得更为容易。

下面的例子是一个MXML程序，这个程序使用一个按钮控件来触发从一个文本输入控件拷贝文本到一个文本区控件：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<!--?xmltagmuststartinline1column1--> 
<!--MXMLrootelementtag.--> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
<!--Flexcontrolsexistinacontainer.DefineaPanelcontainer.--> 
<mx:Paneltitlemx:Paneltitle="MyApplication"> 
<!--TextInputcontrolforuserinput.--> 
<mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
<!--OutputTextAreacontrol.--> 
<mx:TextAreaidmx:TextAreaid="myText"text=""width="150"/> 
<!--Buttoncontrolthattriggersthecopy.--> 
<mx:Buttonidmx:Buttonid="myButton"label="CopyText"/> 
 
</mx:Panel> 
</mx:Application>

这个程序***行指明了XML声明，而且必须放在MXML文件的***行，***列。

第二行以<mx:Application>标签开始，这是Flex程序的根元素。这个标签包含了Flex名字空间声明。在起始与结束的<mx:Application>标签之间的部分定义了Flex程序。

下图演示了在Flash播放器中运行这个程序的效果图：

正如这段代码所写的，这个例子布局了我们的用户界面，但是却并没有包含从文本输入框控件到文本区控件的拷贝逻辑。#p#

向Flex程序中添加ActionScript

Flex编程模型中我们可以为了下列目的使用ActionScript处理事件Flex用户界面是事件驱动的。例如，当用户选择一个按钮时，这个按钮生成一个事件。我们在ActionScript中定义名为事件监听器的函数来处理事件。我们的事件监听器可以打开一个窗口，播放SWF文件，或者是执行我们的程序所必须的任何动作。

处理错误我们在ActionScript处理运行时错误。我们可以检测数据验证错误，向用户发送错误信息，向服务器重新提交请求，或者是执行基于我们程序的其他事件。

在MXML语句中向Flex控件绑定数据对象我们可以使用数据绑定从一个Flex控件组织数据模型，或是从数据模型组织组件，或者是从一个组件向另一个组件拷贝数据。

定义自定义组件我们可以从Flex组件类层次继承来创建适合我们程序需求的组件。

下面的例子是在前一个例子的基础上所做的更改，为按钮的click事件添加事件监听器。一个事件监听器为了响应用户的事件而执行的ActionScript代码。在我们这个例子中的事件监听器是当用户选择按钮控件时从文本输入控件向文本区拷贝文本：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<!--?xmltagmuststartinline1column1--> 
<!--MXMLrootelementtag.--> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
<!--Flexcontrolsexistinacontainer.DefineaPanelcontainer.--> 
<mx:Paneltitlemx:Paneltitle="MyApplication"> 
<!--TextInputcontrolforuserinput.--> 
<mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
<!--OutputTextAreacontrol.--> 
<mx:TextAreaidmx:TextAreaid="myText"text=""width="150"/> 
<!--Buttoncontrolthattriggersthecopy.--> 
<mx:Buttonidmx:Buttonid="myButton"label="CopyText"  
click="myText.text=myInput.text;"/> 
 
</mx:Panel> 
</mx:Application>

前一个例子在MXML代码中直接插入了ActionScript代码。虽然这对于一或是两行的ActionScript代码可以工作的很好，但是对于更为复杂的逻辑，通常我们会在<mx:Script>块中定义我们的ActionScript，如下面的例子所示：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<!--?xmltagmuststartinline1column1--> 
<!--MXMLrootelementtag--> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:Script> 
<![CDATA[  
 
//DefineanActionScriptfunction.  
privatefunctionduplicate():void{  
myText.text=myInput.text;  
}  
]]> 
</mx:Script> 
<!--Flexcontrolsexistinacontainer.DefineaPanelcontainer.--> 
<mx:Paneltitlemx:Paneltitle="MyApplication"> 
<!--TextInputcontrolforuserinput.--> 
<mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
<!--OutputTextAreacontrol.--> 
<mx:TextAreaidmx:TextAreaid="myText"text=""width="150"/> 
<!--Buttoncontrolthattriggersthecopy.--> 
<mx:Buttonidmx:Buttonid="myButton"label="CopyText"  
click="duplicate();"/> 
 
</mx:Panel> 
</mx:Application>

在这个例子中，我们使事件监听器作为一个ActionScript函数来实现。Flex为了响应用户选择按钮控件调用这个函数。Flex编程模型中这种技术使得我们可以将我们的MXML代码从我们的ActionScript代码中分离出来。为了增加程序的模块性我们也可以选择将我们的程序分为多个文件。#p#

使用数据绑定

Flex为了组件之间属性的绑定，或是到数据模型的绑定提供了简单的语法。在下面这个例子中，花括号中的值将文本区的text属性绑定到了文本输入控件的text属性。当用户在文本输入控件中输入文本时，他会自动的拷贝到文本区控件，如下面的例子所示：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<!--?xmltagmuststartinline1column1--> 
<!--MXMLrootelementtag.--> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
<!--Flexcontrolsexistinacontainer.DefineaPanelcontainer.--> 
<mx:Paneltitlemx:Paneltitle="MyApplication"> 
<!--TextInputcontrolforuserinput.--> 
<mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
<!--OutputTextAreacontrol.--> 
<mx:TextAreaidmx:TextAreaid="myText"text="{myInput.text}"width="150"/> 
</mx:Panel> 
</mx:Application>

控制程序显示

Flex定义我们在程序中可以使用的默认显示，或者是修改来定义我们特定的显示。作为修改演示的一部分，我们可以修改下面的一些或是全部：

尺寸一个组件或是程序的高度或是宽度。所有的组件都有一个默认的尺寸。我们可以使用默认的尺寸，指定我们自己的尺寸，或者作为布局我们程序的一部分让Flex重新调整一个组件的尺寸。

格式特性集合，例如字体，字号，文本对齐属性，颜色。这与在层叠样式表(CSS)定义与使用的相同。

皮肤控制组合显示的符号。皮肤化就是通过修改或是替换他的可视化元素来改变一个组件显示的过程。这些元素可以图像,SWF文件，或者是包含绘画API方法的类文件组成。

行为程序或是用户行为引起的对于一个Flex组件的可见的或是可听的变化。行为的例子如基于鼠标移动点击的移动或是组件尺寸的重新调整。

视图状态在许多富网络程序中，界面的改变基于用户所执行的任务。视图状态可以让我们通过修改基内容来变化一个组件的内容和显示或者是程序。

转化转化定义了视图状态的改变如何显示在屏幕上。我们使用特效类，结合处理转化的显式效果设计来定义转化。#p#

使用数据服务工作

Flex编程模型中Flex被设计用来与可以访问本地和远程服务端逻辑的服务进行交互。例如，一个Flex程序可以使用AMF来连接使用简单对象访问协议(SOAP)的网络服务，返回XML的HTTPURL，或者是Flex数据服务，与位于与Flex同一个程序服务器上的Java对象。MXML提供数据访问的组件称之为数据服务组件。MXML包含下列的一些数据服务组件：

WebService提供到基于SOAP的网络服务的访问。
HTTPService提供到返回数据的HTTPURL的访问。

RemoteObject提供到使用AMF协议的Java对象的访问。这个选项只在Flex数据服务或是MacromediaColdFusionMX7.0.2中可用。
在我们的Flex程序中选择如何来访问数据影响着我们程序的性能。因为Flex程序是在***次请求之后缓存在浏览器中的，当程序运行时，数据访问是影响程序性能的主要原因。为了向用户传递数据Flex提供了几种解决方案。他将数据交给调用在Flex类路径中装入的Java类的运行时服务，或者是向网络服务或是HTTP服务器发送代理请求。

使用WebService组件允许我们使用基于SOAP的方法，但是他并不总是产生***的性能。同时，使用SOAP编码的额处XML需要比AMF所做的更多的内容。

网络服务中的SOAP性能同时依赖于我们的网络服务的实现。不同的程序服务器使用不同的网络服务后端，所以我们会看到依赖于不同实现的性能。理解我们的实现表现如何的唯一方法就是装入并测试我们的服务。
在许多情况下，我们的选择依赖于我们已存在的程序以及我们如何选择将他们集成到后台服务器资源中。网络服务的表现在很大程度上依赖于我们的程序服务器的网络服务引擎的底层实现，所以我们应装入并测试他们的性能。

将Flex编程模型中的数据模型从我们的视图中分离

为了清楚的分离用户界面，程序相关的数据，数据服务，我们可以使用Flex数据模型来存储控制器与数据服务之间的数据。这种三层设计是输入数据与数据服务共同作用的结果。

当我们计划一个程序，我们要决定程序必须存储的数据类型以及这些数据要如何处理。这有助于我们决定我们需要什么类型的数据模型。例如，假设我们决定我们的程序必须存储顾员的相关数据。一个简单的顾员模型可能包含姓名，部门以及邮箱地址属性。
一个Flex数据模型是一个包含我们用来存储程序相关数据的属性的ActionScript对象。我们可以将数据模型用于数据验证，从而他可以包含客户端业务逻辑。我们可以在MXML或是ActionScript中定义一个数据模型。在MVC设计模式中，数据模型代表模型层。

我们可以在MXML标签，ActionScript函数或是ActionScript类中定义数据模型。在MXML中编写的模型用利于快速开发与简化数据存储，但是他不能提供任何额外的功能，而我们不可以设定模型属性的数据类型。如果我们想要设定数据类型以及为额外的功能提供方法，我们应使用基于ActionScript的类。在通常情况下，我们应为了简化数据结构使用基于MXML的模型，为更为复杂的结构以及客户端业务逻辑使用ActionScript。

【编辑推荐】