全面解析Flex编程模型-并发编程模型

本文和大家重点讨论一下Flex编程模型，Flex包含了Flex类库、MXML和ActionScript编程语言，当然Flex还包括Flex编译器和调试器，它们并没有在下图中示出。

Flex编程模型

Flex包含了Flex类库、MXML和ActionScript编程语言，如下图所示：

当然，Flex还包括Flex编译器和调试器，它们并没有在图中示出。

你可以混合MXML和ActionScript来发Flex应用程序。事实上，MXML和ActionScript编程语言都提供了访问Flex类库的能力。通常的做法是：使用MXML去定义用户界面的元素，使用ActionScript去定义客户端的逻辑并进行控制。

Flex类库包括了Flex组件、管理器和行为。在基于组件的开发模型下，开发人员可以运用预先做好的组件。

将ActionScript添加到Flex应用程序中

ActionScript可以出色地完成如下任务：

1.处理事件

2.处理错误

3.在MXML语句中将数据对象绑定到Flex控件上

4.定制组件

在随后的例子中，为按钮控件的点击事件添加了事件监听器/eventlistener。当用户点击按钮时，将TextInput控件中的文本拷贝到TextArea控件中。

<?xmlversionxmlversion="1.0"?><!--?xml标签必须位于第一行--> 
 
<!--MXML根元素标签--><mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
<!--定义一个面板容器来放置控件--> 
 
<mx:Paneltitlemx:Paneltitle="MyApplication"> 
 
<!--TextInput控件用来进行用户输入--><mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
 
<!--TextArea控件用来进行输出--><mx:TextAreaidmx:TextAreaid="myText"text=""width="150"/> 
 
<!--按钮控件来触发拷贝--><mx:Buttonidmx:Buttonid="myButton"label="CopyText"  
click="myText.text=myInput.text;"/> 
 
</mx:Panel></mx:Application>

前面的例子是在MXML中直接插入ActionScript代码。尽管这种技术只需要一两行ActionScript代码，但是对于更为复杂的逻辑实现，你就需要在<mx:Script>块中定义ActionScript，就象如下所示那样：

<?xmlversionxmlversion="1.0"?><!--?xml标签必须位于第一行--> 
 
<!--MXML根元素标签--><mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
<mx:Script><![CDATA[  
 
//定义一个ActionScript功能函数privatefunctionduplicate():void{myText.text=myInput.text;}  
 
]]></mx:Script> 
 
<!--定义一个面板容器来放置控件--><mx:Paneltitlemx:Paneltitle="MyApplication"> 
 
<!--TextInput控件用来进行用户输入--><mx:TextInputidmx:TextInputid="myInput"width="150"text=""/> 
 
<!--TextArea控件用来进行输出--><mx:TextAreaidmx:TextAreaid="myText"text=""width="150"/> 
 
<!--按钮控件来触发拷贝--><mx:Buttonidmx:Buttonid="myButton"label="CopyText"  
click="duplicate();"/> 
 
</mx:Panel></mx:Application>

在本例中，你使用ActionScript功能函数来实现了一个事件监听器。这样做的好处是使MXML代码与ActionScript代码分离，以提供更好的健壮性和灵活性。#p#

使用数据绑定

Flex编程模型提供简洁的语法来实现组件间的、或与数据模型的绑定。随后的例子中，在波浪括号/{}里的数值将TextArea控件与TextInput控件的文本属性联系起来。当用户在TextInput控件中输入文本时，它会自动地拷贝到TextArea控件中去。

<?xmlversionxmlversion="1.0"?><!--?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>

使用事件去处理错误正如你可以使用事件去实现程序的功能，你也可以使用它们对错误进行处理。下面的例子显示了如何设计一个针对web服务器操作的错误事件的监听器：

<mx:Script><![CDATA[  
 
publicfunctionshowErrorDialog(error:String):void{  
//具体功能实现...}  
 
]]></mx:Script>...<mx:WebServiceidmx:WebServiceid="WeatherService"..."> 
 
<mx:operationnamemx:operationname="getFoo"fault="showErrorDialog(event.fault.faultString);"/> 
</mx:WebService>

控制应用程序的外观控制应用程序的外观，常涉及到如下内容：

1.大小/Sizes，即组件或应用程序的高度和宽度。

2.样式/Styles，即一组特性，如字体、排列方式、颜色等。它们都是通过层叠样式（CSS）来进行设置的。

3.皮肤/Skins，即可以进行改变的组件视觉元素。

4.行为/Behaviors，即Flex组件在视觉或听觉效果方面的变化。

6.视图状态/Viewstate可以让你通过修改它的基础内容，来改变组件或程序的内容和外观。

7.变换/Transitions可以让你定义屏幕上发生改变的视图状态。#p#

使用数据服务器

Flex编程模型被设计为可以与许多类型的服务器打交道，从而提供对本地和远端逻辑的访问。提供数据访问的MXML组件被称之为数据服务器组件/dataservicecomponents。MXML包含了如下几种类型的数据服务器组件：

1.WebService提供对使用SOAP的web服务器的访问。

2.HTTPService提供对返回数据的HTTPURLs的访问。

3.RemoteObject通过使用AML协议提供对Java对象（JavaBeans、EJBs、POJOs）的访问。该选项目前仅适用于FlexDataServices或MacromediaColdFusionMX7.0.2.

从Flash到Flex

开发一个Flex应用程序与开发一个MacromediaFlashProfessional8程序有所不同，即使两者都会最终被编译成SWF文件。FlashProfessional使用了一些概念，如时间轴/Timeline，动画帧/，图层/layers来组织和控制程序中的内容。而在Flex中则抛弃了这些内容，转而使用MXML标签来设计用户界面组件和连接数据源。

尽管Flash和Flex的开发模型各不相同，但是Flash仍然是一个非常强大的工具，用来创建定制的组件和视觉方面的资源，然后以外部SWC文件的形式导入到Flex中。

【编辑推荐】