向Flex程序中添加ActionScript
我们可以为了下列目的使用ActionScript处理事件 Flex用户界面是事件驱动的。例如,当用户选择一个按钮时,这个按钮生成一个事件。我们在ActionScript中定义名为事件监听器的函数来处理事件。我们的事件监听器可以打开一个窗口,播放SWF文件,或者是执行我们的程序所必须的任何动作。
处理错误 我们在ActionScript处理运行时错误。我们可以检测数据验证错误,向用户发送错误信息,向服务器重新提交请求,或者是执行基于我们程序的其他事件。
在MXML语句中向Flex控件绑定数据对象 我们可以使用数据绑定从一个Flex控件组织数据模型,或是从数据模型组织组件,或者是从一个组件向另一个组件拷贝数据。
定义自定义组件 我们可以从Flex组件类层次继承来创建适合我们程序需求的组件。
下面的例子是在前一个例子的基础上所做的更改,为按钮的click事件添加事件监听器。一个事件监听器为了响应用户的事件而执行的ActionScript代码。在我们这个例子中的事件监听器是当用户选择按钮控件时从文本输入控件向文本区拷贝文本:
<!-- ?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="" 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="http://www.adobe.com/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函数来实现。Flex为了响应用户选择按钮控件调用这个函数。这种技术使得我们可以将我们的MXML代码从我们的ActionScript代码中分离出来。为了增加程序的模块性我们也可以选择将我们的程序分为多个文件。
使用数据绑定
Flex为了组件之间属性的绑定,或是到数据模型的绑定提供了简单的语法。在下面这个例子中,花括号中的值将文本区的text属性绑定到了文本输入控件的text属性。当用户在文本输入控件中输入文本时,他会自动的拷贝到文本区控件,如下面的例子所示:
<!-- ?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>
控制程序显示
Flex定义我们在程序中可以使用的默认显示,或者是修改来定义我们特定的显示。作为修改演示的一部分,我们可以修改下面的一些或是全部:
尺寸 一个组件或是程序的高度或是宽度。所有的组件都有一个默认的尺寸。我们可以使用默认的尺寸,指定我们自己的尺寸,或者作为布局我们程序的一部分让Flex重新调整一个组件的尺寸。
格式 特性集合,例如字体,字号,文本对齐属性,颜色。这与在层叠样式表(CSS)定义与使用的相同。
皮肤 控制组合显示的符号。皮肤化就是通过修改或是替换他的可视化元素来改变一个组件显示的过程。这些元素可以图像,SWF 文件,或者是包含绘画API方法的类文件组成。
行为 程序或是用户行为引起的对于一个Flex组件的可见的或是可听的变化。行为的例子如基于鼠标移动点击的移动或是组件尺寸的重新调整。
视图状态 在许多富网络程序中,界面的改变基于用户所执行的任务。视图状态可以让我们通过修改基内容来变化一个组件的内容和显示或者是程序。
转化 转化定义了视图状态的改变如何显示在屏幕上。我们使用特效类,结合处理转化的显式效果设计来定义转化。
使用数据服务工作
Flex 被设计用来与可以访问本地和远程服务端逻辑的服务进行交互。例如,一个Flex程序可以使用AMF来连接使用简单对象访问协议(SOAP)的网络服务,返回XML的HTTP URL,或者是Flex数据服务,与位于与Flex同一个程序服务器上的Java对象。MXML提供数据访问的组件称之为数据服务组件。MXML包含下列的一些数据服务组件:
WebService 提供到基于SOAP的网络服务的访问。
HTTPService 提供到返回数据的HTTP URL的访问。
RemoteObject 提供到使用AMF协议的Java对象的访问。这个选项只在Flex数据服务或是Macromedia ColdFusion MX 7.0.2中可用。
在我们的Flex程序中选择如何来访问数据影响着我们程序的性能。因为Flex程序是在第一次请求之后缓存在浏览器中的,当程序运行时,数据访问是影响程序性能的主要原因。为了向用户传递数据Flex提供了几种解决方案。他将数据交给调用在Flex类路径中装入的Java类的运行时服务,或者是向网络服务或是HTTP服务器发送代理请求。
使用WebService组件允许我们使用基于SOAP的方法,但是他并不总是产生最优的性能。同时,使用SOAP编码的额处XML需要比AMF所做的更多的内容。
网络服务中的SOAP性能同时依赖于我们的网络服务的实现。不同的程序服务器使用不同的网络服务后端,所以我们会看到依赖于不同实现的性能。理解我们的实现表现如何的唯一方法就是装入并测试我们的服务。
在许多情况下,我们的选择依赖于我们已存在的程序以及我们如何选择将他们集成到后台服务器资源中。网络服务的表现在很大程度上依赖于我们的程序服务器的网络服务引擎的底层实现,所以我们应装入并测试他们的性能。
将我们数据模型从我们的视图中分离
为了清楚的分离用户界面,程序相关的数据,数据服务,我们可以使用Flex数据模型来存储控制器与数据服务之间的数据。这种三层设计是输入数据与数据服务共同作用的结果。
当我们计划一个程序,我们要决定程序必须存储的数据类型以及这些数据要如何处理。这有助于我们决定我们需要什么类型的数据模型。例如,假设我们决定我们的程序必须存储顾员的相关数据。一个简单的顾员模型可能包含姓名,部门以及邮箱地址属性。
一个Flex数据模型是一个包含我们用来存储程序相关数据的属性的ActionScript对象。我们可以将数据模型用于数据验证,从而他可以包含客户端业务逻辑。我们可以在MXML或是ActionScript中定义一个数据模型。在MVC设计模式中,数据模型代表模型层。
我们可以在MXML标签,ActionScript函数或是ActionScript类中定义数据模型。在MXML中编写的模型用利于快速开发与简化数据存储,但是他不能提供任何额外的功能,而我们不可以设定模型属性的数据类型。如果我们想要设定数据类型以及为额外的功能提供方法,我们应使用基于ActionScript的类。在通常情况下,我们应为了简化数据结构使用基于MXML的模型,为更为复杂的结构以及客户端业务逻辑使用ActionScript。