Flex 开发入门

核心提示： Flex 的另外一个重要的特点就是支持数据绑定，在另一篇文章《使用 Eclipse 和 JavaFX 开发 Mashup 应用》中我们曾介绍了 JavaFx 的数据绑定特性，Flex 开发入门(10)，同样 Flex 也支持数据绑定，当数据源被绑定到另外一个对象的某属性上时，RSL(Run

Flex 的另外一个重要的特点就是支持数据绑定，在另一篇文章《使用 Eclipse 和 JavaFX 开发 Mashup 应用》中我们曾介绍了 JavaFx 的数据绑定特性，同样 Flex 也支持数据绑定。当数据源被绑定到另外一个对象的某属性上时，数据源的数据如果发生变化，开发人员不需要写额外的代码该对象的属性值就可以相应的变化。如清单 5 中所示：如果要进行数据绑定，则要先定义一个可绑定的数据源，例如我们在变量 private var serverResponse:String = "" ;的上面设置 [Bindable] 属性，表示其为可绑定变量。然后我们在 resultLable 中使用花括号 {serverResponse} 将变量serverResponse绑定到 resultLable 的 text 属性上。

清单 5：FlexSample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
　　 creationComplete="init()">
　　 <mx:Script>
　　　　 <![CDATA[
　　　　　　 import mx.rpc.events.ResultEvent;
　　　　　　 import mx.rpc.events.FaultEvent;
　　　　　　 import com.ibm.flex.J2eeServer;
　　　　　　 import mx.collections.ArrayCollection;
　　　　　　
　　　　　　private var jserver:J2eeServer = new J2eeServer();
　　　　　　//可绑定变量
　　　　　　[Bindable]
　　　　　　private var serverResponse:String = "";
　　　　　　//可绑定变量
　　　　　　[Bindable]
　　　　　　private var locales:ArrayCollection = new ArrayCollection(
　　　　　　　　　　　　　　　　　　　　　　　　　　　[ {label:"en_us", data:"en_us"},
　　　　　　　　　　　　　　　　　　　　　　　　　　　　 {label:"zh_cn", data:"zh_cn"}]);
　　　　　　
　　　　　　 private function init():void
　　　　　　 {
　　　　　　　　 //事件绑定
　　　　　　　　jserver.addEventListener(ResultEvent.RESULT, successHandler);
　　　　　　　　jserver.addEventListener(FaultEvent.FAULT, errorHandler);
　　　　　　 }
　　　　　　 private function localeComboxChangeHandler(event:Event):void
　　　　　　 {
　　　　　　　　 jserver.sendRequest(localeCombox.selectedItem.data);
　　　　　　 }
　　　　　　
　　　　　　 private function successHandler(event:ResultEvent):void
　　　　　　 {
　　　　　　　　 serverResponse = event.result.toString();
　　　　　　　　 trace(event.result);
　　　　　　 }
　　　　　　 private function errorHandler(event:FaultEvent):void
　　　　　　 {
　　　　　　　　 serverResponse = event.message.toString();
　　　　　　　　 trace(event.message);
　　　　　　 }
　　　　 ]]>
　　 </mx:Script>
　　 <mx:VBox>
　　　　<mx:Label text="Select your locale:" />
　　　　<mx:ComboBox
　　　　　　id="localeCombox"
　　　　　　width="160"
　　　　　　dataProvider="{locales}"
　　　　　　change="localeComboxChangeHandler(event)"/>
　　　　<mx:Label
　　　　　　id="resultLabel"
　　　　　　text="The response from server is: {serverResponse}" />　　　　
　　 </mx:VBox>
</mx:Application>

最终项目的文件结构如图 15 所示：

图 15：项目文件结构图

运行项目，我们可以看到当我们改变下拉框的值的时候，会触发 localeComboxChangeHandler() 函数调用 J2eeServer 的 sendRequest() 方法将选择的 locale 值发送给服务器端的 servlet，并且在结果返回后，将从服务器端得到的 response 显示在 resultLable 上。如图 16 所示：

图 16：项目运行结果

结束语

Flex 作为 RIA 的新技术，对传统 web 开发技术有继承也有发展。这篇文作为入门文，主要作用是帮助大家掌握 Flex 的开发环境、开发方式、开发调试部署的流程以及 Flex 的基本编程知识。但 Flex 除了国际化、Unit 测试、Ant 编译等传统问题之外，作为新技术 Flex 还有很多不同以往的地方，比如模块开发，RSL(Runtime Shared Libraries), Shared object、和 JavaScript 交互以及它的 MVC 框架 cairngorm，远程调用和消息传递框架 BlazeDS 等。所有这些问题都是值得我们进行后续讨论的。