本例子将展示如何使用Flex和JS进行交互：通过Flex应用程序中的按钮：javaScriptDisplay这个按钮来显示用户在datagrid中选中那行的people信息：name age 和sex资料到网页中，同时用户可以在网页中的table中输入关于people的资料新增信息到datagrid中。
接下来简单介绍下流程：
首先创建一个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;"> </td>
</tr>
<tr>
<td>Age:</td>
<td id="ageDisplay" style="width:150px;"> </td>
</tr>
<tr>
<td>Sex:</td>
<td id="sexDisplay" style="width:150px;"> </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./files/flexjavascript.html
原创作者：
