第三章 第二节 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. 定制组件
在随后的例子中,为按钮控件的点击事件添加了事件监听器/event listener。当用户点击
按钮时,将TextInput 控件中的文本拷贝到TextArea 控件中。

<?xml version="1.0"?>
<!-- ?xml 标签必须位于第一行-->
<!--MXML 根元素标签-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!--定义一个面板容器来放置控件-->
<mx:Panel title="My Application">
<!--TextInput 控件用来进行用户输入-->
<mx:TextInput id="myInput" width="150" text=""/>
<!--TextArea 控件用来进行输出-->
<mx:TextArea id="myText" text="" width="150"/>
<!--按钮控件来触发拷贝-->
<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"?>
<!-- ?xml 标签必须位于第一行-->
<!--MXML 根元素标签-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// 定义一个ActionScript 功能函数
private function duplicate():void {
myText.text=myInput.text;
}
]]>
</mx:Script>
<!--定义一个面板容器来放置控件-->
<mx:Panel title="My Application">
<!-- TextInput 控件用来进行用户输入-->
<mx:TextInput id="myInput" width="150" text=""/>
<!-- TextArea 控件用来进行输出-->
<mx:TextArea id="myText" text="" width="150"/>
<!--按钮控件来触发拷贝-->
<mx:Button id="myButton" label="Copy Text"
click="duplicate();"/>
</mx:Panel>
</mx:Application>
在本例中,你使用ActionScript 功能函数来实现了一个事件监听器。这样做的好处是使
MXML 代码与ActionScript 代码分离,以提供更好的健壮性和灵活性。
使用数据绑定
Flex 提供简洁的语法来实现组件间的、或与数据模型的绑定。随后的例子中,在波浪括
号/{ }里的数值将TextArea 控件与TextInput 控件的文本属性联系起来。当用户在TextInput
控件中输入文本时,它会自动地拷贝到TextArea 控件中去。
<?xml version="1.0"?>
<!-- ?xml tag must start in line 1 column 1 -->
<!-- MXML root element tag. -->
<mx:Application xmlns:mx="http://www.adobe.com/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="{myInput.text}" width="150"/>
</mx:Panel>
</mx:Application>
使用事件去处理错误
正如你可以使用事件去实现程序的功能,你也可以使用它们对错误进行处理。下面的例
子显示了如何设计一个针对web 服务器操作的错误事件的监听器:
<mx:Script>
<![CDATA[
public function showErrorDialog(error:String):void {
// 具体功能实现...
}
]]>
</mx:Script>
...
<mx:WebService id="WeatherService" ...">
<mx:operation name="getFoo"
fault="showErrorDialog(event.fault.faultString);"/>
</mx:WebService>
控制应用程序的外观
控制应用程序的外观,常涉及到如下内容:
1. 大小/Sizes,即组件或应用程序的高度和宽度。
2. 样式/Styles,即一组特性,如字体、排列方式、颜色等。它们都是通过层叠样式(CSS)
来进行设置的。
3. 皮肤/Skins,即可以进行改变的组件视觉元素。
4. 行为/Behaviors,即Flex 组件在视觉或听觉效果方面的变化。
6. 视图状态/View state 可以让你通过修改它的基础内容,来改变组件或程序的内容和外
观。
7. 变换/Transitions 可以让你定义屏幕上发生改变的视图状态。
使用数据服务器
Flex 被设计为可以与许多类型的服务器打交道,从而提供对本地和远端逻辑的访问。提
供数据访问的MXML 组件被称之为数据服务器组件/data service components。MXML 包含
了如下几种类型的数据服务器组件:
1. WebService 提供对使用SOAP 的web 服务器的访问。
2. HTTPService 提供对返回数据的HTTP URLs 的访问。
3. RemoteObject 通过使用AML 协议提供对Java 对象(Java Beans、 EJBs、POJOs)
的访问。该选项目前仅适用于Flex Data Services 或Macromedia ColdFusion MX 7.0.2.
从 Flash 到Flex
开发一个Flex 应用程序与开发一个Macromedia Flash Professional 8 程序有所不同,即
使两者都会最终被编译成SWF 文件。Flash Professional 使用了一些概念,如时间轴/Timeline,
动画帧/,图层/layers 来组织和控制程序中的内容。而在Flex 中则抛弃了这些内容,转而使
用MXML 标签来设计用户界面组件和连接数据源。
尽管Flash 和Flex 的开发模型各不相同,但是Flash 仍然是一个非常强大的工具,用来
创建定制的组件和视觉方面的资源,然后以外部SWC 文件的形式导入到Flex 中。

加支付宝好友偷能量挖...


评论(0)网络
阅读(103)喜欢(0)flash/flex/fcs/AIR