ActionScript 3.0 详解(三)—完

 

ActionScript 3.0 详解(三)—完结篇

 

 28.Flex Ajax Bridge : 就是Flex和Ajax之间进行交互，可以用JavaScript调用Flex，就是JavaScript可以操纵Flex的组件！！
 当然也可以让Flex调用JavaScript的代码！

  <1>JavaScript创建类的方法: JS没有提供像Java中class关键字，它只能通过function关键字来创建类。

   **格式: function 类名(参数){方法体}

   **说明: 上边的声明方式和声明JavaScript的函数一模一样，不过我们可以把上边的声明看成是声明一个类的构造方法，
   通过构造方法来定义一个类。

   例如:
    <script language="JavaScript">
     function Car(carColor){
      this.color = carColor; //表示在Car类中定义一个color属性，并且赋值成carColor值
     }

     //为Car类添加一个名为add的方法，方法体是返回传入参数的平方！！
     Car.prototype.add = function(num){
      return (num * num);
     }

     //调用Car类的方法
     function event(){
      var car = new Car("红色"); //创建对象，为构造方法传入参数
      alert(car.add(5));  //打印结果为25
     }
    </script>

   **注意: prototype 属性是每一个JavaScript的类都有的一个属性，可以用来实现动态为类添加属性或方法的功能！！
   说白了Car其实就是一个函数，只不过我们可以调用prototype为它再次添加属性和函数而已！！

   **注意: prototype 可以省略不写！！也可以为prototype重新定义，但是一般不会重新定义prototype，如果想定义，
   那么直接用"类名.prototype=xx"就可以了！！

  <2>JavaScript中的继承: 分别定义两个类，然后使用prototype将一个类加入到另一个类中，就表示被加入的那个类是继承关系中的子类。

   例如:
    <script language="JavaScript">
     //定义一个Car类
     function Car(carColor){
      //类中定义方法
      this.methodCar = function(){}
     }

     //定义Bick函数，即定义Bick类
     function Bike(){
      //类中定义方法
      this.methodBick = function(){}
     }

     //简历继承关系,Bick将会是子类
     Car.prototype = new Bick();

     //测试方法
     function event(){
      var bick = new Bick();
      alert(bick.methodBick());  //调用Bick类中的方法
      alert(bick.methodCar());   //调用Bick类继承到Car类的methodCar()方法
     }
    </script>

  <3>JavaScript中的eval()方法，会将传入的字符串作为JavaScript代码执行，执行完成后返回执行结果！！

 29.Flex Ajax Bridge 框架: 该框架有两个文件支持FABridge.as和FABridge.js文件！！
 (可以到Flex Builder根目录的sdks/3.2.0/frameworks/javascript/fabridge/src/bridge中拷贝)
 项目中应用的方法非常简单，可以导入这两个文件到Flex项目；不过一般使用Flex Builder工具来完成，
 就是选中Flex项目----右击----选中"Create Flex Bridge"选项，这样就可以为项目导入这两个文件，同时也会生成一个辅助代码！！

  <1>FABridge.as文件中定义了一些底层的方法，包括将ActionScript暴漏到JavaScript中的方法、通用的方法等！

  <2>FABridge.js文件中定义的也是一些底层通用的方法，这个文件和FABridge.as非常对应，
  当然也定以了怎么将JavaScript怎么暴漏(注册)到ActionScript中，
  就是说在js文件中调用FABridge.js文件中的方法，就相当于调用FABridge.as中的方法。

  <3>对应MXML也会生成一个js文件，这个js文件是共客户端HTML总使用JavaScript代码调用使用的，
  可以通过调用js中的方法，来得到MXML中定义的一些Flex组件，得到组件后当然也可以触发组件的什么事件方法！！
  也就是实现了通过JavaScript来控制Flex组件！！

 30.JavaScript怎么使用Flex的组件呢？？

 **解决: 可以使用 var flexApp = FABridge.bridgeName.root(); //是JavaScript代码，这样就可以获得对应的MXML文件的对应对象了。
 其中bridgeName指的是要通过JavaScript调用Flex组件的HTML中声明<objec>(就是声明网页中要使用播放器)是指定的bridgeName的名字！！
 ----具体可以参看Flex Builder根目录的sdks/3.2.0/frameworks/javascript/fabridge/samples目录的两个HTML文件的例子，
 HTML源文件中会看到bridgeName的声明！！如，flashvars="bridgeName=example"中的example就是bridgeName对应的值！

 **提高: 这样可以使用 var value = flexApp.getSlider().getValue();
 可以使用flexApp.getSlider()来获得Flex的一个id为"slider"组件，
 也就是说"get"后边跟的是首字母答谢的Flex的对象名(即id值)；
 然后可以得到组件对应属性的值！就是Flex的对象的属性前边加上get或set(但属性首字母要大写，
 如getValue就是如此)，就可以对属性获取或修改！

 **让Flex调用JavaScript代码: 可以在JavaScript中定义一个函数，
 比如，function callback(){alert("HaHa...");}
 然后我再JavaScript中调用flexApp.getButton().addEventListener("click", callback);
 这样的JavaScript代码运行后，就会给Flex的id="button"的组件添加一个click鼠标点击的事件，事件将会触发调用JavaScript中的callback方法。

 **注意: 要想让Flex项目中的MXML文件使用Flex Ajax Bridge框架，也就是想让MXML文件内容暴漏到JavaScript中，那么必须加入如下代码:
  
  <fab:FABridge xmlns:fab="bridge.*" />必须加上！！

  *说明:除了这个要加入之外，一般要想使用FABridge的MXML，一般都是MXML编写完成后再建立FABridge的支持！
  这样省得每次修改MXML文件后都要重新编译和生成一下MXML对应的js文件！
 
 **提示: 一般Flex Ajax Bridge框架很少用到，因为Flex提供的交互组件非常全面而且也有对HTML等的支持！

 

 31.DataGrid的高级应用:
  
  <1>它有一个editable属性，设置为true的时候DataGrid表格的单元格是可以动态编辑的，为false时不可以，默认为false ！
  <mx:DataGridColumn>有itemEditor属性，用来指定当编辑时使用的编辑器，如指定为mx.controls.NumericStepper表示使用数字编辑器来编辑，
  还有一个editorDataField属性，指定使用编辑器组件的什么属性作为<mx:DataGridColumn>被编辑后的值！

  *<2>itemRenderer属性是定义渲染器，定义的时候要涉及到ClassFactory，
  这个内容可以查看Flex Builder的帮助，查找"Setting the itemRenderer or itemEditor property in ActionScript"关键字，
  查看这个属性的解释，也可以看参考书籍，这个比较重要也比较难理解！

  <3>labelFunction属性用来指定格式化(过滤)输出结果的方法！！

  <4>sortCompareFunction属性用来指定排序显示结果的方法，如果不指定那么采用默认的排序方式或者是按字符串排也或者是随机显示！
  注意他是"列组件"对象的属性,因为是对列进行排序！

  **说明: 注意item.*.(@name == col.dataField).text();的用法，可以参看参考书的讲解理解！
   private function test(item:XML, col:DataGridColumn):String{
    return item.*.(@name == col.dataField).text();
   }

  **注意: ObjectUtil类中提供了一些"比较方法"和"排序方法"！！

  <5>DataGrid可以实现对显示的结果进行过滤！----具体可以看<<Flex3 Cookbook>>讲解

  <6>导出Excel文档然后提供下载功能！

 32.数据通讯: 就是客户端Flex和服务器进行交互。
  
  <1>使用HttpService类: 它相当于一个表单提交，可以指定请求的服务器端的URL地址，可以指定请求方式(POST或GET等)，
  还可以指定很多参数，具体看API帮助文档

  <2>使用WebService的方式来交互:

  <3>使用URLLoader+URLRequest+URLVariables进行交互

  <4>使用FileReference实现上传和下载

 33. AMF协议:具体看视频或书籍，可以将Flash中的对象传递到服务器端，服务器且可以正确解析成对应的对象！

 *34. 使用AMF协议，通过Adobe提供的BlazeDS框架与Java服务器通信: 可以自己查阅相关书籍！

 35. Flex中的MVC框架:自己学习可以观看相关书籍资料！

 

注意: 本文中提到的《Flex3 Component Explorer》文档可以到本人的下载空间下载得到！