Flex小记

1. DataGrid中可编辑的Column，获取编辑前的值和编辑后的值：
   <DataGrid id="dg" dataProvidor="{userVOs}" editable="true" itemEditEnd="updateUserVOHandler(event)">
       <mx:DataGridColumn id="serialId" headerText=" " width="30" sortable="false"
                                    editable="false"/>
       <mx:DataGridColumn dataField="userName" headerText="用户名" editable="true"/>
       <mx:DataGridColumn id="descColumn" dataField="attachmentDescription"   headerText="用户描述" editable="false"/>
       <mx:DataGridColumn headerText="部门" dataField="department" editorDataField="value" id="depart" editable="true" >  
            <mx:itemEditor>  
                <mx:Component>  
                        <mx:ComboBox editable="true" width="100">  
                            <mx:dataProvider>  
                                <mx:String>A部门</mx:String>  
                                <mx:String>B部门</mx:String>  
                                <mx:String>C部门</mx:String>    
                            </mx:dataProvider>  
                        </mx:ComboBox>  
                </mx:Component>  
            </mx:itemEditor>  
            </mx:DataGridColumn>
   </DataGrid>
    <mx:Script>
        <![CDATA[
        public function updateUserVOHandler(event : DataGridEvent) : void
        {
          if (event.dataField == "userName")
          {
              var preUsername : String = event.itemRenderer.data.userName; // 编辑前该Cell的数据，不过在下一步获取了当前值之后，更改为编辑后的值，所以要处理编辑前的值，需要在下一步之前；
              var currentUserName : String = event.currentTarget.itemEditorInstance.text; // 因为该UserName Column是普通的TextInput文本格式，所以event.currentTarget.itemEditorInstance获得的是TextInput，所以通过其text属性来获取编辑后的值；如果是采用其他格式的Column，则需要获取对应的属性的值，比如是Combox的Column，则获取selectedLabel属性，请看下面的判断；另外可以通过下面的形式去获取编辑后的值：
          //dg.itemEditorInstance[DataGridColumn(dg.columns[event.columnIndex]).editorDataField];
          }
          if (event.dataField == "department") // 获取绑定字段名称
          {
              var newDepart : String = "";
              try{ 
                        newDepart = ComboBox (event.currentTarget.itemEditorInstance).selectedLabel//获取编辑后的新值 
                    }catch(errObject:Error){ 
                         Alert.show(errObject.toString());
                    } 
          }
          // 省略 调用RemoteObject实现与后台通信
        }
    ]]>
    </mx:Script>
   其中，使用editable和itemEditEnd属性来处理可编辑的单元，使用下面的
  

2.对于MXML中的DataGrid，如果修改其中一个DataGridColumn,则可以使用ValueObjectUtil类中的updateAttributes来更新并且及时刷新此DataGrideColumn在页面上的显示,例如ValueObjectUtil.updateAttributes(aDataGrid.selectedItem, userVO)，既是将userVO的值更新aDataGrid.selectedItem；

3. Flex中对于浮点数的计算，会出现精度丢失的问题，因为计算机实现浮点数计算的方式本来就会出现精度丢失；为了得到精确的浮点数操作，可以使用先乘以一个基数，再除以同一个基数的方式去避免精度丢失，即放大操作数，操作结束然后缩小操作数，但是切记，给出的基数的位数要超过计算的数据中最大的小数位数：
   var fixed : Number = 100;
   var d1 : Number = 1.1;
   var d2 : Number = 1.23;
   var d3 : Number = d1 + d2; //这样计算下来，得到的d3结果类似： 2.29999999；
   var d4 : Number = (d1 * fixed + d2 * fixed) / fixed; //d4的结果是精确的： 2.3
   如上所示，计算数据的最大小数位数是2位（1.23），则fixed至少是百位数；

   如果只需要采用四舍五入的方式，就可以使用Number的toFixed(int 小数点位数scale)方法来获取scale位小数的四舍五入数据;

 

