Flex与JavaScript交互的DataGrid例子

本例子将展示如何使用Flex和JS进行交互：通过Flex应用程序中的按钮：javaScriptDisplay这个按钮来显示用户在datagrid中选中那行的people信息：name age 和sex资料到网页中，同时用户可以在网页中的table中输入关于people的资料新增信息到datagrid中。

例子测试地址：http://blog.paranoidferret.com/files/flexjavascript.html

接下来简单介绍下流程：

首先创建一个flex applicaiton:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=""
    layout="absolute" width="482" height="348"
    viewSourceURL="../files/JSTutorial.mxml">
</mx:Application>


接着就是我们要实现那个datagrid【三个column:name age and sex】：

<mx:Panel id="pnlMain" x="10" y="10" width="462" height="328"
  layout="absolute" title="Simple Javascript Interaction">
  <mx:DataGrid id="dgPeople" x="10" y="10" width="422"
      height="229">
    <mx:columns>
      <mx:DataGridColumn headerText="Name" dataField="Name"/>
      <mx:DataGridColumn headerText="Age" dataField="Age"/>
      <mx:DataGridColumn headerText="Sex" dataField="Sex"/>
    </mx:columns>
  </mx:DataGrid>
  <mx:Button x="10" y="256" label="JavaScript Display"
    id="butJSDisplay" />
  <mx:Label x="149" y="260" id="lblMessage"/>
</mx:Panel>


然后，在datagrid加载的时候完成数据的初始化工作:

<mx:DataGrid id="dgPeople" x="10" y="10" initialize="initDG()"
  width="422" height="229">

对应的initDB方法呢如下：

<mx:Script>
  <![CDATA[
    import mx.collections.ArrayCollection;
   
    public function initDG():void
    {
      var people:Array = new Array();
      people.push({Name: "Charlie", Age: "23", Sex: "Male"});
      people.push({Name: "Brandon", Age: "23", Sex: "Male"});
      people.push({Name: "Mike", Age: "23", Sex: "Male"});
      people.push({Name: "Caroline", Age: "23", Sex: "Female"});
      var peopleCollection:ArrayCollection =
        new ArrayCollection(people);
      dgPeople.dataProvider = peopleCollection;
      dgPeople.selectedIndex = 0;
    }
  ]]>
</mx:Script>


接着构建那个JavaScriptDisplay按钮来显示用户选择的信息到web中：

<mx:Button x="10" y="256" label="JavaScript Display"
  id="butJSDisplay" click="jsDisplayPerson()"/>

对应的jsDisplayPerson()方法代码如下：

public function jsDisplayPerson():void
    {
        if (ExternalInterface.available) {
        ExternalInterface.call("displayPerson",
                                      dgPeople.selectedItem);
        lblMessage.text = "Data Sent!";
      } else
        lblMessage.text = "Error sending data!";
    }

这里的displayPerson就是定义在js当中的方法了，dgPeople.selectedItem指的是用户在datagrid中选中的那行的数据资料【包括name age,sex】。接下来看dispalyPerson()方法的定义：

function displayPerson(person)
{
  if(person == null){
    alert("Please select a person, or maybe I screwed up.");
  }
  else{
    document.getElementById('nameDisplay').innerHTML =
      person.Name;
    document.getElementById('ageDisplay').innerHTML = person.Age;
    document.getElementById('sexDisplay').innerHTML = person.Sex;
  }
}


实际上这里用到的是Ajax技术了。即不会刷新..就可以显示资料。【不多介绍】。接下来就是在web中定义容器来显示这些信息了。即定义来显示各个信息。

<table>
  <tr>
    <td>Name:</td>
    <td id="nameDisplay" style="width:150px;">&nbsp;</td>
  </tr>
  <tr>
    <td>Age:</td>
    <td id="ageDisplay" style="width:150px;">&nbsp;</td>
  </tr>
  <tr>
    <td>Sex:</td>
    <td id="sexDisplay" style="width:150px;">&nbsp;</td>
  </tr>
</table>


接下来介绍添加新的people信息：首先要做的就是在application增加一些代码来实现外部方法对flex 资源【方法】的存取。

<mx:Application xmlns:mx=""
  layout="absolute" width="482" height="348"
  initialize="initApp()"
  viewSourceURL="../files/JSTutorial.mxml">

对应的initApp()方法：

public function initApp():void
{
  if (ExternalInterface.available)
    ExternalInterface.addCallback("addPerson", addPerson);
}


由于要吧资料添加的datagrid中世界上就是增加到dataprovider中的，其本身是一个arrayCollection，那就可以使用additem的方法来增加信息：

public function addPerson(name:String, age:String,
  sex:String):void
{
  (dgPeople.dataProvider as ArrayCollection).addItem(
      {Name: name, Age: age, Sex: sex});
}


为了能够访问到flex资源我们调用getFlexApp('FlexJSTutorial')。这里'FlexJSTutorial'是嵌入在web中的flash所在的语句块的