Marshal's Blog » ria

Flex/AS3中ArrayCollection不能完全绑定问题

Marshal — Thu, 30 Apr 2009 13:48:23 +0000

比如这样的代码：

private function getResults(event:ResultEvent):void{
    if(this.getUsers.lastResult.users.user is ObjectProxy){
        userResults=new ArrayCollection();
        userResults.addItem(event.result.users.user);
    }else{
        userResults=event.result.users.user;

完整示例见通过BlazeDS实现flex和服务器的交互。当为该ArrayCollection增加事件监听器后，发现数组中最后一条记录修改后不能被监听到。监听代码如下：

userResults.addEventListener(CollectionEvent.COLLECTION_CHANGE,function(event:CollectionEvent){
    Alert.show("列表数据已变化");
    Alert.show(">>"+(event.items[0] as PropertyChangeEvent).oldValue);
});

这个问题，见flex sdk的bug管理记录：

https://bugs.adobe.com/jira/browse/SDK-17286

针对这里的示例，可做如下修改：

// userResults=event.result.users.user;
userResults=new ArrayCollection(event.result.users.user.toArray());

使用flex/as3的trace()方法

Marshal — Thu, 30 Apr 2009 11:31:33 +0000

ActionScript3中有类似java的System.out.print()功能，用于调试脚本。使用的步骤如下。

在代码中使用trace()方法

以下是flex示例代码片段：

private function showUserResults():void{
    trace(userResults);
    for each(var user:Object in userResults){
        trace(user);
    }
}

使用带debug功能的flash player

可根据浏览器下载带debug功能的flash player，下载地址：

http://www.adobe.com/support/flashplayer/downloads.html

安装后打开flash，鼠标右键菜单的样子：

在flex builder中debug运行程序

首先需要启动tomcat，让flex应用运行起来。然后，在需要调试的mxml文件上鼠标右键，选择debug as flex application，将自动启动浏览器打开flex应用。在flex builder界面的console窗口中，可以看到trace()方法打印的内容。

通过BlazeDS实现flex和服务器的交互

Marshal — Wed, 29 Apr 2009 12:53:49 +0000

可以认为BlazeDS是Livecycle Data Services的精简版本和免费版本（BlazeDS与Livecycle Data Services的区别）。可用于提供服务器和FLEX客户端程序的通信支持。比如这个例子使用flex DataGrid组件中只是将flex中的数组绑定和显示到列表中。实际开发中这些数组往往来源于服务器。

这是下面实现示例的界面，数据来源于tomcat服务器端。

下载和安装BlazeDS

Flex Builder本身不提供BlazeDS，需要下载和安装。下载BlazeDS：

http://opensource.adobe.com/wiki/display/blazeds/BlazeDS

安装很简单，解压缩即可。里面有一个blazeds.war文件，就是要用的文件。让java web项目支持和安装BlazeDS，其实就是将这个war文件中WEB-INF目录下的文件复制到自己项目中。

注意一下war文件中的web.xml文件，和servlet的集成机制就可以知道个大概。BlazeDS提供了一个SessionListener处理客户端flex程序和Servlet session之间的交互。还提供了MessageBrokerServlet，用于处理flex和web服务器之间的通信处理。

创建集成BlazeDS的FLEX Builder项目

创建flex项目，需要勾选下面条目：

然后，选择刚才解压缩blazeds.war文件路径：

其他的没什么了，创建后的目录结构：

编写简单的交互程序

这里演示使用HttpService从flex客户端发起GET请求，服务器端返回一个xml格式数据（这里做演示是一个静态的xml文件，可以通过Servlet动态生成）：

xml version="1.0" encoding="UTF-8"?>
<users>
    <user>
        <name>张三name>
        <birthday>1999-1-1birthday>
        <job>程序员job>
    user>
    <user>
        <name>李四name>
        <birthday>2000-1-1birthday>
        <job>公务员job>
    user>
    <user>
        <name>王五name>
        <birthday>1988-2-11birthday>
        <job>销售job>
    user>
users>

编写的flex代码：

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    initialize="init()">
    <mx:Script>
        
            import mx.utils.ObjectProxy;
            import mx.collections.XMLListCollection;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;

            [Bindable]
            private var userResults:ArrayCollection;

            private function init():void{
                getUsers.send();
            }

            private function getResults(event:ResultEvent):void{
                if(this.getUsers.lastResult.users.user is ObjectProxy){
                    userResults=new ArrayCollection();
                    userResults.addItem(event.result.users.user);
                }else{
                    userResults=event.result.users.user as ArrayCollection;
                }
            }
        ]]>
    mx:Script>
    <mx:HTTPService id="getUsers" url="users.xml" method="GET" result="getResults(event)" />
    <mx:Panel x="10" y="10" width="431" height="139" layout="absolute"
        title="用户列表" fontSize="12">
        <mx:DataGrid id="myGrid" x="10" y="10" width="391" height="82" editable="true"
            dataProvider="{userResults}">
            <mx:columns>
                <mx:DataGridColumn headerText="姓名" dataField="name"/>
                <mx:DataGridColumn headerText="生日" dataField="birthday"/>
                <mx:DataGridColumn headerText="职业" dataField="job"/>
            mx:columns>
        mx:DataGrid>
    mx:Panel>
mx:Application>

这里需要注意的是，xml响应内容，可以被flex通过不同策略解析。在这里是通过默认的object方式。当仅有一个user节点的时候，自动转型为对象而不是数组，多个user节点的时候才转型为数组。所以处理逻辑稍显麻烦。

flex的自动绑定功能和对应的元数据支持，使flex内部的模型、视图和控制代码十分清楚简明。

如何自动编译MXML文件

BlazeDS比LCDS少提供一个动态编译mxml的功能。比如mxml复制到webcontent目录下，lcds可以让用户访问test.mxml时，自动编译，并输出swf。

使用BlazeDS，可以这样设置，由flex builder编译mxml文件输出swf文件到webcontent目录下。这样显然不如lcds动态，如果是正式项目，可以通过maven和相关插件构建时编译。

配置flex builder编译mxml文件输出swf文件到webcontent目录：

BlazeDS与Livecycle Data Services的区别

Marshal — Tue, 28 Apr 2009 12:20:38 +0000

BlazeDS与Livecycle Data Services的区别，可见下面的图，暗灰色标识部分就是Livecycle Data Services有但BalzeDS没有的功能：

另外，就是BlazeDS是开源和免费的，LCDS是付费和闭源的。