4. Tree的逐级加载数据，具体用法:

    a. 重写tree实例的dataDescriptor属性对应的类, 定制的dataDescriptor需集成DefaultDataDescriptor;

    b. 必须重写getChildren方法，返回一个实现了ICollectionView的集合，比如ArrayCollection，该集合将作为tree中点击的node的children展示出来；

    c. 必须重写isBranch方法，判断点击的node是否是叶子节点（没有children），返回boolean；

    d. 可在定制的dataDescriptor类中重写hasChildren方法，用以判断是否需要加载children，此非必须；

    以上重写方法可在DefaultDataDescriptor类中找到；

  5. Flex中各种图的使用，其实有一些基本的东西，只要把握住了，大同小异：

      a. horizontalAxis用来定义常用ColumnChart, BarChart等图的x轴，如

           <mx:horizontalAxis>
                            <mx:CategoryAxis categoryField="name" title="姓名"/>
           </mx:horizontalAxis>

           其中采用CategoryAxis定义x轴按照chart的dataprovider集合的name属性分类排列；CategoryAxis的dataFunction属性指定一个方法，其返回值应可用作当前项目的 categoryValue。如果设置了此属性，则自定义数据函数的返回值优先于categoryField；

      b. verticalAxis可以重新定义y轴

            <mx:verticalAxis>
                            <mx:LinearAxis interval="1" minimum="1"/>
            </mx:verticalAxis>

      c. series中可以定义很多展示方式，比如柱(ColumnSeries)、线(LineSeries)、点(PlotSeries)，如果x轴省略，则默认为horizontalAxis中的CategoryAxis的dataFunction或者categoryField；

          <mx:series>
                            <mx:ColumnSeries yField="score" displayName="成绩"/>
                            <mx:LineSeries yField="average" form="curve" displayName="平均分"/>

                            <mx:PlotSeries yField="ranking" displayName="排名"/>

          </mx:series>

     d. Legend用以向图表中添加图例，此图例可为图表中的每个数据系列显示一个标签，以及一个用于显示系列的图表元素的键，id指向chart即可；

           <mx:Legend id="userChart">

     c. 雷达图RadarChart稍微复杂一些，但是原理一样，它的每个角就是dataProvider集合中的一个对象，需要导入ilog-elixir.swc和ilog-elixir_rb.swc包：

         其中angularAxis属性的categoryField或者dataFunction属性就是定义每个角的显示名，并且成为以后添加到此雷达图的series的x轴显示名；

         要添加series到雷达图中，首先new RadarLineSeries，然后定义好line的displayName，dataField属性，其中dataField属性应该对应到雷达图dataProvider中每个Object中对应的属性；然后push new line到雷达图的series中；

         可能比较难以理解，给点例子吧：

         mxml:

         <ilog:RadarChart id="demoRadar" showDataTips="true" columnWidthRatio="0.8" width="100%"  height="100%" dataProvider="{gatherVOs}" series="{radarSeries}">
                  <ilog:angularAxis>
                       <ilog:AngularAxis categoryField="name"/>
                  </ilog:angularAxis>

          </ilog:RadarChart>

 

        其中，gatherVOs其实是一个临时造出来的集合，它里面的Object的属性，比如itemName和各个部门Id所作为的属性都是临时的，而之所以要用部门Id来做gatherVOs中Object的属性，是为了显示数据的方便性，在添加部门line时，它能够自动对应起来；

 

          as:

          protected function initRadarData() : void
            {

                createGatherVOItems(Constant.RUGLAR_ARR, departmentVOs.source, gatherVOs);

                averageLine = new RadarLineSeries();
                averageLine.displayName = "组内平均分";
                averageLine.dataField = Constant.GOURP_AVERAGE_AVG;

                radarSeries.push(averageLine);

                demoRadar.series = radarSeries;

              }

 

              //创建要展示的数据，让它们放在雷达图的dataProvider的集合中

             private function createGatherVOItems(checkupItemNames : Array, source : Array, target : ArrayCollection) : void
            {
                for (var i = 0; i < checkupItemNames.length; i++)
                {
                    var gatherVO : Object = new Object();
                    gatherVO.itemName = checkupItemNames[i];
                    for each (var departmentVO : DepartmentVO in departmentVOs.source)
                    {
                        gatherVO[departmentVO.id] = i; // i 是任意给的，无实际意义
                    }
                    gatherVO[Constant.AVERAGE_AVG] = 50 - i;  // 50-i 是任意给的，无实际意义
                    target.addItem(gatherVO);
                }
            }

     

           //点击部门DataGrid，将点击的部门按照line形式添加到雷达图

            override protected function departDgClickHandler() : void   
            {
                var departLine : RadarSeries = new RadarLineSeries();
                departLine.displayName = departmentDg.selectedItem.departName;
                departLine.dataField = departmentDg.selectedItem.id.toString();
                series.push(departLine);
                demoRadar.series = radarSeries;
             }

 

           //常量数据：

            Constant.RUGLAR_ARR = ['履行职责与转变职能 ', '服务质量与工作效率 ', '工作实绩与社会效果 ',
            '依法行政与政务公开', '公正廉洁', '开展“创先争优”活动情况'];

            AVERAGE_FIELD_NAME = "averageField";

          

            效果参考附件中 radar.jpg

 

