Chinaunix首页 | 论坛 | 博客
  • 博客访问: 92008
  • 博文数量: 41
  • 博客积分: 2650
  • 博客等级: 少校
  • 技术积分: 680
  • 用 户 组: 普通用户
  • 注册时间: 2008-06-23 16:26
文章分类

全部博文(41)

文章存档

2011年(1)

2008年(40)

我的朋友

分类:

2008-06-24 16:38:32

Flex与JavaScript交互的DataGrid例子
本例子将展示如何使用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=""
    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所在的语句块的【注意配对】。对应的在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=""
  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

阅读(1055) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~