第三章 Flex 基 础
Flex 是基于组件来进行开发的,为了更有效率地设计和开发应用程序,你应该熟悉这些开发模式以及操作步骤。
第一节创建一 个 Flex 应用程序
应用程序模 型
Flex 创建一个应用程序时,你使用组件(容 器 /containers 和控 件 /controls )来描述用户的操作界面。例如,容器可以是一个用来进行数据输入的表格容器,如一个盒 框 /Box 或一个栅格 /Grid ;而控件就是该表格中的元素,如一个按 钮 /Button 或文本输入 栏 /Text Input field 。
举个例子,在随后的图例中显示了两种不同的盒子容器,它们分别包含了三个按钮控件和一 个 ComboBox 控件 :
Flex 的 MVC 模型
为了增强系统的复用性和可维护性,应该采用具有良好体系架构的模型, 即 Model-View-Controller ( MVC ) 。
- 1. 模型 /Model 组件封装了数据和与数据相关的行为 。
- 2. 视图 /View 组件定义了应用程序的用户界面 。
- 3. 控制 器 /Controller 组件则负责处理程序中的数据连接 。
web 服务器的运用
通常地,会涉及到 的 web 服务器类型有 :
- 1. 纯 web 服务器,它们仅将用户的请求回复一个简单的静 态 HTML 页面。在这种情况下,你需要 将 Flex 应用程序 的 SWF 文件嵌入到一 个 HTML 页面中 。
- 2. web 应用服务器, 如 JRun 、 ColdFusion 或 者 PHP ,它们可以动态地生成页面。在这种情况下,你将使用到与服务器技术相关的库,并动态地处理它们的内容 。
- 3. J2EE 应用服务器 或 servlet 容器。向一 个 J2EE 应用服务器 或 servlet 容器发出请求, 如 JRun 、 Tomcat 或 WebSphere ,通常你需要使 用 Flex Data Services 。
- 程序开发的通常步 骤 开 发 Flex 应用程序,通常会采用如下的步骤进行 :
- 1. 在一个文本编辑器或集成开发环境( IDE )中, 如 Adobe Flex Builder 、 Eclipse 或 IntelliJ 中插 入 MXML 根标签。
- 2. 添加一个或更多容器 。
- 3. 在容器中添加控件,如输入栏、按钮和输出栏 。
- 4. 定义一种数据模型 。
- 5. 添加一 个 web 服务器 , HTTP 服务器,或向远 程 Java 对象发送请求 。
- 6. 为数据输入添加验证 。
- 7. 为组件添加脚本 。
- 8. 将应用程序编译 成 SWF 文件。
发布应用程 序 你可以将应用程序发布成一个编译好 的 SWF 文件,或者如果 有 Flex Data Services 的话 ,
则可以将应用程序发布为一 组 MXML 和 ActionScript 文件。客户端进行访问的格式分别是 : http://hostname/path/filename.swf http://hostname/path/filename.mxml
第二节 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 组件在视觉或听觉效果方面的变化 。
- 2. 样式 /Styles ,即一组特性,如字体、排列方式、颜色等。它们都是通过层叠样式 ( CSS )来进行设置的 。
- 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 应用程序与开发一 个