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="http://www.adobe.com/2006/mxml"     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中定义容器来显示这些信息了。即定义<id......>来显示各个信息。

<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="http://www.adobe.com/2006/mxml"   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所在的语句块的<object id='FlexJSTutorial' />【注意配对】。对应的在web中的addPerson方法定义如下：

function addPerson() {   var name = document.getElementById('txtName').value;   var age = document.getElementById('txtAge').value;   var sex = document.getElementById('selSex').value;   getFlexApp('FlexJSTutorial').addPerson(name, age, sex); }

做的事情是收集用户输入的资料，调用flex中的addperson()方法。最后就是刚才提到的getFlexAPP()方法--实际上就是一个返回页面的flex app方法。这个方法跟浏览器类型有关，还需要注意的是页面中object标记中含有id和name两个属性。这两个属性对于取得flex app很重要。

function getFlexApp(appName) {   if (navigator.appName.indexOf ("Microsoft") !=-1) {     return window[appName];   } else {     return document[appName]; }

最后一步就是提供用户输入的界面：

<table style="border-spacing:5px;"> <tr> <td style="border-style:none;padding:0px;">Name:</td> <td style="border-style:none;padding:0px;"> <input id="txtName" type="text" /> </td> </tr> <tr><td style="border-style:none;padding:0px;">Age:</td> <td style="border-style:none;padding:0px;"> <input id="txtAge" type="text" /> </td> </tr> <tr><td style="border-style:none;padding:0px;">Sex:</td> <td style="border-style:none;padding:0px;"> <select id="selSex" style="width:100px;"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> </tr> <tr> <td colspan="2" style="border-style:none;padding:0px;"> <input type="button" id="butAddPerson" onclick="addPerson()" value="Add Person" /> </td> </tr> </table>

附上：flex程序：

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   layout="absolute" width="482" height="348"   initialize="initApp()"   viewSourceURL="../files/JSTutorial.mxml"> <mx:Script>   <![CDATA[     import mx.collections.ArrayCollection;     import flash.external.*;         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;     }         public function addPerson(name:String, age:String,       sex:String):void     {       (dgPeople.dataProvider as ArrayCollection).addItem(           {Name: name, Age: age, Sex: sex});     }         public function initApp():void     {       if (ExternalInterface.available)         ExternalInterface.addCallback("addPerson", addPerson);     }         public function jsDisplayPerson():void     {       if (ExternalInterface.available) {         ExternalInterface.call("displayPerson",           dgPeople.selectedItem);         lblMessage.text = "Data Sent!";       } else         lblMessage.text = "Error sending data!";     }   ]]> </mx:Script> <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" initialize="initDG()"   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" click="jsDisplayPerson()"/>   <mx:Label x="149" y="260" id="lblMessage"/> </mx:Panel> </mx:Application>

页面测试以及代码：http://blog.paranoidferret.com/files/flexjavascript.html

原创作者： blog.paranoidferret.com。翻译整理：一路风尘