6. Flex支持以RPC（Remote Procedure Call，远程调用）方式和外部系统交互数据，RPC服务器端可以是一个网页程序，WebService(网络服务)，服务端对象等；其中，Flex常用的客户端RPC工具有HttpService, WebService和RemoteObject，RPC通信是一个异步通信的过程，客户端把数据请求发送给服务端，然后等待服务端把结果返回到客户端；

     下面简介一下我对这些工具或者说协议的理解：

    a. HttpService，在mx.rpc.http包中，它主要发送HTTP形式的Get和Post请求，Get和Post请求的区别在于，Get请求的参数数据是可见的，并且对请求传输的数据大小有限制，而Post请求是将参数数据打包在数据包中传输到服务端，在服务端被自动解析成服务端的变量，所以在包含了敏感数据时，可将Flex中HttpService的method设置为Post；

       它请求的地址是可是一个服务端的页面，也可以是xml页面；如果包含参数，可以采用mxml的<mx:request>对象，也可以使用ActionScript的一个包含请求参数的Object对象，然后在send方法中使用该对象，即xxService.send(object；还可以使用xml数据作为参数对象，其中HttpService的contentType要设定为"appliction/xml"；采用xml数据，1是可以处理结构比较复杂的数据，2是xml格式符合web标准，所有的服务端语言都能够方便的解析，使得程序具有良好的移植性；

       所有的工具或者协议在接收返回的数据时，都会被触发result事件，如果出错了，就会触发fault事件，fault的rootCause对象可以判断具体的错误；

       不管返回的数据是什么形式，都会被HttpService解析成Object类型，即便是xml格式的数据，也会被解析成一个树形结构的对象，因为HttpService默认返回的是object类型数据；如果想得到其他类型的数据，可以修改resultFormat属性，比如要将数据以xml对象类型返回，则可使用e4x语法解析；所以由于HttpService具有自动解析xml文件的功能，使得它读取xml文件非常便捷，省去了编写解析代码的步骤；返回数据时触发的ResultEvent事件中，event.result代表返回的数据对象；另外，xxxService.send()操作属于一个AsyncToken对象，这样的话，event.token中result的数据等同于event.result数据；showBusyCursor属性可是在send方法请求后数据请求未完成前将鼠标设置为繁忙状态；

       b. WebService位于mx.rpc.soap包中，它和HttpService相似，也采用HTTP协议来进行通信，但是原理却截然不同；Web Service是网络应用程序的标准，在用户的角度来看，它就是一个应用程序，它向外界暴露出能投通过Web进行调用的API集合，用户直接调用这些API来实现某些功能；因为它定义了如果在Web上实现互操作性，所以只要符合标准，开发者可以使用任何语言、任何平台上开发它；为了保证数据的跨平台传输，它采用了符合web标准的XML来描述数据，它采用WSDL(Web Service Define Language)来描述WebService相关的信息及其函数、参数和返回值，WSDL使用了XML语法，并且制定了严格的格式；

           WebService中的wsdl属性比较设定，而且它比HttpService多了一个<mx:operation>属性，表示要调用的函数，name是函数名，其中的<mx:request>同样传递的是函数参数；建立了webservice请求后，同样通过调用send方法来执行请求动作，必须要指定函数名(目标函数)，如：ws.getNews.send();

           ws返回的数据类型，即使是xml数据，也返回字符串类型，所以不需要设定数据格式；

           也可以在ActionScript中定义WS，然后对要请求的目标函数进行result时间注册，然后ws进行loadWSDL操作，当发送请求时，直接调用ws的目标函数，并且可以设置参数，就像调用本地函数一样，如：

           var ws : WebService = new WebService();

           ws.getNews.addEventListener("result", resultHandler);

           ws.loadWSDL("xxx.asmx?.wsdl");

           ws.getNews(a, b, c);

 

       c. Remoting(Remote Object)，因为HttpService和WebService都只支持文本格式的数据通信，在数据小的时候，这样方式比较合适，但是如果要传输复杂的数据，就必须先转换为其他文本格式供Flex调用，比如xml，而Flex还得把转换的xml数据还原成原来的复杂的数据结构，这样服务端和客户端都多了一道工序，降低了运行效率；从而Flex可以采用Remoting技术，Remoting采用AMF(Action Message Format)进制数信息格式传递数据，AMF是Adobe独家开发出来的通信协议，采用二进制压缩，支持数据的序列化和反序列化，为SWF文件与Remoting服务端通信提供了一种轻量级的高效能的通信方式；AMF最大的特色在于它可以直接将Flash Player的内置对象，比如Object,Array,Date,XML等复杂的数据结构直接传回服务器端，并且在服务器端自动解析为适合的对象，节约了开发时间；由于它采用高度压缩数据，因此非常适合用来传输大量的数据，数据越大，它的传输效益就越高，远远超过以上两种方式；

       在使用Remoting时，数据在客户端和服务端的传递进行了两次大的转换，首先是客户端向服务器发送数据，ActionScript的数据类型转换为AMF格式；服务器端接收到数据，转换为服务端数据，然后返回数据，客户端收到，将AMF格式转换为ActionScript的数据类型；即在通信过程中，数据在传输中会被自动转换为AMF格式数据，在客户端和服务端会被转换为各自可处理的数据类型，比如在Flex客户端的ActionScript类型：Object, Array, XML；

 

7. 使用<mx:lineSeries>图标时，当鼠标悬停在改线时，会出现小圆点，如果想一直保持该系列点，可以使用itemRenderer来实现，如下：

    增加lineSeries属性itemRenderer="mx.charts.renderers.CircleItemRenderer"，并且导入import mx.charts.renderers.*;